【マテリアルデザイン】Empty State
ユーザーにデータを初めて追加させるとき、検索結果が空だったとき…。
「表示させるものがない」ということを示すためのUI画面が必要だな、とUI画面を作りながら思い、調べてまとめてみました。
※M2の内容になります。（M3では見つけられず）
Empty State
エンプティステートを構成するものとして一般的なのは、下記の2つ。
静止画
中立的な画像、あるいは面白みのある画像
ブランドイメージと一貫性があるもの
NG例：混乱や緊急性を伝えるような画像の使用は避ける。
タグライン
役に立つ説明が含まれる
ブランドイメージと一貫性がある内容（表現）
画面を表示させている意図が伝わる内容（攻撃的ではない）
NG例：CTA（Call To Action）のように行動を喚起するような内容はNG。なぜなら、エンプティステートは非インタラクティブであり、タップしてもリアクションが起こらない画面であるため。
Empty State の代わりとなり得るもの
Starter content
アプリを始めて使う場合など、エンプティステートの変わりにスターターコンテンツを表示させることが出来る。
スターターコンテンツを表示させることで、ユーザーはすぐにアプリを使い始めることが出来るようになる。
推奨事項：
スターターコンテンツは、音楽や本などのコンテンツを保存したり、テキストなどテンプレート化させたコンテンツを生成する際に最適である。
幅広くアピールでき、主要な機能を示すコンテンツを使用する。
ユーザーがスターターコンテンツを削除したり置き換えたりできるようにする。
可能であれば、パーソナライズされたコンテンツを提供する。
Educational content
エンプティステートの画像／テキストだけで表示画面の表示意図など伝えることが難しい場合は、エデュケーショナルコンテンツを表示させることを検討する。
エデュケーショナルコンテンツは、ユーザーに「このアプリを使うことで何が出来るようになるのか」を示してくれる。
推奨事項：
コンテンツの閲覧をスキップ出来る導線を用意する。
簡潔な内容にする。
コンテンツの内容は、画面の文脈に沿った内容にする。
Best Match
（検索窓などにおいて）ユーザーの検索クエリと完全に一致するものがない場合、スペルが少し異なる検索クエリの結果を返すことで、検索クエリに最も一致するものを含むコンテンツを表示することができる。これらの結果を表示することで、ユーザーは探しているものを見つけることができる。
その他参考URL
マテリアルDesign上ではCTAのような表現を避けよう、とありましたが、実際の例を見てみると、次のアクションを促す動線になっていたり（FABが配置されている）、どうすればこの画面にコンテンツが表示されるようになるのか？といった説明コンテンツが使われているケースがあるようです。
この記事が気に入ったらサポートをしてみませんか？