情報がないことを伝えるUIデザイン

「Empty Data（またはEmpty Status）」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日本では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります（Webでの404に近いですが、少し違います）。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。

参考：モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集

Empty DataはUIである

Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでしょうか？存在しないというのは真っ白な空白のことです。ユーザはどうしてこうなったかもわからず、そして次に何をすれば良いかもわからず困ってしまうでしょう。次から実際に必要な状況と、解決するためのパターンを分類して紹介していきます。

必要な状況

Empty Dataが必要な状況には特定のパターンが存在します。それぞれ発生原因、発生状況は違いますが、そこに情報が存在していないということは共通です。具体的には下記のように分類することができます。

1. ユーザがアクションを行なっていないため情報が存在しない
2. ユーザがアクションを行なった結果、情報がなくなった
3. ユーザがアクションを行なったが情報が存在しない

1,ユーザがアクションを行なっていないため情報が存在しない

本来、ユーザがアクションを行なうことによって情報が入る箇所に、まだユーザがそのためのアクションをまだ実行してないため、情報が存在していない状態です。例えばTwitterに新規登録をしたが何もつぶやいたことの無いユーザは、自分のツイートの画面を見てもそこには情報はなにも存在しません。

2,ユーザがアクションを行なった結果、情報がなくなった

既にデータのある場所で、ユーザがアクションを情報を減らすアクションを実行し続けた結果、情報が全てなくなったという状態です。例えば、MailBoxのアプリケーションでは受信ボックスのメールをアーカイブ、または削除し続けると受信ボックスには情報はなくなります。

3,ユーザがアクションを行なったが情報が存在しない

ユーザがアクションを行なったが、そこに存在するはずの情報がなかったという状態です。検索やソートなど、情報を引き出す際などに発生します。例えば、AppStoreでキーボードを乱れ打ちしたワードで検索をすると、当然ながらなんの情報も引き出すことはできません。

Empty Dataのパターン

上記のようなケースでは、それぞれEmpty DataのUIが必要になります。例として表示した3つのアプリケーションでは、それぞれ「情報がないということを伝える情報」が表示されていますが、空白だけが存在するというアプリケーションもあります。解決するためにはなぜ情報がないのかのフィードバック、そしてどうしたら情報が入るのかをユーザに伝える必要があります。この「どうしたら情報が入るのかを伝える」においても下記のようなパターンがあります。

1. 情報を入れるためのトリガーを表示する
2. 情報を入れるためのトリガーの位置を示す
3. 情報を入れるための方法をラベルやグラフィックで示す

A,情報を入れるためのトリガーを表示する

ユーザが情報を入れるために必要なアクションをボタンとして示すパターンです。ボタンを押せばすぐに情報を入れるために必要な画面に遷移することはできますが、2回目以降はどこからアクションを行なったら良いのかは学習できないこともあります。このパターンは情報を入れるためのトリガーが別の画面に存在している時に有効なパターンです。例えばDETOXのアプリケーションでは、ポイズン（つぶやき）をまだしていない状態では、「デトックスする（つぶやく）」というボタンが表示され、すぐにアクションを行なうことができます。

B,情報を入れるためのトリガーの位置を示す

ユーザが情報を入れるために必要なボタンの位置を示すパターンです。ユーザはどのボタンを押せば良いのかを理解すると同時に、そのボタンの位置情報も学習します。このパターンは同画面内にトリガーが存在している場合に有効なパターンです。例えばInstagramのダイレクト機能では、右上の「＋」ボタンからこの機能を使うことを示しています。ユーザの記憶に残っていれば、次回以降の利用時にもユーザはこの位置のボタンから機能を使うことができます。

情報を入れるための方法をラベルやグラフィックで示す

ユーザが情報を入れるために必要な手順、方法をラベル、またはグラフィックなどで示すパターンです。情報が入るためにいくつかの条件が必要な場合に有効なパターンですが、複雑な条件の時には適切にユーザに伝わるかをよく検討する必要があります。また、単純なアクションであればこのCのパターンで済まそうとしてしまうこともありますが、ターゲットとなるユーザのリテラシーによっては正確に伝わらないこともあります。例えばWantedlyのアプリケーションのメッセージタブでは「1,エントリーをする」「2,企業から返信があると開始される」という二つの条件をラベルで表示しています。

Empty Dataは、あまり目にする機会もなく、地味なUIかもしれません。必要なことはわかっていたけど時間がないので開発では後回し。または最後まで必要だと気づかずにリリースということはよくありますが、ユーザに適切に今の状況と次のアクションを提示することによって、ユーザの悩みを解消することに繋がります。もしあなたがEmpty Dataに興味を持ったら、まずは自社や担当のサービスのEmpty Dataを探してみてはどうでしょう。身近なサービスでも、目にする機会は少ないUIなので意外な発見があるかもしれません。

お互いの学びと成長を促せるメンバーを募集しています

STANDARDは「未来の豊かさにつながる仕組みをデザインする」というミッションを元に、人の役に立つ事業やビジネス、サービスの創出や改善をデザインの力で支援し続けています。

そのために、お互いの価値観を尊重し、学習と実践と内省をしながら成長できる場所であり続けることを目指しています。

あらゆる物事の仕組みを設計するデザイナーとして、ご一緒に考えながら試行錯誤していきたいという方からのご連絡をお待ちしています。