空の画面の設計
表示するものがない空の状態の画面は、どう設計すればいいですか? 初回利用、検索結果なし、全部消した後、エラーの4種類に分け、それぞれ次に押すボタンを1つだけ置きます。
見せるものがない画面も設計が必要です。空の画面で次にやることを示さないと、ユーザーはそのまま離脱します。
名前とプレビュー
プレビューをタップすると止まり、もう一度タップすると再生します。
初回利用
First-use empty state
登録直後でデータがまだ1つもない
検索結果なし
No results
探している条件に合う項目がない
すべて消した状態
Cleared state
カート・やることをユーザーが全部消した後
エラー状態
Error state
読み込みに失敗した。空の画面と区別する必要がある
使い方
- 空の画面ごとに、次に押すボタンをきっかり1つだけ置きます。複数あると、また迷います。
- 検索結果なしでは、入力した検索語をもう一度表示し、綴りの確認や似た検索語を提案します。
- すべて消した状態は失敗ではありません。「すべて完了しました」のように、ほめる口調が合います。
- エラーを空の画面のように見せると、データが消えたと思われます。エラーには[再試行]ボタンを置きます。
コピーして使うプロンプト
空の状態4種
この一覧画面の空の状態を4種類作ってください。
1. 初回利用(First-use): 何をする場所かを1行 + [最初の項目を追加]ボタン1つ。
2. 検索結果なし(No results): 「'{検索語}'に合う結果がありません」 + [検索語をクリア]ボタン。
3. すべて消した状態(Cleared): 終えたことをほめる1行。ボタンなし。
4. エラー(Error state): 何が失敗したか + [再試行]ボタン。
イラストなしで、文章とボタンだけで作ってください。参考にした投稿: @uxwoodytips