ユーザー エクスペリエンス デザイン ～UX をデザインする手法とプロセス～ セッション ID: T6-310 ユーザー エクスペリエンス デザイン ～UX をデザインする手法とプロセス～ マイクロソフト株式会社 デベロッパー & プラットフォーム統括本部 UX Evangelist 川西 裕幸

セッションの目的とゴール Session Objectives and Takeaways UX デザインの手法とプロセスを理解いただく セッションのゴール UX デザインを設計プロセスに適用する UX の必要性、重要性を知る UX デザインとは何かを知る UX デザインの有用性を知る WPF、Silverlight、Expression、Visual Studioについては話さない

アジェンダ 背景 ユーザー要件 UX デザインのプロセス まとめ

背景

背景 1 最新の RIA テクノロジーやツールを使うだけで、優れた UX のサービス・製品が開発できるわけではない ユーザーを代弁し、ユーザーの満足に責任を持つ役割が必要

背景 2 TechEd 2008 T2-311 UX の重要性・必要性は分かったが、 ソフトウェア開発における ユーザー エクスペリエンス戦略 UX の重要性・必要性は分かったが、 どうすればよいのか? 必要な人、組織、手法、プロセス? 手伝ってくれる会社・人は?

なぜ UX デザインが必要なのか ソフトウェアはアフォーダンスを持たない 設計者・開発者はユーザーの代弁者ではない 適切なデザインなしではユーザーが混乱する 設計者・開発者はユーザーの代弁者ではない ふるまいと、その背後にあるニーズやゴールが分からない 使いにくいUIにしようと考えている開発者などいないが、納期とバグ対策のほうが大事

UX のメリット 顧客企業にとって SI・開発会社にとって 費用対効果 (ROI) 製品・サービスの競争力 開発コスト・リスクの削減 品質向上 生産性向上 コスト削減 トレーニング、サポート SI・開発会社にとって 製品・サービスの競争力 サービスはコモディティ化 開発コスト・リスクの削減 使えない、使われないというリスクを軽減 実装前のフィードバック反映、イテレーションが可能 ユーザー操作不具合による実装終盤の手戻りを削減

しかし UX デザインは「銀の弾」ではない UX はコンテキスト依存 UI デザイン時の「なぜ? 」に答えるいとぐちを提供

ユーザー要件

ユーザー要件と UX デザイン ビジネス 要件 ユーザー 要件 技術 要件 経営者 企画 アーキテクト プログラマー UX デザイン 製品 サービス ビジネス 要件 ユーザー 要件 技術 要件 経営者 企画 アーキテクト プログラマー UX デザイン

実装モデルと脳内モデル [Alan Cooper] 悪い 良い 実装モデル 表現モデル 脳内モデル 技術を反映している ユーザーの視点を 反映している ユーザーに実装モデルを見せないように しなければならない ユーザーは背後にある仕組みに興味はない

ユーザーと顧客 「ユーザー」は実際に製品・サービスを使う人 「顧客」は購入する人 必ずしも同一のふるまいやゴールを持たない

UX デザインのプロセス ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ

UX デザイン? ユーザー調査 プロトタイプ インタラクション Lo-Fi, Hi-Fi UX デザイン ≠ ビジュアル デザイン、グラフィック デザイン UX デザイン ≠ ガイド ライン、テンプレートの作成・適用 UX デザイン ≠ ユーザーの要求するものをすべて配置

SDLC と UX デザイン UX デザイン 企画・要件 設計 実装 テスト 出荷 保守 UI 設計 UI デザイン

UX デザイン プロセス UX デザイン ユーザー モデリング ユーザー要件 タスク フロー ユーザビリティ テスト スケッチ プロトタイプ ビジネス要件 技術要件 UX デザイン インタラクション デザイン ユーザー調査 ユーザー モデリング ユーザー要件 タスク フロー ユーザビリティ テスト スケッチ ビジュアル デザイン プロトタイプ 実装開発

ユーザー調査 ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ

ユーザー調査で明らかにすること ユーザーのゴール、モチベーション ユーザーのふるまいパターン ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ

ユーザー調査手法 ユーザー インタビュー フォーカスグループ フィールドワーク (エスノグラフィー) アンケート カードソート ユーザビリティ テスト コンテクスチュアル インクワイアリー ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ

ユーザー モデリング ペルソナとシナリオ ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ

ペルソナ 仮想的な個人を作成 調査データをグループ化 複数のペルソナ モチベーション ゴール 関心 期待 行動パターン 経験 優先順位をつける ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ

シナリオ ユーザーのプロフィール、使用する環境、ある目的を達成するためのプロセスとその結果などを「物語風」に描き出す 調査データのコンテキスト (文脈) を保持 ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ

タスク フロー コンテキスト シナリオ ストーリーボード ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ

タスク フロー ペルソナのシナリオに必要なすべての流れ メイン タスク フロー サブ タスク フロー ユーザー 調査 ユーザー モデリング スケッチ プロトタイプ

スケッチ スケッチとナビゲーション ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ

スケッチ 各タスクに必要な機能とデータを配置 スケッチはアイデアを確認するため ユーザー 調査 ユーザー モデリング タスク フロー プロトタイプ

ナビゲーション 複数のスケッチが必要なとき、その遷移 ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ

プロトタイプ Lo-Fi と Hi-Fi ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ

Hi-Fi と Lo-Fi プロトタイプはレイアウトとふるまいを確認するため 手法 低忠実 (Lo-Fi): ワイヤーフレーム 紙のモックアップ HTML Power Point Visio Blend Sketch Flow ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ

ユーザビリティ テスト 検証、修正のためのテスト ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ

ユーザビリティ テスト ユーザーに使ってもらい、ユーザビリティ上の問題を発見する 紙 ワイヤーフレーム プロトタイプ ユーザー 調査 ユーザー モデリング タスク フロー スケッチ プロトタイプ

まとめ

ユーザー エクスペリエンス デザイン ユーザー要件の責任者を任命してください UX デザインを設計プロセスに導入してください UX は顧客に ROI を生む UX は開発者のリスクを軽減 UX は製品・サービスの差別化

UX デザイン プロセス UX デザイン ユーザー モデリング ユーザー要件 タスク フロー ユーザビリティ テスト スケッチ プロトタイプ ビジネス要件 技術要件 UX デザイン インタラクション デザイン ユーザー調査 ユーザー モデリング ユーザー要件 タスク フロー ユーザビリティ テスト スケッチ ビジュアル デザイン プロトタイプ 実装開発

関連セッション 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 弾

参考資料 http://www.microsoft.com/japan/powerpro/projectux/ 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/

参考資料 (続き) 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

UX デザイン ワークショップ マイクロソフト Tech Fielders セミナー 第1回 7/16 第2回 10/15 予定 時間 項目 内容 10:00 – 10:30 概要 ワークショップの進め方、 UXデザインの必要性と概要 10:30 – 12:30 ユーザー調査 ペルソナ コンテクスチャル インクワイアリー ユーザー モデリング グループ内でインタビュー（他己紹介） ペルソナ作成 12:30 – 13:30 Lunch   13:30 – 15:00 タスクフロー ペルソナ発表 タスクフロー作成 15:00 – 15:15 Break 15:15 – 16:45 スケッチ スケッチ作成、ナビゲーション マップ 16:45 – 17:00 17:00 – 18:00 発表とまとめ 各グループ5分発表＋5分質疑応答

UX の系譜 工業デザイン Web 2.0 HCI ユーザー エクスペリエンス マーケティング ペルソナ ドナルド A ノーマン エルゴノミクス ユーザー中心設計 工業デザイン ペルソナ マーケティング インタラクション デザイン Web 2.0 ドナルド A ノーマン ユーザビリティ HCI

ユーザー エクスペリエンスの定義 (ISO) 製品・サービス・環境との対話操作の結果による、あるいはそれによって予期される、ユーザーの感動、信念、好み、ふるまい、成果のすべて ISO 9241-210: 2010 人間・システム対話操作におけるエルゴノミクス Part210: インタラクティブシステムのための人間中心設計

詳しくは、9月2日に”MSDNオンライン”上に公開される 【予告】9月2日よりスタート！ 『Windows 7 アプリ投稿キャンペーン』 Windows 7 の最新機能を 実装したアプリケーションを大募集！！ 投稿いただいたアプリケーションはマイクロソフトサイトでご紹介 抽選で素敵な 『開発快適グッズ』 もプレゼント!! 詳しくは、9月2日に”MSDNオンライン”上に公開される キャンペーンページをチェック！

ご清聴ありがとうございました。 T6-310 アンケートにご協力ください。

© 2010 Microsoft Corporation. All rights reserved © 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.