一覧が空のときの案内を書く：未登録と検索0件を分けて伝える

一覧の枠だけが表示され、その中に何もない。利用者は「まだ登録していない」のか「条件に合わない」のか「読み込めなかった」のかを判断できません。一覧が空のときの案内を書くには、先に空になった理由を分けます。

題材は架空の読書記録サービスです。画面の文言を設計する練習であり、実在するサービスの改善実績ではありません。今回は画面を飾る前に、状態、説明文、操作の行き先を一枚のメモにまとめます。

何も登録していない人には、最初の一件への道を示す

初めて使い、記録が一件もない状態なら、「読書記録はまだありません」と伝えます。次の操作は「読んだ本を記録する」とし、実際の登録画面へ進める想定にします。

「データがありません」だけでは、操作が必要なのか、待つべきなのかが分かりません。この題材では、利用者が一件目を登録することで一覧が作られます。その関係が伝わるように、説明文と操作を組み合わせます。

ただし、権限のない利用者へ登録を促してはいけません。同じ一覧でも誰が使うかによって、案内する操作が実行可能かを確認します。練習では本人が自分の記録を追加できる条件に絞ります。

検索0件では、記録を作り直すように促さない

記録はあるものの、検索条件に合う本がない場合は、「この条件に合う読書記録はありません」とします。ここでは「検索条件を解除する」という操作を用意する案を考えます。新しい本の登録へ送ると、検索が空だった理由と次の操作がつながりません。

検索語や選択中の分類が画面に残っていれば、何を変えればよいか考えられます。解除ボタンを作るなら、検索語だけを消すのか、分類も戻すのかを先に決めます。この例では、検索語と分類の両方を初期状態へ戻す仕様にします。

検索0件の判定そのものはfilterの練習記事で扱っています。今回は処理が返した件数だけでなく、元の記録が存在するかも含めて、表示する案内を分ける設計です。

取得できなかった状態を「0件」にしない

通信などの理由で記録を取得できなかった場合、記録がないとは判断できません。「読書記録を読み込めませんでした」と伝え、再試行できる設計なら「もう一度読み込む」という操作を用意します。

原因を確認できていないのに「通信環境が悪い」と利用者側へ原因を限定しないようにします。また、再試行の処理を実装していない段階で、押しても何も起きないボタンを置くのは避けます。文言と操作は、実際に作る機能と一緒に確認します。

読み込み途中も別の状態です。まだ結果が決まっていない間に「ありません」と出すと、直後に一覧が現れることになります。設計メモでは「読み込み中」も一行追加し、結果待ちと結果確定後を区別しておきましょう。

三つの場面を、説明文と操作で書き分ける

紙かテキストファイルに、次の三組を書きます。これは今回の架空サービスに対する文言案で、どのサービスにも同じ表現を使う規則ではありません。

• 未登録：「読書記録はまだありません」＋「読んだ本を記録する」
• 検索0件：「この条件に合う読書記録はありません」＋「検索条件を解除する」
• 取得失敗：「読書記録を読み込めませんでした」＋「もう一度読み込む」

それぞれの操作の右側に、移動先や実行する処理を書き足します。解除後にどの一覧が見えるか、再試行中には何を表示するかまで一文で説明できれば、実装する人にも意図を渡しやすくなります。

状態名を隠しても、次の操作を選べるか

一覧の中身を隠した簡単な画面案を三枚作り、各状態の文言を置きます。状態名のメモを見ずに「今どうなっていて、何をすればよいか」を読み取ってください。操作が説明とつながっていない箇所があれば、文言か行き先を直します。

イラストを追加するのは、その後でも構いません。まず空白の理由と実行できる操作が伝わることを完成条件にします。無料レッスンで一覧を作る際も、項目が並ぶ画面と一緒に、空の画面を一枚用意してみてください。