このページの中身

4つの状態

正常な画面だけを作ると、利用者が最初に見る画面を作り忘れます。画面は4つの状態を持ちます。

読み込み中・空・エラー・正常という画面の4つの状態と、部品が持つ状態の一覧
図を大きく見る
図の中身を文字で読む
  • 画面は4つの状態を持つ。正常だけを作らない。
  • 読み込み中　空
  • まだ登録がありません
  • 最初の1件を登録するとここに一覧が表示されます
  • エラー　正常
  • 読み込めませんでした
  • 通信の状態をご確認のうえ
  • もう一度お試しください
  • 再読み込み
  • 構造の形で見せる
  • 寸法を実物と合わせる
  • 部品が持つ状態
  • 説明と、最初の操作への導線　原因だけでなく、次にできること
  • 「データがありません」だけにしない　問い合わせ用の識別子は残す
  • 通常　hover　フォーカス　押下　無効　処理中
  • 設計はここから始まるがここだけでは終わらない
  • hover だけを設計してフォーカスを忘れると、キーボード操作で現在位置が分からなくなる。
  • 視覚的に状態が変わっても、aria-* を更新しなければ支援技術には伝わらない。

ひと目で#

正常だけを作らない。 画面には4つの状態があります。

読み込み中
結果がまだ確定していない
空状態
結果は確定したが、データがない
エラー状態
処理が失敗した
正常
データがある

部品の側にも状態があります。通常、hover、フォーカス、押下、無効、処理中、選択済み。

空状態の3種類#

初回・該当なし・すべて処理済みという3種類の空状態と、それぞれに要るものを並べた図
図を大きく見る
図の中身を文字で読む
  • 同じ0件でも、要るものが違う
  • 初めて開いた
  • まだ予約はありません
  • 予約が入ると、新しい順にここへ並びます
  • 絞り込んで該当なし
  • 条件に合う予約はありません
  • 今週 ✕　未確定 ✕
  • 条件を1つ外す
  • すべて処理済み
  • 未対応は0件です
  • 本日ぶんの確認は終わりました
  • 空き時間から予約する
  • 利用者がいちばん最初に見る画面。
  • 何ができる場所かを、ここで伝える。
  • 何で絞った結果なのかを見せ、条件を緩める手段を同じ場所に置く。
  • これは失敗ではなく達成。
  • 望ましい状態として見せる。
  • ✕ 3つとも「データがありません」で済ませる　→　次に何をすればよいかが、どの場合も分からない
状況要るもの
初めての利用。まだ何も作っていない何ができるかの説明と、最初の操作への導線
検索や絞り込みで該当なし条件の表示、条件を緩める手段、近い結果
すべて処理済み達成の確認。望ましい状態として見せる

使い分け#

こう感じたら直すところ
待てば出るのか、そもそも無いのか分からない読み込み中と空を、別の表示にする
エラーで行き詰まる原因だけでなく、次にできることを書く
一覧の一部が取れない全体をエラーにせず、取れた分は見せる
キーボードで現在位置が分からないフォーカスの状態を設計していない
無効なボタンの理由が分からない押せるようにして、理由を返す形も考える

間違えやすいところ#

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

予約システムの初回ログイン後、一覧が真っ白です。データを取りに行く1〜2秒も、0件という結果も、通信の失敗も、すべて同じ白なので、利用者には壊れたのか待てばよいのか判断できません。

白を3つに分けます。読み込み中はスケルトンで骨組みを見せ、0件は「まだ予約はありません」と最初の操作への導線、失敗は原因と再読み込みの手段を出します。

予約一覧の3つの状態。空・エラー・読み込み中それぞれの表示
図を大きく見る

どの状態でも見出しと枠の位置は動かしません。状態が変わるたびにレイアウトが組み変わると、それ自体が壊れたように見えます。

確認する#

使えるパターン#

このページで扱う語#

このページで扱う語を並べる本文では太字9 語

語の名前から引くなら用語索引へ。

読み込み状態
データの取得や処理が完了していない状態の画面。
状態遷移
要素や画面が、ある状態から別の状態へ変わること。およびその設計。
カード
関連する情報を1つの矩形にまとめ、独立した単位として扱えるようにした部品。
データテーブル
行と列で構成され、多数のデータを比較・走査できるようにした表。
アコーディオン
複数の見出しを縦に並べ、押すとその下の内容が開く部品。
ディスクロージャー
押すと隠れていた内容が現れる、単一の開閉要素。
カルーセル
同じ領域に複数の内容を順に表示し、切り替えて見せる部品。
ステッパー
複数の手順に分けた流れの中で、現在どの段階にいるかを示す部品。
アバター
利用者や組織を視覚的に識別するための小さな画像。顔写真、ロゴ、頭文字などを使う。

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

データが0件のときの画面がない

読み込み中・空・エラー・正常の4つを必ず作る。空の画面には最初の操作への導線を置く。

このコードで動いている見本です

読み込み中の表示をどうするか

回転する印より、これから出る形をかたどった枠のほうが待ち時間を短く感じる。

このコードで動いている見本です

この場面のほかの困り事と、そのまま貼れる部品は部品を選ぶにまとめてある。逆引きには全188件。

4状態を試す#

同じ一覧画面を、空・読み込み中・エラー・正常の4つの状態で切り替えます。プレビューは実物のマークアップで、選んだ状態の完成 HTML と CSS をそのまま持ち帰れます。

制作事例

まだ制作事例が登録されていません

最初の事例を登録すると、ここに一覧が表示されます。

<div class="empty-state">
  <h2>まだ制作事例が登録されていません</h2>
  <p>最初の事例を登録すると、ここに一覧が表示されます。</p>
  <a href="/works/new/" class="button">事例を登録する</a>
</div>

<style>
.empty-state { display: grid; gap: var(--space-3); justify-items: center;
  padding: var(--space-8) var(--space-5); text-align: center; }
.empty-state h2 { margin: 0; font-size: var(--text-lg); }
.empty-state p { margin: 0; color: var(--color-text-muted); }
.empty-state .button { margin-block-start: var(--space-2); }
</style>

この道具は JavaScript で動きます。無効の場合は、上の空状態の3種類の表を手引きにしてください。

出典#

関連#

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。