この記事はチームへの引き継ぎ資料をいくつか改変して抜粋したものです

 

目次

• はじめに
• 定量的なユーザーテストをやる意味
  • ユーザーテストをすることで実現できること
• ユーザーテストをやるタイミング
• 定量的ユーザーテストで調べられること
• 定量的ユーザーテストの計測の仕方（本題）
  •  １．ユーザービリティを計測する
    • １−１．使いづらさ・分かりづらさを計測する
    • １−２．間違いの多さを計測する
  • ２．見た目を調べる
    • ２−１．デザイン・色
    • ２−２．UI配置
  • ３．ユーザーの感情・印象を調べる
    • ３−１．調査票を使ったテスト結果の比較
    • ３−２．発話しなくてもユーザーの感情を引き出す
• 番外編 – データの読み方
  • 平均値の扱い

 

はじめに

ここではプロダクトのデザイン（見た目やUI設計）をどうテストしていこうかというお話をします。
「デザインに自信がないです」って人でも定量的ユーザーテストであれば、数字を数えるだけで行なえます。

この記事では ユーザーテスト と 定量的ユーザーテスト の違いを以下のように扱います。

• ユーザーテスト：HCD的なユーザーテスト全般のことを指します。
• 定量的ユーザーテスト：デザイン／テストの良し悪しを数値を使って見える化するテストのことです。

 

定量的なユーザーテストをやる意味

サイバーエージェント Adtech Studio のエンジニア行動規範には 経験よりデータを。直感より分析を。 という言葉がありますが、まさにこれです。

優秀な方なら個人的な価値観だけでデザインを決定するのも良いですが、そんな人ばかりじゃないと思います。
基本的には自分の感覚を常に疑って、データをもとにプロダクトの良し悪しを決定していきましょう。

プログラムだったらすぐ「テストが〜」って話するでしょう？
デザインも同じです！

 

ユーザーテストをすることで実現できること

例えば YouTube のデザイン。

これは世界屈指の YouTube 開発チームが寄ってたかって考え抜いて、現在のデザインがあるはずです。
このように考え抜かれたデザインは、ありがたいことに普通の人も使えるようにライブラリ化されて公開されることもあります。

たとえばMaterial Design（https://material.io/）。

Material Designを使えば、天才たちが何時間もかけて作り出したノウハウをものの数秒で使いこなすことができるようになります。
ユーザーテストをする工程もパスして良いものが作れると思います。
ここで満足しても良いのですが、人が作ったものを使うだけじゃなくて、生み出したいと思う人はもっと学ぶ必要があると考えます。

ユーザーテストを行うということは何時間もかけてノウハウを作り出すということだと考えます。
これが大事な作業だと思える方はユーザーテストを会得して、良いものを作成していきましょう

 

ユーザーテストをやるタイミング

形成的アプローチと総括的アプローチというものがあります。

形成的アプローチでは、小さなUIパーツの性能を評価したり、フロントエンドなら１つのコンポーネント単位で評価します。
Unit テストのようなイメージです。

総括的アプローチではシステムが完成したり、ゲームなら１ステージ完成したあたりで通しのテストをします。
End to End (E2E) テストのようなイメージです。

 

定量的ユーザーテストで調べられること

• ユーザービリティ
  • 使いづらさ
  • 分かりづらさ
  • 間違いの多さ
• 見た目
  • デザイン・色
  • UIの配置
• ユーザーの感情・印象

〇〇を調べるには□□と言う感じで紹介します。
それぞれやり方を見ていきましょう。

 

定量的ユーザーテストの計測の仕方

定量的ユーザーテストで行うことのメインは比較です。
デザインA、デザインB、デザインC… とあったとき、その中でどれが一番良いデザインかを決めるために行います。

自分を疑え！と言っておいてなんですが、一旦は自分が信じるデザインでプロトタイプを作成する必要があります。
その後は、どれが正しいか定量的に評価します。
世の中にすでにあるデザインと比較して、良し悪しを比べても良いです。

 

また、以下から出てくるタスクという言葉は、ユーザーテストの１つのタスクのことを指します。
たとえば、「会員登録してください」とか、「購入画面で商品をキャンセルしてください」といったものが該当します。

 

１．ユーザービリティを計測する

計測のときはスマホのカメラや作業しているPCやスマホ画面の録画をすると、後々の計測に役立ちます。

 

１−１．使いづらさ・分かりづらさを計測する

これはカウントするだけ、とても簡単です。

• タスク時間：タスクにかかった時間を計測
• 効率：タスクとは関係ない操作・処理がどれくらいあったか

この２つをカウント・計測します。
もちろんその他に使いづらさの指標になりそうなデータがあれば追加します。

カウントするだけで使いづらい／分かりづらいがわかるの？と感じるかと思います。
最終的に出てくるアウトプットは下の図のようなデータとなります。

ここでの例は旧デザインから新デザインに変更しました、といったシチュエーションです。
このとき、新規ユーザー登録までにかかる時間を 49% 減らすことができました。
と言ったようなデータの見える化ができます。

至って単純ですが、「今のシステムは使いづらかったですか？」→ Yes / No というような評価よりはるかに情報量が多く、説得力も増します。

効率でも同じように、タスクをクリアする前のタップ数（クリック数）が xx% 減りました。
など言えるようになります。

 

１−２．間違いの多さを計測する

計算式が出ますが、とても簡単です恐れないでください。

• エラー：タスクを行うにあたって間違えた数がどれくらいあったか
• 迷い度：タスクを行うにあたってどのくらい迷う要因があったか

エラーは１−１と同じ要領でカウントしてグラフ化するだけです。

そして、迷い度は目的の画面に行くまでどのような軌跡をたどったかにて求めます。
以下のようにして求めます。

ページ遷移を題材にしてはいますが、
これがゲームならボス部屋に付くまでの最短経路とユーザの行動数で求めたり、様々な応用を利かせることができます。

データの表示方法もグラフを用いて、 xx% 減りましたと見せると良いです。

 

 

２．見た目を調べる

２−１．デザイン・色

アイトラッカー

アイトラッカーを使うと、ユーザーの目線がどう変わったか調べることができます。
デザインや色を変えたときの評価に使うことが出きます。

ヒートーマップを作ってUIのどこが見られてない、じゃまになってるというデータも見れます。
UI配置がなんらかのエラーの要因となっている場合、ユーザービリティのエラー指標を計測することでも見えてくるものがあります。

これは定量的な評価にするためには多くのデータ加工が必要です。たとえば

• 画面全体のうち何割を見ているか
• 特定のUIに視線が入ったか

など。

安価なアイトラッカーも多くあります。
自分は以下の商品を使っています。

SteelSeries Sentry Gaming Eye Tracker 視線測定機 69041
https://www.amazon.co.jp/SteelSeries-Sentry-Gaming-Tracker-69041/dp/B00SB8YKVI

ユーザーテスト中は視線マーカーを出さず、録画している映像にだけ残るようにできます。
また、実際の座標はライセンス登録（数万〜数十万）などをしないといけないメーカーもあります。

 

顕著性マップ

ヒトはUIや画面を見るとき必ずと言っていいほど目を使用します。
顕著性マップでは、人間の目を数理的にシュミレーションして目に付きやすいところなどを発見できます。
（ちょっと古いかもだけどね）

画像中の明るい部分がよく目につくところという意味になります。

顕著性マップを詳しく知りたい方はこちら

画像処理　(3) 顕著性マップ
http://fussy.web.fc2.com/algo/image3_saliency_map.htm

顕著性マップの推定手法
https://www.slideshare.net/takao-y/20150619-49592895

顕著性マップはいくつかのアルゴリズムもあります

プログラムコード自体は長くなってしまうので、上記URLや下記URLを参考にしてみてください。

OpenCVで顕著性(Saliency)を求めてみる
http://irohalog.hatenablog.com/entry/2016/12/23/000000

PythonのDeepGazeというライブラリでも顕著性マップが実装できます。

 

２−２．UI配置

カードソートを使うと、グルーピングの妥当性を検証することができます。
グルーピングとはメニューやタブなどに含まれるコンテンツのグループのことです。

カードソートでは各々のコンテンツをカード状にして並べ替えれるように用意します。
これを何人かにグルーピングを行ってもらいます。
写真などを撮っておくと後々使いやすいです

複数人分のデータが集まったら以下のルールで集計します。

これは面白いことに、距離の公理を満たします。
ややこしいこと言うなって思うかもしれませんが、つまり、多くの統計手法を用いることができるようになったのです。

たとえば、

多次元尺度構成法

これは各々の位置関係をグラフ上にプロットして、位置関係を明確にすることで近い関係／遠い関係を見える化することができる手法です。

縦横の軸はあまり意味がある数値ではありません。
あくまでもプロットされたものの位置関係が重要です。

多次元尺度構成法について詳しく知りたい方はこちら。
使えればいいやと言う方は以下のソースコードを参照ください。

フリーソフトによるデータ解析・マイニング　第27回
https://www1.doshisha.ac.jp/~mjin/R/Chap_27/27.html

R (https://www.r-project.org/) という統計ソフトを用いることで、簡単に多次元尺度構成法を使うことができます。

まず、集計したカードソートの結果をCSVファイルにします。
ここで注意すべきはCSVファイルは対称行列でなければいけません。

（対称行列というものの例、データが対象的なのです）

つまり片側だけだったデータを同じように反対側にもコピーして対象なデータにします。
これでCSVファイルを保存しましょう。

Rでのソースコードは以下の通りになります。

上記が最小の記述コードですが、これだと日本語などが文字化けしたり、読み込めなかったりします。
Mac の R で日本語が表示できるようにするには以下のようにコードをアレンジします。

 

クラスターデンドログラム

多次元尺度構成法と似ていますが、こちらは樹形図（デンドログラム）を用いて関係の近い順に図のようなグラフを作成します。

クラスタリングするためには適当な位置で Height のしきい値を決めて区切ります。
5の場所で切ってグループにしてもいですし、10でも大丈夫です。
自分でグループの粒度を決めることができます。

この手法だと入れ子メニューなども一発で構築できます。

クラスターデンドログラムについて詳しく知りたい方はこちら。
使えればいいやと言う方は以下のソースコードを参照ください。

クラスター分析の手法②（階層クラスター分析）
https://www.albert2005.co.jp/knowledge/data_mining/cluster/hierarchical_clustering

多次元尺度構成法（上述）のときのようにカードソートの結果を対称行列にしてCSVファイルにします。
Rでのソースコードは以下の通りになります。

こちらもそのままだと日本語が使えないので、以下のようにアレンジすると日本語が使えるようになります。
（Windows の方はそのまま使えないかもしれません）

 

カードソート、面白くないですか？
いくつかの機能があって、並べ替えただけなのにこんな高度な分析ができるようになるんです。
あなどれないです。

 

３．ユーザーの感情・印象を調べる

３−１．調査票を使ったテスト結果の比較

システムユーザビリティスケール（SUS）

システムの印象を確認するための調査票になります。

この調査票はすでに決まった問に関して答えてもらうことになります。
そのため、SUSを使った他のプロダクトとも比較することができます。

奇数の番号はポジティブな質問、偶数の番号はネガティブな質問が並んでいます。

• 全く同意できないを1点
• 非常に同意できるを5点

としたとき、
ポジティブな質問は 点数 – 1 点 、ネガティブな質問は 5 – 点数 と変換して全部足し、最後に x 2.5 をします。

SUS（システムユーザビリティスケール）
https://www13.atwiki.jp/unoy/pages/27.html

そうすると、0点 ~ 100点の間に収まります。
スコアが高いほど、ユーザーの印象は良いということが言えるテストになっています。

２つのデザインを比較してどっちが良いかを求めることができます。

 

３−２．発話しなくてもユーザーの感情を引き出す

製品リアクションカード

 

ポジティブなワード／ネガティブなワードがそれぞれあるので、各々の割合を表示すると印象を見える化することができます。
ですが一番パッと見で変化がわかるのはワードクラウドでしょう。

ワードクラウド中の文字の大きさは、複数のユーザーに多く選ばれていた文字になります。
このように見える化することで、「改善して良くなりました！」だけじゃなくて「〇〇という印象が消え、△△という印象が増える結果となりました」なんて言えるようになります。

 

番外編 – データの読み方

平均値の扱い

定量的な評価をすると、平均値などと言ったデータを多く扱うことになると思います。

ですが、平均値はあくまでも目安として信じてください。
平均値だけを見て、◯◯が一番いい！と決めることは危険です。

たとえば

• デザインのA/Bテストを行ったとき

	スコア1	スコア2	スコア3	スコア4	スコア5	スコア6	平均値
デザインA	85.0	80.0	77.5	70.0	45.0	90.0	74.6
デザインB	70.0	80.0	62.5	45.0	55.0	77.5	65.0

デザインAのスコアの平均値は74.6、デザインBのスコアの平均値は65.0。
平均値だけ見るとデザインAのほうがスコアが高いということになりますが、この判断は危険です。

危険というのは、誤ったデータの読み方をしている可能性があるということです。
疑うべきポイントは以下の点になります

• 複数回 同じA/Bテストをしても、毎回デザインAのスコアが高いでしょうか？
• それぞれのスコアは何らかの勘違い／不正によってもたらされたスコアが含まれてないでしょうか？

これらの疑いを解消するためには次項の 検定 と呼ばれる手法を用いる必要があります。

 

検定

ここでは ｔ検定 と呼ばれる手法のみを解説します。
例を使ってざっくりとした解説のみします、詳しく知りたいかたは以下のURLを参考にしてください。

t検定の考え方
https://logics-of-blue.com/t-test/

 

ｔ検定

２つの分布間の平均値が優位に異なるかを調べるための検定手法です。
スチューデントのｔ検定とも呼ばれます。

噛み砕いて説明すると、

２つの組でテストをやってどっちの組が優秀だったかを調べるとき、
２つの分布間の平均値 とは図で言うところのA組と平均点とB組の平均点のことを指します。

また、優位に異なるか とは明らかに違っているかということを意味します。

２つの組は平均点が違い、A組のほうが高いスコアを出していたとします。
ですが、B組の上位には劣っている学生もA組にはいるわけです。
それを加味しても本当にA組のほうが優秀だったのかということを調べたいわけです。

２つの分布間の平均値が優位に異なるかを調べる という意味はこの例でいうと
「A組とB組の平均点は、A組のほうが高いけど、それって本当に明らかにA組のほうが高い？」という意味になります。

ｔ検定を使うとこれが明確にわかります。
Rで簡単にできます。
先程の例で検定をしてみましょう。

出力

この結果では p-value = 0.2892 というを見てみましょう。
ｔ検定はデザインAとデザインBに違いがないということを仮定した上で、それを否定する検定方法です
このP値が意味することは 28.92% の確率でデザインAとデザインBは違いがないと言うことです。

大抵の場合 5% または 1% 以下の結果をもって否定とするため、28.92% では否定できない（同じである可能性がある）という結果になります。

デザインAとの平均点は 74.6、デザインBの平均点は 65.0 でデザインAのほうが優れてると見られがちですが、検定の結果この２つのデザインに差はないということが分かりました。

 

このように、平均値１つとってもデータの誤読が起きる恐れがあります。
だからといって定量的なユーザーテストはむずかしい！と嫌厭されると残念なので、ここは少し頑張って知識を手に入れましょう。

しっかり理解しなくてもツールとしてなら使えるのですから。