Empty State をまとめてみた #Zaim

otoyan

2019/06/27 08:52

アプリの UI で、コンテンツがない空の状態（= Empty State ）を伝えたいとき、みなさんはどうしていますか？
先日それで悩むことがあったので、どんなパターンがあるのか調べてみました。

1. コンテンツの状態を説明するパターン

「〇〇はありません」といったように、「コンテンツがない」ことを伝えるもの。

メリット
シンプルでわかりやすい。

デメリット
どんなアクションをしたらこの場所にコンテンツが増えるのか、まではわからない。

感想
基本形。アプリの中でも、重要度の低い（= メインコンテンツでない）画面に多い傾向がある。

2. 画面の機能を説明するパターン

「〇〇すると、ここで〇〇できます」といったように、画面の役割を知らせるテキストがある。

メリット
その画面でできることがわかりやすい。

デメリット
コンテンツの有無がわかりにくい。

感想
機能が複雑な場合や機能がわかりづらい場合に良さそう。

3. アクションへ誘導するパターン

コンテンツの有無に関するテキスト + 特定の操作を始めるボタンがついているもの。

メリット
コンテンツを増やすために必要な操作がすぐわかる。期待する画面に最短で遷移してもらえる。

デメリット
大抵の場合、コンテンツが入った後は画面が変わり、ボタンが別の場所に行ってしまうため、「次はどこからアクセスしたらいいの？」とユーザーを混乱させる可能性がある。

感想
アプリの核に関わる、ユーザーに積極的にやってもらいたいコンテンツに対し、適用される傾向がある。

合わせ技：使い方を説明 + アクションへ誘導するパターン

2. と 3. の機能を合わせたようなパターン。Material Design Guideline でいうところの Educational content と近い役割をもつ。

感想
コンテンツが空かどうかよりも、そもそもの画面の役割や使い方を伝えて、やってもらうのに向いていそう。アプリのコンセプトが伝わりやすい。

広義の Empty State：入力を補助するパターン

コンテンツが入る前や入っている途中に関わるさまざまな UI。

感想
ユーザーがコンテンツを増やしたりつくったりする操作を簡単にしたい場合、Place holder などを利用すると良い。
例えば LIPS や Money Forward の例なら、コンテンツが入った後のイメージを湧きやすくしている。
Apple Music の例なら、ユーザーが探しているものを見つけやすくしている（= Material Design Guideline の Best match）。
３つしか挙げられなかったが、探したらいろんな表現ありそう。

まとめ

Empty State は、画面の目的やコンテンツの重要度によって、次のパターンを使い分けると良さそう。

画面の目的
状態を説明したい：「〜〜ありません」　
機能を説明したい：「〇〇すると〇〇できます」
アクションへ誘導したい：ボタンをつける
入力を補助したい： Place holder などを活用

コンテンツの重要度
高：ボタンつける＋「〇〇しよう」　
中：ボタンつける
低：ボタンなし