不確実性を減らす (Clarity & Certainty)

「このボタンを押したら、本当に注文が確定するの？」「今、処理中なのか、フリーズしているのか？」「入力した内容は正しいのか？」——ユーザーが感じる「不確実性」は、操作を止め、離脱を生みます。

よくある失敗パターンは「フィードバックのない操作」です。ボタンを押しても何も変わらない。ローディング中なのかエラーなのか区別がつかない。フォームを送信したが、成功したのか失敗したのかわからない。ユーザーは「もう一度押すべきか？」「壊れているのか？」と不安になり、二重送信や離脱を引き起こします。

不確実性が高いUIは、ユーザーの「信頼」を奪います。信頼を失ったユーザーは、慎重になりすぎて操作が遅くなるか、不安から離脱します。ECサイトでは「本当に注文できたか不安」が返品・問い合わせコストを増大させます。

1. 原則の定義

不確実性を減らす（Clarity & Certainty）とは、操作の結果・現在の状態・次に何が起きるかを常に明示することで、ユーザーが「これで合っている」と確信を持って操作を進められるよう設計する原則。

本質は「ユーザーの頭の中にある疑問に、UIが先回りして答えること」です。ユーザーが「今どこにいるか」「操作は成功したか」「次に何をすべきか」を自分で考えなくて済む状態が、不確実性ゼロのUIです。

2. いつ使うか（適用場面）

特に重要になるケース

• フォーム送信・決済処理: 「送信中」「処理中」「完了」の状態を明示しないと、ユーザーは二重送信や離脱を起こす。
• 複数ステップのフロー: 「今ステップ2/4にいる」「残り何分かかるか」を示さないと、ユーザーは途中で諦める。
• 取り消せない操作: 削除・公開・送信など、実行後に戻れない操作の前後で、結果を明確に伝える。
• 非同期処理・バックグラウンド処理: 「保存中」「同期中」「アップロード中」など、見えない処理の状態を可視化する。

トレードオフが起きる場面

• 情報量と視覚的ノイズ: すべての状態を表示しようとすると、画面が情報過多になる。重要な状態変化のみを強調し、それ以外は控えめに表示するバランスが必要。
• 確認ステップの追加: 確認ダイアログを増やすと安全だが、操作のテンポが悪くなる。「取り消せない操作」のみ確認を求め、それ以外はUndoで対応する設計が理想。

3. なぜ重要か（設計判断の核）

不確実性を減らすことは「親切」ではなく、「UIの基本的な責任」である。

設計判断の基準

• 「このUIで、ユーザーは操作が成功したかどうかを30秒以内に確認できるか？」→ できなければ、成功・失敗のフィードバックを追加する。
• 「ユーザーは今、何が起きているかを理解しているか？」→ 理解できていなければ、状態表示（ローディング・進捗・完了）を追加する。

優先順位の考え方

• 1. 操作結果のフィードバック（最優先）: 操作が成功したか失敗したかを、即座に・明確に伝える。
• 2. 現在地の表示: 複数ステップのフローでは、今どこにいるかを常に示す。
• 3. 次のステップの提示: 操作完了後に「次に何をすべきか」を示す。

例外条件

• 即時反応が明らかな操作（チェックボックスのオン/オフなど）は、過剰なフィードバックが逆に煩わしくなる場合がある。

4. 具体の設計ルール（チェックリスト）

最低ライン（Must - これ守らないと危険）

これがないと、ユーザーは操作が成功したかどうかわかりません。

操作後にフィードバックがあるか: ボタンを押した後、「処理中」「完了」「エラー」のいずれかが即座に表示されるか？何も変わらない状態は絶対に避ける。
ローディング状態が表示されるか: 処理に時間がかかる場合、スピナー・プログレスバー・スケルトンスクリーンなどで「処理中」であることが伝わるか？
成功・失敗が明確に区別されるか: 完了メッセージとエラーメッセージが、色・アイコン・文言で明確に区別されているか？

理想ライン（Better - できると強い/プロの品質）

「わかる」を超えて「安心して任せられる」状態です。

処理の進捗が数値で伝わるか: 「アップロード中 67%」「ステップ 2/4」のように、進捗が定量的に伝わるか？「しばらくお待ちください」だけでは不十分。
完了後に次のアクションが示されるか: 「登録が完了しました」で終わらず、「次はプロフィールを設定しましょう」のように次のステップが示されているか？
操作の取り消しが可能か: 「削除しました。元に戻す」のようなUndoオプションを提供することで、確認ダイアログなしでも安心して操作できるか？

5. UI例

同じ「ファイルアップロード」でも、状態表示の設計でユーザーの安心感は大きく変わります。

改善プロセス

1. 進捗を数値で表示する: 「アップロード中」だけでなく「67%」という数値を表示することで、ユーザーは「あとどれくらいか」を把握できる。不確実性が大幅に減少する。
2. 完了を明確に伝える: 処理完了後に緑色のチェックマークと「アップロード完了！」のメッセージを表示する。「処理が完了しました」という曖昧な表現より、感情的な安心感を与える。
3. 次のアクションを示す: 「ファイルを確認する →」というリンクを添えることで、ユーザーは完了後に何をすべきかがわかる。

6. 関連リンク

• 関連リファレンス（理論）: 認知負荷, 防御的デザイン
• 用語集（定義）: フィードバック, 認知負荷
• 関連するUI原則（横）: フィードバック (Feedback), マイクロコピー (Microcopy), 期待値を揃える (Expectation Management)
• 関連するUIコンポーネント: Radio Button（ラジオボタン）, Tabs（タブ）, Switch（スイッチ）, Textarea（テキストエリア）, Toast（トースト通知）, Dialog（ダイアログ / モーダル）, AlertDialog（警告ダイアログ）, File Upload（ファイルアップロード）

7. まとめ

今日から直せる一手 担当しているサービスで、最も重要な「送信・保存・購入」ボタンを押した直後の画面を確認してください。「処理中」のローディング表示と「完了」の成功メッセージが表示されていますか？されていなければ、今日中にローディングスピナーと成功トーストを追加してください。

チームに共有するなら一言 「ユーザーの不安は、UIが答えていない質問の数だ。『今何が起きているか』『操作は成功したか』——この2つに答えるだけで、信頼は大きく変わる。」