#124
UI設計パターン
#124しすてむじょうたいのかしか
システム状態の可視化 (Visibility of System Status)
別名・表記:Visibility of System Statusシステムステータスの可視化状態の可視化
UIXHERO Definition
「私は今どこにいて、何をしているか」をユーザーに常に知らせること。
概要
「システム状態の可視化」は、ヤコブ・ニールセンが提唱したユーザビリティ・ヒューリスティクス（経験則）の中で最も基本的かつ重要な原則です。
システムは、今何が起きているかを 適切な時間内（0.1秒 / 1秒 / 3秒 という人間の反応閾値）に ユーザーに伝えなければなりません。 フィードバックがないと、ユーザーは「自分の操作が無視されたのか」「システムがフリーズしたのか」が分からず、不安になります。これは重複クリックや離脱の原因となります。
UXでの活用
- 即時フィードバック: ボタンを押した瞬間に色が変わる、音が鳴るなど、操作を受け付けたことを0.1秒以内に返す。
- プログレス表示: 処理に時間がかかる場合（3秒〜）、読み込み中アイコン（スピナー）やプログレスバーを表示し、進捗を可視化する。
- パンくずリスト: ウェブサイトの階層構造の中で、自分が今どこにいるかを明示する。
💡 使いどころ
処理に時間がかかる時や、操作の結果がすぐに見えない時。ユーザーの不安を取り除きたい時。
⚠️ 注意点・誤用
技術的な詳細（例：「エラーコード: 0x123」）を表示しても意味がない。ユーザーが理解できる言葉で状態を伝える必要がある。
具体例
- アップロードのプログレスバー: 今どのくらい進んでいて、あと何分で終わるかを表示する。
- エレベーターの階数表示: 今どこにいて、どちらに動いているかが可視化されているため、安心して待つことができる。
出典・参考文献:
- NN/g: Visibility of System Status (Usability Heuristic #1)
- Don Norman: The Design of Everyday Things
- Jakob Nielsen, “Response Times: The 3 Important Limits”
- David Maister, “The Psychology of Waiting Lines”