1. インタラクションデザイン入門 MOC
- インタラクションデザインとは
- インタラクションデザインの定義 (人間と製品・サービスとの間の対話と振る舞いを設計する分野)
- IxDの目的 (使いやすく、効果的で、心地よい体験を創造する)
- 「インタラクション」の概念
- インタラクションデザインの歴史と主要人物
初期の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)
アイコン、タイポグラフィ、画像、図表などのグラフィック要素視覚的な階層と情報の伝達
- 3D: 物理的オブジェクト/空間 (Physical Objects or Space)
インタラクションが行われるデバイスや物理的環境 (PC, スマートフォン, マウス, キーボード)物理的なインタラクション (クリック, タップ, スワイプ)
- 4D: 時間 (Time)
ユーザーがメディアと対話する時間 (アニメーション, ビデオ, サウンド)レスポンスタイム、プログレス表示
- 5D: 行動 (Behavior)
システムの動作とユーザーの反応の連鎖他の4次元がどのように組み合わさって相互作用を生み出すか
3. インタラクションデザインの基本原則と法則 MOC
- 一貫性 (Consistency)
内的整合性と外的整合性一貫性がもたらす学習しやすさ
- 視認性 (Visibility) / 発見しやすさ (Discoverability)
利用可能な操作やシステムの状況をユーザーに明確に示す
- フィードバック (Feedback)
ユーザーのアクションに対する即時かつ適切な応答フィードバックの種類 (視覚的, 聴覚的, 触覚的)
- 制約 (Constraints)
誤った操作を防ぐための意図的な制限物理的、論理的、文化的制約
- アフォーダンス (Affordance) とシグニファイア (Signifier) (Don Norman)
アフォーダンス (オブジェクトが示唆する行為可能性)シグニファイア (アフォーダンスを伝えるための手がかり)
- マッピング (Mapping)
- 寛容性 (Forgiveness)
エラーからの回復の容易さ (アンドゥ, 確認ダイアログ)
- ユーザーの習熟度への配慮 (初心者のためのガイダンスと熟練者のためのショートカット)
- 心理学・認知科学に基づく法則
- フィッツの法則 (Fitts’s Law) (ターゲットへの移動時間)
- ヒックの法則 (Hick’s Law) (選択肢の数と意思決定時間)
- ミラーの法則 (Miller’s Law) (短期記憶の容量
7±2)
- テスラーの法則 (Tesler’s Law / 複雑性保存の法則) (システムが持つ複雑さには最小限度がある)
- 近接の法則 (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
- フィードバックの重要性 (再掲)
- フィードバックのループ (Action → Reaction → Acknowledgment)
- 即時性と明確性
- アフォーダンスとシグニファイアの設計 (再掲)
- ユーザーが「何をできるか」を直感的に伝える
- ボタンの形状、影、カーソルの変化など
- フィードフォワード (Feedforward)
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)エラーハンドリングと聞き返し
- AR/VR/MRにおけるインタラクションデザイン (ジェスチャー、視線、コントローラー)
- 物理的な製品のインタラクションデザイン (IoTデバイスなど)
9. インタラクションのプロトタイピングと評価 MOC
- インタラクションプロトタイピングの目的 (動きや振る舞いの検証)
- プロトタイピングツール
Figma (Smart Animate)Adobe XD (Auto-Animate)PrincipleProtoPieFramer (コードベース)
- インタラクションの評価手法
ユーザビリティテストにおけるタスクフローの観察認知的ウォークスルーによる操作の容易さの評価アニメーションやトランジションの心地よさの評価
10. インタラクションデザインのツールとリソース MOC
- フローチャート作成ツール (Miro, FigJam, Lucidchart)
- プロトタイピングツール (Figma, Principle, ProtoPieなど)
- 主要な書籍、ブログ、コミュニティ (About Face, The Design of Everyday Thingsなど)
- インタラクションデザインの事例集 (Dribbble, Behance, Mobbinなど)
11. インタラクションデザインのアンチパターン MOC
ミステリーミートナビゲーション (Mystery Meat Navigation) (アイコンのみでラベルがない)フィードバックの欠如一貫性のないインタラクションモードエラー (ユーザーが意図しないモードにいる)過剰なアニメーションユーザーのコントロールを奪う挙動プラットフォームの標準的な振る舞いを無視する