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

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

空の状態とは何ですか？

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

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

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

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

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

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

空の状態の種類

頻繁に発生する空の状態の4つのタイプを次に示します。

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

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

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

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

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

スコット・マケインは、彼の著書「顧客が本当に望んでいること」の中で、優れた顧客体験の6つの指針を示しています。

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

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

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

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

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

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

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

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

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

第二に、ユーザーの推定2〜5％だけが空の状態を表示しているため、設計者の時間の経済的または実用的な使用であるとは限りません。

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

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

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

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

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

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

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

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

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

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

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

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

ただし、アクションは最小限に抑えるのが最善です。 ヒックの法則は、「決定を下すのにかかる時間は、選択の数と複雑さとともに増加する」と述べています。 したがって、行動の呼びかけがせいぜい1つか2つに抑えられている場合、ユーザーはより迅速に行動できる可能性があります。 これが素晴らしい例です：

もう1つの良い例はInstagramです。 人々がプラットフォームに不慣れであるとき、彼らはまだ誰もフォローしていません（そして誰も彼らをフォローしていません）。 Instagramの優れた機能すべてに焦点を当てるのは簡単ですが、たとえば、空の状態の良い画面では、「フォローする人を追加する」オプションを提供できます。

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

Toptalは、デザインのすべての分野で一流のグローバルフリーランスの才能を持っています。 これは、ToptalUXデザイナーのカップルが空の状態の画面を設計した経験について言わなければならなかったことです。

Toptal Designer： Tamara Olson

デザイン分野： UXデザイン

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

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

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

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

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

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

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

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

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

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

Toptal Designer： Michael Clingerman

設計規律： SaaS製品設計

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

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

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

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

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

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

結論

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

•••

ToptalDesignブログでさらに読む

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