UI Stack とは

UIを考案する上で考慮すべき5つの状態のこと。

Blank State（データがない状態）
Error State（エラー状態）
Loading State（ローディング状態）
Partial State（部分達成状態）
Ideal State（理想の状態）

なぜ必要か

「手戻り」を減らすため
完成したと思った後に不足が発覚すると余計な時間（作業時間・情報共有の時間・会議時間）
フロントエンジニアとデザイナーが認識を統一するため
エンジニアが常識的に処理しているエラー画面の表示をデザイナーも理解しているわけではありません。

具体的になにするのか

理想の状態しか考慮されずにUIデザインが設計された場合を想定します。
これは UI Stack の Ideal State だけが考慮されている状態です。
今考えている画面において他の4つの状態になり得るかを考えます。

例えば、記事を作成する画面では、5つすべての状態を考慮する必要があります。
・記事がそもそも作成されていないため記事一覧に何も表示されていない状態
・読み込みで何らかのエラーが生じ、記事を正しく読み込めていない状態
・記事を読み込んでいる状態
・ベースのhtmlは読み込みが完了しているが、記事の読み込みだかは完了していない状態
・記事一覧が正しく表示されている状態

UI設計を行うときに、どの画面でどの状態を考慮するかをPdMとエンジニアとデザイナーで共有する必要があります。あなたがどの立場にいたとしても、チーム全体に UI Stack を共有することで、あなた含む全員が得をします。

参考文献

「1枚のシート」でエンジニアとデザイナーのストレスが激減した話