1画面を平面ではなく側面で考える UI Stack
この記事は2020年2月26日にクラウドワークスデザイナーブログで公開されたものです。
こんにちは。フロントエンドチームのUXエンジニア みーた です。
2月ももう終わりですね。世の中が混乱していてみんな不安の中バレンタインを過ごしたかと思います...チョコ渡せましたか🍫💕
そして先週、弊社でも原則リモート・出社には上長の承認が必要という状態になりました。
かく言う私は元々ある「フルフレックスフルリモート制度」を使っていて、今年に入ってから基本的に仕事は家でリモートで週2~3の出社をしていたのですが、遂に20日間引きこもりしました。運動不足がやばいですね。デブへの道まっしぐらです。誰か未だに品薄なリングフィットください。
(2020/04/07 追記: リングフィット手に入れました！)
さてさて、今回の本題。
最近プライベートで新規サービスのUI監修みたいなことをやったのですが、その際に「UI Stack」の考え方が意外と知れ渡ってないように感じたので、要点だけの内容ですが綴ってみたいと思います。
元の話は英語でこちら↓に詳しく書いてあります。
しっかり読み解いてみたい方は覗いてみてください。
1画面は平面ではなく側面がある
PinterestやDribbbleなどで「パッと見の雰囲気いいなぁ」というデザインには最近よく出くわすようになってきて、それを新規の画面やサービスに取り入れようと考えることが多いかと思いますが、実装までいって使ってみたけど「なんか違和感あるな」みたいなことありませんか？
それは「1画面の側面を見れていない」からかもしれません。
側面とは一体なんなのか。
それは「状態」です。
私達の住む世界は必ずしも完璧ではなく、間違いや遅延が発生します。それはサーバー側の問題かもしれないし、ユーザーが意図した動きをしてくれない場合もあります。
なので、デザインを作り出す時には 5つの状態＝UI Stack を用意することで、誰もが使いやすい、人間味と統一感のあるインターフェイスを作成することができます。
UI Stackにおける5つのルール
UI Stackでは5つの状態(State)をルールとして掲げています。
・Ideal State（理想ステート）
・Empty State（エンプティステート）
・Error State（エラーステート）
・Partial State（パーシャルステート）
・Loading State（ロードステート）
(これは個人の感想になりますが、現在の世の中のデバイスでは5つがメインとなりますが、今後ITが進化していくことによって増えたり減ったりするかもしれません。自分のデザインするプロダクトには何が必要なのかを再確認する必要があると思っています📝)
UI Stackの構造イメージ (How to fix a bad user interfaceより引用)
それぞれがどういう状態なのかを深ぼってみます。
■ Ideal State（理想ステート）
Ideal Stateは一番最初に作られるであろう基礎の画面。
すべてのデータが正しく揃っている理想の状態。
(ここだけしか作られていないデザインが多いはず...👀)
全てのUIの状態は Ideal State に繋がっているため、最初にこの状態から始めて、他の状態はユーザーの問題を解決するように構築していくと良いです。
■ Empty State（エンプティステート）
Empty State は情報が何も入っていない状態になりますが、ユーザーを動かすための大事な部分であり、3つのタイミングがあります。
1. はじめてのユーザーに使い方を促すタイミング
2. 受信メールボックスを未読0件にするなど、ユーザーがタスクを消化して自発的に空にしたタイミング
3. 検索結果に対して該当するものがない場合などに見せるものがないタイミング
それぞれをどう考えるかは本編のemptyの章を見ていただく形でここでは省きますが、これらのタイミングはその画面から次のアクションを起こしてもらい、サービスの価値を理解してもらうチャンスになります。
■ Error State（エラーステート）
Error State は、文字通りエラーで何かが間違っているときの画面です。
エラーと言うとマイナスなイメージを持たれがちですが、表現によっては全てのユーザーインプットを安全にするという点での助けにもなるはずです。
エラーが発生したときに、ユーザーの入力やアップロードを取り消したり、破壊したり、削除したりしてしまわないようにしなければなりません。
■ Partial State（パーシャルステート）
意外と考えられきれてない事が多いのが Partial State。
データが1行しか入っていなど理想ステートに至っていない状態など、Empty State〜Ideal Stateまでの中途半端な状態。
プロフィールの完成度などがいい例になりますが、100%を達成するのに必要なタスクを表示して、完成度を高めながら達成を促します。
これを担保することで、ユーザーのモチベーションを保ち、何したらいいのか分からないなどの理由で使用を諦めることなく、サービスを使ってもらえます。
■ Loading State（ロードステート）
これも意外と忘れられがちな、読み込みが進行していることを表す Loading State。
ユーザーのアクション後、押されて動いてるのか、押せてなくて動いてのか、そわそわすることありますよね。 Instagramの共同創業者であるMike Kriegeは、Instagramアプリの体感速度を、技術的にどう達成したかを語っている最中に以下の言葉を発しました。
「Nobody wants to wait while they wait.」 待ち時間に、待ちたいと思う人は誰もいない - Mike Krieger
まさにそう！うまく動くと信じれば、動作速度は格段に上がったように見えます。そのためにコンテンツが読み込み中であることを表現して安心させることが大事になります。
スケルトンスクリーンなどが最近では主流ですが、UIの静的な美しさだけでなく動的なアニメーションを含めたローディングと出現の演出は、今後デザイナーに求められるセンスになるかもしれないですね。
UIデザインを設計するお仕事とは
UI Stackを活用すると、「5つの画面状態があって各状態間の遷移はスムーズに行われる」という考えの元デザインが出来るようになります。
このような暫定要素がないと、新たな状態が発生したり消滅したりしてしまった際に、ユーザーを混乱させたり、驚かせたりしてしまう恐れがあります。
ユーザーを不快にして、混乱させることが、私たちの本来の仕事ではありません。そんなことしたくないですよね。
UIデザインというのはプロダクトを使う上での問題を解決するためのものになります。それぞれの画面状態が、どのようにしてユーザーを最終目的へ導くのか考えることが大事になってきます。
Webの仕組みを理解してインターフェイスをきちんと設計できると最適なUIが出来上がってくるはずです。
プロトタイプの作成時からLoading Stateを意識してみたり、エラーを引き起こす可能性のあるケースを想定して対処法を考えてみたりして、それをエンジニアと相談してみてください。
包括的なユーザーエクスペリエンスを提供するために、デザイナーとエンジニアが一丸となって開発できる体勢を整えていけたら最高です:)
この記事が気に入ったらサポートをしてみませんか？