様々な状態を考慮したデザインを実現するためにUI stackという考え方を学んだのでメモします。

UI stackとは？

UIをデザインする際に5つの状態を考慮する考え方です。
アメリカのプロダクトデザイナー Scott Hurff氏が世に広めました。

・Blank(Empty) State（空、何も入力されていない、データがない状態）
・Loading State（待ち時間発生、ローディング状態）
・Partial State（一部分だけ入力されている、Idealには一歩足りない状態）
・Error State（エラーの状態）
・Ideal State（すべてのコンテンツが十分に存在している、理想的な状態）

何のためにあるの？

エンジニアから「こういう状態(登録データがない場合など）のときってどうなるの？」という抜け漏れをなくすため。

理想系を最初にデザインするかと思いますが、ユーザーが意図しない行動をとった場合など様々な状態を考慮しないと、整合性が取れなくなったり、そもそもデザインパターンを考えられていなかった！ということが起こるんですね💦