Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige

Hier ansehen

1 von 154 Anzeige

プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回

Herunterladen, um offline zu lesen

2022年9月27日 クリーク・アンド・リバー社でのUXデザイン基礎セミナー第4回 「プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回」のスライドです。ユーザビリティテストとプロトタイピングの手順をていねいに解説するとともに、じっさいに2名のユーザーを会場にお招きし、公開でユーザビテリィテストをします。
公開ユーザビリティテストの題材として、英会話アプリ 「Langaku(ランガク)
https://langaku.app/ 」 を運営するMantra株式会社さまのご協力をいただきました。

【著作権表示】
・本Figma/FigJamのデータは英会話アプリ「Langaku」のユーザビリティテストのために作成したものです。英会話アプリ「Langaku」の画面の著作権はMantra株式会社に帰属します。
・本Figma/FigJamのデータには英会話アプリ「Langaku」の画面キャプチャを通じて、以下の漫画が引用されています。これらの漫画の著作権は著作者に帰属します。
・マッシェル -MASHLE-, 甲本一/集英社
・SPY×FAMILY, 遠藤達哉/集英社

2022年9月27日 クリーク・アンド・リバー社でのUXデザイン基礎セミナー第4回 「プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回」のスライドです。ユーザビリティテストとプロトタイピングの手順をていねいに解説するとともに、じっさいに2名のユーザーを会場にお招きし、公開でユーザビテリィテストをします。
公開ユーザビリティテストの題材として、英会話アプリ 「Langaku(ランガク)
https://langaku.app/ 」 を運営するMantra株式会社さまのご協力をいただきました。

【著作権表示】
・本Figma/FigJamのデータは英会話アプリ「Langaku」のユーザビリティテストのために作成したものです。英会話アプリ「Langaku」の画面の著作権はMantra株式会社に帰属します。
・本Figma/FigJamのデータには英会話アプリ「Langaku」の画面キャプチャを通じて、以下の漫画が引用されています。これらの漫画の著作権は著作者に帰属します。
・マッシェル -MASHLE-, 甲本一/集英社
・SPY×FAMILY, 遠藤達哉/集英社

Anzeige
Anzeige

Weitere Verwandte Inhalte

Weitere von Yoshiki Hayama (20)

Aktuellste (20)

Anzeige

プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう! | UXデザイン基礎セミナー 第4回

  1. 1. プロトタイピングとユーザビリティテストで 「UXデザイン」を練りあげよう︕ 2022年9⽉27⽇(⽕) ⽇本ウェブデザイン株式会社 / HCD-Net認定 ⼈間中⼼設計専⾨家 ⽻⼭ 祥樹 @storywriter 1 Zoomの チャットで いっしょに 盛りあがってね Twitterの ハッシュタグは #CR社 画⾯キャプチャ 投稿OK︕ UXデザイン基礎セミナー 第4回
  2. 2. Zoomの「チャット」で盛りあがろう︕ 2 チャット Q&Aに 投稿したものは 質疑応答で 答えます Zoom のチャットへ どんどん書いてね︕ (Twitter感覚で) Q&A 「全員」 で送信︕
  3. 3. Zoomの「チャット」で盛りあがろう︕ 3 第1回 第2回 さいしょに「Zoomのチャットに投稿する練習」をしています︕ 今回はどうしようかなと思いまして・・・ 第3回
  4. 4. 4 そ の ハ ン カ チ の せ い で 悲 し さ が 伝 わ ら な い !!! も う イ ヤ こ ん な 生 活 耐 え ら れ な い !! !!
  5. 5. 「全員」で送信 Zoomの「チャット」で盛りあがろう︕ 5 ぬぬぬぬぬぬぬぬ ぬぬぬぬぬぬぬぬ ぬぬぬぬ 練習 ・・・と投稿してみよう!!
  6. 6. 6 ぐ ば っ !!!! そ の 男 に 人 質 の 価 値 は ね ━━━━━ !!!!
  7. 7. ⽻⼭ 祥樹 @storywriter 7 ⽇本ウェブデザイン株式会社 代表取締役CEO 使いやすいプロダクトをつくる専⾨家 HCD-Net認定 ⼈間中⼼設計専⾨家 Web業界に22年、AIシステムのプロダクトマネージャーとUXデザインを5年 主な実績など 2009年 ⽇経パソコン 企業サイトランキング2009 ⽇本の主要企業696サイト中、ユーザビリティ/アクセシビリティ分野で第3位 2011年 Webユーザビリティランキング2011 企業サイト編 ⽇本の⼤⼿企業150サイト中、第4位 主な専⾨分野 ユーザーエクスペリエンス、⼈間中⼼設計、情報アーキテクチャ、アクセシビリティ、ライター
  8. 8. 8 これまでのあらすじ
  9. 9. U X デ ザ イ ン の 知 識 か ? 欲 し け り ゃ く れ て や る ぜ … 探 し て み ろ こ の 世 の 全 て を そ こ に 置 い て き た
  10. 10. 10 “UXデザイン” や “UXリサーチ” とは ⾒た⽬のデザインのことではなく ユーザーインタビューやユーザビリティテストをつかって ユーザーの深い⼼理を突きとめる専⾨技術
  11. 11. 11 註1: フォードはこの発⾔をしていない、という説もある。 もし私が顧客に何がほしいかを聞いていたら、 彼らは「もっと速い⾺がほしい」と答えただろう。 ヘンリー・フォード(註1) “ ” ユーザーに話を聞いていては ユーザーが本当にほしいモノは わからないってコト︕︖ じゃあなんで ユーザーの声を聞け っていうの︕︖
  12. 12. ユーザーの声を聞かない コンセプトにあう ユーザーの声だけ聞く ユーザーの声を聞いて 本当のニーズは 「A地点からB地点へ 速く移動したい」 のだと掘り下げて ⾃動⾞をつくる 「もっと速い⾺がほしい」と⾔われたらどうするか 12 「ユーザーに⾔われたままやること」と「ユーザーのニーズに応えること」は異なります。 「もっと速い⾺がほしい」と⾔われたとき、最初にすべきは「なぜですか︖」とユーザー に問いかけることです。
  13. 13. 「ユーザーはほしいものを⾔語化できない」をかいくぐる 13 ユーザーは「⾺しか知らない」ので、訊いても「⾺」の話しか出てきません。本当の ニーズが「⾃動⾞」にあっても、⾔語化できないのです。会話から本当のニーズを⾒ つけるには、ほしいものを訊くのではなく、⾏動の⽬的を訊きます。 もっと速い⾺ がほしい ⾃動⾞ なぜ ですか︖ ⽬的地にもっと 早く着きたい 限られた時間で ⾏って帰りたい ここで納得しちゃダメ 時間をかけると 貨物が腐る 相⼿に早く 情報を伝えたい 冷蔵庫 電話 なぜ ですか︖
  14. 14. ユーザーインタビュー ユーザビリティテスト 発話録 親和図(抽象化) 結論 (深いユーザーニーズ) 深いユーザーニーズまでの道のり 14 深いユーザーニーズまでたどりつくためには「ユーザーインタビュー」や「ユーザビリティテ スト」で豊かな発話を集め 「親和図法」 などの⼿法で分析します。
  15. 15. 君 の 使 命 は ユ ー ザ ー の 深 い ニ ー ズ を 探 る こ と そ の た め に ま ず ユ ー ザ ー イ ン タ ビ ュ ー し ろ
  16. 16. 猶 予 は 一 週 間 と す る
  17. 17. イ ン ビ ュ ー 三 銃 士 を 連 れ て 来 た よ 。 イ ン タ ビ ュ ー 三 銃 士 ? 13 種 類 の 会 話 パ タ ー ン 集 だ 三 銃 士 じ ゃ な い じ ゃ ん
  18. 18. ユーザーインタビューでよく使う13の質問パターン 18 1 直接的に理由を掘り下げる 2 あいまいな⾔葉を明確にする 3 時系列を確認する 4 ほかの選択肢をとらなかった理由を 訊く 5 ほかに考えたことを訊く 6 話を具体的にする/話の続きを促す 7 あえてあり得ない選択肢について質 問する 8 それがないとどうなるのか訊く 9 ⾔語化を強制する 10 ⽭盾している箇所について訊く 11 具体的な量を訊く 12 何と⽐較しているのか訊く/何を期 待していたのか訊く 13 ⾃⾝はどう思ったのかを訊く
  19. 19. ユーザーインタビューの会話の全⽂サンプル 19 今⽇の教材ダウンロード︓インプレスさんのメディア Think IT の、⽻⼭の連載 「UXデザインはじめの⼀歩 ー インタビュー技術を磨こう︕」 にて、インタビュー発話 録の全⽂サンプルを無料ダウンロード配布しています。 https://thinkit.co.jp/series/9588
  20. 20. 20 ユーザーインタビューをして、あなたの⼿元には たくさんの 「ユーザーの声」 が集まりました。 そこで、はたと気がつきます。 ものすごい⼤量の発話データから ユーザーの本質的な⼼理を拾いあげるには どうすればよいのでしょうか。はて。
  21. 21. 「親和図法」で分析をしよう︕ 21 すべての発話データを客観的にあつかって、ユーザーのインサイトを⾒つけるには 「定性分析(質的分析とも呼ぶ)」をします。 もっともよく使われる分析⼿法は 「親和図法」 です。
  22. 22. … フ ン … 成 程 己 の 得 意 技 を 徹 底 的 に 磨 き 絶 対 の 必 殺 技 に ま で 昇 華 さ せ る の が 新 組 の U X デ ザ イ ン の 強 さ お 前 が 最 後 ま で 頼 る の は ﹁ 親 和 図 法 ﹂ を 昇 華 し た ﹁ K A 法 ﹂ か
  23. 23. さらにグループ化を くりかえし グループの関係を 線や⽮印で描く KA法の⼿順 23 KA法の基本⼿順も、概略は親和図法と同じです。 ただし細かいお作法があり、そのお作法がより確実な成果物へつながります。 発話録から ユーザー⼼理を ふせんに書き出す 似たふせんを グループにする 似たグループとグループを より⼤きなグループにする お作法 お作法 お作法 お作法
  24. 24. 24 「価値マップ」 完成
  25. 25. 25 この試験なら 合格できるんじゃ ないかと思う 実⽤ になる スキルを ⾝につけ たい ⾃分の スキルを 客観的に 証明したい 夢を かなえるため 資格がほしい 転職や就職を 有利にしたい 勉強の成果を すぐに実感したい 合格に結びつく 勉強⽅法が 知りたい 限られた 勉強時間で 合格したい 資格試験を受ける⼈の モチベーションの価値マップ
  26. 26. KA法(本質的価値抽出法)の⼿順と実例 26 今⽇の教材ダウンロード︓Figmaでじっさい にKA法をしたデータを配布します。商⽤・⾮商 ⽤問わず⾃由に再配布・改変いただけます。 初学者が悩みやすい「発話録のどこを、どのよ うに、ふせんに書き出すのか」など、実物の発 話録から成果物までの作業履歴もすべて追え るように残しています。 KA法(本質的価値抽出法)の⼿順と実例 「資格試験を受ける⼈のモチベーションの価値マップ」 https://www.figma.com/community/file/1142124393231568930 この教材の作成にあたりFigma公式アンバサダーの キャシさん( @UIAlchemist ) にFigmaの使いかたのアドバイスをいただきました。ありがとうございます︕
  27. 27. 価値マップからユーザーの本当のニーズの解決⽅法を導く 27 勉強の成果をすぐ 実感したいのかー よし、じゃあ勉強時間 重ねるごとに 勲章をあげよう︕
  28. 28. …… 君 の よ う な 勘 の い い ガ キ は 嫌 い だ よ こ れ っ て ユ ー ザ ー の 本 当 の ニ ー ズ が わ か っ て も 解 決 方 法 が ダ メ な ら せ ん ぶ ダ メ な の で は ?
  29. 29. 29 いま、あなたはユーザーの本当のニーズを⼿にしました。 しかし、本当のニーズがわかったとして あなたが思いついたその解決⽅法は 本当にユーザーのニーズを 満たすのだろうか︖
  30. 30. 30 今⽇は “UXデザイン” や “UXリサーチ” の 最後のステップとして アイデアを「検証できるかたち = プロトタイプ」にし 「ユーザビリティテスト」でアイデアの成否を検証します。
  31. 31. 今⽇は教材テーマに「資格取得」を使います 31 資格試験(英検、TOEIC、簿記、情報処理技術者試験・・・)は わりと多くの⼈が経験があるエピソードで、伝わりやすいので、 これをテーマに進めます。
  32. 32. 32 今⽇はじっさいにユーザビリティテストを公開でおこない その効果を、あなたに体験していただきます。 ユーザー あなた これは どう使うのかな︖ モデレーター 中継 これは どう使うのかな︖
  33. 33. 33 公開ユーザビリティテストをする題材として 英会話アプリ 「Langaku(ランガク)」 を運営する Mantra株式会社さまのご協⼒をいただきました︕ https://langaku.app/
  34. 34. 著作権表⽰ 34 • 本Figma/FigJamのデータは英会話アプリ「Langaku」のユーザビリティテスト のために作成したものです。英会話アプリ「Langaku」の画⾯の著作権は Mantra株式会社に帰属します。 • 本Figma/FigJamのデータには英会話アプリ「Langaku」の画⾯キャプチャを 通じて、以下の漫画が引⽤されています。これらの漫画の著作権は著作者に 帰属します。 • マッシェル -MASHLE-, 甲本⼀/集英社 • SPY×FAMILY, 遠藤達哉/集英社
  35. 35. 35 ユーザビリティテストとは
  36. 36. ユーザビリティテスト 36 プロダクトがすでに存在するときに有効です。いまのプロダクトをユーザーにさわっても らいながら、「タスク」をこなしてもらうことで、ユーザーの期待とプロダクトがマッチして いない箇所を⾒つけることができます。 タスク1をやってみてい ただけますか︖ はい・・・ええと・・・ 電源ボタンはどこだ︖
  37. 37. 37 UXデザインの世界には という⾔葉があります。 すべてのプロダクトは「セルフサービス商品」である “ ”
  38. 38. すべてのプロダクトは「セルフサービス商品」である 38 ユーザーがじっさいに現場でプロダクトをさわるとき 操作に詳しい⼈がずっと横にいて、操作を教えてくれるなどということはありません。 むしろ、誰の助けもなく、ひとりで使うのがふつうです。 誰も助けてはくれない 詳しい⼈はそばにいない
  39. 39. プロダクトはノーヒントで使ってもらう 39 プロダクトをユーザーに⾒せるときは、できるかぎり説明をしてはいけません。 与えてよいのは、ユーザーが使うときに現実的に得られるレベルの情報のみです。 (そして、ユーザーは想像以上に情報をもっていません。ユーザーはウェブサイトの説明⽂を読まず、マニュアルを読まず、 アプリストアの説明⽂も読まず、あなたのプロダクトにふれるものです)
  40. 40. プロダクトの説明でなくタスクをわたす 40 プロダクトをユーザーに使ってもらうときは、 説明をするのではなく、タスクをわたして、そのあとは黙ってじっと⾒守りましょう。 タスクとは、たとえば次のようなものです。 • 「このアプリを使って、今晩の献⽴を考えてみてください」 • 「このサービスを使って、健康診断を予約してみてください」 • 「このサービスを使って、社員のうちメンタルケアが必要な⼈を⾒つけてください」
  41. 41. 思っていることをひたすら話してもらう(発話思考法) 41 プロダクトをユーザーに使ってもらうときは、思っていることをひたすらしゃべり続けても らうようにしてもらいます。これを「発話思考法」と呼びます。黙って画⾯を操作され ると、観察している僕らから、ユーザーが何を考えているかがわからないからです。 ・・・と⾔われても、ユーザーはそのような⾏為に慣れていないため、なかなかうまくで きません。そこで⽻⼭は、ユーザビリティテストのオープニングのなかで「発話思考 のデモ」と「発話思考の練習」をするようにしています(後述)。
  42. 42. ユーザーが操作に詰まってあなたに質問したとき 42 ユーザーが操作に詰まって、あなたに質問をしても 「あなたが思うように使ってみてください」としか答えてはいけません。 なぜなら、現実にユーザーがプロダクトを使うとき、あなたはとなりにいないからです。 あなたが思うように 使ってみてください どう使うのよコレ あなたが思うように 使ってみてください
  43. 43. ユーザビリティテストの⾵景 43 マイクは インタビュー対象者と モデレーターの 両⽅の⾳声を 拾えるように(重要) ⼤⼈数で⾒る場合は プロジェクタや ⼤きめのディスプレイ を⽤意する ⾳声をしっかり 聞き取れる スピーカーを ⽤意する カメラの映像とマイクの⾳声を 傍聴する部屋に送る カメラ スピーカー プロジェクタ ⼜は ⼤きめの ディスプレイ パソコン インタビュー 対象者 モデレーター 傍聴者 調査を⾏う部屋 傍聴する部屋 操作画⾯をあとからも⾒返したいときは、 同時に、画⾯の録画もしてください。 マイク パソコン カメラは、以下がしっかり映 るように︓ 1. インタビューの場合、 ユーザーの表情が映 るように。 2. ユーザビリティテストの 場合、ユーザーの操 作画⾯。 スマホのテストのときは、 ⼿元が映せるように。 調査の会場は以下のとおり設営し、あらかじめ動作確認をします。
  44. 44. 本⽇のユーザビリティテストの被験者注1 45 注1: ユーザビリティテストを受けていただく⽅を「被験者」と呼んでいいかどうかは業界内で議論があります。ユーザビリティテストはあくまでプロダクト を検証するものであり、ユーザーを試すものではないためです。そのため「被験者」という表現を避け、「インフォーマント(情報提供者)」 「モニター」 「協⼒者」 などの呼び⽅をするUXデザイナーもいます。本セミナーではわかりやすさを優先し「被験者」と表記しています。 1⼈⽬ 2⼈⽬ ⼤柳さん 平⼭さん
  45. 45. 本⽇のユーザビリティテストの被験者 46 社会⼈何年⽬ですか 14年⽬ ご⾃⾝の英会話レベ ルはどれくらいですか ビジネス英語だと中級、⽇常会話は困らない、ビジネス英会 話もできるレベル 英語を勉強する理由 はなんですか ⼩学校から英会話をしているので、もう習慣になっている。 英語をマスターしたいというより⾃然と⽣活のなかにある。 話す機会が少なくなるとしゃべれなくなるので、レアジョブで機 会をつくる。 会社の福利厚⽣でレアジョブが半額で受けられる。 中学⾃体にオーストラリアの姉妹校に2週間ほどホームステイ した。 ふだんどのように英語 を勉強していますか レアジョブを週に1〜2回。アプリで「Words on Wonder」 という英語ゲームアプリ、1⽇に2〜3時間やっちゃう。 TOEICが近づいてきたら⽂法アプリ。TOEICの公式問題集。 受験が近づいたら1⽇2時間は勉強する。 仕事で英語は使いま すか ⽇常的には使わないが、海外の関連会社とコミュニケーショ ンしたり、英語で営業資料をつくったり、外資系の会社の⽅ とコミュニケーションする。 英会話の資格はお持 ちですか 英検2級、TOEIC 795点。 マンガアプリは⾒ますか よく⾒る。スマホに何種類も⼊れている。 1⼈⽬ ⼤柳さん
  46. 46. 本⽇のユーザビリティテストの被験者 47 2⼈⽬ 社会⼈何年⽬ですか 20年⽬ ご⾃⾝の英会話レベ ルはどれくらいですか カタコトの⽇常会話レベル 英語を勉強する理由 はなんですか 調べ物をしているときに、海外メディアの記事にあたることが 多いので、英語を読めるようになりたい。 ビジネスや旅⾏でも英会話を使っていきたい。 仕事として海外の会社としてのやりとりもあるが避け気味。 英語学習の⽬標を明確にするためTOEIC受験する予定 (11⽉を予定)。 ⾃分のなかの英語学習の優先度は割と低め。 ふだんどのように英語 を勉強していますか TOEICの点数が低く、語彙⼒が⾜りない。単語帳(⾦のフ レーズ・銀のフレーズ)を1⽇50〜100個を1週間やり、翌 週に復讐しながら次の50〜100をする。1⽇30分くらい。 仕事で英語は使いま すか 今は避けているので使っていない。海外メディアの記事は Google翻訳で読む。 英会話の資格はお持 ちですか TOEICは過去に1回受験し500点ほど。 マンガアプリは⾒ますか とくに読まない。 平⼭さん
  47. 47. 英会話アプリ 「Langaku(ランガク)」 とは 48 英会話アプリ 「Langaku」 は、「週刊少年ジャンプ」 作品をはじめ、誰もが知って いる⼈気マンガ30作品以上を、毎⽇英語で楽しむことで、英語の多読学習を実 現するアプリです。マンガに特化した機械学習(AI)技術を活⽤し、さまざまな英 語レベルのユーザーが、毎⽇楽しみながら続けられるようになっています。 https://langaku.app/
  48. 48. 49 ユーザビリティテストのタスクを洗い出す
  49. 49. リサーチクエスチョンを明らかにする 50 まず「今回のユーザビリティテストをつうじて明らかにしたいこと」を決めます。これをリ サーチクエスチョンと呼びます。 リサーチクエスチョンはビジネス指標などから導かれることも多い(例: このページで コンバージョンするユーザーが少ないのはなぜか)ですが、前回までのセミナーでつく りあげたユーザー⼼理全体を⾒わたすことのできる価値マップがあるときは、価値 マップと⽐較して、ビジネス指標にもとづくユーザー⼼理が現在のプロダクトでどのよう に満たされているか/満たされていないかをもとにリサーチクエスチョンを定めると、的 確なユーザビリティテストができます。
  50. 50. 51 この試験なら 合格できるんじゃ ないかと思う 実⽤ になる スキルを ⾝につけ たい ⾃分の スキルを 客観的に 証明したい 夢を かなえるため 資格がほしい 転職や就職を 有利にしたい 勉強の成果を すぐに実感したい 合格に結びつく 勉強⽅法が 知りたい 限られた 勉強時間で 合格したい 資格試験を受ける⼈の モチベーションの価値マップ
  51. 51. 52 この試験なら 合格できるんじゃ ないかと思う 実⽤ になる スキルを ⾝につけ たい ⾃分の スキルを 客観的に 証明したい 夢を かなえるため 資格がほしい 転職や就職を 有利にしたい 勉強の成果を すぐに実感したい 合格に結びつく 勉強⽅法が 知りたい 限られた 勉強時間で 合格したい 資格試験を受ける⼈の モチベーションの価値マップ Langakuには そもそも 資格試験 対策コンテンツは ない ケーミフィケーション要素はあるが 成⻑実感に つながっているのか︖ ユーザーは どんなときに成⻑実感を 得るのか︖ 実⽤になる スキルが ⾝についている 実感があるか︖ Langakuには そもそも 資格試験 対策コンテンツは ない 効率よく勉強できる⽅法だと思って 課⾦してもらえるか︖
  52. 52. リサーチクエスチョンを明らかにする 53 価値マップと現在のプロダクトの⽐較から、今回のユーザビリティテストで明らかにし たいことを以下のように決めました。 現在のフロダクトで検証する項⽬: 1. 効率よく勉強できる⽅法だと思って課⾦してもらえるか︖ 2. ゲーミフィケーション要素はあるが成⻑実感につながっているのか︖ 3. ユーザーはどんなときに成⻑実感を得るのか︖ 4. 実⽤になるスキルが⾝についている実感はあるか︖ プロトタイプをつくって検証する項⽬: 5. Langakuに英会話の資格試験対策の要素を⼊れられないか︖
  53. 53. 画⾯キャプチャを貼ったワイヤーフローをつくる 54 ユーザビリティテストでの気づきを書き込んだり、今からのユーザビリティテストの準備 をしやすくするため、画⾯キャプチャを貼ったワイヤーフローをつくります。 今回の検証に必要そうな全範囲の画⾯キャプチャを集めて流れにします。
  54. 54. 今回のワイヤーフロー 55 今回のLangakuのユーザビリティテストでは、以下のようにFigmaでワイヤーフロー をつくりました。本セミナーでは以降、このデータにリアルタイムで書き込んでいきます。 https://bit.ly/3Uxp0Pz
  55. 55. ウォークスルー評価をする 56 リサーチクエスチョンを念頭に、UXデザインの専⾨家(あなたや同僚)がひととおり アプリを使ってみて、問題になりそうなところの⽬星をつけます。 効率よく勉強できる ⽅法だと思って 課⾦してもらえるか︖ ゲーミフィケーション要素は 成⻑実感につながっているのか︖ ユーザーはどんなときに 成⻑実感を得るのか︖ 実⽤になるスキルが ⾝についている 実感はあるか︖ 備考: プロトタイピングについては後述します。
  56. 56. ユーザビリティテストのタスクを洗い出す(1/2) 57 前述の課題ポイントをもとに、ユーザビリティテストのなかで被験者になにをしてもら えばリサーチクエスチョンの答えが得られるか考えます。 1. 効率よく勉強できる⽅法だと思って課⾦してもらえるか︖ いったん無料枠を使い切るところまで使ってもらい、 課⾦を促す画⾯を⾒たときに継続意向とその理由を訊く 2. ケーミフィケーション要素はあるが成⻑実感につながっているのか︖ 4. 実⽤になるスキルが⾝についている実感はあるか︖ レベルアップしたとき、どんな感触を得たか訊く/読んだワード数についてどう感じるか訊く この2つはおおむね同じ画⾯に課題が集中していた。 トッフページのレベル表⽰/読書ログ/連続ログインの画⾯を⾒てもらい、どう感じるか訊く
  57. 57. ユーザビリティテストのタスクを洗い出す(2/2) 58 前述の課題ポイントをもとに、ユーザビリティテストのなかで被験者になにをしてもら えばリサーチクエスチョンの答えが得られるか考えます。 3. ユーザーはどんなときに成⻑実感を得るのか︖ (アプリからいったん離れて) そもそも過去の体験として英会話の学習で「⾃分は成⻑した」と感じたときは どんなときだったのか訊く リサーチクエスチョン【2】 【4】の回答をもとに(アプリからいったん離れて)そもそも そのユーザーが過去の体験として英会話の学習で「⾃分は成⻑した」と感じたときは どんなときだったのかをユーザーインタビューしないとわからない
  58. 58. タスクシートをつくる 59 前述の⽅針をもとに、被験者にとって⾃然なストーリーになるようにタスクを設計し ます。タスクはシートにして、被験者がつねに参照できるようにしておくとよいです。 ユーザビリティテストの途中で迷ったり⼤きく脱線したとき、タスクを忘れてしまう被験 者がいるためです。 タスクは1つあたり思いのほか時間がかかります。1時間で5個〜6個が⽬安です。 (なお今回のセミナーでは時間が限られるため、1⼈20分前後を想定)
  59. 59. 今回のタスク(1/5) 60 前述の⽅針をもとに、今回のユーザビリティテストのタスクは次のようにしました。 Langaku というアプリをインストールしてください。 いったん無料枠を使い切るところまで使ってみてください。 使い切って、課⾦を求められる画⾯が出たら、 そこで⼿を⽌めてください。 タスク1:
  60. 60. 今回のタスク(2/5) 61 前述の⽅針をもとに、今回のユーザビリティテストのタスクは次のようにしました。 いま課⾦をうながす画⾯が出ていますが、 どのように感じていますか。 タスク2:
  61. 61. 今回のタスク(3/5) 62 前述の⽅針をもとに、今回のユーザビリティテストのタスクは次のようにしました。 ホームにもどってみてください。 レベルアップと読んだワード数が表⽰されていますが、 どのように感じますか。 また、先ほど「連続記録: 1⽇」という表⽰が出ていたのを 覚えていますか。 覚えていたら、それを⾒たときに感じたことを教えてください。 タスク3:
  62. 62. 今回のタスク(4/5) 63 前述の⽅針をもとに、今回のユーザビリティテストのタスクは次のようにしました。 ホームの「読書ログを⾒る」ボタンをタップしてください。 表⽰された画⾯を⾒たり触って、どのように感じたか 教えてください。 タスク4:
  63. 63. 今回のタスク(5/5) 64 前述の⽅針をもとに、今回のユーザビリティテストのタスクは次のようにしました。 (アプリからいったん離れて) ご⾃⾝の体験として、 英会話の学習で「⾃分は成⻑した」と感じた経験があれば それを教えてください。 タスク5:
  64. 64. タスクづくりのTIPS 65 今回はしていませんが、タスクシートに「タスクが終わったと思ったら、『タスクが終わり ました』と⾔ってください」と⼀⽂を⼊れておくテクニックがあります。タスクが完了したと き、被験者によっては黙って動かなくなってしまい、あなたから⾒て、タスクが終わった と思っているのか、まだなにか悩んでいるのか、区別がつかないためです。 ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ ・・・・・・・・・・・・・・・・・・・・・・・・・・・・・ タスクが終わったと思ったら、「タスクが終わりました」と⾔ってください。 タスク1:
  65. 65. タスクがひとつ終わるごとにふりかえりインタビューをする 66 タスクがひとつ終わったら、そのタスクのなかで被験者がとった⾏動について、意図を 深掘りしたり確認したいところについて、ふりかえりインタビューをします。回顧的イン タビューと呼びます。 この画⾯でずっと 下のほうを操作していました。 画⾯上部にバナーが 出ていたことに気がついて いましたか︖ えっ︕︖ まったく 気がついて いませんでした︕
  66. 66. ユーザビリティテストのタスクで誘導しない 67 認知バイアスは、油断するとユーザビリティテストのタスクにも影響します。無意識の うちに、ユーザーに「あなたが期待する答え」を⾔わせるようなタスクをつくってしまいま す。 (あなたに都合の よい答え)
  67. 67. バイアスは前提を与えるほど加速する 68 Aという状況 におかれて はい Bという課題 があったら はい Cという製品 便利ですよね はい この訊きかたで「いいえ」と いう⼈はあまりいない。
  68. 68. そのタスクはあなたのバイアスかもしれない 69 えっ︕︖ Aという状況 先⽉に何回ありました︖
  69. 69. 前提をおきまくる⼈はたいてい怯えている 71 ⽻⼭の経験だと、 • プロダクトをつくった本⼈ • 「⾃分の仮説は正しい」と思っている⼈ • 偉い役職にある⼈(とくにおっさん) ほど、前提をつけた質問(= 誘導しまくりの質問)をする傾向があるようです。 「⾃分がつくっているものが間違っているかもしれない」ことに 無意識に怯えている⼈ほど、説明や前提をおいてしまうようです。
  70. 70. ユーザーにひたすら説明をする⼈をやめさせる 72 ユーザビリティテストでプロダクトをユーザーに⾒せるとき そのプロダクトや機能がなんであるかをひたすら説明してしまう⼈がいます。 これも前提をおいているのと同じです。 このプロダクトは ・・・というもので この機能は ・・・のために使います
  71. 71. 73 プロトタイプ(プロトタイピング)とは
  72. 72. プロトタイプ(プロトタイピング)とは 74 リサーチクエスチョンのうち 「Langakuに英会話の資格試験対策の要素を⼊れら れないか︖」は、現在、そのような機能はありません。かといって機能を実装して ユーザーの反応を⾒たのでは、うまくいかなかったときに無駄な投資になってしまいま す。そこで、紙芝居やハリボテのサンプル(プロトタイプ)をつくり、被験者にそれを 使ってもらって、実効性を検証することをプロトタイピングと呼びます。
  73. 73. プロトタイプの粒度で得られるフィードバックが変わる 75 プロトタイプは「どのくらい具体的につくり込むか」で、被験者から得られるフィードバッ クが変わります。無意識のうちに「どこまで前提を崩してよいか」を測ってしまうため。 紙とペンの⼿描き パワポのワイヤーフレーム Figmaで実画⾯そっくり そもそもまだなにをするか 検討レベルなんだろうな この機能をつくることは 決まってるんだな この画⾯が 前提なんだな そもそも こんな機能 使いません あなたのランキング 1位 もっと ランキングリストが ⾒たいです あなたのランキング 1位 このアイコンが わかりづらいです 無意識: 無意識: 無意識:
  74. 74. そこのお前! プロトタイプは得たいフィードバックが得られるようにつくるんだぜ
  75. 75. ハリボテのプロトタイプでどうやって検証するのか 77 紙とペンの⼿描きプロトタイプのように、ハリボテ感が強いものを被験者に⾒せるとき は、モデレーターが「紙芝居」をして⾔葉で補⾜します。「オズの魔法使い法」と呼び ます。 アプリを⽴ち上げると この画⾯が出てきました。 どうしますか? ここを タップします タップしたら この画⾯になりました。 どうしますか︖ うーん・・・
  76. 76. 今回にプロトタイピングする内容 78 「Langaku」には、現時点では 「毎⽇楽しく英語を読む」ことに特化されているた め、英会話の資格試験の学習にむけた機能はありません。 そこで、価値マップを⾒ながら、次のような機能をプロトタイプとしてつくりました。 プロトタイプ1 リスニング⼒アップ プロトタイプ2 語彙⼒アップ マンガの名シーンを読んだら、 続けて、 アニメの該当シーンを英語で観ることができる そのマンガを読んだら、 どれくらいTOEICの語彙⼒が上がるのかわかる
  77. 77. 79 この試験なら 合格できるんじゃ ないかと思う 実⽤ になる スキルを ⾝につけ たい ⾃分の スキルを 客観的に 証明したい 夢を かなえるため 資格がほしい 転職や就職を 有利にしたい 勉強の成果を すぐに実感したい 合格に結びつく 勉強⽅法が 知りたい 限られた 勉強時間で 合格したい 資格試験を受ける⼈の モチベーションの価値マップ
  78. 78. 80 この試験なら 合格できるんじゃ ないかと思う 実⽤ になる スキルを ⾝につけ たい ⾃分の スキルを 客観的に 証明したい 夢を かなえるため 資格がほしい 転職や就職を 有利にしたい 勉強の成果を すぐに実感したい 合格に結びつく 勉強⽅法が 知りたい 限られた 勉強時間で 合格したい 資格試験を受ける⼈の モチベーションの価値マップ マンガのなかで TOEICの頻出単語が強調される 頻出単語の含有数がわかる ⾃分がカバーした頻出単語がわかる 海外で放映された ⽇本アニメを ⽇本語字幕/英語字幕/ 字幕なしの 3モードで観れる
  79. 79. 英会話の資格試験むけの「リスニング⼒」プロトタイプ 81 リーディングだけでなく、リスニングもできるようになりたい︕ • マンガの名シーンを読んだら、 続けて、海外で放映された⽇本アニメの該当 シーンを、英語⾳声で観ることができる。 • 字幕は「⽇本語/英語/字幕なし」の3モードで観れる。 https://bit.ly/3SudZga
  80. 80. 英会話の資格試験むけの「語彙⼒」プロトタイプ 82 そのマンガを読んだら、どれくらいTOEICの語彙⼒が上がるのか知りたい︕ • マンガを読みはじめるときに、TOEICの頻出単語の含有量がわかる。 • 読んでいるときに、TOEICの頻出単語が強調表⽰される。 • これまで読んだマンガと合わせて、⾃分がカバーした頻出単語の数がわかる。 https://bit.ly/3SudZga
  81. 81. 英会話の資格試験むけのプロトタイプの全体像 83 https://bit.ly/3UDXsrR
  82. 82. タスクシートをつくる(調整) 84 「プロトタイプ」は 「SPY × FAMILY」 で作成するので、タスク1も調整する Langaku というアプリをインストールしてください。 アプリで「SPY × FAMILY」 というマンガを読んでみてください。 いったん無料枠を使い切るところまで使ってみてください。 使い切って、課⾦を求められる画⾯が出たら、 そこで⼿を⽌めてください。 タスク1: 追加⾏
  83. 83. プロトタイプのタスク 85 プロトタイプのタスクを⽤意します。誘導にならないよう慎重に設計します。 https://bit.ly/3SudZga にアクセスしてください。 「SPY × FAMILY」の • 第1話(2) • 第5話 を読んでください。 途中で出てきた画⾯について、どう感じますか。 また、タップしてみて、どのように感じたか教えてください。 タスク6:
  84. 84. プロトタイプのタスク 86 プロトタイプのタスクを⽤意します。誘導にならないよう慎重に設計します。 https://bit.ly/3SudZga にアクセスしてください。 アプリのホームにもどり、バナー「TOEIC試験」をタップしてください。 ホーム画⾯が変化しました。どう感じますか。 また、「SPY × FAMILY」の • 第1話(2) を読んでみて、どのように感じたか教えてください。 タスク7:
  85. 85. 今回のワイヤーフロー(最終形) 87 プロトタイプも加えた最終的なワイヤーフローは以下になりました。 https://bit.ly/3Uxp0Pz
  86. 86. 88 ユーザビリティテストのプレテストをする
  87. 87. 小 便 は す ま せ た か ? 神 様 に お 祈 り は ? 部 屋 の ス ミ で ガ タ ガ タ ふ る え て ユ ー ザ ビ リ テ ィ テ ス ト す る 心 の 準 備 は O K ?
  88. 88. プレテスト(ユーザビリティテストの練習)をしておく 90 社内や家族で、ユーザーに似た属性の⼈にお願いして 「プレテスト(ユーザビリティテストの練習)」をしておきましょう。 次のようなミスに事前に気がつくことができます。 • ユーザーの注意がまったく予想外のものに奪われる。 • ログインするためにメールアドレスが必要になる。 • テストの途中でクレジットカードが必要になる。 など・・・ユーザビリティテストの不備を本番前に洗い出しておくことができます。 ⽻⼭の経験では、アカウント登録のためのメールがキャリアの迷惑メールフィルタに 引っかかり、先にいっさい進めなかったことがあります。 問題になる箇所に対策や代案を⽤意しておきましょう。
  89. 89. プレテスト(ユーザビリティテストの練習)をしておく 91 今回のユーザビテリィテストをプレテストしたところ、以下の問題がありました。 • 時間が想定よりかかりすぎる(セミナー中に実施なので30分が限度) • アプリのインストールは事前にしてもらうことした。 • 「第1話(3)」以降は⾶ばし読みするよう指⽰を⼊れた。 • タスクで読むように指⽰したマンガを探すのに⼿間取ったので、探す⽅法は タスクの教⽰に含めた。(今回のテスト対象ではないので) • プロトタイプで「動画をスキップ」する選択をユーザーができるようにした。 • とり得るユーザーニーズの想定もれ。
  90. 90. タスクシートの最終形(1/2) 92 タスクシートの最終形は以下になりました。
  91. 91. タスクシートの最終形(2/2) 93 タスクシートの最終形は以下になりました。 https://bit.ly/3ScFcnH
  92. 92. 複数回のユーザビリティテストを1⽇にするときは注意 94 もし1⽇に複数回のユーザビリティテストを詰めていたときは、さらに注意が必要です。 あなたのアプリやWebサイトの設定を初期化したり、ログアウトしてブラウザのキャッ シュを削除したりします。とくにWebブラウザで操作履歴やクリック済みリンクが⾒え てしまうと、それがユーザーへの思わぬ誘導になってしまうことがあります。 ユーザビリティテストの準備は、対⾯の会議室でのほうがたいへんです。部屋の⽚づ け、アプリやブラウザの初期化、次のユーザーに渡す謝礼や事前アンケートシートを 並べ、飲み物やお菓⼦を補充し…と、30分あっても⼤わらわになります。
  93. 93. テスト中にトラブル︕ 焦らず堂々と対応する 95 ユーザビリティテストでは、⼊念な準備をしていても思わぬトラブルが起こります。「ト ラブルが起こってほしくないときほど、トラブルは起こる」とはよく⾔ったもので、「なんで このタイミングでこの問題が!?」というようなことが起こるものです。 前々回のセミナーで紹介したAさんとのインタビュー では、インタビュー終盤で、なんと⽻⼭のPCがフ リーズしてしまいました。オンラインのインタビューな ので、⽻⼭のPCがフリーズしたらAさんの画⾯は 真っ暗です。PCの再起動をしていたら数分間か かってしまいます。
  94. 94. テスト中にトラブル︕ 焦らず堂々と対応する 96 ⽻⼭︓なるほど。ピンクの問題集の⾳声ですね。ありがとうございます。机に座ってやるのは勉強… Aさん︓あれ? ちょっといいですか。 ⽻⼭︓⾳声聞こえてますか。 Aさん︓いや、すいません。ちょっと聞こえてなかったです。 ⽻⼭︓かしこまりました。 (ここで⽻⼭のPCがフリーズ。急きょスマートフォンから接続して再開。空⽩時間は30秒ほど) ⽻⼭︓…すいません。パソコンがちょっと固まっちゃったので、今、急きょスマートフォンで⼊りました。すい ません。ちょっとお待ちください。じゃあちょっと失礼して、このままスマートフォンで最後まで続けさせていた だきます。 Aさん︓了解です。 ⽻⼭︓今おっしゃっていただいた…。まず最初に考えていらっしゃった勉強法というのが、平⽇や休⽇に 問題を解き続けるということ、継続的にするということをされようと思っていた。それは、いつぐらいまで続い たんですか。
  95. 95. テスト中にトラブル︕ 焦らず堂々と対応する 97 ⽻⼭は急きょ、スマートフォンに切り替えて再開しました。 思ってもみなかったトラブルのとき、⼤切なのは「堂々としていること」です。内⼼で動 揺していても、ユーザーの前ではトラブルすらさも想定内であるかのように振る舞って ください。ユーザーにとって場のガイドはあなたです。あなたが挙動不審になったら ユーザーも不安になります。 ⽻⼭も、ユーザーが不安にならないように状況を伝えた上で、 堂々と対処して再開しました。
  96. 96. ドタキャンされることもある 98 あまり考えたくないことですが、どれほど⼊念に準備をし ても、直前になってユーザーが「ドタキャン」したり、約束 の時間に現れないこともあります。最悪の想定は、いつ も⼼に留めておきましょう。 また、対⾯のときは、会場までの道のりでユーザーが迷 ⼦になってしまうこともあります。⽻⼭は事前に携帯番 号を渡しておき、いざというときに電話連絡できるように しています。
  97. 97. 99 ユーザビリティテスト 実査
  98. 98. こ の 瞬 間 を よ ォ と き !! “ ” 待 っ て た ぜ ェ !! “ ”
  99. 99. 101 オープニング
  100. 100. オープニング(導⼊部分) 102 ユーザビリティテストのオープニングでは次のことを話します。 • あいさつ • ⾃⼰紹介 • ユーザビリティテスト主旨の説明 • 個⼈情報の取り扱い・機密保持の同意 • 所要時間
  101. 101. 103 ユーザビリティテストのオープニングで ラポールをつくれるかどうかが勝負
  102. 102. ラポールとは 104 ラポールとは「何でも話して⼤丈夫という信頼関係」のことです。 ユーザビリティテストでは多かれ少なかれ個⼈の⼼理に踏み⼊ります。 「何でも話して⼤丈夫」と思ってもらえないかぎりは ユーザーは深い⼼理や本⾳を⼝にはしません。 この⼈になら 何を話しても ⼤丈夫そう︕
  103. 103. ラポールをつくるためのオープニングの進めかた 105 ⽻⼭︓こんにちは! どうも、はじめまして、⽻⼭と申します。 Aさん︓こんにちは。よろしくお願いします。 ⽻⼭︓よろしくお願いします。今⽇はお時間をいただいてありがとうございます。⼤ 変うれしいです! Aさん︓ありがとうございます。 明るく、朗らかに挨拶をします。ユーザーと⽬が合い、発する最初のひとことからユー ザビリティテストははじまっています。リモートであれば、画⾯に対象者が映った直後 です。これが対⾯であれば、⾃社の受付にいらっしゃった対象者を迎えに⾏き、顔 を⾒たときの最初のひとことです。
  104. 104. ラポールをつくるためのオープニングの進めかた 106 たいてい、ユーザーはユーザビリティテストに不慣れです。「これからどんなことが起こ るのか」とドキドキしています。最初のひとことは、そんな「警戒⼼」を解くためのチャン スです。朗らかに挨拶をすることで、緊張した⼼に「この⼈は敵じゃない」「この⼈の ガイドに従っていれば安⼼そうだ」と思ってもらうことができます。 ラポールの構築の第⼀歩は、じつは会議室に⼊る前からはじまっているのです。
  105. 105. ラポールをつくるためのオープニングの進めかた 107 ⽻⼭︓いちばん最初に、ちょっとこの場の主旨だけお話させていただきますね。僕は Think IT というインターネットのメディアに「UXデザインはじめの⼀歩」という記事を 書いてまして、そこで実際にユーザーインタビューをした実録、こういう会話が本当に 交わされましたよ、というのを書き起こして載せたいと思っているんですね。そのため のインタビューをさせていただいてということを考えて、募集させていただきました。 募集時点で主旨の案内はしているものの、対象者のあたまにはざっくりとした印象 しか残っていないものです。ていねいに説明を設け、これからのユーザビリティテスト 時間の⽅向づけをします。
  106. 106. ラポールをつくるためのオープニングの進めかた 108 ⽻⼭︓このインタビューをまず録画させていただいております。これをあとで書き起こ して、メディアの記事の中に、実際にこんな会話をしましたと、実際のユーザーインタ ビューではこういう会話が本当に交わされます、というのを掲載したいと思っています。 この点を、これをまずご了解いただきたいというのと。 Aさん︓はい。 多くの場合では録画や録⾳をするので、その同意を得ます。もしあなたの会社に 「プライバシーポリシー」があれば、提⽰します。 ユーザビリティテストに傍聴者がいるときは、その旨を伝えておきます。「このテストを 弊社の開発チームの者も傍聴させていただいています。ご承知ください」と伝えます。
  107. 107. 録画を開始するのを忘れない︕【超重要】 109 個⼈情報や機密保持への同意が得られたら「それでは録画を開始しますね」と ⾔って、録画や録⾳をはじめます。録画や録⾳のスタートを忘れると、せっかくの ユーザビリティテストを振り返ることができず、まったく無意味になってしまいます︕ 気 をつけましょう。
  108. 108. 大 丈 夫 致 命 傷 だ
  109. 109. モデレーターである「あなた」が期待することを伝える 111 ⽻⼭︓資格取得について、ポジティブなこと、ネガティブなこと含めて、フラットに全 部情報いただけるのが僕としてはいちばん⽬的に叶ってるので、本当に率直に思っ たこととか感じたことっていうのをお伝えいただけるとすごく嬉しいです。 Aさん︓わかりました。 多くのユーザーは「役に⽴つことをしゃべろう=モデレーターの会社を褒めること」「モ デレーターの会社をけなさないこと」と気持ちが強くあります。あなたが求めているの は忖度した意⾒ではなく、ユーザーの率直な⾔葉であるはずです。 冒頭に「私にとって役に⽴つことは、フラットに話をしてもらうことだ」とはっきり伝えるこ とで、ユーザーは「良いことも悪いことも話そう」と、あたまを切り替えることができます。
  110. 110. リモートではモデレーターのみカメラを映す 112 リモートのときは、モデレーターとサブモデレーターのみカメラを映しておき、傍聴者は カメラ・⾳声ともに切っておくようにします。たくさんの⼈の存在を感じると、ユーザー が萎縮することがあるためです。 差し⽀えなければ、ユーザーにもカメラをオンにしてもらうように促しましょう。やはり 表情が⾒えたほうが情報量が豊かになるためです。ただし、ユーザーに断わられた 場合は無理強いせず、意思を尊重します。 SOUND ONLY SOUND ONLY モデレーター ユーザー サブモデレーター
  111. 111. 「発話思考法」のお⼿本を⾒せる 113 プロダクトを被験者に使ってもらうときは、思っていることをひたすらしゃべり続けてもら うようにしてもらいます。「発話思考法」と呼びます。黙って画⾯を操作されると、観 察している僕らから、被験者が何を考えているかがわからないからです。 ・・・と⾔われても、被験者はそのような⾏為に慣れていないため、なかなかうまくで きません。そこで⽻⼭はオープニング内で「発話思考のデモ」と「発話思考の練習」 をするようにしています。
  112. 112. 「発話思考法」のお⼿本を⾒せる 114 以下は、ユーザビリティテストのときに、じっさいに⽻⼭が被験者にオープニング内で お⾒せしているスライドです。
  113. 113. 「発話思考法」のお⼿本を⾒せる 115 思ったことを、 ひとりごとのように⼝に出してください。 とくに「何をしようとしているか」 「何が起こると思うか」を ⼝に出してください。 と⾔われても困りますよね。 では、まず僕がお⼿本に カンタンにやってみますね。 お題は今⽇の⽇経終値を 調べてみます。 ユーザー モデレーター
  114. 114. 「発話思考法」のお⼿本を⾒せる 116 それではテストをはじめます。 今⽇の⽇経終値を調べます。 Yahoo! のトップに ⾏けばあるかな〜。 あれ、株価って項⽬が ⾒つからないぞ…。 あ、「経済」ってタブがある。 押したら株価が出てきた︕ はい、今⽇の⽇経終値が わかりました。 ユーザー モデレーター ナルホド。 そうやるんですね。
  115. 115. 短い「発話思考の練習」をしてもらう 117 デモに続けて、被験者に「発話思考の練習」として、短くカンタンなタスクを「発話思 考でやってみてください」とお願いします。⽻⼭はいつも「福岡の明⽇の朝10時の天 気を調べてください」というタスクでやります。東京だとスマホの位置情報がオンになっ ているとGoogleで「天気」と検索しただけで答えが出てしまうので、あえて地⽅の天 気にしています。 福岡の明⽇の昼の天気を 調べてください。発話思考で。 はい、わかりました。 えーと…
  116. 116. 118 ただし、本⽇はセミナー時間が限られるため 本⽇の被験者2名とは、あらかじめ、 ここまでのオープニングを済ませてあります。 (説明済み)
  117. 117. 119 ユーザビリティテスト 本編
  118. 118. 発⾒点はどんどんワイヤーフローに書き込もう 120 ユーザビリティテストでタスクを被験者にしてもらい、気がついたことや気になったこと は、リアルタイムで、どんどんワイヤーフローにふせんとして貼っていきます。 https://bit.ly/3Uxp0Pz
  119. 119. モデレーターは2名体制でやるとより安⼼ 121 ユーザビリティテストのモデレーターは、不慣れなうちはメインモデレーター(タスクの 指⽰やインタビュー)と、サブモデレーター(記録やメインモデレーターの取り落とし た質問をフォローする)の2名体制でできると安⼼です。 今⽇は cake often のマリコさんにアシスタントをお願いしています。 https://twitter.com/marimamiac マリコさん(サブモデレーター)
  120. 120. 仮説は会議室に⼊るときに捨て、出るときに拾う 122 前回までのセミナーを説明のとおり、⼈間の意識は「⾃分の仮説に合った情報」に 強く意識を奪われます(確証バイアス)。 確証バイアスを避けるためには、 「仮説はインタビュールームに⼊るときに捨て、出るときに拾う」 という姿勢が⼤切です。 仮説 またあとでね
  121. 121. 本⽇のユーザビリティテストの被験者 123 社会⼈何年⽬ですか 14年⽬ ご⾃⾝の英会話レベ ルはどれくらいですか ビジネス英語だと中級、⽇常会話は困らない、ビジネス英会 話もできるレベル 英語を勉強する理由 はなんですか ⼩学校から英会話をしているので、もう習慣になっている。 英語をマスターしたいというより⾃然と⽣活のなかにある。 話す機会が少なくなるとしゃべれなくなるので、レアジョブで機 会をつくる。 会社の福利厚⽣でレアジョブが半額で受けられる。 中学⾃体にオーストラリアの姉妹校に2週間ほどホームステイ した。 ふだんどのように英語 を勉強していますか レアジョブを週に1〜2回。アプリで「Words on Wonder」 という英語ゲームアプリ、1⽇に2〜3時間やっちゃう。 TOEICが近づいてきたら⽂法アプリ。TOEICの公式問題集。 受験が近づいたら1⽇2時間は勉強する。 仕事で英語は使いま すか ⽇常的には使わないが、海外の関連会社とコミュニケーショ ンしたり、英語で営業資料をつくったり、外資系の会社の⽅ とコミュニケーションする。 英会話の資格はお持 ちですか 英検2級、TOEIC 795点。 マンガアプリは⾒ますか よく⾒る。スマホに何種類も⼊れている。 1⼈⽬ ⼤柳さん
  122. 122. 実査: 1⼈⽬ 124
  123. 123. 本⽇のユーザビリティテストの被験者 125 2⼈⽬ 社会⼈何年⽬ですか 20年⽬ ご⾃⾝の英会話レベ ルはどれくらいですか カタコトの⽇常会話レベル 英語を勉強する理由 はなんですか 調べ物をしているときに、海外メディアの記事にあたることが 多いので、英語を読めるようになりたい。 ビジネスや旅⾏でも英会話を使っていきたい。 仕事として海外の会社としてのやりとりもあるが避け気味。 英語学習の⽬標を明確にするためTOEIC受験する予定 (11⽉を予定)。 ⾃分のなかの英語学習の優先度は割と低め。 ふだんどのように英語 を勉強していますか TOEICの点数が低く、語彙⼒が⾜りない。単語帳(⾦のフ レーズ・銀のフレーズ)を1⽇50〜100個を1週間やり、翌 週に復讐しながら次の50〜100をする。1⽇30分くらい。 仕事で英語は使いま すか 今は避けているので使っていない。海外メディアの記事は Google翻訳で読む。 英会話の資格はお持 ちですか TOEICは過去に1回受験し500点ほど。 マンガアプリは⾒ますか とくに読まない。 平⼭さん
  124. 124. 実査: 2⼈⽬ 126
  125. 125. 127 クロージング
  126. 126. 傍聴者の質問を受ける 128 ユーザビリティテストがひととおり終わったところで、もし傍聴者がいるならば質問を受 けます。 「ここまでで、傍聴している者からも質問がないか確認します」とユーザーに 伝えます。 ユーザーから⾒えるところに傍聴者がいるときは、直接に質問をしてもらってもかまい ません。リモートであれば会議に直接に参加しているメンバーです。対⾯であれば 会議室に同席しているメンバーです。 傍聴者からの質問もひととおり終わったら、「以上で終わります」と終了を伝えます。
  127. 127. 傍聴者の質問を受ける 129 傍聴者に直接に質問をさせず、あえてモデレーターを仲介するようにすることもあり ます。傍聴者が何⼈もいたり、あるいはユーザーとなんらかの利害関係があるなど、 傍聴者の姿がユーザーから⾒えてしまうと萎縮して正しい話が聞けなくなる場合で す。 対⾯のユーザビリティテストでは、会議室にはユーザーとモデレーターの2⼈だけしか おらず、⾳声だけをとなりの会議室に中継しているようなときも、これにあたります。 モデレーターを仲介するときは、PCやスマホのチャットツールで、質問をモデレーター に送ってもらうようにします。
  128. 128. 謝礼を渡す 130 ユーザビリティテストの謝礼を⽀払うときは「謝礼をお⽀払いいたします」と伝え、⽀ 払いの⼿続きをします。
  129. 129. 謝礼を渡す(リモートのとき) 131 • 振込先は⼝頭で聞かず、「謝礼のお振込先の⼝座番号シート(事前に⽤意 しておく)」に記⼊してもらい、メールで送ってもらうように依頼します。 • シートを受領してから振り込みまでの期間の案内をします。あなたの会社のルー ルによっては締め⽀払いとなり、しばらく待たせることがあるためです。 振込先は⼝頭で聞かず、書⾯でもらうのがおすすめです。⽻⼭は⼝頭でやりとりし たために名義⼈を聞き間違ってしまい、あとになって振込できずに困ったことがありま す。
  130. 130. 謝礼を渡す(対⾯のとき) 132 • 会場に「謝礼」と「領収書」を⽤意しておきます。謝礼は封筒に⼊れておいたほ うが印象が良いです。 • 記名と捺印を求めるので、ボールペンと朱⾁、印鑑を拭くためのテッシュも⽤意 しておきましょう。 • 「領収書」にはあらかじめ領収書の宛先に⾃社名と⾦額を記⼊しておきましょう。 じつは捺印は必須ではなく、商取引の慣習として⼀般的なだけです。万が⼀、 ユーザーが印鑑を忘れてしまったときは、捺印は省略しても⼤丈夫です。 記⼊と捺印が終わったら「控え」をユーザーに渡し、「原本」をあなたが受け取ります。
  131. 131. ユーザーを⾒送る 133 謝礼をお渡ししたら「それでは以上となります。本⽇は⻑い時間、ありがとうございま した」と伝え、リモートであれば会議を終了します。対⾯であれば「それではご準備 ができたら、お⾒送りいたします」と⾔って、出⼝まで案内し、丁重にお礼を伝えて お⾒送りをします。 ユーザーを⾒送ったら、録画や録⾳を⽌めます。
  132. 132. 134 ふりかえりをする
  133. 133. ふりかえりをする 135 終わったら、すぐに傍聴者を集めて、ユーザビリティテストのふりかえりをします。ふり かえりは、ユーザビリティテストの興奮や気づきが残っているうちにすることが⼤切です。 傍聴者ひとりひとりに話をふって、次のような観点で発⾔をもらいます。 • 印象深かったこと • 気がついたこと • 学びになったこと 傍聴者から出た発⾔は、リモートであれば全員に画⾯共有しながらメモします。対 ⾯であれば、みんなから⾒えるようにワイヤーフローに書いていきます。誰かひとりに 発⾔が集中しないよう、うまくファシリテーションして、みんなの気づきと感情を場に 出しましょう。
  134. 134. https://bit.ly/3Uxp0Pz ワイヤーフローを眺めてみよう 136 どのような課題が⾒つかっただろうか︖
  135. 135. さんざん 開発チーム みんなで 検討した 内容ですし ユーザーも ふつうに 使ってくれると 思いますが わざわざ ユーザビリティ テストをする 必要が あるので しょうか? ユーザーの行動に 限って 常に 最悪のケースを 想定しろ ユーザーは必ず その少し 斜め上を 行く!! はいっ
  136. 136. ≈ ふ ふ ふ ふ ふ ふ は っ は っ は っ は く っ く っ く ど ー だ ね ? サ ド 隊 員 私 の 言 っ た 通 り だ ろ う ユ ー ザ ー は 常 に オ レ 達 の 想 像 の 斜 め 上 を い く
  137. 137. 今回のユーザビリティテストの発⾒点を整理する 139 ワイヤーフローを眺めたなかで、とくに問題が⼤きかったところをマークしましょう。 「問題が⼤きい」とは、いくつかパターンがあります。以下は代表例です。 1. ユーザビリティエラー: 例 ボタンのデザインが悪くてユーザーが気がつかない 2. 機能がユーザーニーズに不⾜: 例 ユーザーがやりたいことに⾜る機能がない 3. 機能がユーザーニーズと不⼀致: 例 そもそもそんな機能は望まれてない
  138. 138. プロダクトをどう改修すべきでしょうか 140 ワイヤーフローを眺めながら、チームでディスカッションしましょう。
  139. 139. よいユーザビリティテスト 141 多くのばあい、ユーザビリティテストではたくさんの「これまで気がつかなかったユーザー の視点や⼼理」に出会うことができます。はじめてから3〜5⼈⽬までは、ユーザー ⼼理の世界がどんどん広がっていくように感じたら、よいユーザビリティテストができて いる証拠です。
  140. 140. 「だいたい予想通りだった」と⾔う⼈に要注意 143 ユーザーインタビューが終わったあとの、最初のひとことが 「だいたい予想通りだった」 と⾔う⼈は要注意です。たいてい後知恵バイアスの餌⾷になっています。 後知恵バイアスとは 「ものごとが起きたあとに、それは予測していたことだと錯覚する」 認知バイアスです。 俺の 予想どおり だった
  141. 141. !!!
  142. 142. 「⾃分は頭が良い」と思っている⼈ほどやられる 145 ⽻⼭の経験だと、 • 「⾃分は頭が良い」と思っている⼈ • 偉い役職にある⼈(とくにおっさん) ほど、後知恵バイアスに喰われる傾向にあるようです。 「⾃分は頭が良い」 「⾃分が間違っているわけがない」 というプライドが、インタビュー中に浮かびあがった 「⾃分は間違っている」 という数々の事実から⽬を背けさせ 「⾃分はすべてを予⾒できていた」 と思わせるようです。
  143. 143. 146 まとめ
  144. 144. ︖ 147 いかがでしたでしょうか。はじめる前は 「⾃分はユーザーのことをわかっている」 という気持ちがありませんでしたか。 俺は ユーザーを わかってる ︖ ︖ ︖
  145. 145. 一 体 い つ か ら ユ ー ザ ー を 理 解 で き て い る と 錯 覚 し て い た ? ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・ ・
  146. 146. 149 ⽻⼭の経験では ドメイン知識の豊富な⼈(その業務の専⾨家)でも ⾃⼒で想定できるユーザー⼼理は全体の6割くらいです。 え、そんな顔 してたの︕︖
  147. 147. お 前 の 為 に プ ロ ダ ク ト が あ る ん じ ゃ ね ぇ ユ ー ザ ー の 為 に プ ロ ダ ク ト が あ る ん だ !! お 前 な ぁ ん か 勘 ち が い し と り ゃ せ ん か ?
  148. 148. 151 プロトタイピングとユーザビリティテストで ユーザーのニーズとプロダクトとの齟齬を⾒つけて 適切に解決しましょう︕
  149. 149. 152 公開ユーザビリティテストをする題材として 英会話アプリ 「Langaku(ランガク)」 を運営する Mantra株式会社さまのご協⼒をいただきました︕ https://langaku.app/
  150. 150. 153 ありがとうございました ⽻⼭ 祥樹 (⽇本ウェブデザイン株式会社) Twitter: @storywriter
  151. 151. ⽻⼭のプレゼンのアレ が、 LINEスタンプになりました︕ スタンプ名︓ハーミィ(CSS編) 作者名︓⽻⼭ 祥樹 https://store.line.me/stickershop/product/1228201/ja Web・CSSネタ 全40種類

×