2014.7.1 / UI
「Empty Data(またはEmpty Status)」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日本では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります(Webでの404に近いですが、少し違います)。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。
参考:モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集
Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでしょうか?存在しないというのは真っ白な空白のことです。ユーザはどうしてこうなったかもわからず、そして次に何をすれば良いかもわからず困ってしまうでしょう。次から実際に必要な状況と、解決するためのパターンを分類して紹介していきます。
Empty Dataが必要な状況には特定のパターンが存在します。それぞれ発生原因、発生状況は違いますが、そこに情報が存在していないということは共通です。具体的には下記のように分類することができます。
本来、ユーザがアクションを行なうことによって情報が入る箇所に、まだユーザがそのためのアクションをまだ実行してないため、情報が存在していない状態です。例えばTwitterに新規登録をしたが何もつぶやいたことの無いユーザは、自分のツイートの画面を見てもそこには情報はなにも存在しません。
既にデータのある場所で、ユーザがアクションを情報を減らすアクションを実行し続けた結果、情報が全てなくなったという状態です。例えば、MailBoxのアプリケーションでは受信ボックスのメールをアーカイブ、または削除し続けると受信ボックスには情報はなくなります。
ユーザがアクションを行なったが、そこに存在するはずの情報がなかったという状態です。検索やソートなど、情報を引き出す際などに発生します。例えば、AppStoreでキーボードを乱れ打ちしたワードで検索をすると、当然ながらなんの情報も引き出すことはできません。
上記のようなケースでは、それぞれEmpty DataのUIが必要になります。例として表示した3つのアプリケーションでは、それぞれ「情報がないということを伝える情報」が表示されていますが、空白だけが存在するというアプリケーションもあります。解決するためにはなぜ情報がないのかのフィードバック、そしてどうしたら情報が入るのかをユーザに伝える必要があります。この「どうしたら情報が入るのかを伝える」においても下記のようなパターンがあります。
ユーザが情報を入れるために必要なアクションをボタンとして示すパターンです。ボタンを押せばすぐに情報を入れるために必要な画面に遷移することはできますが、2回目以降はどこからアクションを行なったら良いのかは学習できないこともあります。このパターンは情報を入れるためのトリガーが別の画面に存在している時に有効なパターンです。例えばDETOXのアプリケーションでは、ポイズン(つぶやき)をまだしていない状態では、「デトックスする(つぶやく)」というボタンが表示され、すぐにアクションを行なうことができます。
ユーザが情報を入れるために必要なボタンの位置を示すパターンです。ユーザはどのボタンを押せば良いのかを理解すると同時に、そのボタンの位置情報も学習します。このパターンは同画面内にトリガーが存在している場合に有効なパターンです。例えばInstagramのダイレクト機能では、右上の「+」ボタンからこの機能を使うことを示しています。ユーザの記憶に残っていれば、次回以降の利用時にもユーザはこの位置のボタンから機能を使うことができます。
ユーザが情報を入れるために必要な手順、方法をラベル、またはグラフィックなどで示すパターンです。情報が入るためにいくつかの条件が必要な場合に有効なパターンですが、複雑な条件の時には適切にユーザに伝わるかをよく検討する必要があります。また、単純なアクションであればこのCのパターンで済まそうとしてしまうこともありますが、ターゲットとなるユーザのリテラシーによっては正確に伝わらないこともあります。例えばWantedlyのアプリケーションのメッセージタブでは「1,エントリーをする」「2,企業から返信があると開始される」という二つの条件をラベルで表示しています。
Empty Dataは、あまり目にする機会もなく、地味なUIかもしれません。必要なことはわかっていたけど時間がないので開発では後回し。または最後まで必要だと気づかずにリリースということはよくありますが、ユーザに適切に今の状況と次のアクションを提示することによって、ユーザの悩みを解消することに繋がります。もしあなたがEmpty Dataに興味を持ったら、まずは自社や担当のサービスのEmpty Dataを探してみてはどうでしょう。身近なサービスでも、目にする機会は少ないUIなので意外な発見があるかもしれません。
STANDARDは「未来の豊かさにつながる仕組みをデザインする」というミッションを元に、人の役に立つ事業やビジネス、サービスの創出や改善をデザインの力で支援し続けています。
そのために、お互いの価値観を尊重し、学習と実践と内省をしながら成長できる場所であり続けることを目指しています。
あらゆる物事の仕組みを設計するデザイナーとして、ご一緒に考えながら試行錯誤していきたいという方からのご連絡をお待ちしています。
2017.5.23 / UI
本日、BNN新社さまより「UIデザイナーのためのSketch入門&実践ガイド(吉竹遼 著)」が刊行されました。 Amazonでのご購入はこちら (Kindle版もご用意しています) せっかくですので、執筆を務めさせて頂いた私の視点から、本書についての見どころを紹介させて頂きます。 どんな本か アプリやWebサービスなどのデジタルデザインにおいて、昨今普及が進んでいるSketchについての使い方を網 […]
by Ryo Yoshitake
2017.3.9 / UX
以前の記事にて、なぜ新規事業にユーザーリサーチが必要なのかを主に述べました。しかし、いざ行おうと思ってもどのように行えばいいのか悩まれる方は多いのではないでしょうか。 そこで、今回はUXデザインのリサーチ手法にはどのようなものがあるのかを分類した上で、その中でも利用頻度の高いユーザーインタビューの方法、特に質問設計にフォーカスしてお話したいと思います。 今回の記事では主に下記のポイントについて見て […]
by Masafumi Kawachi
2017.3.1 / Business
新規事業の立ち上げやサービスの改善の際、社内の声だけでなく外部の専門的な意見を求めるために相談できるデザイン会社を探そうとしたことはありますか? STANDARDでは、「新規事業のアイデアはあるけど具体性が見えない」「リリースしたサービスの数字が伸びない」のような悩みをお持ちの企業に対し、UXデザインやUIデザインのサービスをご提供しており、様々な業界の企業様からお話をいただくことが多いのですが、 […]
by Kenichi Suzuki
STANDARDはUXデザインを軸に、新規事業の立ち上げや既存サービスの改善を支援するデザイン会社です。