空の状態と検索結果なしの状態をデザインする方法

プロジェクトの一覧が空でも、一度もプロジェクトを作っていないのか、検索に一致するものがなかったのかは分かりません。同じ空白の領域に見えても、必要な説明と操作は異なります。

空の状態と検索結果なしの実用上の違いは、なぜ内容がないのかです。本当に空のコレクションには、通常、使い始める方法や、何をすると内容が表示されるかの説明が必要です。検索結果がない画面には、本来存在する内容を見えなくしている検索語、フィルター、対象範囲を変える方法が必要です。どちらも「プロジェクトを作成」へ誘導すると、単なる検索の問題を、重複した作業に変えてしまうかもしれません。

検索結果なしも、空の状態の一種です。区別すると役立つのは、コレクションそのものが空なのか、検索条件に合わないのか。前者は内容が加わると変わり、後者は要求する条件が変わると変わります。

何をすれば内容が表示されるかを考える

見出しを書く前に、「ここに内容が表示されるのは、利用者が何をしたときか」を答えてみます。これだけでも、役立つ空の画面と、どこにでもある画面の違いが見えてきます。

答えが「最初のプロジェクトを作ったとき」なら、プロジェクトに何が入るのかを説明し、作成へ誘導できます。「Archivedフィルターを外したとき」なら、フィルターの変更を助けます。「リクエストの完了を待ったとき」なら、まだ読み込み中です。「権限を取り戻したとき」なら、作成ボタンは関係ないか、そもそも使えないかもしれません。

この問いは、表示される行がないことを、データそのものがない証拠と扱う、よくある文言の間違いも防ぎます。画面が知っているのは、今の要求に一致するアクセス可能なレコードがないことだけかもしれません。ワークスペース全体について言い切らず、分かっている範囲に合うメッセージにします。

Nielsen Norman Groupの空の状態に関する記事は、システムの状態を説明し、作業へ進む適切な道筋を示すことの価値を解説しています。また、読み込み中に結果が空だというメッセージを見せないよう注意しています。この基本は役立ちますが、具体的にどうするかは、現在のコレクションと要求についてアプリケーションが何を知っているかによります。

内容が増える仕組みを伝えるPower BI、優先順位の重要性を示すNexTag

NN/Gの記事にあるMicrosoft Power BIの最近使った項目の画面では、コンテンツを開くとRecentsに表示される、という仕組みを説明しています。重要なのは因果関係です。アカウント全体が空だとか、新しく何かを作る必要があるとは伝えていません。

対照的な例が、NN/Gの検索結果なしの調査にあります。過去のNexTagの検索画面で、参加者は小さく表示された一致なしのメッセージを見落とし、その下の、もっと目立つ内容を見ていました。視線追跡では、メッセージ自体への注視は記録されていませんでした。先へ進むための提案はありましたが、なぜそれが必要なのかが伝わっていなかったのです。

教訓は、どの空の画面にも巨大な見出しが必要だということではありません。Power BIのメッセージには、既存のワークスペース内にある一つの表示を説明する、局所的な役割があります。検索結果ページは、メイン領域に一致する結果が並んでいるはずだという期待を切り替える必要があります。文脈に応じて状態を十分に目立たせ、その後に取るとよい操作を見つけやすくします。説明文が一応存在していても、装飾イラストや関係のないおすすめは、この順序を崩すことがあります。

空の配列ではなく、事実から状態を選ぶ

返された件数がゼロというだけでは、表示を決められません。 リクエストが処理中、失敗、権限制限、正常終了だが空、といった可能性があります。実装では、表示件数だけでなく、リクエストの状態と対象範囲からメッセージを選ぶべきです。

この表は、状態の変化を確認するときにとくに役立ちます。一つの検索語を入力し、すぐ別の語に置き換え、応答が逆順に返る状況を作ります。表示するべきなのは、現在有効なリクエストの状態です。古い空の応答が、新しい正常な結果を消してはいけません。これはデータの流れの不具合で、イラストを増やしても直りません。

レビューでは、「次に何をしますか」と聞くと有用です。先に状態を説明せずに画面を見せます。検索語が残っていることに気づかず、作成を選ぶなら、先へ進む操作の見せ方を見直す必要があります。未完成の画面に見えるので待つなら、処理が終わっているかどうかを明確にしましょう。意図したボタンが押されたかだけでなく、どう理解されたかを記録します。たまたま正しいクリックがあっても、状態を誤解していることはあります。

空である原因に合わせて書く

初回利用：納得して始められるようにする

初回利用の画面は、これから作るものを理解する助けになるべきです。「まだ何もありません」は空白を認めていますが、その領域の目的を説明していません。「プロジェクトの要件、リンク、レビューのメモをまとめて管理できます」なら、使い始める理由が具体的になります。

説明には、実際に取れる行動を組み合わせます。プロジェクトの作成に必要なのが名前だけなら、「プロジェクトを作成」で小さな最初の手順を開けます。外部サービスの接続が必要なら、操作名もその接続を示すべきです。簡単そうに見えるボタンから予想外に複雑な設定が始まると、空の状態を解決した直後に、新たな問題を生みかねません。

説明の量は、その人がどれほど慣れているかに合わせます。初めてプロジェクトのワークスペースを開く人には、短い例が役立つかもしれません。最後の保存済み検索を意図的に削除した人には、検索そのものの入門はおそらく不要です。同じ空のコレクションでも、知っていることが違います。

サンプルデータには気を付けます。例の行があると概念は具体的になりますが、明確にサンプルと表示し、本人のデータに見せかけてはいけません。サンプルプロジェクトに「Client approved」というステータスがあるなら、本物の承認と間違えないようにします。空の状態は、不確かさを魅力的な作り話に置き換えるのではなく、減らすべきです。

検索結果なし：条件を見直せるようにする

「検索結果が見つかりません」は検索の終了を伝えますが、理由と先へ進む方法は示していません。役立つメッセージは、指定した条件と結果の関係を保ちます。検索なら、入力した検索語を、見えるまま編集可能にしておきます。 絞り込みなら、適用中のフィルターを残します。そうしないと、何を変えるかを決める前に、自分が何を指定したかを思い出さなければなりません。

この例なら、「『autumn launch』に一致するプロジェクトはありません」が明確な見出しになります。日付の絞り込みが制約かもしれないなら、「現在の日付範囲は10月1日〜7日です」と説明できます。検索語と日付範囲のどちらが原因かをアプリケーションが特定できなくても、これは役立つ情報です。

該当する条件を変える操作を選びます。一つの日付フィルターが有効なら、「最初からやり直す」より「日付フィルターを解除」が正確です。「すべてのフィルターを解除」は、本当にすべてのフィルターを解除する場合に適しています。検索語は残すなら、その違いが分かる表現にします。一つだけ変えるつもりの人にとって、検索と絞り込み範囲を黙って同時にリセットするのは意外な動作になり得ます。

Nielsen Norman Groupの検索結果なしページのガイドは、結果を明確にすること、先へ進む方法を残すこと、利用者をからかうような語り口を避けることを勧めています。目の前のタスクに合わせて活用しましょう。プロジェクト検索、商品カタログ、法律文書のライブラリで、同じ提案や画像が必要なわけではありません。

代わりの候補を表示するなら、何なのかを説明します。「関連プロジェクト」を、失敗した検索の結果のように見せてはいけません。検索結果がないという説明を先に置き、別のコレクションには独自のラベルを付けます。特定のものを検索した後に、関係なさそうな項目が出てきた理由を、利用者が推理する必要はありません。

システムが確かめられる範囲だけを、文言にする

「プロジェクトは存在しません」は広い範囲を断定します。「このフィルターに一致するプロジェクトはありません」は、もっと限定的です。「このワークスペースに、あなたが閲覧できるプロジェクトはありません」は、また別の境界を伝えます。一行にきれいに収まるかではなく、画面が持つ根拠に合わせて選びましょう。

非公開やアクセス制限のある内容を扱うシステムでは、これが重要です。空の結果は、対象が存在しないことを必ずしも意味しません。その人には見えないだけかもしれません。何を開示でき、どの操作を案内してよいかは、プロダクトチームが決める必要があります。メッセージを具体的にするためだけに、機密レコードの存在を明かしてはいけません。

権限の問題がなくても、画面が全体を把握しているとは限りません。保存後に検索インデックスが更新されることも、インポートが処理中のこともあります。インポート中と分かっているなら、その状態を説明できます。分からないなら、見つからない項目がまもなく現れるという、安心させるための約束を作らないようにします。

架空のワークスペースに、短い文言ルールを作ってみましょう。検索が正常終了して一致がゼロなら「一致するプロジェクトはありません」。コレクションの件数がゼロと確認できたなら「プロジェクトはまだありません」。検索失敗なら、どちらも使いません。この区別だけでも、ネットワークの問題が初回利用の明るい口調を借りてしまうのを防げます。

次の行動が取りやすいだけの構造を残す

空の画面は、項目のある一覧より静かに見せながら、役立つ操作を残せます。検索、フィルターチップ、ページ名、コレクションの対象範囲は、現在地を説明します。すべて取り払って中央にイラストを置くと、見栄えはよくなっても、問題から抜け出しにくい画面になるかもしれません。

検索結果がないプロジェクト一覧では、検索欄を同じ位置に残し、選択中のワークスペースも見せます。通常、結果が表示される領域に説明を置きます。件数が変わったせいで移動した操作要素を探さずに、条件を修正できます。

初回利用の画面には、もう少し自由があります。比較する行がないので、大きめの導入メッセージが適切かもしれません。それでも、慣れたナビゲーションと明確なページ名は維持します。ボタンを押す前に、個人用のスペースに作るのか、チームの共有スペースに作るのかが分かるべきです。

見た目の収まりを、一つの短い英語の文だけに依存させないでください。長いプロジェクト名、翻訳で長くなるメッセージ、二行に折り返すフィルターも試します。空の画面は、余裕のあるデスクトップ幅で設計された後、狭いサイドパネルへ押し込まれがちです。「No items」だけで成立するデザインは、現実の内容にまだ対応できていません。

役に立つ範囲で、最も負担の小さい操作を選ぶ

先へ進むための操作は、必要以上に作業を捨てずに前進できるものであるべきです。 ワークスペース、日付範囲、担当者を丁寧に選んだ人にとって、すべてを消すのは大きなリセットです。結果は表示されるようになるかもしれませんが、調べようとしていた文脈まで失われます。

システムが対応できるなら、もっと小さな変更を示します。個別のフィルター解除は、要求全体の解除より役立つかもしれません。日付範囲を広げれば、関連するキーワードを残せます。アプリのホームへ送るより、親フォルダーに戻すほうが情報を得られる場合もあります。

最小の操作が必ず成功するかのように言ってはいけません。「日付フィルターを解除」は操作を正直に説明します。「あなたのプロジェクトを表示」は、画面には実現できるか分からない結果まで約束しています。信頼できる予測件数が得られるなら、もっと踏み込んだ提案もできます。そうでなければ、操作名は事実にとどめます。

検索結果なしのページでも、作成が役立つ場合はあります。ただし通常は、補助的な位置づけにします。作る前に同じプロジェクトがないか検索する人もいるでしょう。その道筋は残しつつ、作成だけが次の手段に見えないようにします。重複の負担が大きいシステムなら、すぐ新規作成を勧めるより、検索対象が現在のワークスペースだったことを説明するとよいでしょう。

同じページの変化を、時間の流れに沿って確かめる

最も問題が見えるレビューは、独立した空のスクリーンショットの寄せ集めではなく、短い一連の操作です。項目のある一覧から始め、一致がゼロになるフィルターをかけ、解除し、もとの一覧が戻ることを確かめます。次に、本当に空のコレクションを作り、メッセージと操作を比べます。

架空のワークスペースでは、現在のコレクションに六つのプロジェクトがあります。利用者が、指定した週にはプロジェクトのない担当者を選びます。結果の領域は一致なしと伝え、担当者と日付の操作を残します。日付フィルターを外すと、より広い期間に一致するプロジェクトが戻り、担当者の選択は維持されます。

今度は、プロジェクトのない新しいワークスペースへ移ります。同じ結果領域で、プロジェクトの目的を説明し、作成を案内します。フィルターは有効でなく、もとのコレクションが空なので、解除は不要です。前の状態と書体や間隔を共通にしても、メッセージまで共通にする必要はありません。

これはデザインだけでなく実装の問題でもあります。静止画の比較で望ましい振る舞いは指定できますが、動くアプリケーションでは、リクエストのタイミングと状態変化をテストする必要があります。無関係なあらゆる状態のカタログに広げず、この小さな一連の流れにレビューを集中させましょう。

状況に合う口調を選ぶ

個人のお気に入り一覧が空なら、軽やかで歓迎する雰囲気でもよいでしょう。障害調査中の監査ログが空なら、落ち着いた正確な説明が必要です。同じ笑顔のイラストと「さあ、始めましょう！」は、両方には合いません。

その人が最も気にしていそうなことを考えます。新しい利用者は「ここには何が入るのか」と思うでしょう。知っているファイルを探す人は「権限を失ったのか、場所を間違えたのか、名前を打ち間違えたのか」と思うかもしれません。完了した作業を確認する人は、残りがないと分かれば十分かもしれません。もとにある問いが明確だと、口調も選びやすくなります。

行がゼロだからというだけで、祝ってはいけません。空のタスク一覧は全件完了かもしれませんが、フィルターが隠しているだけかもしれません。祝うには、よい状態が確認できている必要があります。アプリケーションが確認できないなら、中立的な説明のほうが信頼できます。

同じように、通常の初回利用で謝る必要もありません。新しいコレクションにレコードがないのは、問題ではありません。中断を伝える言葉は本当の中断に使い、通常の空の表示は、プロダクトを使う自然な一部として見せましょう。

イラストを置くなら、明確な役割を持たせる

イラストは、コレクションに何が並ぶかを説明したり、初回利用と検索結果を区別したりできます。役立つ操作を初期表示の外へ押し出したり、行き止まりに見せたりしてはいけません。画像を外したほうが分かりやすいなら、装飾を守るのではなく、構成を見直します。

ワークスペースの例なら、控えめなプロジェクトカードの線画で、どんな情報を持つものかを示せます。検索結果なしの画面は、検索語とフィルターがすでに文脈を伝えるので、小さな検索関連の記号だけでよいかもしれません。同じ大きな画像を使わなくても、共通した見た目にできます。

必要な説明は、実際のインターフェースのテキストにします。フィルターと結果の関係をイラストで補強しても、画像が使えないときにも文言だけで意味が通る必要があります。デザインファイルでは鮮明に見えても、狭い画面では読めなくなる小さなラベルを画像に含める場合は、とくに重要です。

OpenDesignで違いを確認する

OpenDesignの対応するHTMLプレビューでは、二つの案を比較しやすくなります。現実的な文言で空のコレクションと検索結果なしの例を作り、テキストやスタイルを手動で調整し、ビューポートのプリセットで確認します。チャットへ送るコメントで、修正が必要なメッセージや操作を具体的に指摘できます。

有用なレビューにするには、各画面で何が起きたか、次に何をするかを説明してもらいます。その前に「初回利用の状態」「絞り込みで空になった状態」と紹介してはいけません。デザイン自身が伝えるべき答えを、ラベルで教えてしまいます。二つの画面が同じように理解されるなら、違いはまだ十分に伝わっていません。

動くアプリケーションでも、データの条件を確認します。有効な検索語、権限の範囲、フィルターのリセットが、デザインで確認したメッセージを正しく選ぶ必要があります。

小さな判断で、大きな誤解を防ぐ

空の領域を承認する前に、見出しを事実の主張として読んでみます。アプリケーションに、その主張をするだけの情報があるかを確かめます。主な操作は、何が変わるかの約束として読みます。そして、その操作が本当にその変更を行うかを確認しましょう。