プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう！ | UXデザイン基礎セミナー 第4回
•
10 likes•8,442 views
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, 遠藤達哉／集英社
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう！ | UXデザイン基礎セミナー 第4回
Similar to プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう！ | UXデザイン基礎セミナー 第4回 (20)
More from Yoshiki Hayama
プロトタイピングとユーザビリティテストで「UXデザイン」を練りあげよう！ | UXデザイン基礎セミナー 第4回
- 1. プロトタイピングとユーザビリティテストで 「UXデザイン」を練りあげよう︕ 2022年9⽉27⽇（⽕） ⽇本ウェブデザイン株式会社 / HCD-Net認定 ⼈間中⼼設計専⾨家 ⽻⼭ 祥樹 @storywriter 1 Zoomの チャットで いっしょに 盛りあがってね Twitterの ハッシュタグは #CR社 画⾯キャプチャ 投稿OK︕ UXデザイン基礎セミナー 第4回
- 2. Zoomの「チャット」で盛りあがろう︕ 2 チャット Q&Aに 投稿したものは 質疑応答で 答えます Zoom のチャットへ どんどん書いてね︕ （Twitter感覚で） Q&A 「全員」 で送信︕
- 7. ⽻⼭ 祥樹 @storywriter 7 ⽇本ウェブデザイン株式会社 代表取締役CEO 使いやすいプロダクトをつくる専⾨家 HCD-Net認定 ⼈間中⼼設計専⾨家 Web業界に22年、AIシステムのプロダクトマネージャーとUXデザインを5年 主な実績など 2009年 ⽇経パソコン 企業サイトランキング2009 ⽇本の主要企業696サイト中、ユーザビリティ／アクセシビリティ分野で第3位 2011年 Webユーザビリティランキング2011 企業サイト編 ⽇本の⼤⼿企業150サイト中、第4位 主な専⾨分野 ユーザーエクスペリエンス、⼈間中⼼設計、情報アーキテクチャ、アクセシビリティ、ライター
- 8. 8 これまでのあらすじ
- 10. 10 “UXデザイン” や “UXリサーチ” とは ⾒た⽬のデザインのことではなく ユーザーインタビューやユーザビリティテストをつかって ユーザーの深い⼼理を突きとめる専⾨技術
- 14. ユーザーインタビュー ユーザビリティテスト 発話録 親和図（抽象化） 結論 （深いユーザーニーズ） 深いユーザーニーズまでの道のり 14 深いユーザーニーズまでたどりつくためには「ユーザーインタビュー」や「ユーザビリティテ スト」で豊かな発話を集め 「親和図法」 などの⼿法で分析します。
- 17. イ ン ビ ュ ー 三 銃 士 を 連 れ て 来 た よ 。 イ ン タ ビ ュ ー 三 銃 士 ？ 13 種 類 の 会 話 パ タ ー ン 集 だ 三 銃 士 じ ゃ な い じ ゃ ん
- 18. ユーザーインタビューでよく使う13の質問パターン 18 1 直接的に理由を掘り下げる 2 あいまいな⾔葉を明確にする 3 時系列を確認する 4 ほかの選択肢をとらなかった理由を 訊く 5 ほかに考えたことを訊く 6 話を具体的にする/話の続きを促す 7 あえてあり得ない選択肢について質 問する 8 それがないとどうなるのか訊く 9 ⾔語化を強制する 10 ⽭盾している箇所について訊く 11 具体的な量を訊く 12 何と⽐較しているのか訊く／何を期 待していたのか訊く 13 ⾃⾝はどう思ったのかを訊く
- 19. ユーザーインタビューの会話の全⽂サンプル 19 今⽇の教材ダウンロード︓インプレスさんのメディア Think IT の、⽻⼭の連載 「UXデザインはじめの⼀歩 ー インタビュー技術を磨こう︕」 にて、インタビュー発話 録の全⽂サンプルを無料ダウンロード配布しています。 https://thinkit.co.jp/series/9588
- 24. 24 「価値マップ」 完成
- 26. KA法（本質的価値抽出法）の⼿順と実例 26 今⽇の教材ダウンロード︓Figmaでじっさい にKA法をしたデータを配布します。商⽤・⾮商 ⽤問わず⾃由に再配布・改変いただけます。 初学者が悩みやすい「発話録のどこを、どのよ うに、ふせんに書き出すのか」など、実物の発 話録から成果物までの作業履歴もすべて追え るように残しています。 KA法（本質的価値抽出法）の⼿順と実例 「資格試験を受ける⼈のモチベーションの価値マップ」 https://www.figma.com/community/file/1142124393231568930 この教材の作成にあたりFigma公式アンバサダーの キャシさん（ @UIAlchemist ） にFigmaの使いかたのアドバイスをいただきました。ありがとうございます︕
- 30. 30 今⽇は “UXデザイン” や “UXリサーチ” の 最後のステップとして アイデアを「検証できるかたち = プロトタイプ」にし 「ユーザビリティテスト」でアイデアの成否を検証します。
- 31. 今⽇は教材テーマに「資格取得」を使います 31 資格試験（英検、TOEIC、簿記、情報処理技術者試験・・・）は わりと多くの⼈が経験があるエピソードで、伝わりやすいので、 これをテーマに進めます。
- 32. 32 今⽇はじっさいにユーザビリティテストを公開でおこない その効果を、あなたに体験していただきます。 ユーザー あなた これは どう使うのかな︖ モデレーター 中継 これは どう使うのかな︖
- 33. 33 公開ユーザビリティテストをする題材として 英会話アプリ 「Langaku（ランガク）」 を運営する Mantra株式会社さまのご協⼒をいただきました︕ https://langaku.app/
- 34. 著作権表⽰ 34 • 本Figma/FigJamのデータは英会話アプリ「Langaku」のユーザビリティテスト のために作成したものです。英会話アプリ「Langaku」の画⾯の著作権は Mantra株式会社に帰属します。 • 本Figma/FigJamのデータには英会話アプリ「Langaku」の画⾯キャプチャを 通じて、以下の漫画が引⽤されています。これらの漫画の著作権は著作者に 帰属します。 • マッシェル -MASHLE-, 甲本⼀／集英社 • SPY×FAMILY, 遠藤達哉／集英社
- 35. 35 ユーザビリティテストとは
- 40. プロダクトの説明でなくタスクをわたす 40 プロダクトをユーザーに使ってもらうときは、 説明をするのではなく、タスクをわたして、そのあとは黙ってじっと⾒守りましょう。 タスクとは、たとえば次のようなものです。 • 「このアプリを使って、今晩の献⽴を考えてみてください」 • 「このサービスを使って、健康診断を予約してみてください」 • 「このサービスを使って、社員のうちメンタルケアが必要な⼈を⾒つけてください」
- 43. ユーザビリティテストの⾵景 43 マイクは インタビュー対象者と モデレーターの 両⽅の⾳声を 拾えるように（重要） ⼤⼈数で⾒る場合は プロジェクタや ⼤きめのディスプレイ を⽤意する ⾳声をしっかり 聞き取れる スピーカーを ⽤意する カメラの映像とマイクの⾳声を 傍聴する部屋に送る カメラ スピーカー プロジェクタ ⼜は ⼤きめの ディスプレイ パソコン インタビュー 対象者 モデレーター 傍聴者 調査を⾏う部屋 傍聴する部屋 操作画⾯をあとからも⾒返したいときは、 同時に、画⾯の録画もしてください。 マイク パソコン カメラは、以下がしっかり映 るように︓ 1. インタビューの場合、 ユーザーの表情が映 るように。 2. ユーザビリティテストの 場合、ユーザーの操 作画⾯。 スマホのテストのときは、 ⼿元が映せるように。 調査の会場は以下のとおり設営し、あらかじめ動作確認をします。
- 46. 本⽇のユーザビリティテストの被験者 46 社会⼈何年⽬ですか 14年⽬ ご⾃⾝の英会話レベ ルはどれくらいですか ビジネス英語だと中級、⽇常会話は困らない、ビジネス英会 話もできるレベル 英語を勉強する理由 はなんですか ⼩学校から英会話をしているので、もう習慣になっている。 英語をマスターしたいというより⾃然と⽣活のなかにある。 話す機会が少なくなるとしゃべれなくなるので、レアジョブで機 会をつくる。 会社の福利厚⽣でレアジョブが半額で受けられる。 中学⾃体にオーストラリアの姉妹校に2週間ほどホームステイ した。 ふだんどのように英語 を勉強していますか レアジョブを週に1〜2回。アプリで「Words on Wonder」 という英語ゲームアプリ、1⽇に2〜3時間やっちゃう。 TOEICが近づいてきたら⽂法アプリ。TOEICの公式問題集。 受験が近づいたら1⽇2時間は勉強する。 仕事で英語は使いま すか ⽇常的には使わないが、海外の関連会社とコミュニケーショ ンしたり、英語で営業資料をつくったり、外資系の会社の⽅ とコミュニケーションする。 英会話の資格はお持 ちですか 英検2級、TOEIC 795点。 マンガアプリは⾒ますか よく⾒る。スマホに何種類も⼊れている。 1⼈⽬ ⼤柳さん
- 48. 英会話アプリ 「Langaku（ランガク）」 とは 48 英会話アプリ 「Langaku」 は、「週刊少年ジャンプ」 作品をはじめ、誰もが知って いる⼈気マンガ30作品以上を、毎⽇英語で楽しむことで、英語の多読学習を実 現するアプリです。マンガに特化した機械学習（AI）技術を活⽤し、さまざまな英 語レベルのユーザーが、毎⽇楽しみながら続けられるようになっています。 https://langaku.app/
- 53. リサーチクエスチョンを明らかにする 53 価値マップと現在のプロダクトの⽐較から、今回のユーザビリティテストで明らかにし たいことを以下のように決めました。 現在のフロダクトで検証する項⽬: 1. 効率よく勉強できる⽅法だと思って課⾦してもらえるか︖ 2. ゲーミフィケーション要素はあるが成⻑実感につながっているのか︖ 3. ユーザーはどんなときに成⻑実感を得るのか︖ 4. 実⽤になるスキルが⾝についている実感はあるか︖ プロトタイプをつくって検証する項⽬: 5. Langakuに英会話の資格試験対策の要素を⼊れられないか︖
- 57. ユーザビリティテストのタスクを洗い出す（1/2） 57 前述の課題ポイントをもとに、ユーザビリティテストのなかで被験者になにをしてもら えばリサーチクエスチョンの答えが得られるか考えます。 1. 効率よく勉強できる⽅法だと思って課⾦してもらえるか︖ いったん無料枠を使い切るところまで使ってもらい、 課⾦を促す画⾯を⾒たときに継続意向とその理由を訊く 2. ケーミフィケーション要素はあるが成⻑実感につながっているのか︖ 4. 実⽤になるスキルが⾝についている実感はあるか︖ レベルアップしたとき、どんな感触を得たか訊く／読んだワード数についてどう感じるか訊く この2つはおおむね同じ画⾯に課題が集中していた。 トッフページのレベル表⽰／読書ログ／連続ログインの画⾯を⾒てもらい、どう感じるか訊く
- 71. 前提をおきまくる⼈はたいてい怯えている 71 ⽻⼭の経験だと、 • プロダクトをつくった本⼈ • 「⾃分の仮説は正しい」と思っている⼈ • 偉い役職にある⼈（とくにおっさん） ほど、前提をつけた質問（= 誘導しまくりの質問）をする傾向があるようです。 「⾃分がつくっているものが間違っているかもしれない」ことに 無意識に怯えている⼈ほど、説明や前提をおいてしまうようです。
- 78. 今回にプロトタイピングする内容 78 「Langaku」には、現時点では 「毎⽇楽しく英語を読む」ことに特化されているた め、英会話の資格試験の学習にむけた機能はありません。 そこで、価値マップを⾒ながら、次のような機能をプロトタイプとしてつくりました。 プロトタイプ1 リスニング⼒アップ プロトタイプ2 語彙⼒アップ マンガの名シーンを読んだら、 続けて、 アニメの該当シーンを英語で観ることができる そのマンガを読んだら、 どれくらいTOEICの語彙⼒が上がるのかわかる
- 81. 英会話の資格試験むけの「リスニング⼒」プロトタイプ 81 リーディングだけでなく、リスニングもできるようになりたい︕ • マンガの名シーンを読んだら、 続けて、海外で放映された⽇本アニメの該当 シーンを、英語⾳声で観ることができる。 • 字幕は「⽇本語/英語/字幕なし」の3モードで観れる。 https://bit.ly/3SudZga
- 82. 英会話の資格試験むけの「語彙⼒」プロトタイプ 82 そのマンガを読んだら、どれくらいTOEICの語彙⼒が上がるのか知りたい︕ • マンガを読みはじめるときに、TOEICの頻出単語の含有量がわかる。 • 読んでいるときに、TOEICの頻出単語が強調表⽰される。 • これまで読んだマンガと合わせて、⾃分がカバーした頻出単語の数がわかる。 https://bit.ly/3SudZga
- 84. タスクシートをつくる（調整） 84 「プロトタイプ」は 「SPY × FAMILY」 で作成するので、タスク1も調整する Langaku というアプリをインストールしてください。 アプリで「SPY × FAMILY」 というマンガを読んでみてください。 いったん無料枠を使い切るところまで使ってみてください。 使い切って、課⾦を求められる画⾯が出たら、 そこで⼿を⽌めてください。 タスク1: 追加⾏
- 85. プロトタイプのタスク 85 プロトタイプのタスクを⽤意します。誘導にならないよう慎重に設計します。 https://bit.ly/3SudZga にアクセスしてください。 「SPY × FAMILY」の • 第1話（2） • 第5話 を読んでください。 途中で出てきた画⾯について、どう感じますか。 また、タップしてみて、どのように感じたか教えてください。 タスク6:
- 86. プロトタイプのタスク 86 プロトタイプのタスクを⽤意します。誘導にならないよう慎重に設計します。 https://bit.ly/3SudZga にアクセスしてください。 アプリのホームにもどり、バナー「TOEIC試験」をタップしてください。 ホーム画⾯が変化しました。どう感じますか。 また、「SPY × FAMILY」の • 第1話（2） を読んでみて、どのように感じたか教えてください。 タスク7:
- 90. プレテスト（ユーザビリティテストの練習）をしておく 90 社内や家族で、ユーザーに似た属性の⼈にお願いして 「プレテスト（ユーザビリティテストの練習）」をしておきましょう。 次のようなミスに事前に気がつくことができます。 • ユーザーの注意がまったく予想外のものに奪われる。 • ログインするためにメールアドレスが必要になる。 • テストの途中でクレジットカードが必要になる。 など・・・ユーザビリティテストの不備を本番前に洗い出しておくことができます。 ⽻⼭の経験では、アカウント登録のためのメールがキャリアの迷惑メールフィルタに 引っかかり、先にいっさい進めなかったことがあります。 問題になる箇所に対策や代案を⽤意しておきましょう。
- 91. プレテスト（ユーザビリティテストの練習）をしておく 91 今回のユーザビテリィテストをプレテストしたところ、以下の問題がありました。 • 時間が想定よりかかりすぎる（セミナー中に実施なので30分が限度） • アプリのインストールは事前にしてもらうことした。 • 「第1話（3）」以降は⾶ばし読みするよう指⽰を⼊れた。 • タスクで読むように指⽰したマンガを探すのに⼿間取ったので、探す⽅法は タスクの教⽰に含めた。（今回のテスト対象ではないので） • プロトタイプで「動画をスキップ」する選択をユーザーができるようにした。 • とり得るユーザーニーズの想定もれ。
- 99. 99 ユーザビリティテスト 実査
- 101. 101 オープニング
- 102. オープニング（導⼊部分） 102 ユーザビリティテストのオープニングでは次のことを話します。 • あいさつ • ⾃⼰紹介 • ユーザビリティテスト主旨の説明 • 個⼈情報の取り扱い・機密保持の同意 • 所要時間
- 110. 大 丈 夫 致 命 傷 だ
- 119. 119 ユーザビリティテスト 本編
- 121. モデレーターは2名体制でやるとより安⼼ 121 ユーザビリティテストのモデレーターは、不慣れなうちはメインモデレーター（タスクの 指⽰やインタビュー）と、サブモデレーター（記録やメインモデレーターの取り落とし た質問をフォローする）の2名体制でできると安⼼です。 今⽇は cake often のマリコさんにアシスタントをお願いしています。 https://twitter.com/marimamiac マリコさん（サブモデレーター）
- 123. 本⽇のユーザビリティテストの被験者 123 社会⼈何年⽬ですか 14年⽬ ご⾃⾝の英会話レベ ルはどれくらいですか ビジネス英語だと中級、⽇常会話は困らない、ビジネス英会 話もできるレベル 英語を勉強する理由 はなんですか ⼩学校から英会話をしているので、もう習慣になっている。 英語をマスターしたいというより⾃然と⽣活のなかにある。 話す機会が少なくなるとしゃべれなくなるので、レアジョブで機 会をつくる。 会社の福利厚⽣でレアジョブが半額で受けられる。 中学⾃体にオーストラリアの姉妹校に2週間ほどホームステイ した。 ふだんどのように英語 を勉強していますか レアジョブを週に1〜2回。アプリで「Words on Wonder」 という英語ゲームアプリ、1⽇に2〜3時間やっちゃう。 TOEICが近づいてきたら⽂法アプリ。TOEICの公式問題集。 受験が近づいたら1⽇2時間は勉強する。 仕事で英語は使いま すか ⽇常的には使わないが、海外の関連会社とコミュニケーショ ンしたり、英語で営業資料をつくったり、外資系の会社の⽅ とコミュニケーションする。 英会話の資格はお持 ちですか 英検2級、TOEIC 795点。 マンガアプリは⾒ますか よく⾒る。スマホに何種類も⼊れている。 1⼈⽬ ⼤柳さん
- 124. 実査: 1⼈⽬ 124
- 126. 実査: 2⼈⽬ 126
- 127. 127 クロージング
- 132. 謝礼を渡す（対⾯のとき） 132 • 会場に「謝礼」と「領収書」を⽤意しておきます。謝礼は封筒に⼊れておいたほ うが印象が良いです。 • 記名と捺印を求めるので、ボールペンと朱⾁、印鑑を拭くためのテッシュも⽤意 しておきましょう。 • 「領収書」にはあらかじめ領収書の宛先に⾃社名と⾦額を記⼊しておきましょう。 じつは捺印は必須ではなく、商取引の慣習として⼀般的なだけです。万が⼀、 ユーザーが印鑑を忘れてしまったときは、捺印は省略しても⼤丈夫です。 記⼊と捺印が終わったら「控え」をユーザーに渡し、「原本」をあなたが受け取ります。
- 134. 134 ふりかえりをする
- 135. ふりかえりをする 135 終わったら、すぐに傍聴者を集めて、ユーザビリティテストのふりかえりをします。ふり かえりは、ユーザビリティテストの興奮や気づきが残っているうちにすることが⼤切です。 傍聴者ひとりひとりに話をふって、次のような観点で発⾔をもらいます。 • 印象深かったこと • 気がついたこと • 学びになったこと 傍聴者から出た発⾔は、リモートであれば全員に画⾯共有しながらメモします。対 ⾯であれば、みんなから⾒えるようにワイヤーフローに書いていきます。誰かひとりに 発⾔が集中しないよう、うまくファシリテーションして、みんなの気づきと感情を場に 出しましょう。
- 139. 今回のユーザビリティテストの発⾒点を整理する 139 ワイヤーフローを眺めたなかで、とくに問題が⼤きかったところをマークしましょう。 「問題が⼤きい」とは、いくつかパターンがあります。以下は代表例です。 1. ユーザビリティエラー: 例 ボタンのデザインが悪くてユーザーが気がつかない 2. 機能がユーザーニーズに不⾜: 例 ユーザーがやりたいことに⾜る機能がない 3. 機能がユーザーニーズと不⼀致: 例 そもそもそんな機能は望まれてない
- 144. !!!
- 145. 「⾃分は頭が良い」と思っている⼈ほどやられる 145 ⽻⼭の経験だと、 • 「⾃分は頭が良い」と思っている⼈ • 偉い役職にある⼈（とくにおっさん） ほど、後知恵バイアスに喰われる傾向にあるようです。 「⾃分は頭が良い」 「⾃分が間違っているわけがない」 というプライドが、インタビュー中に浮かびあがった 「⾃分は間違っている」 という数々の事実から⽬を背けさせ 「⾃分はすべてを予⾒できていた」 と思わせるようです。
- 146. 146 まとめ
- 152. 152 公開ユーザビリティテストをする題材として 英会話アプリ 「Langaku（ランガク）」 を運営する Mantra株式会社さまのご協⼒をいただきました︕ https://langaku.app/
- 153. 153 ありがとうございました ⽻⼭ 祥樹 （⽇本ウェブデザイン株式会社） Twitter: @storywriter
- 154. ⽻⼭のプレゼンのアレ が、 LINEスタンプになりました︕ スタンプ名︓ハーミィ（CSS編） 作者名︓⽻⼭ 祥樹 https://store.line.me/stickershop/product/1228201/ja Web・CSSネタ 全40種類