Transcript UX デザイン - Microsoft
セッション ID: T6-310
ユーザー エクスペリエンス デザイン
～UX をデザインする手法とプロセス～ マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 UX Evangelist 川西 裕幸
4
アジェンダ
背景 ユーザー要件 UX デザインのプロセス まとめ
5
背景
背景 1
最新の RIA テクノロジーやツールを使うだけで、 優れた UX のサービス・製品が開発できるわけ ではない 6 UX をデザインするためのプロセスとスキルが 必要 ユーザーを代弁し、ユーザーの満足に責任を 持つ役割が必要
7
背景 2
TechEd 2008 T2-311 ソフトウェア開発における ユーザー エクスペリエンス戦略 UX の重要性・必要性は分かったが、 どうすればよいのか?
必要な人、組織、手法、プロセス?
手伝ってくれる会社・人は?
8
なぜ UX デザインが必要なのか
ソフトウェアはアフォーダンスを持たない 適切なデザインなしではユーザーが混乱する 設計者・開発者はユーザーの代弁者ではない ふるまいと、その背後にあるニーズやゴールが分か らない 使いにくいUIにしようと考えている開発者などいない が、納期とバグ対策のほうが大事
9
UX のメリット
顧客企業にとって 費用対効果 (ROI) 品質向上 生産性向上 コスト削減 トレーニング、サポート SI・開発会社にとって 製品・サービスの競争力 サービスはコモディティ化 開発コスト・リスクの削減 使えない、使われないというリスクを軽減 実装前のフィードバック反映、イテレーションが可能 ユーザー操作不具合による実装終盤の手戻りを削減
10
しかし
UX デザインは「銀の弾」ではない UI デザイン時の「なぜ? 」に答えるいとぐちを提供 UX はコンテキスト依存 客観的に絶対に正しい UX など存在しない
11
ユーザー要件
12
ユーザー要件と UX デザイン
ビジネス 要件 経営者 企画 アーキテクト プログラマー UX デザイン 製品 サービス 技術 要件 ユーザー 要件
実装モデルと脳内モデル
[ Alan Cooper ] 13 実装モデル 技術を反映している 悪い 良い 表現モデル 脳内モデル ユーザーの視点を 反映している ユーザーに実装モデルを見せないように しなければならない ユーザーは背後にある仕組みに興味はない
14
ユーザーと顧客
「ユーザー」は実際に製品・サービスを使う人 「顧客」は購入する人 必ずしも同一のふるまいやゴールを持たない
UX デザインのプロセス
15 ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ
UX デザイン?
ユーザー調査 プロトタイプ インタラクション Lo-Fi, Hi-Fi 16 UX デザイン ≠ ビジュアル デザイン、グラフィック デザイン UX デザイン ≠ ガイド ライン、テンプレートの作成・適用 UX デザイン ≠ ユーザーの要求するものをすべて配置
17
SDLC と UX デザイン
保守 企画・要件 設計 UX デザイン UI 設計 出荷 実装 テスト UI デザイン
UX デザイン プロセス
18 ビジュアル デザイン ユーザー モデリング タスク フロー スケッチ プロトタイプ 実装開発 ユーザー要件 ユーザビリティ テスト
ユーザー調査
19 ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ
ユーザー調査で明らかにすること
ユーザーのゴール、モチベーション ユーザーのふるまいパターン 20 ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ
ユーザー調査手法
ユーザー インタビュー フォーカスグループ フィールドワーク (エスノグラフィー) アンケート カードソート ユーザビリティ テスト コンテクスチュアル インクワイアリー 21 ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ
ユーザー モデリング
ペルソナとシナリオ 22 ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ
ペルソナ
23 仮想的な個人を作成 調査データをグループ化 モチベーション ゴール 関心 期待 行動パターン 経験 複数のペルソナ 優先順位をつける ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ
シナリオ
ユーザーのプロフィール、使用する環境、ある 目的を達成するためのプロセスとその結果など を「物語風」に描き出す 調査データのコンテキスト (文脈) を保持 24 ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ
タスク フロー
コンテキスト シナリオ ストーリーボード 25 ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ
タスク フロー
ペルソナのシナリオに必要なすべての流れ メイン タスク フロー サブ タスク フロー 26 ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ
スケッチ
スケッチとナビゲーション 27 ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ
スケッチ
各タスクに必要な機能とデータを配置 スケッチはアイデアを確認するため 28 ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ
ナビゲーション
複数のスケッチが必要なとき、その遷移 29 ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ
プロトタイプ
Lo-Fi と Hi-Fi 30 ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ
Hi-Fi と Lo-Fi
31 プロトタイプはレイアウトとふるまいを確認する ため 低忠実 (Lo-Fi): ワイヤーフレーム 高忠実 (Hi-Fi): プロトタイプ 手法 紙のモックアップ HTML Power Point Visio Blend Sketch Flow ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ
ユーザビリティ テスト
検証、修正のためのテスト 32 ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ
ユーザビリティ テスト
ユーザーに使ってもらい、ユーザビリティ上の 問題を発見する 紙 ワイヤーフレーム プロトタイプ 33 ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ
34
まとめ
35
ユーザー エクスペリエンス デザイン
ユーザー要件の責任者を任命してください UX デザインを設計プロセスに導入してください UX は顧客に ROI を生む UX は開発者のリスクを軽減 UX は製品・サービスの差別化
UX デザイン プロセス
36 ビジュアル デザイン ユーザー モデリング タスク フロー スケッチ プロトタイプ 実装開発 ユーザー要件 ユーザビリティ テスト
37
関連セッション
T6-304：Expression Blend 4 でデザインする Silverlight 4 アプリケーション T7-401：Windows API Code Pack によるアプリケーション 開発 ～ より便 利な Windows 7 対応アプリを構築するには ～ T7-404：Windows Presentation Foundation 4 ～ControlTemplate と Parts & States モデルによるカスタム コントロールの作り方～ T6-303：Silverlight 4 のブラウザー外実行 徹底解説 第 2 弾
38
参考資料
Larry Constantine 使いやすいソフトウェア, ISBN 4-320-09746 Alan Cooper About Face 3 インタラクションデザインの極意 , ISBN 4-04-867245-0 Dan Saffer インタラクションデザインの教科書 , ISBN 4-8399-2238-2 Project UX http://www.microsoft.com/japan/powerpro/projectux/ 川西 裕幸のブログ http://blogs.msdn.com/hiroyuk/
39
参考資料 (続き)
Kim Goodwin Designing for the Digital Age, ISBN 0-470-22910 Anderson Effective UI, ISBN 0-596-15478-3 Russ Unger UX Design, ISBN 0-321-60737-6 Bill Buxton Sketching User Experience, ISBN 0-12-374037-3 Randolph G. Bias Cost-Justifying Usability, ISBN 0-12-095811-2
40
UX デザイン ワークショップ
マイクロソフト Tech Fielders セミナー 第1回 7/16 第2回 10/15 予定 時間 10:00 – 10:30 10:30 – 12:30 12:30 – 13:30 13:30 – 15:00 15:00 – 15:15 15:15 – 16:45 16:45 – 17:00 17:00 – 18:00 項目 概要 ユーザー調査 ペルソナ Lunch タスクフロー Break スケッチ Break 発表とまとめ 内容 ワークショップの進め方、 UXデザインの必要性と概要 コンテクスチャル インクワイアリー ユーザー モデリング グループ内でインタビュー（他己紹介） ペルソナ作成 ペルソナ発表 タスクフロー作成 スケッチ作成、ナビゲーション マップ 各グループ5分発表＋5分質疑応答
UX の系譜
HCI ユーザビリティ 41 ドナルド A ノー マン ユーザー エクスペリエンス 工業デザイン エルゴノミクス ユーザー中心設計 ユーザー エクスペリエンス ペルソナ マーケティング インタラクション デザイン Web 2.0
42
ユーザー エクスペリエンスの定義 (ISO)
製品・サービス・環境との対話操作の結果による、 あるいはそれによって予期される、ユーザーの感 動、信念、好み、ふるまい、成果のすべて ISO 9241-210: 2010 人間・システム対話操作におけるエルゴノミクス Part210: インタラクティブシステムのための人間中心設計
Windows 7
の最新機能を 実装したアプリケーションを 大募集！！ 投稿いただいたアプリケーションは マイクロソフトサイトでご紹介 詳しくは、
9
月
2
日に
” ”
上に公開される キャンペーンページをチェック！
ご清聴ありがとうございました。
T6-310
アンケートにご協力ください。
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.