ユーザーエクスペリエンスの分解

24,748
-1

Published on

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

No Downloads
Views
Total Views
24,748
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
211
Comments
0
Likes
155
Embeds 0
No embeds

No notes for slide

ユーザーエクスペリエンスの分解

  1. 1. ユーザーエクスペリエンスの分解 Takehisa Gokaichi m1201097@gmail.com @5kaichi
  2. 2. 1. UXとは何か?
  3. 3. User Experience ユーザー 体験・経験 サービス・製品を 利用している人 実際に見たり、聞いたり、行ったりすること。 また、それによって得られた知識や技能など。 サービス・製品を利用している人が、実際に見たり、聞いたり、行ったりすること。 また、それによって得られた知識や技能など。 言葉の意味から見るUX
  4. 4. ちまたで言われるキーワード (超抜粋) から見る UX おもてなし 直感的 気持ちいい 使いやすい わかりやすい 体験 ジャーニーマップ シナリオ コンセプトマップ サービスブループリント ワイヤーフレーム ペルソナ A/Bテスト ヒューリスティック評価 グロースハック アクティングアウト コンテクスチュアル インクワイアリー ユーザーテスト
  5. 5. 有名なダイアグラムから見るUX その1 The Elements of UX | Jasse James Garrett (2000) 元々はウェブサイトのUXとして定義されたものです。 UXを役割や作業で分解した図
  6. 6. 有名なダイアグラムから見るUX その2 UX Honeycomb | Peter Mobil (2004) Useful. As practitioners, we can't be content to paint within the lines drawn by managers. We must have the courage and creativity to ask whether our products and systems are useful, and to apply our deep knowledge of craft and medium to define innovative solutions that are more useful. Usable. Ease of use remains vital, and yet the interface-centered methods and perspectives of human-computer interaction do not address all dimensions of web design. In short, usability is necessary but not sufficient. Desirable. Our quest for efficiency must be tempered by an appreciation for the power and value of image, identity, brand, and other elements of emotional design. Findable. We must strive to design navigable web sites and locatable objects, so users can find what they need. Accessible. Just as our buildings have elevators and ramps, our web sites should be accessible to people with disabilities (more than 10% of the population). Today, it's good business and the ethical thing to do. Eventually, it will become the law. Credible. Thanks to the Web Credibility Project, we're beginning to understand the design elements that influence whether users trust and believe what we tell them. Valuable. Our sites must deliver value to our sponsors. For non-profits, the user experience must advance the mission. With for-profits, it must contribute to the bottom line and improve customer satisfaction. http://semanticstudios.com/publications/semantics/000029.php目指すべきUXの方向を表した図
  7. 7. 有名なダイアグラムから見るUX その3 UX Wheel | Magnus Revang (2007) UXの価値を生むためのプロセスと成果物を一枚で表現した図
  8. 8. 有名なダイアグラムから見るUX その4 さまざまなスキルと UX デザインの関係を示した図 Designing for Interaction | Dan Saffer (2007) 旧バージョン
  9. 9. [ISO 9241-210] ユーザエクスペリエンスとは、製品、システムまたはサービスを使用した時、 および/または使用を予測した時に生じる個人の知覚や反応 ISOの定義から見る UX その1
  10. 10. [ISO 9241-210] ユーザエクスペリエンスとは、製品、システムまたはサービスを使用した時、 および/または使用を予測した時に生じる個人の知覚や反応 ISOの定義から見る UXISOの定義から見る UX その2 UXは仕様前、使用中、使用後に起こる、ユーザーの感情、信念、嗜好、近く、生理学的・心 理学的な反応、態度、達成感のすべてを含む。 UXはブランドイメージ、見た目、機能、システムのパフォーマンス、インタラクティブシス テムのインタラクティブな振る舞いと支援機能、事前の経験から生じたユーザーの内的および 身体的状態、態度、スキルとパーソナリティ、利用状況の結果である。 ユーザーの個人的目標という観点から考えたときには、通常はUXに付随する知覚的・感情的 な側面を、ユーザービリティは含むことができる。ユーザビリティの基準を用いて、UXの諸 側面を評価できる。 安藤先生のスライドより http://www.slideshare.net/masaya0730/iso92412102010 (P15)
  11. 11. まとめ この順序で作業して この方向を目指して できあがった成果物と価値 できあがった成果物に対する仕様前、使用中、使用後の結果 ISO 9241-210 このような専門家が
  12. 12. まとめるとややこしい
  13. 13. この順序で作業して この方向を目指して できあがった成果物と価値 できあがった成果物に対する仕様前、使用中、使用後の結果 ISO 9241-210 このような専門家が UXデザイン UX UXデザインとUXを分けて話しましょう
  14. 14. UXを捉えるためのポイント 時間 UXは瞬間ではなく、「利用前」「利用中」「利用後」という 時間軸上で発生する。 結果 UX は時間軸上でユーザーの身に発生する 「からだ」「行動」「記憶」「気持ち」…などさまざまなこと。 ※ ISOの定義が今UXデザイナーの間で認識されている「UX」の定義にもっとも近い
  15. 15. User Experience ユーザーと利用対象の 出会いから別れまで ゴカイチ的 UX の捉え方 (かんたん)
  16. 16. 「ユーザビリティ」では 意味がちと狭いから UXって言おうぜ (1990年代中頃@ ) Donald Arthur Norman UX と最初に言った人は…
  17. 17. 2. UXのステージ
  18. 18. [ISO 9241-210] ユーザエクスペリエンスとは、製品、システムまたはサービスを使用した時、 および/または使用を予測した時に生じる個人の知覚や反応 時間 結果 使用を予測した時 使用した時 個人の知覚や反応
  19. 19. 使用を予測した時 使用した時 使用する 使用後に活動する 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) ステージ 行動 雑誌の 特集記事で 知る 検索して 調べる お店で 購入する プリントして 両親へ送る シェアする かっこいい 冊子にして 保管する 写真を撮る パソコンに保管する やっぱスマホよりきれい! 思い出をきれいに残せて うれしいな 作例が素敵! 箱がかっこいい欲しいなあ気持ち UXのステージ 例: デジタルカメラ
  20. 20. 使用を予測した時 使用した時 使用する 使用後に活動する 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) ステージ 行動 雑誌の 特集記事で 知る 検索して 調べる お店で 購入する プリントして 両親へ送る シェアする かっこいい 冊子にして 保管する 写真を撮る パソコンに保管する やっぱスマホよりきれい! 思い出をきれいに残せて うれしいな 作例が素敵! 箱がかっこいい欲しいなあ気持ち UX 利用対象 (UIや機能) UXのステージ
  21. 21. 使用を予測した時 使用した時 使用する 使用後に活動する 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) ステージ 行動 雑誌の 特集記事で 知る 検索して 調べる お店で 購入する プリントして 両親へ送る シェアする かっこいい 冊子にして 保管する 写真を撮る パソコンに保管する やっぱスマホよりきれい! 思い出をきれいに残せて うれしいな 作例が素敵! 箱がかっこいい欲しいなあ気持ち コンテキスト いつ だれが どこで だれと なにを どのように なぜ UXのステージ
  22. 22. 使用を予測した時 使用した時 使用する 使用後に活動する 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) ステージ 行動 雑誌の 特集記事で 知る 検索して 調べる お店で 購入する プリントして 両親へ送る シェアする かっこいい 冊子にして 保管する 写真を撮る パソコンに保管する やっぱスマホよりきれい! 思い出をきれいに残せて うれしいな 作例が素敵! 箱がかっこいい欲しいなあ気持ち 利用対象の学習 期待の発生 UXのステージ
  23. 23. 学習 ユーザビリティに影響 期待 販売と顧客満足度に影響 • 利用開始前にユーザーへ利用目的を与える • 利用開始時にすぐ迷わず使えるようにする • ユーザーとマッチするかそれ以上の期待を持たせる。 • 期待値を上げ過ぎないようにする。 使用予測時 = 利用対象を知る活動
  24. 24. 新しい概念だが視聴者が利用シーンを想像できるビデオ • 「うそ」「おおげさ」「まぎらわしい」が少ない • なにができるかわかる • 買ったあとどうすればいいかがわかる • 操作方法がわかる • 動きのなめらかさがわかる • 使うと何を得するかがわかる など。 iPhone 3G Around me 使用予測時 | 学習の例 : CM https://www.youtube.com/watch?v=T2WsaUlkO5c
  25. 25. 12:34●●●●● 100% 使用予測時 | 期待の例 : Instagram twitter で友人が Instagram で撮っ た写真を見てかっこ いいなー!と思い、 AppStore から Instagram をダウ ンロードした。 さっそくアプリを立 ち上げた。 ライブラリーの写真 を読み込む方法がわ からなかったけど、 カメラ機能で写真 撮ってフィルタをか けたら究極かっこい い写真ができた! やったね!! 12:34●●●●● 100% 12:34●●●●● 100% 12:34●●●●● 100%
  26. 26. 12:34●●●●● 100% 使用予測時 | 期待の例 : Instagram twitter で友人が Instagram で撮っ た写真を見てかっこ いいなー!と思い、 AppStore から Instagram をダウ ンロードした。 さっそくアプリを立 ち上げた。 ライブラリーの写真 を読み込む方法がわ からなかったけど、 カメラ機能で写真 撮ってフィルタをか けたら究極かっこい い写真ができた! やったね!! 12:34●●●●● 100% 12:34●●●●● 100% 12:34●●●●● 100% ギャップ 期待の発生 購入の判断に つながる 期待の検証 満足(期待どおりだったか)に つながる
  27. 27. 使用を予測した時 使用した時 使用する 使用後に活動する 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) ステージ 行動 雑誌の 特集記事で 知る 検索して 調べる お店で 購入する プリントして 両親へ送る シェアする かっこいい 冊子にして 保管する 写真を撮る パソコンに保管する やっぱスマホよりきれい! 思い出をきれいに残せて うれしいな 作例が素敵! 箱がかっこいい欲しいなあ気持ち 使用体験 (UXの中心) UXのステージ
  28. 28. 使用を予測した時 使用した時 使用する 使用後に活動する 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) ステージ 行動 雑誌の 特集記事で 知る 検索して 調べる お店で 購入する プリントして 両親へ送る シェアする かっこいい 冊子にして 保管する 写真を撮る パソコンに保管する やっぱスマホよりきれい! 思い出をきれいに残せて うれしいな 作例が素敵! 箱がかっこいい欲しいなあ気持ち ユーザーゴール UXのステージ
  29. 29. 使用 = ゴールへ向かう活動 使用 ゴール 一度使ったら終わりなのか、継続的に使用するものなのか
  30. 30. ゴールは使用時と限らない 使用中にゴールがあるパターン 使用後にゴールがあるパターン • ゲーム • ビデオの視聴 • 読書 • 学習 • 情報収集 • 親が子供の写真を両親に送り、両親に喜ん でもらう • 自慢したい出来事をFacebookに投稿し、 たくさんの「いいね」をもらう。 • クーポンを使って安く服を購入する • 旅行先の週刊天気を見て荷物を軽くする
  31. 31. 使用を予測した時 使用した時 使用する 使用後に活動する 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) ステージ 行動 雑誌の 特集記事で 知る 検索して 調べる お店で 購入する プリントして 両親へ送る シェアする かっこいい 冊子にして 保管する 写真を撮る パソコンに保管する やっぱスマホよりきれい! 思い出をきれいに残せて うれしいな 作例が素敵! 箱がかっこいい欲しいなあ気持ち ビジネスゴール UXのステージ
  32. 32. 使用を予測した時 使用した時 使用する 使用後に活動する 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) ステージ 行動 雑誌の 特集記事で 知る 検索して 調べる お店で 購入する プリントして 両親へ送る シェアする かっこいい 冊子にして 保管する 写真を撮る パソコンに保管する やっぱスマホよりきれい! 思い出をきれいに残せて うれしいな 作例が素敵! 箱がかっこいい欲しいなあ気持ち アップグレード ガチャ・魔法石 入会金 サブサービス 利用費 購入 サポート 利用費 定期的課金 従量課金 解約 UXのステージ
  33. 33. 使用を予測した時 使用した時 使用する 使用後に活動する 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) ステージ 行動 雑誌の 特集記事で 知る 検索して 調べる お店で 購入する プリントして 両親へ送る シェアする かっこいい 冊子にして 保管する 写真を撮る パソコンに保管する やっぱスマホよりきれい! 思い出をきれいに残せて うれしいな 作例が素敵! 箱がかっこいい欲しいなあ気持ち 使用後の 体験 UXのステージ
  34. 34. 使用後の体験はさまざま ゴールへ向かう ゴールと関係ない活動をする (サブサービスの利用など) サポートを受ける など...
  35. 35. 使用後の体験 : GoProの例 こんなビデオを撮りたい! アプリの「Video of the Day」やGoPro Channel 使い方がよくわかった! たくさんのチュートリアルビデオ また撮影したい! 他にもGoProは誰でも良質な作品を作ってシェアできるようなアプリを無料提供するなど、バイラルを樹幹させるためのUXになるよう工夫をしている
  36. 36. 各ステージを全体で捉えることで UXを戦略として使うことができる
  37. 37. 3. UXデザインの分解
  38. 38. UX Design ユーザーと利用対象の 出会いから別れまでを設計すること
  39. 39. UX Design どう利用するか書かれた台本を作ること
  40. 40. 台本どおりにユーザーが体験すると UX デザインは成功 タッチポイントを通してユーザーは体験する タッチ ポイント 台本 (結果) ユーザーの 体験
  41. 41. コンテキスト • いつ • どこで • だれが • だれと • なにを • どのように • どんな気持ちで • どうなった? ジャーニーマップ 台本の内容
  42. 42. 台本の作り方 リサーチ ユーザー モデリング (台本) ユーザーモデル 検証 • アクティングアウト • 競合のユーザーテスト • プロトタイピング など • ペルソナ/シナリオ • アクティビティシナリオ • ジャーニーマップ など • エスノグラフィ調査 • コンテキスチュアル インクワイアリー • ステークホルダー インタビュー など 専門家の知見
  43. 43. 台本を作る人 UXデザイナー
  44. 44. 台本を作る人 UXデザイナー を、中心に主要関係者と共に作る
  45. 45. Web系Ad 紙系Ad TV系Ad 口コミ 製品紹介 (紙/Web) 製品レビュー(Blogな ども含める) EC店舗 実店舗 EC店舗 実店舗 アプリストアのページ 配送業者 製品/サービス - 機能 - UI / インタラクション - ビジュアル - コンテンツ SNS コールセンター サポートサイト レビューサイト 関連サービス 使用を予測した時 使用した時 使用する 使用後に活動する 期待の発生 (満足できそうかどうか) 期待とのギャップの発生 (満足か不満か) 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) 価格、製品情報、製品デザイン、広告、キャンペーン、ブランドなど ユーザーゴールへの達成度、コンテンツの魅力、 使い勝手、耐久性、習熟必要性、信頼性、アクセシビリティなど • 広告ディレクター • DTPデザイナー • Webディレクター • Webデザイナー • インフォメーションアーキテクト • コピーライター • ドキュメントライター • リサーチャー • 営業 • 店員 • 個人ブロガー • UIグラフィックデザ イナー • インタラクションデ ザイナー • IA • ソフトウェアアーキ テクト • プログラマー • ユーザビリティアナ リスト • テクニカルライター • ウェブデザイナー • DTPデザイナー • サポートセンター • コールセンター • 店舗(店舗) • 個人 ステージ タッチ ポイント 専門家 手法 要素 なぜ主要関係者と共に作るのか? ペルソナ / シナリオ / ジャーニーマップ / サービスブループリント UI Blueprint / プロトタイプ ユーザーテスト A/Bテスト ヒューリスティック評価 UXはさまざまな専門性から生まれるから
  46. 46. Co-Working の重要性 ワークショップデザイン ファシリテーション チームビルディングデザインマネジメント 関わる人が多いとコミュニケーションの障壁が増える 障壁を崩すために必要なスキル
  47. 47. UXデザイナーの役割 1. リサーチ結果と専門家の知見をもとに UXの仮説をまとめること。 2. その仮説を立てる方法として 手法や成果物を効果的に利用すること。 3. 仮説を関係者に共感させ、 タッチポイントに仮説を落とし込むこと。
  48. 48. 台本どおりにユーザーが体験すると UX デザインは成功 タッチポイントを通してユーザーは体験する タッチ ポイント 台本 (結果) ユーザーの 体験
  49. 49. 実際に体験を提供するのはタッチポイント 体験を作るのはタッチポイントの設計者 タッチ ポイント
  50. 50. UXデザイナー UI設計者 台本を作る人 体験させるモノを作る人
  51. 51. UXデザイナー 統計や調査の知識 ビジネスモデルの知識 ユーザーモデルの知識 認知心理学の知識 ユーザー調査や観察のスキル 調査結果をまとめるスキル データからユーザーをモデル化するスキル 組み立てたモデルをビジュアル化するスキル チームビルディングのスキル ワークショップデザインのスキル ワークショップファシリテーションのスキル デザインマネジメントのスキル UI設計者 UIコンポーネントの知識 ビジュアルデザインの知識 プラットフォームの知識 プログラミングの知識 認知心理学の知識 人間工学の知識 アクセシビリティに関する知識 情報アーキテクチャのスキル デザインパターンを適用するスキル 動きや仕様を表現し、伝えるスキル UIをビジュアル化するスキル 文言を作成するスキル 知識やスキルの違い スキルが異なる
  52. 52. UXとUI 操作 ビジュアル UI 満足 機能 コンテンツ パフォーマンス インタラクション
  53. 53. 5. まとめ
  54. 54. User Experience ユーザーと利用対象の 出会いから別れまで ゴカイチ的 UX の捉え方 (かんたん)
  55. 55. 使用を予測した時 使用した時 使用する 使用後に活動する 検討する (能動的に知る) 購入する ダウンロードする 知る (受動的に知る) ステージ 行動 雑誌の 特集記事で 知る 検索して 調べる お店で 購入する プリントして 両親へ送る シェアする かっこいい 冊子にして 保管する 写真を撮る パソコンに保管する やっぱスマホよりきれい! 思い出をきれいに残せて うれしいな 作例が素敵! 箱がかっこいい欲しいなあ気持ち UXのステージ 例: デジタルカメラ
  56. 56. UX Design どう利用するか書かれた台本を作ること
  57. 57. 台本どおりにユーザーが体験すると UX デザインは成功 タッチポイントを通してユーザーは体験する タッチ ポイント 台本 (結果) ユーザーの 体験
  58. 58. UXとUI 操作 ビジュアル UI 満足 機能 コンテンツ パフォーマンス インタラクション
  1. A particular slide catching your eye?

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

×