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.

ショップテンプレート制作にユーザーテストを導入してみた話

1,269 views

Published on

ショップのテンプレートの制作にユーザーテストを導入してみた話。
いくら制作者から手離れしてしまうものだとしても、各種KPIに関わるような重要な部分だから、大切に作りたいですよね。そんなときに気軽に活用できるのが、ユーザーテストでした。

Published in: Design
  • Be the first to comment

ショップテンプレート制作にユーザーテストを導入してみた話

  1. 1. ショップテンプレート制作に ユーザーテストを導入してみた話 {とかその他諸々 GMOペパボ株式会社 EC事業部 カラーミーショップグループ MASAYA NAKAZATO / horaotoko
  2. 2. カラーミーショップのデザイナーで ショップ用のテンプレートをつくっています。 中里将也といいます。 なか ざと まさ や ホラーが好きなので ほらお と呼ばれています。 https://twitter.com/horaotoko! " https://www.facebook.com/Horaotoko
  3. 3. 先日こういうのをリリースしました
  4. 4. このスライドの内容 - なんでユーザーテストをやろうと思ったのか - どうやってユーザーテストをやったのか - ユーザーテストをやってみての感想など 主にデザイナー/ディレクター向けの内容です。
  5. 5. 事の発端 なぜユーザーテストを導入することになったのか?
  6. 6. ある日のこと、 わたしの上長が言いました。
  7. 7. スタイリッシュで めっちゃ使いやすい スマホテンプレつくって
  8. 8. 要件は以下の2つ 古くて使いづらそうな デフォルトテンプレートをどうにかしたい。 リリースした後は、 テンプレートをどんどん改善していきたい。 A. B.
  9. 9. だがしかし…
  10. 10. 古くて使いづらそうな デフォルトテンプレートをどうにかしたい。 リリースしたら、リリースした後は、 テンプレートをどんどん改善していきたい。 A. B. → 具体的にどこが「古い、使いづらい」の? その判断をするのがこれまでは主に中の人の主観。 客観的な判断基準がない状態で「めっちゃ使いやすい」を 実現するのは難しそう。 → 施策の成功・失敗ってわかるようになってるの? ショップテンプレートという性質上、 出したら出しっ放しというのが現状だった。
  11. 11. 継続して改善していくための 手法のひとつとして ユーザーテストを採用
  12. 12. ただ初めてだったので ライトな感じでやりました
  13. 13. ユーザーテストのその前に 前提として共有しておいたほうがいいもの
  14. 14. このようなプロセスをグルグルまわします リサーチ デザインインプリメンテーション
  15. 15. - リサーチ:問題点やユーザーが達成すべき目的を洗い出す - デザイン:構想やイメージを視覚化する - インプリメンテーション:実際に動くものをつくる この3つの段階それぞれでテストを行います。 ※ただし、それぞれ狙いは異なります。 それぞれの説明
  16. 16. ユーザーテストするぞ どうやってユーザーテストをしたのか
  17. 17. 行ったテストはこの3種類
  18. 18. - ユーザーリサーチ - プロトタイプテスト - インタラクションテスト
  19. 19. - ユーザーリサーチ - プロトタイプテスト - インタラクションテスト
  20. 20. ユーザーリサーチ (リサーチフェイズ) そもそも何が問題なのかを検証する 厳密に言えば「ユーザーテスト」のことだけを指す言葉ではあり ませんが、あらかじめ制作するべきものが決まっていたので、ユー ザーテスト形式で問題点の洗い出しを行いました。
  21. 21. やりかた - 理想のユーザーシナリオを書いて、そこからテストで被験者に やってもらうタスクを書き出す。 - 用意したタスクを被験者にやってもらい、その最中の行動や発 話に注意して観察する。 - 撮った動画と音声のログを見返して、深刻度の設定をする。深 刻度が高いエラーから優先的に潰していく。
  22. 22. ※イメージ画像
  23. 23. 大変だったこと① とにかくどんなシナリオにするか どんなタスクにすべきかを決めるのが難しかった。 施策が改善に繋がったと根拠づけるためには、 後ほど行うテストのときにも使いまわせるような内容でなければ いけない。ここの設計はかなりキモになる部分。
  24. 24. 大変だったこと② そもそもテストをすること自体が難しい。 画面の中にある言葉を使わずにタスクを実行させなければいけな かったり、被験者に不快な思いをさせずにテストを進めていく必 要があったり。頭のなかではわかっていても実際にやってみると うまくいかない箇所ナンバーワン。
  25. 25. - ユーザーリサーチ - プロトタイプテスト - インタラクションテスト
  26. 26. プロトタイプテスト (デザインフェイズ) どんなデザインが適しているのかを検証する プロトタイピングツールを使い、チーム内の人に試作品を触って もらって感想を聞きました。使い勝手がわかるので最終制作物の イメージを共有しやすかったし、自分のアイデアが果たして問題 を解決できるものかを周りの人が判断しやすい。
  27. 27. やりかた - いま流行りのProttを使いました。 - 写真だけでなく、ブラウザ上からも画像をあげられるので、フォ トショやイラレでつくった精巧なものを使うこともできます。 - いろんなひとに使ってもらって、指摘してもらったところをど んどん修正して短期間で細かくブラッシュアップします。
  28. 28. 大変だったこと① 作りこんでから修正しようとすると かなり手間がかかる。 正直最初の段階でここまで作りこまなくてもよかったのではない だろうか。いきなりモック作ろうとしても時間かかるので、ワイ ヤーフレームレベルでまずはプロトタイピングしたほうが修正が 楽ですよねあたりまえだと思います(白目)
  29. 29. 大変だったこと② ここでもちゃんとユーザーテストしとけばよかった。 ここの時間は削ったらダメだと思う。僕はここを削ったけど、時 間がとれるならもっと時間をかけるべきところだと思った。 (ペーパモックレベルで触ってもらたり、デザインスプリントみ たいなことするともっといいものができそう。)
  30. 30. - ユーザーリサーチ - プロトタイプテスト - インタラクションテスト
  31. 31. インタラクションテスト (インプリメンテーションフェイズ) ユーザーの期待通りの動きが できているかを検証する 実際に動くものを使って、ユーザーの考えているUIと自分がつくっ たUIに相違が無いかを調べました。うまく機能しなかった場合 に、早急に方向性を変更することができる段階。リリースしてか ら問題が明らかになるのはマズイので丁寧にやりましょう。
  32. 32. やりかた - こちらはユーザーリサーチと同じやり方でやりました。 - 前回のリサーチと同じタスクを使って、タスクの失敗率はどの くらい下がったか、かかる時間はどのくらい少なくなったか、 満足度が下がった回数は減ったかなどを調べて比較する。 - 動いてからわかることもあるので、短いスパンでユーザーテス トと修正を繰り返すと良い。
  33. 33. 大変だったこと めっちゃ細かい問題点が無限に出てくる 自分にとっては大したことないことでも、相手からしたらすごい 気になる。ましてやスマホなので、ちょっとした挙動も視界に入 る。しかも個人差があるので、何を優先的に直すべきかわからな くなる。疑心暗鬼になりいろいろなものに責任転嫁をしはじめる。
  34. 34. 最後に伝えたい大切なこと ユーザーテストをやるうえで忘れてはいけないことは?
  35. 35. ユーザーテストはあくまで エラー を見つけるもの デザイナーの仮説を検証するためでなく、 操作していてどこにエラーがあるかを調べる手段 観察時にバイアスがかかりそうなので、 仮説ベースではなく行動をしっかり観察する
  36. 36. テスト結果はあくまできっかけ 何をすべきか決めるのはデザイナー 数値や満足度などは指標。どこが問題なのかを見抜いて最終的には定性的に解決する 対象者の意見はあくまで「レビュー」なので、すべてに応える必要はない。
  37. 37. ユーザーテスト、やるなら早めに そもそもあなたの立てた仮説自体が間違っているかもしれない。 早い段階で軌道修正をするためにはユーザーテストが有効。 客観的に判断できる根拠を用いてデザインをすることができるので、 説得力のあるデザインをすることができる。自分の精神衛生的にもいい。
  38. 38. 参考文献 インタフェースデザインの実践教 室 ―優れたユーザビリティを実現 するアイデアとテクニック ユーザーエクスペリエンスの測定 (情報デザインシリーズ)
  39. 39. ご清聴ありがとうございました

×