2013 © Concent, Inc.
ユーザエクスペリエンス・デザイン・ガイド
JTF 2013: July Tech Festa
2013.07.14
坂田 一倫(@sprmari0)
株式会社コンセント
2013 © Concent, Inc.
PAGE: 1
自己紹介
sprmari0 kazumichisakata kazumichi.sakata[at]…
インタビュー記事:
【UX設計の失敗学】今年、「最高のユーザー体験」を作りたいと考...
2013 © Concent, Inc.
PAGE: 2
世界で一番売れているカメラは?
2013 © Concent, Inc.
PAGE: 3
2013 © Concent, Inc.
PAGE: 4
カメラを
セットする
シャッターを
押す
撮影した写真
を確認する
???
これまでの提供価値
2013 © Concent, Inc.
PAGE: 5
カメラを
セットする
シャッターを
押す
撮影した写真
を確認する
カメラを運ぶ
写真を
加工する
写真を
記録・共有
する
新しい提供価値
2013 © Concent, Inc.
PAGE: 6
© Ursus Wherli
「モノ」から「コト」の デザインへ
2013 © Concent, Inc.
PAGE: 7
「問題発見」から「問題解決」へ
2013 © Concent, Inc.
PAGE: 8
「製品中心」から「顧客中心」へ
2013 © Concent, Inc.
PAGE: 9
ユーザエクスペリエンス(UX)
2013 © Concent, Inc.
PAGE: 10
″ユーザと「会社、会社のサービス、商品」の相互作用の
全ての側面を含む。第一の要件は、混乱や面倒なしで顧客の
的確なニーズを満たす事。第二の要件は、所有する楽しさ、
使用する楽しさを生...
2013 © Concent, Inc.
PAGE: 11
© Google Glass
メディア、デバイス…の多重化
2013 © Concent, Inc.
PAGE: 12
ハイコンテキストなライフスタイル
2013 © Concent, Inc.
PAGE: 13
NFL Mobile Commercial
2013 © Concent, Inc.
PAGE: 14
コンテンツ
やサービス
モバイル
アプリ
タブレット
紙
メール
ブログ
SNS
ウェブ
サイト
© “Adapting Ourselves to Adaptive Content,”...
2013 © Concent, Inc.
PAGE: 15
© “User Requirements in the 21st Century,” William Hudson
誰が、いつ、どこで、どのように、なぜ?
2013 © Concent, Inc.
PAGE: 16
人間中心設計(HCD)
2013 © Concent, Inc.
PAGE: 17
2010年:ISO 92401-210の制定
UXの用語が定義され、HCDによる設計が達成すべき目標とし
て位置づけられる。
2013 © Concent, Inc.
PAGE: 18
利用と状況の把握と明示
(ユーザの要求を知る)
人間中心設計の
必要性の特定
システムが特定のユーザ及び組織の
要求事項を満足
ユーザと組織の要求事項の明示
(ユーザ要求をシステム要求...
2013 © Concent, Inc.
PAGE: 19
人間中心設計プロセス
2013 © Concent, Inc.
PAGE: 20
© “User Experience Journey Map,” Kazumichi Sakata
シナリオのビジュアライゼーション(可視化)
2013 © Concent, Inc.
PAGE: 21
© “User Experience Journey Map,” Kazumichi Sakata
When(いつ?)
Where(どこで?)
How(どのように?)
What(なにが...
2013 © Concent, Inc.
PAGE: 22
提供価値の定義
Who(誰) needs What(何を)
because Why(なぜ)
2013 © Concent, Inc.
PAGE: 23
人間中心設計手法の導入
2013 © Concent, Inc.
PAGE: 24
ユーザ調査
2013 © Concent, Inc.
PAGE: 25
ユーザ調査:
ユーザの行動や心理を把握する調査
2013 © Concent, Inc.
PAGE: 26
© “Persona,” Jason Travis
ペルソナ
2013 © Concent, Inc.
PAGE: 27
ペルソナ:
調査を基に生成された架空の顧客像
名前と写真
どんな表情をしていますか?名前は?
特徴
他人と区別される対象ペルソナの特徴は?
欲求と不満
何を求めていますか?何を不満と感...
2013 © Concent, Inc.
PAGE: 28
© “Lean ways to test your new business idea,” David Travis
ストーリーボード
2013 © Concent, Inc.
PAGE: 29
ストーリーボード:
ペルソナの利用文脈の可視化
時間
いつ、サービスやプロダクトを利用していますか?
場所
どこでサービスやプロダクトを利用していますか?
ステークホルダー
ストーリー...
2013 © Concent, Inc.
PAGE: 30
ユーザビリティテスト
2013 © Concent, Inc.
PAGE: 31
ユーザビリティテスト:
使いやすさを評価するテスト
シナリオの評価
想定したシナリオの妥当性
サイト構造の評価
導線の有効度合い、コンテンツニーズの評価
画面構成の評価
レイアウトやラ...
2013 © Concent, Inc.
PAGE: 32
開発プロセスへの導入
2013 © Concent, Inc.
PAGE: 33
ユーザビリティテスト ユーザビリティテスト
ビジュアル・デザイン、HTML制作
アプリケーション開発Better
Best
ビジュアル・デザイン、HTML制作
アプリケーション開発
ユ...
2013 © Concent, Inc.
PAGE: 34
まとめ
2013 © Concent, Inc.
PAGE: 35
ユーザ
ウェブ・
デザイン
エンジニア
PR
営業
マーケティ
ング
部署A
広告
部署C
部署B
プロデュー
サー
物流
組織・領域横断的なユーザ中心アプローチ
2013 © Concent, Inc.
PAGE: 36
どうやって、つくるか?
なにを、つくるか?
なぜ、つくるか?
誰のために、つくるか?
HCDの思考回路:
Design for Meaning, Design for User
2013 © Concent, Inc.
PAGE: 37
提供価値の定義
Who(誰) needs What(何を)
because Why(なぜ)
2013 © Concent, Inc.
PAGE: 38
Upcoming SlideShare
Loading in...5
×

ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)

18,942

Published on

Presentation about ontology of User Experience held at the July Tech Festa 2013 in Tokyo ( #techfesta ) 2013年7月14日に開催された JTF 2013: July Tech Festa で発表した「ユーザエクスペリエンス・デザイン・ガイド」のプレゼンテーション資料です。

Published in: Design
0 Comments
37 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
18,942
On Slideshare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
83
Comments
0
Likes
37
Embeds 0
No embeds

No notes for slide

ユーザエクスペリエンス・デザイン・ガイド(User Experience Design Guide)

  1. 1. 2013 © Concent, Inc. ユーザエクスペリエンス・デザイン・ガイド JTF 2013: July Tech Festa 2013.07.14 坂田 一倫(@sprmari0) 株式会社コンセント
  2. 2. 2013 © Concent, Inc. PAGE: 1 自己紹介 sprmari0 kazumichisakata kazumichi.sakata[at]… インタビュー記事: 【UX設計の失敗学】今年、「最高のユーザー体験」を作りたいと考えるディベロッパーが知るべき 3つのこと 坂田 一倫(さかた・かずみち) 株式会社コンセント ユーザエクスペリエンスアーキテクト HCD-Net 認定 人間中心設計専門家/Certified Scrum Product Owner 前職:某インターネットメディア企業にてUXデザイナーとして新規事業の 立ち上げや20サービス以上の大規模サイトリニューアルプロジェクトを担当。 ユーザエクスペリエンス設計業務を担当する人が集うコミュニティ 「ShibuyaUX」主宰、「Lean Startup Machine Tokyo」共同オーガナイザ。
  3. 3. 2013 © Concent, Inc. PAGE: 2 世界で一番売れているカメラは?
  4. 4. 2013 © Concent, Inc. PAGE: 3
  5. 5. 2013 © Concent, Inc. PAGE: 4 カメラを セットする シャッターを 押す 撮影した写真 を確認する ??? これまでの提供価値
  6. 6. 2013 © Concent, Inc. PAGE: 5 カメラを セットする シャッターを 押す 撮影した写真 を確認する カメラを運ぶ 写真を 加工する 写真を 記録・共有 する 新しい提供価値
  7. 7. 2013 © Concent, Inc. PAGE: 6 © Ursus Wherli 「モノ」から「コト」の デザインへ
  8. 8. 2013 © Concent, Inc. PAGE: 7 「問題発見」から「問題解決」へ
  9. 9. 2013 © Concent, Inc. PAGE: 8 「製品中心」から「顧客中心」へ
  10. 10. 2013 © Concent, Inc. PAGE: 9 ユーザエクスペリエンス(UX)
  11. 11. 2013 © Concent, Inc. PAGE: 10 ″ユーザと「会社、会社のサービス、商品」の相互作用の 全ての側面を含む。第一の要件は、混乱や面倒なしで顧客の 的確なニーズを満たす事。第二の要件は、所有する楽しさ、 使用する楽しさを生み出す「簡潔さと優雅さ」である。″ – ドナルド・ノーマン
  12. 12. 2013 © Concent, Inc. PAGE: 11 © Google Glass メディア、デバイス…の多重化
  13. 13. 2013 © Concent, Inc. PAGE: 12 ハイコンテキストなライフスタイル
  14. 14. 2013 © Concent, Inc. PAGE: 13 NFL Mobile Commercial
  15. 15. 2013 © Concent, Inc. PAGE: 14 コンテンツ やサービス モバイル アプリ タブレット 紙 メール ブログ SNS ウェブ サイト © “Adapting Ourselves to Adaptive Content,” Karen McGrane 様々な利用シーンの想定と設計
  16. 16. 2013 © Concent, Inc. PAGE: 15 © “User Requirements in the 21st Century,” William Hudson 誰が、いつ、どこで、どのように、なぜ?
  17. 17. 2013 © Concent, Inc. PAGE: 16 人間中心設計(HCD)
  18. 18. 2013 © Concent, Inc. PAGE: 17 2010年:ISO 92401-210の制定 UXの用語が定義され、HCDによる設計が達成すべき目標とし て位置づけられる。
  19. 19. 2013 © Concent, Inc. PAGE: 18 利用と状況の把握と明示 (ユーザの要求を知る) 人間中心設計の 必要性の特定 システムが特定のユーザ及び組織の 要求事項を満足 ユーザと組織の要求事項の明示 (ユーザ要求をシステム要求に変換する) 設計による解決策の作成 (デザインや設計案を作り込む) 要求事項に対する設計の評価 (デザインや設計案の妥当性を評価する) © ISO 9241-210 人間中心設計プロセス
  20. 20. 2013 © Concent, Inc. PAGE: 19 人間中心設計プロセス
  21. 21. 2013 © Concent, Inc. PAGE: 20 © “User Experience Journey Map,” Kazumichi Sakata シナリオのビジュアライゼーション(可視化)
  22. 22. 2013 © Concent, Inc. PAGE: 21 © “User Experience Journey Map,” Kazumichi Sakata When(いつ?) Where(どこで?) How(どのように?) What(なにが?) Why(なぜ?) 問題解決の糸口
  23. 23. 2013 © Concent, Inc. PAGE: 22 提供価値の定義 Who(誰) needs What(何を) because Why(なぜ)
  24. 24. 2013 © Concent, Inc. PAGE: 23 人間中心設計手法の導入
  25. 25. 2013 © Concent, Inc. PAGE: 24 ユーザ調査
  26. 26. 2013 © Concent, Inc. PAGE: 25 ユーザ調査: ユーザの行動や心理を把握する調査
  27. 27. 2013 © Concent, Inc. PAGE: 26 © “Persona,” Jason Travis ペルソナ
  28. 28. 2013 © Concent, Inc. PAGE: 27 ペルソナ: 調査を基に生成された架空の顧客像 名前と写真 どんな表情をしていますか?名前は? 特徴 他人と区別される対象ペルソナの特徴は? 欲求と不満 何を求めていますか?何を不満と感じますか?
  29. 29. 2013 © Concent, Inc. PAGE: 28 © “Lean ways to test your new business idea,” David Travis ストーリーボード
  30. 30. 2013 © Concent, Inc. PAGE: 29 ストーリーボード: ペルソナの利用文脈の可視化 時間 いつ、サービスやプロダクトを利用していますか? 場所 どこでサービスやプロダクトを利用していますか? ステークホルダー ストーリーの中で誰が関係してきますか?
  31. 31. 2013 © Concent, Inc. PAGE: 30 ユーザビリティテスト
  32. 32. 2013 © Concent, Inc. PAGE: 31 ユーザビリティテスト: 使いやすさを評価するテスト シナリオの評価 想定したシナリオの妥当性 サイト構造の評価 導線の有効度合い、コンテンツニーズの評価 画面構成の評価 レイアウトやラベル、リンク位置の評価
  33. 33. 2013 © Concent, Inc. PAGE: 32 開発プロセスへの導入
  34. 34. 2013 © Concent, Inc. PAGE: 33 ユーザビリティテスト ユーザビリティテスト ビジュアル・デザイン、HTML制作 アプリケーション開発Better Best ビジュアル・デザイン、HTML制作 アプリケーション開発 ユーザビリティテスト ユーザビリティテスト ユーザ定義 利用文脈定義 開発プロセスへの導入: ユーザビリティ向上のための視点を取り入れる フィード バック フィード バック
  35. 35. 2013 © Concent, Inc. PAGE: 34 まとめ
  36. 36. 2013 © Concent, Inc. PAGE: 35 ユーザ ウェブ・ デザイン エンジニア PR 営業 マーケティ ング 部署A 広告 部署C 部署B プロデュー サー 物流 組織・領域横断的なユーザ中心アプローチ
  37. 37. 2013 © Concent, Inc. PAGE: 36 どうやって、つくるか? なにを、つくるか? なぜ、つくるか? 誰のために、つくるか? HCDの思考回路: Design for Meaning, Design for User
  38. 38. 2013 © Concent, Inc. PAGE: 37 提供価値の定義 Who(誰) needs What(何を) because Why(なぜ)
  39. 39. 2013 © Concent, Inc. PAGE: 38
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×