「UIスタック」でデザインする際の抜け漏れをなくす

WEB、アプリに関わらずデジタルを対象にしたデザインを行う際に気をつけたいのが様々な状態を考慮するという点です。デザインを納品した後にディレクターやエンジニアから「この時のデザインってどうなるんですか」という抜け漏れをなくすためにも、「UIスタック」を常に意識してデザインすることを心がけましょう。

UIスタックとは

UIの5つの状態のこと。

• ブランクステート（Blank State）
• ロードステート（Loading State）
• パーシャルステート（Partial State）
• エラーステート（Error State）
• 理想ステート（Ideal State）

ブランクステート（Blank State）

初利用

ユーザーが初めてサービスを利用する際、特にタスク系のサービスの場合は、なにも表示するコンテンツがないことが多く、ユーザーの第一印象を左右する重要な画面です。
ユーザーオンボーディング（User Onboarding）などで調べると色々な情報がでてきますので、せひ調べて見てください。

ユーザーが自らデータを0にする

メールを削除、お気に入りリストを削除、ToDoリストを削除、通知をすべて既読になどユーザーが何かのタスクを行い、表示するデータがなくなった場合です。

初利用のときと異なるのは、ユーザーはすでにあなたのプロダクトを利用して何らかのタスクを完了している = すくなくともプロダクトを使用しているユーザーなので、初利用の時とは異なったデザインをしてあげるのがユーザーに対して親切かと思います。

検索結果0件

こちらもブランクステートですが、上記2つとは異なる性質を持っています。
ユーザーが何かを探そうとしていており、そのニーズにあった結果が0件だった場合、離脱する可能性が高くなります。

表示するものがない場合は、検索ニーズに一番近い結果を返すなど次にユーザーがなにをしたらいいかを提案してあげることが大切です。

ロードステート（Loading State）

ユーザーの通信環境、表示するコンテンツのデータ量などユーザーに対してコンテンツを表示するときには少なからず待ち時間が発生します。
この待ち時間が気にならないレベルの短さであれば、デザインしていなくてもそれほど影響はないかと思いますが、時間が長ければ長いほど今は何の時間なのか（スピナー）、どういう状態なのか（プログレスバー）、次表示されるコンテンツはどのようなもの（スケルトンスクリーン）なのかを表示してあげる必要があります。

デザイナーの役目ではないかもしれないですが、ロードステートのデザインをすると同時に、待ち時間を減らす努力も怠ってはいけません。

パーシャルステート（Partial State）

コンテンツが十分にない状態です。ブランクステートはコンテンツが何もない状態で、理想ステート（後ほど説明します）がコンテンツが十分にある状態の中間の状態になります。

この状態で注意するべきなのは、データが少ししか表示されていないことでユーザーが離脱させないということです。

例えばプロフィールに必要な情報を入力する場合、プロフィールの入力完了率などを表示する求人サービスがあると思います。
ゲーム的な要素を追加することで、プロフィール登録という面倒なタスクをゲームをしているような感覚になってもらうことで、どんどんクリアしていってもらうようにデザインされています。

エラーステート（Error State）

入力フォームや404などサービスの中でユーザーが遭遇するエラーは多岐にわたります。
本来ならばエラーが起こらないことがいいのですが、それは難しく、さらにエラーに関しては離脱を招く事象ですので、デザインをする必要があります。

エラーが発生した場合、何が原因で起こっていて、それを対処するにはどうしたらいいのか明確である必要があります。
ここが技術者にはわかりやすい内容のエラーメッセージだけど、ユーザーが理解するには専門的すぎる場合は、文言をわかりやすくする必要があります。

理想ステート（Ideal State）

多くの人が一番最初に作成するであろう理想的な状態である、ユーザーに一番見てもらいたい状態です。コンテンツが十分にあり、サービスが持つ魅力・機能が一番発揮できている状態といっても過言ではないでしょう。

この理想ステートで作成したデザインのテイストで、他の状態のデザインもすることが必要になってきます。
各状態は単体で存在するものではなく、ブランク→パーシャル→理想などとつながっているため、それぞれの状態でテイストやボタンなどの仕様などが異なるとユーザーの混乱を招くためです。

まとめ

理想ステートだけをデザインして終わりというのは特にデザインを初めたばかりの方に多い気がします。

WEBのデザインはほぼ100%と言っていいほどインタラクションが発生します。ユーザーの挙動によって、表示される内容が変わるためデザイナーはそれも含めてデザインすることが求められます。

上記の5つの状態の他にも、hoverやタップ、focus、selectなど様々な状態が存在するWEBですが、むしろそこが楽しみだと個人的に思っているので抜け漏れをなくし、細部まで考慮したデザインをするように常に心がけていきたいところです。