「UI Stack」ってご存知ですか。
UIを5つの状態に分けて考えることで、考慮漏れなどをなくしより最適なUIを設計しようという考え方のことです。
今回はこの5つの状態について、お話したいと思います。

1. Ideal State (理想ステート)

全てのUIの基準、基礎となる状態です。
見せたいもの、表示したいものが全て揃っている、まさに理想の状態です。

ほとんどの方がUIを設計される際に、まずこの状態から考えると思います。
ですので、この状態が考慮されていない場合はなかなかないでしょう。
しかしながら、この状態しか考慮されていないUIは残念ながら多いのではないでしょうか。

2. Empty State（エンプティステート）

データが空っぽ、何もない状態です。
主に下記の３パターンが考えられます。
・システムを使いはじめたばかりで、まだデータがない場合
・ユーザーによってデータが削除された場合
・検索などで対象となるデータが存在しない場合

このままではいつまでも本来見てほしい理想ステートの状態を見てもらえません。
ずっと空っぽのままのコンテンツでは意味がないので、ユーザーに何をしてもらう必要があるのか操作を促す案内が必要となります。

3. Error State（エラーステート）

名前の通り、エラーが起きている状態です。

ただエラーであること表示するだけでは、ユーザーの誤操作に繋がりかねません。
どのようなエラーが起きていて、ユーザーは次に何をする必要があるのか、適切な案内が必要となります。

4. Loading State（ロードステート）

データやページの読み込み中で、ユーザーが待つことが必要な状態です。

待っている間にユーザーが違う操作をしたり、ページから離れてしまったりしないように、待っていただくようご案内しましょう。
また、長く待ちたいユーザーはいませんので、処理時間が長い場合にはユーザーを飽きさせない工夫も必要かもしれません。

5. Partial State（パーシャルステート）

理想ステートとエンプティステートの間の状態です。
空っぽではないけれど、理想ステートの状態で表示するには、データが足りて居ない状態です。

まだ足りていないものがあることを伝え、必要となる操作をユーザーに促す案内をしましょう。
個人的には、この状態が考慮されていないことが1番多いのではないかなと思っています。

以上が5つの状態でした。
みなさんも、是非UI設計される際にこの5つの状態を考えてみてください。