UI Stackという考え方について知ったので調査
上の記事はスコット・ハーフ氏による著書「愛される製品をデザインする方法」から抜粋された彼自身が投稿した記事
デジタル製品の優れたUIをデザインするための、UI Stack と呼ばれる包括的なアプローチについて解説している
UI Stack とはUIをデザインするときに5つの画面状態（理想状態、空状態、エラー状態、部分状態、読み込み状態）を考慮する必要があるという考え
空状態
空状態とは、ページにデータがない場合に表示される画面のこと
ユーザーに強い第一印象を与え、行動を促し、興味を持続させ、製品が提供する価値を思い出させることを目的としている
空状態には、大きく分けて3つの種類がある
- ユーザーが初めて製品を使ったときに表示されるもの
- ユーザーがToDoリストの項目をすべて完了した場合や、すべての通知を読んだ場合など、画面から既存のデータを自発的にクリアしたときに表示されるもの
- 検索結果など、表示するものがない場合に表示されるもの
理想状態
理想状態とは、プロダクトが最大の価値を提供し、役立つ実用的なコンテンツでいっぱいになっている状態
- プロダクトが最も有用な状態であり、ユーザーが最も頻繁に目にすることを期待する状態
- マーケティングページやモバイルアプリストアのスクリーンショットは、理想状態の例として考えることができる
- 他のすべての状態の基礎となるため、最初に作成する必要がある
- すべてのUI状態は、最終的に理想状態につながる
エラー状態
エラー状態とは、プロダクトで問題が発生したときに表示される画面のこと
この状態は、以下のような様々な状況を含む
- 不足している、または無効なフォームデータ
- アプリがサーバーに接続できない
- アップロードを完了せずに次のステップに進もうとした
- テキストを送信せずにページを離れた
など
デザインする上で心がけることは以下
- エラーが発生した場合でも、ユーザーが入力またはアップロードしたものを元に戻したり、破棄したり、削除したりするべきではない
- エラー状態は、ユーザーに次に何をすべきかを伝える、簡潔で、わかりやすく、指示的なコピーを含める必要がある
- あいまいなエラーコード、16進数、混乱を招く進捗オプションは、エラーを経験した人々を怖がらせ、不満にさせるだけなのでやめる
部分状態
部分状態とは、ページが空ではなく、まばらにデータが入力されているときに表示される画面
部分状態の目的は、ユーザーが落胆して製品の使用を諦めないようにすること マイクロインタラクションを設計して、ユーザーを完全な理想状態へと導く絶好の機会となる
例えば、Dropboxでは、追加のストレージ容量の獲得にどれだけ近づいているかが表示される
Dropboxでは、完了するまであと何ステップあるかを示すだけでなく、これらのステップには、教育とアクティベーションを通じて顧客の価値を高めるという副次的な効果もある
読み込み状態
読み込み状態は、アプリケーションがデータの読み込み、インターネット接続の待機、または別の画面への遷移を行っているときに表示される画面
ページ全体が読み込み中の表示になる場合、コンテンツペインの遅延読み込みの場合、またはフォームフィールドからユーザー名の可用性を検索する場合などに使用されるインライン読み込みの場合がある
読み込み状態のデザインを怠ると、顧客はコンテンツではなく、進捗状況の表示に意識が集中してしまい、製品の動作が遅く感じてしまう可能性がある
読み込み状態の設計には、次の2つの重要な考慮事項がある
- 表示: 多くの場合、デザイナーは空白とスピナーで画面を埋めてしまい、表示されていないコンテンツに大きな責任を負わせている
- 認識: 顧客は、実際の読み込みの進捗状況ではなく、進捗状況の表示に意識を集中してしまう可能性がある
読み込み状態を実装するための方法
- 「スケルトン画面」を使用する
- 「楽観的なアクション」を使用する
「楽観的なアクション」はアクションが成功したと仮定することで、アクションは顧客の視点からはるかに速く実行されたように見える
たとえば、写真を「いいね！」したり、コメントを残したりする場合、顧客の視点からは、アクションは即座に完了したものとして登録され、バックグラウンドでは、製品は実際にアクションを完了するためのサーバーリクエストを行っている
まとめ
経験上、考えておいた方が良い状態が言語化され原則になった印象
特に読み込み状態は、見落とされることが多く、後付けでデザイン依頼をすることがあるので、広まってほしい
