1. インタラクションデザイン入門 MOC
- インタラクションデザインとは
- インタラクションデザインの歴史と主要人物
[[初期のHCI (Human-Computer Interaction) 研究]][[ビル・モグリッジ (Bill Moggridge) による用語の提唱]][[アラン・クーパー (Alan Cooper) とペルソナ、目標指向設計]][[ドナルド・ノーマン (Don Norman) とアフォーダンス、UX]]
- インタラクションデザインと関連分野
[[UXデザインにおけるIxDの位置づけ]][[UIデザインとの違い (振る舞い vs. 見た目)]][[人間中心設計 (HCD) / デザイン思考との関係]][[情報アーキテクチャ (IA) との連携]]
- 良いインタラクションと悪いインタラクションの例
2. インタラクションデザインの5つの次元 (The 5 Dimensions of IxD) MOC
- 5Dモデルの概要 (Gillian Crampton Smith & Kevin Silver)
- 1D: 言葉 (Words)
[[ボタンラベル、説明文、エラーメッセージなど]][[明確で、簡潔で、ユーザーに理解できる言葉を選ぶ]]
- 2D: 視覚表現 (Visual Representations)
[[アイコン、タイポグラフィ、画像、図表などのグラフィック要素]][[視覚的な階層と情報の伝達]]
- 空間 (Physical Objects or Space)
[[インタラクションが行われるデバイスや物理的環境 (PC, スマートフォン, マウス, キーボード)]][[物理的なインタラクション (クリック, タップ, スワイプ)]]
- 4D: 時間 (Time)
[[ユーザーがメディアと対話する時間 (アニメーション, ビデオ, サウンド)]][[レスポンスタイム、プログレス表示]]
- 5D: 行動 (Behavior)
[[システムの動作とユーザーの反応の連鎖]][[他の4次元がどのように組み合わさって相互作用を生み出すか]]
3. インタラクションデザインの基本原則と法則 MOC
- 一貫性 (Consistency)
[[内的整合性と外的整合性]][[一貫性がもたらす学習しやすさ]]
- 発見しやすさ (Discoverability)
[[利用可能な操作やシステムの状況をユーザーに明確に示す]]
- フィードバック (Feedback)
[[ユーザーのアクションに対する即時かつ適切な応答]][[フィードバックの種類 (視覚的, 聴覚的, 触覚的)]]
- 制約 (Constraints)
[[誤った操作を防ぐための意図的な制限]][[物理的、論理的、文化的制約]]
- アフォーダンス (Affordance) とシグニファイア (Signifier) (Don Norman)
[[アフォーダンス (オブジェクトが示唆する行為可能性)]][[シグニファイア (アフォーダンスを伝えるための手がかり)]]
- マッピング (Mapping)
[[操作と結果の直感的な対応関係]]
- 寛容性 (Forgiveness)
[[エラーからの回復の容易さ (アンドゥ, 確認ダイアログ)]]
- ユーザーの習熟度への配慮 (初心者のためのガイダンスと熟練者のためのショートカット)
- 心理学・認知科学に基づく法則
- フィッツの法則 (Fitts’s Law) (ターゲットへの移動時間)
- ヒックの法則 (Hick’s Law) (選択肢の数と意思決定時間)
- ミラーの法則 (Miller’s Law) (短期記憶の容量
7±2) - 複雑性保存の法則) (システムが持つ複雑さには最小限度がある)
- 近接の法則 (Law of Proximity) (ゲシュタルト心理学)
- 類似の法則 (Law of Similarity) (ゲシュタルト心理学)
- 閉合の法則 (Law of Closure) (ゲシュタルト心理学)
- ヤコブの法則 (Jakob’s Law) (ユーザーは他のサイトで慣れた挙動を期待する)
- ピーク・エンドの法則 (Peak-End Rule) (体験の記憶はピーク時と終了時で決まる)
4. インタラクションデザインのプロセス MOC (HCD/デザイン思考プロセスとの連携)
- 1. 発見と分析 (Discover and Analyze)
[[ユーザーリサーチによるニーズとペインポイントの理解]][[タスク分析 (Task Analysis)]][[ユーザーシナリオの作成]][[メンタルモデルの理解]]
- 2. 設計とプロトタイピング (Design and Prototype)
[[ユーザーフローとワイヤーフレームの作成]][[コンセプトモデルの設計]][[インタラクションパターンの選択]][[インタラクティブプロトタイプの作成]](低忠実度から高忠実度へ)
- 3. テストと評価 (Test and Evaluate)
[[ユーザビリティテストによるインタラクションの検証]][[認知ウォークスルー]][[ヒューリスティック評価]][[A/Bテスト]]
- 4. 反復と改善 (Iterate and Refine)
5. インタラクションデザインのパターン MOC
5.1. 入力とデータ操作のパターン MOC
- フォームデザイン
[[テキスト入力フィールド (Text Input)]][[チェックボックス (Checkbox) vs. ラジオボタン (Radio Button) vs. トグルスイッチ (Toggle Switch)]][[ドロップダウンリスト (Dropdown List)]][[スライダー (Slider)]][[日付ピッカー (Date Picker)]][[オートコンプリート (Autocomplete)]][[段階的開示 (Progressive Disclosure)]][[インラインバリデーション (Inline Validation)]]
- ドラッグアンドドロップ (Drag and Drop)
- インプレース編集 (In-place Editing)
- データのフィルタリングとソート
- 検索パターン (Search Patterns)`
5.2. ナビゲーションパターン MOC
[[グローバルナビゲーションとローカルナビゲーション]][[タブ (Tabs)]][[パンくずリスト (Breadcrumbs)]][[アコーディオン (Accordion)]][[ウィザード (Wizard / Step-by-Step)]][[無限スクロール (Infinite Scroll) vs. ページネーション (Pagination)]][[ハンバーガーメニュー (Hamburger Menu)]][[メガメニュー (Mega Menu)]][[フッターナビゲーション]]
5.3. コンテンツと情報の提示パターン MOC
[[カード (Cards)]][[カルーセル (Carousel / Slider)]][[モーダルウィンドウ (Modal Window / Lightbox)]][[ツールチップ (Tooltip) とポップオーバー (Popover)]][[ダッシュボード (Dashboard)]][[データテーブル (Data Table)]][[タイムライン (Timeline)]]
5.4. フィードバックと通知のパターン MOC
[[トースト (Toast) / スナックバー (Snackbar)]][[通知 (Notifications)]][[プログレスバー / スピナー]][[確認ダイアログ (Confirmation Dialog)]][[アクションの状態変化 (ボタンの無効化など)]]
6. フィードバックとアフォーダンス MOC
7. マイクロインタラクション (Microinteractions) MOC
- マイクロインタラクションとは
- マイクロインタラクションの4つの要素 (Dan Saffer)
- 1. トリガー (Trigger) (インタラクションを開始するきっかけ)
- 2. ルール (Rules) (トリガーによって何が起こるかの定義)
- 3. フィードバック (Feedback) (ルールが実行されたことを伝える)
- 4. ループとモード (Loops and Modes) (インタラクションの繰り返しや状態変化)
- 効果的なマイクロインタラクションの例
[[「いいね」ボタンのアニメーション]][[プルリフレッシュ (Pull to Refresh)]][[フォーム入力時のバリデーションフィードバック]][[読み込み中のアニメーション]][[スイッチの切り替えアニメーション]]
8. 様々なプラットフォームにおけるIxD MOC
- Webアプリケーションのインタラクションデザイン
[[マウスとキーボード操作の考慮]][[ホバー状態のデザイン]][[レスポンシブデザインとインタラクション]]
- モバイルアプリケーションのインタラクションデザイン
[[タッチインターフェース (タップ, スワイプ, ピンチ)]][[画面サイズと片手操作の考慮]][[ジェスチャーベースのナビゲーション]][[プラットフォームごとのデザインガイドライン (HIG, Material Design)]]
- 音声ユーザーインターフェース (VUI - Voice User Interface) のインタラクションデザイン
[[対話設計 (Dialog Design)]][[エラーハンドリングと聞き返し]]
- MRにおけるインタラクションデザイン (ジェスチャー、視線、コントローラー)
- 物理的な製品のインタラクションデザイン (IoTデバイスなど)
9. インタラクションのプロトタイピングと評価 MOC
- インタラクションプロトタイピングの目的 (動きや振る舞いの検証)
- プロトタイピングツール
[[Figma (Smart Animate)]][[Adobe XD (Auto-Animate)]][[Principle]][[ProtoPie]][[Framer]](コードベース)
- インタラクションの評価手法
[[ユーザビリティテストにおけるタスクフローの観察]][[認知的ウォークスルーによる操作の容易さの評価]][[アニメーションやトランジションの心地よさの評価]]
10. インタラクションデザインのツールとリソース MOC
- フローチャート作成ツール (Miro, FigJam, Lucidchart)
- プロトタイピングツール (Figma, Principle, ProtoPieなど)
- 主要な書籍、ブログ、コミュニティ (About Face, The Design of Everyday Thingsなど)
- インタラクションデザインの事例集 (Dribbble, Behance, Mobbinなど)
11. インタラクションデザインのアンチパターン MOC
[[ミステリーミートナビゲーション (Mystery Meat Navigation)]](アイコンのみでラベルがない)[[フィードバックの欠如]][[一貫性のないインタラクション]][[モードエラー (ユーザーが意図しないモードにいる)]][[過剰なアニメーション]][[ユーザーのコントロールを奪う挙動]][[プラットフォームの標準的な振る舞いを無視する]]