ユーザビリティテストのインタビューのコツ

ユーザビリティテストとは

またの名をユーザテスト。
製品やサービスを実際に使ってもらい、改善点を洗い出すテスト手法です。

ポイントは下記の2点です。

1. ユーザにタスク(作業課題)を実行するように依頼する
2. ユーザがタスクを実行する過程を観察、記録する

このエントリでは、アジャイル・ユーザビリティ ―ユーザエクスペリエンスのためのDIYテスティング―という書籍を参考にしつつ、僕の所感とともに、インタビューア(ユーザと対話して考えていること、思っていることを引き出す役割の人)がやるべきことにフォーカスしてまとめます。

実際にやってみたら、とても難しかったので！

このエントリの目次

1. ユーザビリティテストの目的
2. 関係者とその役割
3. インタビューアがやること
4. さいごに

1.ユーザビリティテストの目的

実際に製品やサービスを使ってもらうことで、ユーザのリアルな挙動(=事実)を観察することが目的です。

なぜリアルな挙動が必要か

アンケートなどは えてしてユーザ自身の不正確なバイアスがかかってしまいます。

端的な例でいうと、「このWebページのこの要素は目立たないから、背景色を目立つ色にした方がいい」とユーザが言ったとします。
これをそのまま受け取ってしまうと、安易に「背景色を赤くしよう」のような解決策を立ててしまいがちです。

そうすると、要素を目立たせる他の手段や、より根本的にナビゲーションの仕方を工夫する、のような検討案が漏れてしまいます。

これはイケてませんね！

つまり…

ユーザビリティテストの目的は、「ユーザからの分析結果」を得ることではありません。
正しい目的は、リアルな挙動を通して、ユーザの感情や思考といった「事実」を掘り起こしていくことです。

そうすることで より客観的な分析ができ、より本質的な改善策が検討できます。

ちなみに、ユーザビリティテスト専門のサービスもあります。
UIscopeなどです。

2.関係者とその役割

ユーザビリティテストの関係者は、下記の3つに分けられます。

1. ユーザ
   観察の対象者。タスクを実行していく人です。
2. インタビューア
   ユーザを観察、また対話することで、ユーザの感じたことや思ったことを引き出す人。
3. 見学者
   テストを見学する人。テスト中は存在感を消し、ユーザの観察に徹する。

3.インタビューアがやること

やることとしては、ユーザの緊張をほぐす、テスト全体のファシリテートなど様々です。
が、最も大切なのはインタビュー時、対話によってユーザの感じたこと・思ったことをそのままの形で引き出していくことです。

ポイントは2つ！

1. 質問には答えない
2. ユーザの感じたこと・思ったことをそのままの形で引き出す

どういうことかと言うと…。

質問には答えない

ユーザが「前の画面に戻るにはどうすればよいんですか？」と質問してきても、答えを教えてはいけません。
前の画面に戻るのが分からないとき、どういう行動を取るのか、どうやってたどり着くのかを確認するのがテストです。

ユーザの感じたこと・思ったことをそのままの形で引き出す

ユーザが操作などに迷ったときは課題の発見のチャンスです。
ここで「何を考えていますか？」などの質問をして、ユーザの状況を説明してもらいます。

「もしかしてナビゲーションの色が分かりづらかったですか？」など相手の思考を推察して質問してはいけません。
おそらくユーザは「はい」と答えるでしょう。
しかしこれは誘導尋問になってしまっていて、本質的な課題を見つけられません。

インタビューをやってみると分かりますが、これが非常に難しいです！
普段の会話と同じ感覚で話していると、どうしても相手の思考を推察して言葉にしてしまいます。

4.さいごに

僕のように口下手でアドリブのきかない人にはけっこう敷居が高いインタビューア。

思っていたよりもはるかに難しいです。
特に、誘導尋問にならないように質問をするところが。

ですが、正しくテストを実施・分析できれば、製品・サービスのクオリティを確実に向上できるので、ぜひともものにしたいスキルです。

それでは。

参考書籍

分かりやすい文章で書かれていながら、ユーザビリティテストのエッセンスが詰まっています。
特にインタビューよりも前段にあって、より重要な作業の「タスクの設計」の解説は必読です！

UXデザインのプロセス その3

今回はスケッチとプロトタイプ、そして実装(本ブログのデザインリニューアル)です。

前回までの記事で、ストーリーボードの作成まで行いました。
今回はスケッチとプロトタイピングを行い、最後に本ブログを実際にリニューアルしてこのシリーズを終わりとします。
このエントリがアップされた時点では既にリニューアル後のデザインになっています。

このエントリの目次

1. スケッチとプロトタイプとは
2. まずは提供するべきデータと機能をリストアップ
3. スケッチとプロトタイプの作成
4. で、今のデザインになりました。新旧比較
5. さいごに

1.スケッチとプロトタイプとは

どちらもUXデザインの初期の具現化ステップです。
が、以下のような違いがあります。

• スケッチ
  アイデアの創出・具現化が目的で「探求」のステージ。より多くのアイデアを素早くたくさん具体化することが目的で、より良いものを選択していきます。
• プロトタイプ
  実際の見た目に近いものを作成してフィードバックを得る「検証」のステージ。関係者へのプレゼンやユーザビリティテストなどを目的とします。

2.まずは提供するべきデータと機能をリストアップ

まずは、前回の記事で作成したストーリーボードの各ステップで、ユーザに提供するべきデータと機能をリストアップします。

当ブログでは下のようになりました。

まず第一に提供するべきなのは「分かりやすい本文」で、この点については考えるべき階層構造があまりないので、シンプルなものになりました。

3.スケッチとプロトタイプの作成

本来、スケッチは紙に書きだすなどして大量にアイデアを生み出すのがよいのですが、今回は 目的がシンプルなため、またBloggerのテンプレートデザインなどを使って実現したいUIがすぐに反映できるため、プロトタイプをスケッチと同時に行いました。

そのときに検討した項目を書いていきます。

配置するデータについて

1. デザインの原則に従って、記事の本文を左側に、ナビゲーションを右側に配置する
2. 記事本文のカラムについて
   1. 記事本文の下には、その記事のラベルを配置する。
   2. 各記事の最下部には、それ以外の要素を配置する。
   3. と思ったけど、なぜかその辺りの順番変更できないね…。
3. 他エントリの導線となる要素以外は極力排除する。
   1. 美人時計とか旬が過ぎたし、本ブログで見る必要はないので削除する。
   2. Android関連のニュースのブログパーツは、英語だし見られていないはずなので削除する。
   3. 当ブログの読者一覧は特に知りたくないと思うので削除する。
4. ナビゲーションの要素は使ってほしい機能の順に上から配置していく。
   1. 検索窓は最重要ではないけど、縦幅が狭くシンプルすぎて見落としやすいので一番上に配置する。
   2. 同じような内容の記事は割と近い日付で並び、タグ一覧よりも記事同士の関連性が高いので、月別の記事一覧を上に配置する。
   3. タグ(ラベル)一覧はPV順に並べたいけど方法が分からないので、とりあえずタグクラウドで妥協。
   4. よく検索されているエントリも配置したいが、それぞれ関連のないエントリが並ぶので下の方に配置する。
   5. 自己紹介は所詮おまけなので、ナビゲーションの下に配置する。

ビジュアルデザインについて

1. ブログのメインカラーを青系の色にする。今までは緑だったのだけれど。(ブログのタイトルがWorld Wide Windblueなのに！ 個人的にはこれが一番意味の分からないデザインでした)
2. 記事本文は白背景に黒テキストにする
3. 記事を読むときに目障りにならないように、全体を主張しすぎない色でまとめる
4. 気楽に読んで欲しいので、パステル系の色を使って柔らかい雰囲気を出す
5. 記事本文の構成がぱっと見で分かるように、タイトルと見出しの区切りを大きく分かりやすくする

記事の文章構成について

1. タイトル
   1. 正確にシンプルで端的なものにする。検索にひっかかったときのタイトルの全文表示を目指すよりは、正確さを優先する
2. 本文
   1. 小難しい印象を持たれないために、地の文は丁寧語で分かりやすい言い回しをする。ひらがなを多く使う。
   2. 検索エンジンで表示されたときに記事の内容が分かるように、概要を本文の一番上に書く。でも記事本文にスッと入ってほしいので、できたらアイスブレイク的なことも書く。
   3. アイスブレイクの効果を狙って、各記事の一番上にはイラストや写真を入れる。
   4. サンプルコードとキャプチャ画像をたくさん入れて、ユーザが迷ったり悩む回数を減らす。
   5. 各見出しの内容が一画面を超える長さの場合は、できるだけ分割する

これらのコトを意識し、Bloggerのテンプレートデザインでトライアンドエラーを繰り返しました。

4.で、今のデザインになりました。新旧比較

だいぶすっきりとした印象になりました。
右側のタグクラウドなどはまだ気に食わないですが、できたら随時修正していこうと思います。

旧バージョンのキャプチャを貼ります。







見出しと地の文がパッと見で区別がつきにくくて、ゴチャコチャしている感じです。
ざっとスクロールしたとき、記事の構成がわかりづらいです。
ここが今回なおしたかった最大のポイントです。

素人が中途半端にデザインするもんじゃないですな。

ちなみに本文の横幅は 前のバージョンでは意図的に狭くしてたのですが(視線の横移動がだるい)、それだとサンプルコードが見づらくなるので、今回は仕方なくデフォルトの幅にしています。

ていうかなんでメインカラーを緑に選択したのか…(ブログのタイトルがWorld Wide Windblueなのに！)(二回目)。
まあ単純に緑色が好きだからだったんですが。

5.さいごに

これで、UXデザイン入門―ソフトウェア&サービスのユーザーエクスペリエンスを実現するプロセスと手法を参考にしたシリーズを終わります。

「当ブログが見やすくなった」っていう人がいらっしゃいましたらコメント頂けると嬉しいです！

UXについてはまだまだ初心者レベルですので、これからも勉強していきます。
情報アーキテクチャも勉強していこうと思っています。

また、ソーシャル系やモバイル系も最適化していこうと思っています。

それでは。

参考書籍

(追記) UXデザインのプロセス その2

追記

このエントリではUXデザインのプロセスのうち、ストーリーボード作成まで実施しています。
次のスケッチ、プロトタイプ、実装についてはコチラ！

今回はUXデザインとしてストーリーボード作成をします

前回の記事ではデザイン調査とペルソナ作成をしてみました。
このエントリでは、ストーリボードの作成をしていきます。

このエントリの目次

1. ストーリーボードとは
2. ストーリーボード作成の目的
3. ストーリーの作成
4. ストーリー作成のコツ
5. ストーリーボードの作成
6. さいごに

1.ストーリーボードとは

映像作品のプロセスでいう、「絵コンテ」にあたります。

2.ストーリーボード作成の目的

それは、ペルソナがしたいコトを提供する際、どのようなUXを提供するといいのか を追求するコトです。
このプロセスでは、実現可能性はそこまで深く考えず、とにかくペルソナが喜ぶようなシナリオを検討します。
そうするコトで、ペルソナが求めるUXに近づくことができるのです。

3.ストーリーの作成

ストーリーボードを作る前に、まずはそれのもととなるストーリーを考えます。
ペルソナの行動や関心を一区切りとして分割していきます。

このサイトを対象として、以下のように考えてみました。
ペルソナの名前を「太郎」とします。
ストーリー名：エントリの閲覧

1. 太郎はあるワードで検索、結果に表示された記事の概要を見て当サイトへのリンクをクリックする
2. 太郎はエントリを「ザッと」見て、目的に合致する内容だと「すぐに」思い、きちんと閲覧するコトにする
3. 太郎はエントリに書いているサンプルコードや手順を、書いてあるとおりに「簡単に」試す
4. 太郎は同じ話題を扱っているエントリを発見し、見に行く
5. 以下、3. → 4. のループ

4.ストーリー作成のコツ

上でも述べましたが、コツは 実現可能性を無視しない程度に、とにかくユーザーにとって最高のシナリオを考えるコトです。

また、秘書型システム(このワードでググる)、道具型システム(このワードでググる)という考え方を知っていると、ストーリー作成の助けになります。

5.ストーリーボードの作成

以下のような絵を作成しました！


作成するときの注意点として、サービスの画面内容は書き込まないようにします。
なぜなら、書きこんでしまうと実際の画面を想定しまい、UXに集中できないからです。

6.さいごに

今回のエントリで、考えてなかった問題点が見えてきました。
エントリの出だしや当サイトの右カラムについて、検討の余地がありそうです。
「右カラムに美人時計が表示してるけど、誰得だよ…！」って思いました。

スケッチ、プロトタイプのプロセス に続く？！

参考書籍

(追記) UXデザインのプロセス その1

追記

このエントリではUXデザインのプロセスのうち、デザイン調査とペルソナ作成まで実施しています。
次のストーリーボードの作成についてはコチラ！

UXとは

UXとはユーザーエクスペリエンスのこと。
UIとUXの違いとは？――日本で第一人者の話を聞いてみたい人へ | 自分戦略@IT研究所より引用させて頂くと、

UXとは一言で言うと、ハードやソフトなどのシステムを利用者が使用した時に経験する「使いやすい！」や「便利だ！」「気持ちいいー！」などの感情を、利用者に提供する際の価値として重要視するコンセプトです。

UIはインタラクションやデザイン、それに対しUXはサービスの使い心地(デザインだけじゃなくサービスの内容も含む)、といったところでしょうか。
よいコンテンツと美しいUIは、感動や気持いいといったUXを提供する、というコトです。

このシリーズのエントリはUXデザイン入門―ソフトウェア＆サービスのユーザーエクスペリエンスを実現するプロセスと手法という本を参考に書いています。

このエントリの目次

1. UXデザインのプロセス
2. デザイン調査
3. ユーザーモデリング(ペルソナ) 準備
4. ユーザーモデリング(ペルソナ) 3つのペルソナ作成
5. ユーザーモデリング(ペルソナ) 3つのペルソナまとめ
6. 最後に

UXデザインのプロセス

UXデザインをきちんとすることで、ユーザの満足度を高めることができるはずです。

UXデザインのプロセスはこんな感じです↓

1. デザイン調査
2. ユーザーモデリング
3. ストーリーボード
4. スケッチ
5. プロトタイプ
6. 実装

以下に、各プロセスの大まかな内容や目的を示します。

・1.デザイン調査とは。

「ユーザがある状況である目的を達成しようとするときに、どのように振る舞うのか？」といった現状を調査し、そして「ユーザのニーズ」を掘り起こしていきます。

・2.ユーザーモデリングとは。

デザイン調査から得られたデータをもとにユーザーの特徴やニーズのパターンを検討し、デザイナたちが想定するターゲットを共有していきます。
手法としては「ペルソナ・シナリオ手法」や「5つのワークモデル」などがあります。

・3.ストーリーボードとは。

考えたペルソナをもとに、そのペルソナがそのサービスでやりたいコトをできるまでのストーリーを考えます。
これにより、デザインコンセプトを決定します。

・4.スケッチとは。

これまで得たデータをもとに、デザインを考えて色々なパターンを作っていきます。
デザインの「発散」です。

・5.プロトタイプとは。

作ったスケッチたちの中から良かったものを選び出し、より詳細に検証していきます。
デザインの「収束」です。

・6.実装とは。

ガンガンいこうぜのプロセス。

本エントリでは、

1. デザイン調査
2. ユーザーモデリング(ペルソナ)

を実施します。

2.デザイン調査

当サイトをサンプルに、デザイン調査をやってみます。

サイトに訪れて下さった方に直接お話を聞くのはコストが高いので、Google Analyticsからアクセス解析をしてユーザ層の把握をしていきます。

サイト訪問者の状況。

1. アクセスが多い時間帯:
   平日の18:00〜26:00。ピークは0:00
2. OSのシェア:
   Windows 60%(そのうち7が50%、XPが40%)、Mac 25%、Linux 10%
3. ブラウザのシェア:
   chrome 40%、Firefox 30%、IE 20%、Safari 10%、Opera 2%。
4. アクセスもと:
   Google 90%、Yahoo 8%、bing 1%
5. アクセスが多い地域:
   東京 50%、神奈川 10%、大阪 5%、愛知 5%

サイトを訪れた目的。

1. 検索ワードの話題と割合は「tizen」関連 33%、「Android」関連 30%、「JavaScript」関連 22%

パッとみ、MacやLinuxでChromeやFirefoxを使う、夜型のIT関係の人が仕事終わりに家からこのサイトを見ていると思われます。

これで訪問してくれる人たちの状況を洗い出しました。

3.ユーザーモデリング(ペルソナ) 準備

さて、ここからペルソナを考えていきます。

まず、世間のOSのシェアと比べます。

Windows XPのシェアが再び回復 - 3月デスクトップOSシェア | マイナビニュースによると、
2012年3月 時点で、Windows 92%、Mac 7%、Linux 1%
となっています。
当サイトのシェアは、それと比べると
Windows 約0.7倍、Mac 3.5倍、Linux 10倍
です。

Linuxのシェアが世間よりずば抜けて高いので、訪問してくれるのはギークな人が多いようです。

続いて、世間のブラウザのシェアと比べます。

ブラウザシェア推移グラフ (StatCounter Global Statsより) |Let's HSPによると、
20121年5月1日 時点で IE 53%、Firefox 20%、Chrome 18%、Safari 7%、Opera 2%
となっています。
当サイトのシェアは、それと比べると
IE 0.4倍、Firefox 0.7倍、Chrome 2.2倍、Safari 1.4倍、Opera 1倍
です。

IEのシェアが世間よりとても低く、ちょっと前までイケイケだったFirefoxもなかなか低いです。
Safariが多いのはMacユーザーの訪問者が多いからでしょう。
やはり、ネットに対して感度が高い人が多いようです(当ブログの話題を考えると当たり前か)。

最後に、世間の検索エンジンのシェアを比べます。

GA-Proによると、
2012年5月20日 時点でYahoo 52%、Google 46%
となってます。 あれ、bingは？？
当サイトのシェアはそれと比べると
Yahoo 0.2倍、Google 2倍、bing 測定不能だが多い
です。

Googleが圧倒的に多くなっています。
予想通りです。

さて、今回最も重要だと思ったのが、検索ワードの話題と割合です。

もう一度 結果を書くと、

• 「tizen」関連 33%
• 「Android」関連 30%
• 「JavaScript」関連 22%。

この3つの検索ワードをもとにペルソナを作っていこうと思います。

4.ユーザーモデリング(ペルソナ) 3つのペルソナ作成

まず「Tizen」で検索するペルソナについて。

Tizenとは、サムスンやLinux Foundationたちが推進するオープンソースのスマフホ向け新OSで、まだまだマイナーなワードだと思われます。
このワードで検索するのはいわゆるイノベーターでしょう。
CEATECなどのイベントにもよく行くのでは。
かなりの確率で男性でしょう。
年齢は20代後半〜30代でしょうか。

また、PCは複数台持っていて、Linuxをよく使ってそうです。
なぜならこのTizen、前まではUbuntu向けにしかSDKが提供されてなかった(今はWindows 7/XPでも提供されているようです)からです

平日の夜にアクセスが多いことを考えると、仕事だけでなく趣味でもプログラムをやっていると思われます。
このブログの訪問者の中でもトップクラスのスキルを持っていると思います。
Chrome使いが多そうです。
スマホは多分Android派で(Linuxユーザが多いはずなので)、もしかしたら2台持ち3台持ちなんてのもあるかも。

デザインよりも機能面を重視するタイプか。
基本的にツールやガジェット類は「便利に使えればメーカーなどにはこだわらない」というスタンス。。かな？
そして、「最初に結論を言え」というようなせっかちな性格。。か？

次に、「Android」で検索するペルソナについて。

当ブログでAndroidにきちんと触れたのは、MacでAndroid開発環境を構築する方法を書いたときだけです。
なので、Androidに興味を持ち始めた感じ。

Android開発をするのにMacを使うというのは、個人的にはけっこう珍しい選択肢だと思います。
ということはMacをメイン機で使用しているのではないでしょうか。
iOSの開発は既にしたコトがありそうです。

業務で「MacでAndroid開発」というのはあまりないと思いますので、こちらも趣味でプログラミングをやっているギークのはずです。
いわゆるアーリーアダプターで、かなりの可能性で男性だと思います。
使っているブラウザはChromeもしくはSafariでしょうか。

Apple製品が好きで、機能性はもちろんデザインにも重きをおくのでは。
ミニマルなアクア風デザインが大好き。
年齢は20代後半が多い気がします。
割とリア充(「Mac好き」の個人的なイメージ)。

最後に、「JavaScript」で検索するペルソナについて。

検索ワードを詳しく見ると「JavaScript 再描画」や「JavaScript 性能」などがあるので、AjaxバリバリのRIAを開発している中級者くらいのWebデベロッパでしょうか。
RIA開発にかかせないHTMLとCSSの知識も持ってるでしょう。
また中級者というコトで、Windowsユーザが多そうです。


また、超便利なWeb開発ツールであるFirebugがあるのでFirefoxユーザが多そうです。
年齢層は「Tizen」や「Android」のセグメンテーション(←「クラスタ」的な意味です)と比べて若そうです。
20代前半〜20代半ばが多いですかね。

プログラミングの話題なので、こちらも男性でしょう。

という訳で、「Tizen」「Android」「JavaScript」で分類したペルソナを作ってみました。

5.ユーザーモデリング(ペルソナ) 3つのペルソナまとめ

こんなんなりました。

・ペルソナ1 (「Tizen」のセグメンテーション)

20代後半〜30代の男性でイノベータなギーク。Android使いで、メインPCはLinuxとWindows。メインブラウザはChrome。サービスは機能面を重視する。割とせっかち。

・ペルソナ2 (「Android」のセグメンテーション)

20代後半の男性でアーリーアダプターなギーク。iPhoneを持っているけどAndroidに興味がある もしくは 最近Androidを買った。メインPCはMac。メインブラウザはWebkitベースのやつ。サービスはデザイン・機能面ともにこだわる。KISSなUIが好き。リア充。

・ペルソナ3 (「JavaScript」のセグメンテーション)

20代前半〜20代半ばの男性。メインPCはWindowsでメインブラウザはFirefox。HTMLやCSSのコーディングもできるけど一番得意なのはJavaScript。性格や考え方は…検討できませんでした！(涙)

6.最後に

たかが個人Blog一つの調査＆まとめに2時間くらいかかってしまった…(HTMLの整形は除く)
でもなかなか楽しかったです。

ペルソナってみんなやってるんでしょうかね、工数の都合で省略されているイメージです…。

今回検討した3つのペルソナ、皆さんには当てはまっているでしょうか！
当てはまってる、当てはまってない関わらずコメント残してくれたら嬉しいです！
また、こんな感じでいいのか自信はないので「こんな風にしたらいい」などの意見がありましたら、そちらのアドバイスも頂けると幸いです。

ちなみに本エントリのタイトルに「その1」って書いてますが、続くかは未定です！ ストーリーボードの作成に続きます

それでは。

参考書籍