![株式会社デジナーレ[designare]](https://designare.jp/wp-content/themes/designare_new/img/logo.svg){kind=logo}
Writer： tokuyasu 更新日：2024/04/26
こんにちは、デジナーレ福岡オフィスの徳安です。
今回は以下の記事を参考に
『UI Stack』について私なりにまとめてみました。
How to fix a bad user interface
Bad な UI を改善する 「UI Stack」 って知ってます？
『UI Stack』の必要性
「考慮もれ」「手戻り」を極力減らし、
エンジニアとデザイナーが、
認識を合わせるために大事な考え方です。
上記のように、データがない場合のデザインを考慮していないと、
確認する手間や認識のずれが発生してします。
設計の段階でデザインを考慮できていれば、
確認する手間や認識のずれ、なども起きにくくなり、
よりスムーズに開発を進めることができます。
『UI Stack』とは
UI StackのStackとは、
１つの画面が持つ複数の状態、（側面、状態、ステータス）のこと。
その複数の状態ごとに最適化されたUIを設計するのが、 UI Stack の考え。
※Stackとは、「データを積み重ねたもの」という意味を持っている。
UIを考案する上で考慮すべき5つの状態
- ・Enpty State （空の状態）
- ・Error State （エラー状態）
- ・Loading State （ローディング状態）
- ・Partial State （部分達成状態）
- ・Ideal State （理想状態）
この『5つの状態』に分けて考えることで、
考慮漏れなども起きにくくなり、
統一的なUIを作成・実装することができる。
Ideal State（理想状態）
UI／UXを考えるときに、最初に考えるのが理想の状態
すべてのコンテンツが揃っている状態。
全てのUIの状態は、理想的な状態につながる。
Empty State（空の状態）
空の状態には大きく分けて 3 つにわけることができる。
- 1．ユーザーが初めてサービスを使用する時
この状態の時に表示するものは、
データが存在するときに表示される内容など。
ユーザーにアクションを促し、サービスの価値を理解してもらう。
- 2 ．ユーザが意図的にコンテンツを消した時
To Do リストのすべての項目を完了した場合や、
すべての電子メールをアーカイブした場合、
すべての音楽のダウンロードを完了した場合などが該当する。
このタイプの空の状態は、
ユーザーに報酬を与えたり、さらなるアクションを促す機会となる。
音楽をダウンロードが完了した空の状態であれば、
ダウンロードした音楽を聞くための導線を作ることで
ユーザーに次なるアクションをさせる足がかりとなる。
- 3 ．検索結果０件など、該当のデータが存在しない時
ECサイトの場合は、ユーザーが検索した単語に似た情報を出してあげると良い。
Loading State（ローディング状態）
・データを読み込んでいる時
・インターネットに接続している時
・ページの遷移をしている時 ...等
この状態の時は、
待っていれば、該当の内容が表示されることが伝わるものや、
対応中であることを伝えるものを表示すると良い。
ロード中何も表示されないと、
直前に行ったアクションが本当に実行されてるのか？と
ユーザーは不安になってしまう恐れがある。
直前に行ったアクションが本当に実行されてるのか？と
ユーザーは不安になってしまう恐れがある。
Partial State（部分達成状態）
Blank State（空の状態）と Ideal State（理想状態）の間みたいな状態。
・プロフィール登録などで途中まで登録した時 ...等
サービス利用を継続させるために、
ユーザーに次のアクションを促すものや
ユーザーがサービスを利用する上での理想の状態を目指したくなるようなものが望ましい。
Error State（エラー状態）
・何かが間違っている状態
・エラーが発生している状態
サーバーに接続できない状況でのエラーだけではなく
バリデーションエラーが発生した場合も該当する。
曖昧な表現や技術的な専門用語は避け、
何をすれば良いかを簡潔に分かりやすく表示すると良い。
まとめ
実装する際に「あれ？この状態の時ってどうやって表示すればいいんだろう...？」
ということが何度かあったので、
これからはUI Stackを意識して設計をしていこうと思います。
ここまで読み進めていただきありがとうございます。
