インタラクションデザインの基礎：フィードバック・マッピング・モデル・制約の設計原則

インタラクションデザイン（IxD: Interaction Design）は、人とシステムの間の対話を設計する専門分野です。ユーザーが意図した操作を正確に行い、その結果を正確に理解できるようにするための原則を扱います。本記事では、Don Norman（ドン・ノーマン）の「誰のためのデザイン？」で提唱された原則を中心に、インタラクションデザインの基礎を解説します。

ドン・ノーマンの設計原則

1. 可視性（Visibility）

操作可能な要素は視覚的に見えている必要があります。何が操作できるかが一目で分からないUIは、ユーザーを迷わせます。

UIへの応用：

• クリック・タップ可能なボタンはボタンらしく見える（塗りつぶし・枠線・シャドウ等）
• スクロール可能なコンテンツはスクロール可能であることを示す（スクロールバー・コンテンツの一部が切れている等）
• 操作可能でない要素はインタラクション可能に見せない

2. フィードバック（Feedback）

操作の結果はすぐにフィードバックされなければなりません。「何が起きたか」がユーザーに伝わらないと不安を生みます。

フィードバックの種類：

• 視覚的: ボタンの色変化・アイコンのアニメーション・サクセスメッセージ
• 聴覚的: 効果音（オプション）
• 触覚的: 振動フィードバック（モバイル・ウェアラブル）

フィードバックのタイムライン：

• 即時（0〜100ms）: タップ・クリックの視覚的反応
• 短期（100〜1000ms）: ローディング状態の表示
• 長期（1秒以上）: 処理完了通知・エラーメッセージ

3. コンセプチュアルモデル（Conceptual Model）

ユーザーが「このシステムはこう動くだろう」と考えるメンタルモデルとデザインが一致していることが重要です。

ファイルとフォルダのメタファー：

コンピュータのファイルシステムを「書類とフォルダ」というメタファーで表現することで、デジタル初心者でもファイル管理の概念が理解できます。

4. アフォーダンス（Affordance）

要素の見た目が「どう操作するか」を示すとき、アフォーダンスがあると言います。丸いノブは回せる・平らなパネルは押せる・テキストフィールドは入力できる、という視覚的な示唆です。

UIへの応用：

• ボタンはボタンらしいデザイン（インタラクティブな印象）
• リンクはテキストと区別できる（色・アンダーライン）
• スライダーはドラッグできることを示すハンドルの形状

5. マッピング（Mapping）

コントロールと結果の間の論理的な対応関係がユーザーの期待と一致していることが重要です。

良いマッピングの例：

スクロールバーを下に動かすと画面も下へ・左矢印キーでカーソルが左へ移動するなど、操作の方向と結果が一致しています。

悪いマッピングの例：

エレベーターのボタンの並び順と実際の階数が対応していない・フォームの「送信」と「リセット」ボタンが隣接して視覚的に区別しにくい。

6. 制約（Constraints）

誤った操作を物理的・論理的・文化的に防ぐ設計。間違いが起きないようにする。

物理的制約: USB端子は方向が決まっており逆向きに挿せない（物理的に制約）

論理的制約（UI）: 必須フィールドが未入力の場合は「次へ」ボタンをdisabledにする・削除前に確認ダイアログを表示する

7. 一貫性（Consistency）

同じ操作・要素には同じデザインを使うことで、一度学んだことが他の場面でも通用します。

スリップとミスの防止

スリップ（Slip）: 意図は正しいが、操作を間違えた（誤タップ等）

• 対策: 十分なタッチターゲット・確認ダイアログ・UNDO機能

ミス（Mistake）: 意図自体が間違っている（誤解に基づく操作）

• 対策: 分かりやすいラベル・適切なフィードバック・エラーメッセージの改善

まとめ

インタラクションデザインの原則（可視性・フィードバック・コンセプチュアルモデル・アフォーダンス・マッピング・制約・一貫性）を意識することで、ユーザーが直感的に使えるUIが設計できます。原則は抽象的に見えますが、具体的なUIの設計判断（ボタンのデザイン・エラー処理・確認ダイアログ等）の根拠として実用的に活用できます。UI ZUKANでは優れたインタラクション設計のUIサンプルを掲載しています。