初回利用、検索結果なし、受信箱ゼロ、エラー、権限なしの場面に使える、オリジナルの空の状態デザイン10例。編集できるコードと、アクセシブルなメッセージビルダー付きです。
空の状態とは、まだ一覧に表示するものがないときに画面が見せる表示のことです。新しいアカウント、一致しない検索、片付いた受信箱、読み込みの失敗などが該当します。どの場合も、わかりやすい説明と次に進む手段が必要です。下の10のデザインは、編集できるHTMLとCSSでよくあるケースをすべてカバーし、アクセシブルなマークアップを書き出すビルダーも用意しています。
5種類の空の状態と、それぞれが提供すべきもの
空の画面は新しいユーザーが最初に目にする場所であり、検索がうまくいかなかったときにたどり着く場所でもあるのに、「データがありません」と書かれた灰色の箱で済まされがちです。入力ミスの後にふさわしいメッセージと初日にふさわしいメッセージは違うので、これらの例では空の種類ごとに扱いを変えています。どのスニペットも単体で動作し、ストックのイラストではなくシンプルな図形を使っています。
一覧、テーブル、ダッシュボード、検索に表示するものがないときに見せる画面やパネルのことです。良い空の状態は理由を説明して次のアクションを示し、悪いものは空白か、そっけない「データがありません」だけを表示します。
画像だけでなく、本物の見出しとテキストを使いましょう。装飾的なアートワークには空のaltテキストを付けます。ページを再読み込みせずに絞り込みや検索の後で空のメッセージが表示される場合は、暗黙的にpoliteなライブ設定を持つrole="status"の要素の中に置き、フォーカスは移動させないでください。
初回利用時には役立つことがあります。例えば、ユーザーが開いて削除できるデモプロジェクトです。自分のデータと誤解されないよう、例であることをはっきり示しましょう。
検索語を繰り返し、何も一致しなかったことを伝え、つづりを確認する、絞り込みを外す、カテゴリーから探す、といった解決策を提案します。ワンクリックで使える「絞り込みを解除」ボタンが、単独のアクションとしては最も役立ちます。
空の状態は、本当に表示するものが何もないことを意味します。エラーは、データがあるかもしれないのに読み込めなかったことを意味します。どちらなのかを伝えましょう。サーバーが失敗しただけなのに「注文はありません」と伝えると、相手を不安にさせます。
破線の枠が、項目がどこに表示されるかを示します。ボタンは空のエリアの中にあるので、探し回る必要がありません。
作成とインポートの両方を用意すると、すでに別の場所にデータを持っている人にも配慮できます。
最初のステップに印を付けた短いリストが、空のダッシュボードを計画に変えます。
はっきり印を付けた例の行が、データが揃ったときの画面の見た目を示します。
検索語を繰り返し、解決策を提案し、すべてを表示する画面に戻る手段を残します。
有効な絞り込みを削除できるチップとして表示すると、原因をまっすぐ指し示せます。
良い知らせである空の画面もあります。落ち着いた確認メッセージだけで十分で、ボタンは要りません。
問題を正直に伝え、データが無事ならそう伝え、再試行の手段を用意します。
誰に頼めばよいかを伝え、その依頼をしてくれるボタンを用意します。
列の見出しを残すと何が表示されるかがわかり、1つの行が列全体にまたがってメッセージを表示します。
送信した請求書は、ステータスと支払期日とともにここに表示されます。
請求書を作成
空の状態ビルダー
見出し、説明文、ボタンを書き、種類を選んで、アクセシブルなHTMLとCSSをコピーしましょう。初期の出力：
説明
ボタンのラベル
初回利用
結果なし
エラー
空の状態のプレビュー
HTMLをコピー
CSSをコピー
無料で始める · クレジットカード不要