apeescape2.com
  • メイン
  • 製品ライフサイクル
  • Uxデザイン
  • 財務プロセス
  • バックエンド
Uxデザイン

空の状態–UXの最も見過ごされている側面

ユーザーエクスペリエンスにとって重要ですが、空の状態は見過ごされがちです。それらが何であるか、それらをどのように使用するかを知り、UXのベストプラクティスを適用することで、大きなメリットが得られます。

空の状態とは何ですか?

UXデザイナーには、楽しく有意義な体験を生み出す機会がたくさんあります。しばしば無視されるそのような機会の1つは、「空の状態」、つまり空の画面です。空の状態は、表示するものが何もない製品でのユーザーエクスペリエンスの瞬間です。

一般的な空の状態の状況のいくつかの例を次に示します。



  • ファイルやフォルダが作成されていない新しいDropbox画面。
  • ToDoリストマネージャーですべてのタスクを完了した後の画面。
  • コマンドがサポートされていないときにSlackでエラー画面が表示される。
  • 新しいソーシャルネットワーキングアカウントを開始し、接続がありません。
  • Gmailで何かを検索しても、結果が得られません。

これら 中間の瞬間 ユーザーエクスペリエンスを向上させ、その結果としてビジネスチャンスを拡大する機会を提供します。 UXデザイナーにとって、あらゆる機会を利用してユーザーエクスペリエンスを向上させ、ビジネスに付加価値を与えることは良いことです。

便利な空の状態は、何が起こっているのか、なぜ起こっているのか、そしてそれに対して何をすべきかをユーザーに知らせます。良い空の状態のUXデザインの2つの例を次に示します。

DropboxユーザーがUXの空の状態のデザインをオンボーディング

ドロップボックス Paperは、製品が最初に発売されたときにユーザーがオンボーディングするための優れた空の状態のUXデザインを提供します。行動を促すフレーズのボタンを使用すると、次に何をすべきか迷うことなく作業を開始できます。


検索結果のない空の状態の設計

検索クエリが結果を返さない場合の空の状態の設計の良い例。この画面は役立つリファレンスを提供し、ユーザーに何が起こっているかを知らせます。


機会を逃した空の状態の設計のいくつかの例を次に示します。

機会を逃した空の状態設計

これは空の状態のUXデザインであり、すばらしいフィードバックを提供しますが、ユーザーに追加の指示や実行するアクションを提供する機会を逃しています。


空の状態のデザインの空白のWebページ

この空の状態のデザインでは、ほとんど空白のWebページが表示されます。画像自体は素晴らしいですが、ユーザーを特定の道に導くことも、通知したり指示したりすることもありません。

ポーターの5つの力のスイッチングコスト

空の状態の種類

頻繁に発生する空の状態には、次の4種類があります。

  • 初めての使用 –新しいEvernoteやDropboxアカウントなど、表示するものがまだない場合に、新しい製品またはサービスで発生します。
  • ユーザーがクリア –ユーザーが受信トレイやタスクリストのクリアなどのアクションを完了したときに発生し、その結果、画面が空になります。
  • エラー –これらは、問題が発生した場合、またはネットワークの問題により携帯電話がオフラインになるなどの問題が発生した場合に発生します。
  • 結果なし/データなし –表示するものがない場合に発生します。これは、誰かが検索を実行し、クエリが空であるか、表示できるデータがない場合に発生する可能性があります(たとえば、データがない日付範囲をフィルタリングする場合)。

空の状態の設計がより注目されるにつれて、UX設計者は、ビジネスとユーザーエクスペリエンスの両方の観点から、それらを利用することで有益な結果が得られることに気付きます。

ユーザーはたくさんのアプリを試しますが、どれを使いたいかを決めます 最初の3〜7日以内に「使用をやめる」 。 「まともな」アプリの場合、7日間保持されるユーザーの大多数はずっと長く留まります。成功の秘訣は、最初の3〜7日間の重要な期間にユーザーを夢中にさせることです。 – アンキット・ジャイン

米国を拠点とするフルタイムのフリーランスUXデザイナーが望んでいた

適切に設計された空の状態を使用する利点

よく考えられた便利な空の状態の画面を設計することで、製品のエンゲージメントを促進し、ユーザーを喜ばせ、解約を減らすことができます。これにより、競合製品にユーザーを失う可能性が減り、ユーザーを苛立たせたり失ったりさせます。

彼の本では、 お客様が本当に望んでいること 、Scott McKainは、優れたカスタマーエクスペリエンスの6つの指針を示しています。

彼は顧客が望んでいると書いています:

  1. 魅力的な体験
  2. 個人的な焦点
  3. 相互の忠誠心
  4. 差別化
  5. 調整
  6. 革新

空の状態の設計に適用すると、これらの原則はビジネスに大きなメリットをもたらす可能性があります。たとえば、製品の満足度の向上や放棄率の低下などです。

空の状態の設計からも恩恵を受けることができる3つの追加領域を次に示します。

  • ユーザーのオンボーディング –ユーザーエクスペリエンスの向上に加えて、製品の信頼と継続的な使用を構築する機会を提供します。
  • ブランド構築 –ブランドエクイティを高めるために、認知度を高め、会社を宣伝します。
  • パーソナライズ –さまざまな使用状態で、遊び心、楽しみ、真面目、またはダイナミックになります。個人的なタッチの感覚を作成します。

適切に設計された空の状態の利点を過小評価することはできません。彼らは魅力的な顧客体験に貢献するだけでなく、顧客を幸せにし、従事させ続ける機会の窓がますます短くなるにつれて、彼らは単なる良いビジネスです。

物理エンジンとは

Shunned:UXデザインの忘れられた画面

適切に設計された空の状態には明らかな肯定的な結果があるのに、そもそもなぜそれらが無視されるのでしょうか。

まず、アプリ、製品、ウェブサイトの画面の総数と比較した場合に発生する空の状態の状況はほとんどないため、優先順位と見なされないために無視されることがよくあります。 デザイナー デザインのより目に見える部分に彼らの努力を集中する傾向があります。

第二に、 空の状態を見ているユーザーの推定2-5% 、それは必ずしもデザイナーの時間の経済的または実用的な使用ではありません。

最後に、空の状態は、発生する場所とその処理方法に関して常に十分に理解されているとは限らなかったため、より人気のある画面とページを支持して後部座席に座りました。

空の状態を無視するとどうなりますか?

ガイダンスのない空白の画面は、混乱、不確実性、失望につながる可能性があります。これにより、放棄率が高くなり、製品に対する全体的な満足度が低下する可能性があります。

幸いなことに、優れた空の状態の画面を設計する利点と機会がUX設計プロセスのより重要で優先度の高い部分になるにつれて、状況は変化し始めています。

空の画面を目的で埋める方法

空の画面が便利で、役立つ、有益なものになるように設計されていることを確認するためのUXのベストプラクティスを次に示します。

共感。 追加 驚きと喜び 、 感情 、および 人 UXデザイナーが、製品の最も暗い場所でもより良いエクスペリエンスを生み出すためのすべての方法です。空の画面の場合、共感的なメッセージングは​​多様性を追加し、より魅力的でパーソナライズされたエクスペリエンスを作成します。

感情と個性を使って空の画面を埋める

味 空の状態画面をパーソナライズと楽しいパーソナリティで埋める良い例です。

画像。 と呼ばれる設計原理があります バイオフィリア効果 。これは、自然の見方から生じるストレスの軽減と集中力の向上の状態です。風光明媚な画像(たとえば、空の状態のエラー画面の背景)を追加すると、より快適なユーザーエクスペリエンスが得られます。

バイオフィリア効果はストレスを軽減した状態を作り出すことができます

バイオフィリア効果を中心に設計された空の状態の画面は、ストレスを軽減し、エンゲージメントを支援することで、ユーザーエクスペリエンスにプラスの影響を与える可能性があります。

役立つガイダンス。 製品の種類によっては、空の状態を使用してユーザーをガイドできます。この良い例は、プロジェクト管理アプリケーションです。新しいアカウントでは、まだプロジェクトが進行中ではなく、ユーザーがすぐに開始できるようにするための絶好の機会を提供し、それによって放棄の可能性を減らします。次に例を示します。

ユーザーをガイドするための空の状態設計UXのベストプラクティス

Evernoteは、空の状態のページデザインでユーザーをガイドするのに優れた仕事をしています。

スターターコンテンツ。 ユーザーがイライラして離れるのに十分な時間、空白のままになっている画面がたくさんあります。特定の製品では、優れたスターターコンテンツを提供することで、何が起こっているのか、次に何ができるのかを視覚化できます。

スターターコンテンツを含む空の状態画面の例を次に示します。

スターターコンテンツを備えた良好な空の状態の設計

これは、空の状態のスターターコンテンツの良い例です。それはユーザーに何かを構築するための何かを与え、製品の混乱と放棄の可能性を減らします。

アクションステップの提供。 一部の製品では、意味がないため、ガイダンスを提供したり、画面にコンテンツを入力したりする必要はありません。このような場合、設計者は単にアクションステップを提供できます。

ただし、アクションは最小限に抑えるのが最善です。 ヒックの法則は 「選択の数と複雑さとともに、意思決定にかかる時間は長くなります。」したがって、行動を促すフレーズを最大で1つか2つに抑えると、ユーザーはより迅速に行動できるようになります。これが良い例です:

行動を促すフレーズを最小限に抑えた空の状態設計

これは、ユーザーにアクションを実行するように指示するが、それを最小限に抑える優れたUX空状態設計の優れた例です。

もう1つの良い例はInstagramです。プラットフォームを初めて使用する場合、まだ誰もフォローしていません(そして、誰もフォローしていません)。 Instagramの優れた機能すべてに焦点を当てるのは簡単ですが、たとえば、空の状態の画面が適切であれば、「フォローするユーザーを追加する」オプションが表示されます。

InstagramユーザーがUXをオンボーディング

プラットフォームを初めて使用する場合、Instagramユーザーは人を見つけるための迅速で簡単な方法で迎えられます。

空の状態のUXのベストプラクティス–現場から

ApeeScapeには、世界でもトップクラスのフリーランスの才能があります。 デザインのすべての分野 。これは、ApeeScape UXデザイナーのカップルが、空の状態の画面を設計した経験について言わなければならなかったことです。

ApeeScapeデザイナー: タマラ・オルソン

設計分野: UXデザイン

ApeeScapeUXデザイナーのTamaraOlsonが、空の状態のデザインのベストプラクティスを共有しています

Tamara Olsonは、ApeeScapeと協力し、空の状態の設計を含む多くのプロジェクトに携わってきたUXデザイナーです。

あなたが取り組んだ、または見た良い空の状態のデザインは何ですか?

私が観察した優れたモダンな空の状態のデザインは、通常、2つの部分からなる指示であり、1つの部分は喜びです。 UIが空の場合、ユーザーがスペースに入力されたときにスペースに何が入るかを理解できるようにするのは、UXデザイナーの仕事です。入力するのがユーザーの仕事である場合、メッセージにはその方法に関する指示を含める必要があります。 (たとえば、edtech製品の空の「クラス」テーブルには、教師に最初のクラスの作成方法を通知するコピーが含まれている場合があります。)

また、多くのアプリが、空の州の寛大な不動産を、喜びと遊び心のあるブランドの個性を注入する機会として使用しているのを見ています。あなたはそれがウェブサイトのウェブアプリバージョンだと言うかもしれません 404ページ 。

空の状態を見落としたことはありますか?もしそうなら、なぜですか?

もちろん、それは簡単な罠です。私たちが先見の明を持っているとき、私たちはアプリや製品が完全に飛行し、コンテンツやユーザーで埋め尽くされている様子を描きます。私が働いていたとき グーグル 、製品のVPは、製品は飛行機のフライトのようなものだとコメントしました。ほとんどの問題は離陸と着陸の間に起こります。

ユーザーが最初に商品を入力したとき、空の状態は避けられません。ユーザーが開始する前に行き止まりになってほしくないのです。ジュニアデザイナーには、ユーザーのオンボーディングフローを示す別の線形デザインのセットをデザインすることをお勧めします。

空の状態を使用してクライアントが成功するのを見たことがありますか?もしそうなら、どのように?

私は最近一緒に働いた 全国小説執筆月間 プラットフォームの再設計で、ユーザーは執筆の進捗状況に関する目標を設定および追跡できます。私たちの製品チームは、空の状態の絶対的なボールを持っていました。これは、プラットフォームの機能と個性を紹介してからかい、ユーザーに進捗状況の記録を開始するように促す素晴らしい方法でした。

c法人vss法人の定義

あなたが経験した空の状態の最も成功した使用法は何ですか?

「ゼロの受信トレイ」として、Gmailアプリの空の受信トレイのイラストに常に満足しています。傘の下にいる人が、日差しの中で本を読んでいて、「これですべて完了です」というキャプションが付いています。これは、行動を促すフレーズが必要な空の州について私が述べたルールに技術的に違反していますが、サブリミナルCTAは「メールを降りて、人生を楽しんでください」であるため、そうではありません。私はそれが好きです。

ApeeScapeデザイナー: マイケル・クリンガーマン

設計分野: SaaS製品の設計

ApeeScapeUXデザイナーのMichaelClingermanが空の状態のデザインについて語る

ApeeScapeUXデザイナーのMichaelClingermanは、SaaS製品の設計を専門としています。

空の状態用に設計した場合、どのタイプが最も頻繁に表示されますか?

c ++コンパイルヘッダーファイル

私が最もよく知っている空の状態は、404 /エラー状態とユーザーがクリアした状態です。

空の状態を使用してクライアントが成功するのを見たことがありますか?もしそうなら、どのように?

はい。空の状態の画面が魅力的で楽しいコンテンツおよびコミュニケーション戦略の一部になったケースを見てきました。クライアントがブランドの個性を構築するためにそれらを使用した他のケースがあります。

あなたが経験した空の状態の最も成功した使用法は何ですか?

Dropboxがシンプルで単色のイラストスタイルを使用して、コーポレートブランドの個性、トーン、キャラクターを確立するのが大好きでした。

結論

UXデザインの空の状態(または空の画面)は、発生頻度が低く、常に十分に理解されているとは限らないため、見落としがちです。ただし、それらを含めることの利点は、ユーザーエクスペリエンスを向上させ、よりまとまりのある製品を作成するのに役立つため、控えめに述べられています。

•••

ApeeScapeデザインブログでさらに読む

  • UIデザインのベストプラクティスとよくある間違い
  • モバイルUXデザイン–ベストプラクティス、制約、および開発者との連携
  • モバイルインターフェースのヒューリスティック原則
  • デザインへの影響–色と感情へのガイド
  • デザインの原則とその重要性

基本を理解する

ブランドの個性とは何ですか?

ブランドの個性は、ブランド名に関連付けられている人間の特性と特性のセットです。それは、消費者が面白い、思いやりのある、または深刻ななどの感情でブランドに関係するのに役立ちます。

空の状態とは何ですか?

空の状態は、表示するものが何もない製品でのユーザーエクスペリエンスの瞬間です。最初の使用、ユーザークリア、結果なし、およびエラーは、最も一般的なタイプの空の状態の4つです。

ユーザーエクスペリエンスは何をしますか?

ユーザーエクスペリエンスには、製品、サービス、または組織とのユーザーの対話のすべての側面が含まれます。これは、ユーザーがブランドに対して否定的または肯定的な感情を関連付けるのに役立ちます。

オンボーディングエクスペリエンスとは何ですか?

オンボーディングエクスペリエンスには、新入社員を会社に統合すること、または新規顧客に製品やサービスを理解することのすべての側面が含まれます。

ユーザーのオンボーディングとはどういう意味ですか?

ユーザーのオンボーディングとは、ユーザーまたは顧客に製品またはサービスをよく理解することを意味します。これは、チュートリアル、例、ウォークスルー、またはユーザーが製品をよりよく理解するのに役立つその他の手段を意味する場合があります。

SQLウィンドウ関数の概要

データサイエンスとデータベース

SQLウィンドウ関数の概要
キャッシュレス社会は新しい現実ですか?

キャッシュレス社会は新しい現実ですか?

財務プロセス

人気の投稿
Pythonでのモックの概要
Pythonでのモックの概要
ミッション主導の開発
ミッション主導の開発
テクノロジープラクティスリード
テクノロジープラクティスリード
Cordovaフレームワーク:IonicとFramework7
Cordovaフレームワーク:IonicとFramework7
ツリーカーネル:ツリー構造化データ間の類似性の定量化
ツリーカーネル:ツリー構造化データ間の類似性の定量化
 
React、Redux、およびImmutable.js:効率的なWebアプリケーションの要素
React、Redux、およびImmutable.js:効率的なWebアプリケーションの要素
開発者のリモートチームを管理しない方法
開発者のリモートチームを管理しない方法
偉大なフリーランス開発者を雇うための重要なガイド
偉大なフリーランス開発者を雇うための重要なガイド
大衆向けのUXテスト:シンプルで費用対効果の高いものに保つ
大衆向けのUXテスト:シンプルで費用対効果の高いものに保つ
AngularJSからReactに切り替えた理由
AngularJSからReactに切り替えた理由
人気の投稿
  • Webサーバーとしてラズベリーパイを使用する
  • llcタイプcまたはs
  • ワールドワイドウェブ上のすべてのアニメーションはフラッシュアニメーションです
  • ionic2を使用したモバイルアプリ開発
  • アドビのエクスペリエンスデザインは何に使用されますか
  • 私はcまたはc ++を学ぶべきですか
カテゴリー
トレンド Uxデザイン アジャイルタレント モバイルデザイン データサイエンスとデータベース Kpiと分析 ライフスタイル モバイル その他 技術

© 2021 | 全著作権所有

apeescape2.com