Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

なぜなに?ユーザエクスペリエンスマップ(実践編)

実際に、ユーザエクスペリエンスマップ(UXマップ)を作るときの手順や考え方などをまとめてみました。スライド中のマップが見にくいという人用に別途、マップをPDFで書きだしたので興味があればどうぞ(https://www.dropbox.com/s/wggsgysscta5mnt/uxmap_cooking_20130317.pdf)

なお、UXマップの概要は別スライドにまとめています(http://www.slideshare.net/vistawalk/userexperiencemap)

  • Login to see the comments

なぜなに?ユーザエクスペリエンスマップ(実践編)

  1. 1. 実践編 なぜなに? ユーザエクスペリエンスマップ Hashimoto Naoki中央線UX vistawalk@gmail.com
  2. 2. 考えたいことUXマップって •  What なに? •  Why なんで作るん? •  How どうやって作るん? ←ココに答えを出したい
  3. 3. 前置きここで紹介するUXマップの作り方は、いろいろあるうちのやり方の一つです。これでやった方が必ずいいよ!というわけではないです すし… いろんなUXマップがありまとはいってもどうやんの?という人のために、まずは一つのやり方をご紹介してみます
  4. 4. まずは話を始める前に試しに作ってみたものを紹介(テーマ:毎日の料理)
  5. 5. まずは話を始める前に試しに作ってみたものを紹介(テーマ:毎日の料理) 利用段階 ユーザ・ ユーザゴール タスクフロー (行動・問題・思考・懸念点) 感情レベル ステークホルダー また、後で 利用チャネル 説明します
  6. 6. UXマップを作るプロセス (素案) 描くテーマと チーム内 現状体験の 理想体験の 範囲の整理 インタビュー 可視化 可視化 1 2 3 4
  7. 7. 1. テーマと範囲の整理範囲について:あるトピックに関するユーザのひとつなぎの体験であること。事業者視点で設定すると狭く、かつ前後の文脈が抜け落ちやすくなる 例)友だちとの旅行 集まって 前日 旅行を お土産 写真 きっかけ 計画作成 準備 楽しむ ばなし 見返す 旅行プランを売るアプリに役立てたいので、 ここだけ…ってのは本来的にはNG
  8. 8. 1. テーマと範囲の整理範囲について:ざっくりでいい、というか仮くらいで。話してみて合ってなかったら後で変えてけばいいのです。
  9. 9. 2. チーム内インタビューa. チーム内でテーマに関して話し合ってみよう•  本来的にはユーザから直接、過去の体験を 引き出すことが望ましいです(少数でもい いので…)•  チーム内でさきほどのテーマと範囲につい て体験談を話しあってみましょう
  10. 10. 2. チーム内インタビューa. チーム内でテーマに関して話し合ってみよう 急に話し合って と言われても…質問例:•  最近、○○したのはいつ?•  ○○しようと思ったのはどうして?•  ○○した時の苦労は? •  予想してなかったけど、これはたいへんだった という想い出は? •  できるかどうかは抜きにしてこういうことがで きればというのは?•  逆に○○して一番良かったのは?インタビュー技法については詳しくは以下で。樽本 徹也『アジャイル・ユーザビリティ ―ユーザエクスペリエンスのためのDIYテスティング―』,オーム社,2012
  11. 11. 2. チーム内インタビューa. チーム内でテーマに関して話し合ってみようちゃんと知るために掘り下げる:?と少しでも思ったところは遠慮せず、どうして?と掘り下げて聞いてみる。その人の体験に共感して、自分が後で説明できるくらいに。 旅行ガイドブックも持って行ったんですけど例) そんなに使わなかったですねー あれ?さきほど、計画時に行きたいところにたくさん印をつけて いたと仰ってましたけど、結局それは使わなかったのですか? 2種類持っていったんですよね。計画の時に使った A4くらいのものと持ち歩きやすい新書サイズの2つ でも、現地で使った新書サイズのものには 街歩きに必要な情報があんまり載ってなくて… その「街歩きに必要な情報」ってのは?
  12. 12. 2. チーム内インタビューa. チーム内でテーマに関して話し合ってみよう聞く、書きだす:•  時間内に一人ずつマンツーマンでインタビュー•  ただ、聞きながら内容を書き出すのはインタ ビューのプロでもハード•  チーム内に筆記役を決めて、付箋にガシガシ書き だしてもらうのがオススメ•  行ったこととその際の 感情・問題は別の色に しておくと整理しやす いです
  13. 13. 2. チーム内インタビューa. チーム内でテーマに関して話し合ってみよう焦点を定める:•  ひと通りインタビューが終了したら、誰の内容を ベースに体験を考えるか決める。誰のどんな体験 を考えるのか明確にするため。
  14. 14. 2. チーム内インタビューb. 簡単なペルソナを設定する誰に向けてデザインするの?•  今回だとベースにした人が目の前にいると思いま すが、他チームに伝えるために簡易的なペルソナ があると伝えやすいです。 ※対象とするユーザの典型的な  特徴を記したもの •  これが主題ではないですし、 ターゲットユーザ像に具体的な 想像がしやすい情報を肉付けす る程度でOK
  15. 15. 2. チーム内インタビューb. 簡単なペルソナを設定する冒頭の毎⽇日の料料理理のマップづくりで対象としたユーザ•  独⾝身、⼀一⼈人暮らし。•  都内在住。⾷食材はスーパーで調達。スーパー⾃自体は24Hオープン•  冷冷蔵庫は単⾝身者⽤用(140L)、IHコンロが1⼝口ある•  社会⼈人、仕事が忙しく8-‐‑‒9時くらいに退勤•  帰ってから料料理理を始める。9-‐‑‒10時くらいから。•  できるだけ短時間で美味しいものが作りたい•  外⾷食ではなく⾃自分で作りたいと思っている •  外⾷食だけだと飽きてくるから •  ⾃自分の好きなものを好きに⾷食べたい •  ⼈人間的で⽣生活しているという充実感がある •  料料理理は達成感があるので好き
  16. 16. 3. 現状体験の可視化 インタビューが終わったら内容をマップにまとめていきましょう a.  書き出したタスクや感情・問題を時系列に並べる b.  タスクの固まりに名前(フェーズ)をつける c.  使う道具(チャネル)を記載する d.  関わる人(ステークホルダー)を記載する e.  感情の揺れ動きを曲線で表現する f.  自社・競合他社の担当領域を明確にし、達成度を評価する b a e d c
  17. 17. 3. 現状体験の可視化a. 書きだしたタスクや感情・問題を時系列に並べ替える 行動と感情・問題点が対になるよう に並べていきます •  問題点を分けているのは、後で各問 題を解消する改善案を考える際にわ かりやすくするため •  感情・懸念点を分けているのは、実 装の際の参考材料として参照しやす くするため
  18. 18. 3. 現状体験の可視化b. タスクの固まりに名前(フェーズ)をつける 最初に考えた範囲から、 •  新たに出てきたところに名前を つけて •  行動がほとんど無いところは取 り除きます
  19. 19. 3. 現状体験の可視化c. 使う道具(チャネル)を記載する •  場所、道具名、サイト/サービス名を書き出し ます、スーパーなどリアルなものも含む •  それぞれの行動がどういう場所で、何を使って やっているのか文脈を明らかにします
  20. 20. 3. 現状体験の可視化d. 関わる人(ステークホルダー)を記載する •  各行動での登場人物を書き出します •  (この例だと一人なんで意味ないですが…) •  行動が一人でするのか、複数人でするのか、複数人だ としたら誰が関わるのかなど、行動の文脈を明らかに します
  21. 21. 3. 現状体験の可視化e. 感情の揺れ動きを曲線で表現する •  感情の揺れ動きを書いておきます。揺れ動きがあるところには、 なぜそうなっているのか、ユーザの言葉で一言言わせておくと、 わかりやすいです •  タスクフローだけだとドライな感じですが、感情曲線があると、 書いた体験に魂が入ったように生き生きとしたものに見えます •  また、問題がどこにあるのかを把握する点でも重要です(後述)
  22. 22. 3. 現状体験の可視化e. 自社・競合他社の担当領域を重ねあわせ、達成度を評価する 以下のように、自社でどれくらいユーザ行動をサポートできている かを行動を色別に囲って示します。 ユーザの行動を十分に ユーザの行動の 現在、サービスを提供 サポートできている サポートは不十分である していない
  23. 23. 4. 理想体験の可視化 現状体験が見えたら、それをどう良くしていくかを考えます a.  どのエリアの改善に取り組むかを考え、各エリアに対し、改善 方針を付箋で貼っていきます b.  (補足として)各改善案のUIイメージを必要に応じて書きます c.  改善後の感情曲線を描きます d.  (検索結果一覧、詳細など)画面単位で構成図を書き、対応す る行動郡にぶらさげます
  24. 24. 4. 理想体験の可視化a. どのエリアの改善に取り組むかを考え、改善方針を付箋で貼っていく問題の範囲をどこに置くか•  局所的に負荷が高いタスクがある  → その部分を集中的にサポート・改善する•  全体を通じて負荷が高すぎて、そもそもユーザがやる気 なくすレベル…  → 構造的な問題を捉えたうえで、改善策を考える(コン シェルジュ的な人的サービスを提供するとか)•  感情曲線があると、問題が局所的なのか、全体に及ぶの かわかりやすいです
  25. 25. 4. 理想体験の可視化b. 各改善案のUIイメージを必要に応じて書きます 切切ったり、つけこんだ いちいちスクロールして、 りなど、⾷食材の下ごし 材料料や調味料料を確認しな らえをする いといけないのが⾯面倒。 「★のタレを混ぜる」な   ど    •  イメージがわかりづらい部分は書いておきます•  デザインで載せてますが、スケッチレベルのほうがいいです。というか、 補足なんでむしろそうしてください。
  26. 26. 4. 理想体験の可視化d. 画面単位で構成図を書き、対応する行動郡にぶらさげます 検索索結果⼀一覧 検索索結果詳細 ※イメージです
  27. 27. 最終形態だけ見せても、初めての人はわかりにくいと思うの運用での工夫 で、その点に配慮するなら、透明フィルムを重ねるようにし て、各層毎に見られるようにしておくといいかも… •  •  •  •  •  UI層 理想体験層 現状体験層

×