UXとユーザビリティ計測

折原レオナルド賢（26）
2016入社
フロントエンドエンジニア

1. どこまでが UX ?
2. どうやって UX を見る？
3. ケーススタディ

UI と UX どこまでが UX ?
UI/UX
UI/UXという単語はよく並べられますが、
あまり良い組み合わせとは言えないでしょう

UI/UX

UI UX
※ から見たの場合UIUX
UI∈UX
それぞれの担当領域が異なっていて
考え方が違います

UX の範囲はどこどこまでが UX ?
または実店舗
UXとして検討すべき範囲はこのイラストだけの範囲ではありません

見た目の印象
周りからの印象
後後日日......
手元に届いた後も周りからの印象がUXに起因したり
良い体験から、次の購買につながることもあります

または実店舗
ECサイトで接触
or
広告に接触
似た帽子の
人をみた
もっと言えば女性が帽子を欲しいと思った理由もあるかもしれません

または実店舗
見た目の印象
後後日日......
or
広告に接触
似た帽子の
人をみた
予期的UX 瞬間的UX
エピソード的UX
累積的UX
累積的UXはブランドイメージとも言えます

UX を考えるということ
UXを分解すると
UXデザイン
＝ユーザにとっての目的を達成するために何が必要か突き止めること
どこまでが UX ?
DX CX
デデジジタタルル表表現現ででのの体体験験をを
どどうう設設計計すするるかか
CCMMををみみててかからら商商品品をを買買ううままでで
一一貫貫ししててユユーーザザーーのの面面倒倒ををみみるる

UX に似た考え方
似たような考え方は様々な分野に存在する
どこまでが UX ?
HCD HM FA
人人々々がが欲欲ししいいとと思思っってていいるるここととがが
何何ででああるるかかをを中中心心ととししてて
イインンタタフフェェーーススをを最最適適化化すするる
医医者者はは患患者者のの病病気気をを治治すすここととがが
目目的的ででははななくく、、病病気気のの背背後後にに隠隠
れれたた問問題題をを取取りり除除くくここととままでで設設
計計すすべべきき
目目的的がが達達成成さされれるるののででああれればば
手手段段ははななんんだだっっててかかままわわなないい

2. どうやって UX を見る／測る?

「UX 的に良い」を見る
定量的に UX を評価したい
→ ユーザビリティ計測が一般的
どうやって UX を見る？
様々なメトリクスを取得するユーザーの意見を確認
パフォーマンス、エラー、行動・生理、
様々な反応を計測／比較
ユーザーインタビューやアンケート
自己申告メトリクスとも

ユーザビリティテストのタイミングどうやって UX を見る？
小さな機能を実装したタイミング
１つの仕組みを実装したタイミング
入力フォーム、キャラのモーション、メニューの作成
設定変更画面、１つのステージ、またはシステムの完成
非効率、エラーを招いている箇所の確認
目的達成を阻んでいるモノはないか
→ AA//BB テテスストト、、パパフフォォーーママンンスス計計測測、、行行動動観観測測、、eettcc......
形形成成的的アアププロローーチチ
総総括括的的アアププロローーチチ
製品の目標がどこまで達成されたか
他社製品と比べてどうか
前の製品のリリースと比べて改良されたか
→ 自自己己申申告告メメトトリリククスス計計測測、、印印象象調調査査、、eettcc......

タイミングの例どうやって UX を見る？
または実店舗
見た目の印象
後後日日......
or
広告に接触
似た帽子の
人をみた
たとえばあなたがのページを作っているとしたら...
ここで
事事前前アアンンケケーートト
（自己申告メトリクス）
AA//BB テテスストト
パパフフォォーーママンンスス計計測測、、行行動動観観測測
（パフォーマンスメトリクス、行動・生理メトリクス）
事事後後アアンンケケーートト、、印印象象調調査査
（自己申告メトリクス）
（テスト内容は例え）

パフォーマンスメトリクスどうやって UX を見る？
タスク成功率設定したタスクが成功したか成功 or 失敗
タスク時間タスクにかかった時間を計測
エラー入力ミス、操作ミスをカウント
効率タスクとは関係ない操作をカウント
学習可用性回数・時間経過での上記パフォーマンスの変化をみる

エラーメトリクスで判別可能だった問題どうやって UX を見る？
Butterfly ballot
AL GORE に投票しようとした人が
上から２つ目の穴を開けてしまう

迷い度 - パフォーマンスメトリクスどうやって UX を見る？
迷い度
：タスク実行中に閲覧した異なるページの数（ユニークビュー）
：タスク実行中に閲覧したページの数（ページビュー）
：タスクを完了するための最小ページ数
- 完璧なステップを踏めば 0
- 0.5 以上で明らかに迷って見えることが
多い
ページ
A
ページ
C
ページ
B
ページ
E
ページ
F
ページ
D
ページBルートは 0.0
ページC, Dルートは 0.2

抽出された問題の真偽どうやって UX を見る？
ユーザビリティテストの中で1人だけが問題を出した場合
以下の観点からその問題が正しいかを判断
同じ問題が多くの母集団で繰り返されるかを見極める
ユーザビリティテストを数回やったとき、同じ問題が再度発生するか
問題を出したユーザーの意思決定が理論的か
ユーザーの行動・思考プロセス・認識・意思決定が理論的か問いかける
思考順序に一貫性があれば真の問題、説明できなければ特殊ケースの可能性が高い

自己申告メトリクスどうやって UX を見る？
いわゆるアンケート
自由な問いかけのアンケートと決められた枠組みのアンケートがある
リッカート尺度 - 自由問いかけ
非非常常にに同同意意ででききるる同同意意ででききるるどどちちららとともも言言ええなないい
同同意意ででききなないいままっったたくく同同意意ででききなないい
質問に対して５ or ７段階の回答
聞きたいことについてしっかり聞く
・休日も使いたいですか
・操作感は気持ちよかったですか

SD法どうやって UX を見る？
SD法 - 自由問いかけ
美美ししいい
感覚値を問うときなどに使える
・・注注意意
言葉の体外的な意味を理解する必要がある（親切／親切でない、親切／敵意があるなどが妥当か）
醜醜いい
明明るるいい暗暗いい
熱熱いい冷冷たたいい
← この差は単純に数値化することはできない
（質的データのため）
また、と

ユーザビリティマグニチュード推定法どうやって UX を見る？
ユーザビリティマグニチュード推定法 - 自由問いかけ
感覚値を比較できるデータにする（デザインはシステムと置き換えても良い）
① 最初に見せたデザイン
10 20 30 40 50 60 70 80
② 続いて見せたデザイン
③ 新たに計測したデザインデザイン
ユーザーにモモノノササシシを作ってもらい、それぞれのデザインが何何倍倍差差あるか求める
→ ユーザごとに xx 倍差が求まり、この数値は比較できる（間隔尺度になる）

システムユーザビリティ・スケール（SUS）どうやって UX を見る？
決められた枠組みに沿うメリット：
→ 自分で計測していない
他社データなどと照らし合わせることができる
SUS - 決められた枠組み
System Usability Scale http://www.measuringux.com
Participant ID: _____ Date: ___/___/___
System Usability Scale
Instructions: For each of the following statements, mark one box that best describes
your reactions to the website today.
Strongly
Disagree
Strongly
Agree
1. I think that I would like to use this website
frequently.
2. I found this website unnecessarily complex.
3. I thought this website was easy to use.
4. I think that I would need assistance to be
able to use this website.
5. I found the various functions in this website
were well integrated.
6. I thought there was too much inconsistency
in this website.
7. I would imagine that most people would
learn to use this website very quickly.
8. I found this website very
cumbersome/awkward to use.
9. I felt very confident using this website.
10. I needed to learn a lot of things before I
could get going with this website.
Site: ___________________________
Please provide any comments about this website:
This questionnaire is based on the System Usability Scale (SUS), which was developed by John Brooke while working at Digital
Equipment Corporation. © Digital Equipment Corporation, 1986.
- 計算方法が特殊
- メリット・デメリットが交互に並ぶ
これは不正対策にもなる

Strongly
Disagree
Strongly
Agree
frequently.
in this website.
Site: ___________________________
Strongly
Disagree
Strongly
Agree
frequently.
in this website.

Strongly
Disagree
Strongly
Agree
frequently.
in this website.
Site: ___________________________
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
全く同意
できない
非常に
同意できる
このシステムを頻繁に使いたいと思う
このシステムは不必要に複雑だと思った
このシステムは使いやすいと思った
このシステムを使えるようになるには、
テクニカルサポートが必要だと思う
このシステムのさまざまな機能がよく
まとまっていると思った
このシステムは一貫性がないところが
たくさんあると思った
ほとんどの人がこのシステムの使い方を
簡単に学べると思う
このシステムは非常に扱いにくいと思った
このシステムを使っていて非常に自信が持てた
このシステムを使い始める前にたくさんの
ことを学ばなければならないと思った

TTiippss:: “Speed Bumps” どうやって UX を見る？
アンケートが多い／長いと、適当な回答が増える
→ このようなデータは破棄しなければ信憑性が失われる
Speed Bumps
http://uxmetricsgeek.com
Jeff Sauro らの研究によると (https://measuringu.com/cheat-survey/)
平均で 12% のユーザーが Speed Bumps に引っかかっている
Speed Bumps

その他の調査票どうやって UX を見る？
コンピュータシステム・ユーザビリティ調査票（CSUQ） - 決められた枠組み
ユーザインターフェース満足度調査票（QUIS） - 決められた枠組み
実用性・満足度・使いやすさ調査票（USE） - 決められた枠組み

ユーザビリティテストは何人必要かどうやって UX を見る？
1度のユーザビリティテストは５人で十分と言われている
NIELSEN on March 19, 2000 https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
ユーザー1名が発見できる問題の割合 = 31%
人のユーザが発見できる問題の割合は以下の式になる
ユーザー５名の場合
５名のユーザーで見つかった問題修正後、
さらにテストを行うことが有効

CA-Link 管理画面のリニューアル
- LINEビジネスコネクトを利用したマーケティングツール
- 顧客拡大に伴って、管理画面の顧客向け解放を見据えて再設計
ケーススタディ
フロントエンド的施策
- UX 的施策を盛り込みたい
- ミスオペレーションの減少
- 情報設計の最適化（どういう情報がどういうところにあるか）
- 機能の短絡化（エキスパートユーザー向け施策）
- それでいて、以前の使用感を大幅に変えることはしない（エキスパートユーザー向け施策）

どこからデザイン修正案がくるかケーススタディ
- 人間と人工知能のハイブリッドで行う
カスタマーサポートサービス
- B to B to C のプロダクト
- 使うのは問い合わせをしたいユーザー
- デザイン修正案をいただくのは
導入していただいているお客さん
→ デザイン／レイアウトとしての裏付けが欲しい
以前のプロダクトでは

検検討討１１：：ササイイドドメメニニュューーっってて左左右右どどっっちちににああるるべべきき？？
33.. ケケーーススススタタデディィ

情報配置の妥当性ケーススタディ
検討１：サイドメニューって左右どっちにあるべき？
現行の CA-Link管理画面
サイドメニューは左側

管理画面の観察 - 検討１：サイドメニューって左右どっちにあるべき？ケーススタディ
LINE @ MANAGER
左側

LINE developers
左側

Facebook 広告マネージャ左側

情報配置の妥当性ケーススタディ
検討１：サイドメニューって左右どっちにあるべき？
- 基本的には左側
- どうして左側が好まれるのか検証したい
やったこと
顕著性マップでのUI確認
A/Bテスト
ヒアリング

顕著性マップでの UI 確認ケーススタディ
顕著性マップ
人間の眼球構造のみを考慮したときの、
画像内の目の行きやすさを数理モデルからシュミレーションしたもの
明るいところが
目の行きやすいところ
※ ガボールフィルターを使った畳み込み積分にてシミュレート

顕著性マップでの UI 確認 - DeepGaze ケーススタディ
アルゴリズムを DeepGaze に変更して再度確認

顕著性マップでの UI 確認 - DeepGaze ケーススタディ
アルゴリズムを DeepGaze に変更して再度確認
-- ササイイドドメメニニュューーはは値値がが高高くくなないい
見見たた目目／／デデザザイインンににおおけけるる生生体体的的なな影影響響はは少少ななそそうう
-- ササイイドドメメニニュューーがが左左側側ににああるるののはは、、おおそそららくく慣慣習習的的なな影影響響ででははなないいかか
ここれれををううけけててユユーーザザーーテテスストトををおおここななっってて再再調調査査

A/Bテストとヒアリングケーススタディ
ペーパーモックをつかったユーザテスト(印象A/Bテスト)
- 画面イメージを印刷することでペーパーモックを作成
- PCのディスプレイに立てかけテスト
- 落ち着くとおもう方の意見を確認
- 発言の論理性を確認（説明できるかをテスト）
- 気持ち悪いと思った方の意見を確認
- 発言の論理性を確認（説明できるかをテスト）
ユーザテスト内容

テスト結果 - A/Bテストとヒアリングケーススタディ
左メニューの意見右メニューの意見
- 左メニューの方が安心感
- 使いやすい、慣れている気がする
- 目線が左上から入るため、メニューを
確認してからコンテンツに入れる
- 右メニューはほとんど目を当ててな
かった（言われて気づく）
- 右は絞り込みのような機能があるべき

テスト結果 - A/Bテストとヒアリングケーススタディ
左メニューの意見右メニューの意見
- 左メニューの方が安心感
- 使いやすい、慣れている気がする
- 目線が左上から入るため、メニューを
確認してからコンテンツに入れる
- 右メニューはほとんど目を当ててな
かった（言われて気づく）
- 右は絞り込みのような機能があるべき
ヒアリング結果は左側メニューが圧倒的
タッチデバイスだと思って見てもらった際
１件だけ右メニューが有意な意見があった

検検討討２２：：メメニニュューーののググルルーーピピンンググははイイメメーージジとと合合っっててるる？？

メニュー内容の妥当性ケーススタディ
検討２：メニューのグルーピングはイメージと合ってる？
この組み合わせの
妥当性を確認する
←グループ１つめ
←グループ２つめ
←グループ３
←グループ４

カードソート - メニュー内容の妥当性ケーススタディ
りりんんごごみみかかんん
いくつかのカードがあって...
褐褐色色系系寒寒色色系系そそのの他他
ススイイカカメメロロンン
どのグループに属するか選んでもらう → クローズド・カードソート
グループをあらかじめ用意しない → オープン・カードソート
カードソートというテストを行う

オープン・カードソートの風景ケーススタディ

カードソートの計算方法ケーススタディ
AA BB CC
同じグループ
= 距離 0
異なるグループ
= 距離 1 （どのグループとも）

カードソート集計ケーススタディ
すべてのテスト結果を足し合わせる（10人であれば、10人分の距離データを足し合わせる）
足し合わせただけとはいえ、このデータは距離の公理を満たす
→ 数多くの統計手法を用いることができる

多次元尺度構成法 - カードソート集計ケーススタディ
それぞれの要素の近さを見える化できる
- 目視にてグルーピングしても良い
- どこが混み合っているかなど
判断するだけでも良い

クラスター・デンドログラム - カードソート集計ケーススタディ
適当な Height（しきい値）で切りグルーピング
- 入れ子メニューなども一発で構築できる

検検討討３３：：<<iinnppuutt>> 要要素素のの見見たた目目・・挙挙動動のの決決めめ方方はは？？

トグルボタンの優位性ケーススタディ
検討３： <input> 要素の見た目・挙動の決め方は？
Thomas S. Tullis, et al, 2007 What's the Most Effective Way to Present Two-State Toggle Buttons?
左記デザインの
優位性を検討

検証実験 - メニュー内容の妥当性ケーススタディ
実験内容
被験者 371 名
1. ON/OFF どちらも選択されていない状態で表示
指定した選択肢を選んでもらう
2. ON/OFF どちらかが選択されている状態で表示
選択を切り替えてもらう
どちらも３秒以内に選択

選択の正確さ - パフォーマンスメトリクスケーススタディ
Design 4, 15, 16 だけが著しく低い

選択までの速さ - パフォーマンスメトリクスケーススタディ
Design 4, 12, 15, 16 がやや遅い

トグルボタンの好み - 自己申告メトリクス (自由問いかけ) ケーススタディ
Design 6, 7 が人気

総合評価 - トグルボタンの優位性ケーススタディ
Design 6, 7 が高得点

総合評価 - トグルボタンの優位性ケーススタディ
Design 6, 7 が高得点
面白いことに Design 7 はブラウザ標準のラジオボタン。
古くから使われてきて使い慣れているのか、完成されたデザインだったかはわからないけれど
15種の中で最も正確性が高く、時間がかからず、見た目も好まれるデザインのひとつであることは間違いない

まとめ
11.. UUXXががななににをを指指ししてていいてて、、どどここままででををカカババーーすすととべべききななののかか
見た目・操作感の気持ちよさなども自己申告メトリクスで計測可能
22.. いいくくつつかかのの例例ににててユユーーザザビビリリテティィ計計測測のの手手法法をを紹紹介介
やってみると意外と簡単な作業の繰り返しが多い
複雑な計算式を要するものでも R や Python で計算可能
33.. 新新たたなな計計測測手手法法もも交交ええてて、、ケケーーススススタタデディィをを紹紹介介
計測手法からテスト方法が想像できなかったら、
他人の例を参考にすると良い

UXとユーザビリティ計測

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to UXとユーザビリティ計測

Similar to UXとユーザビリティ計測 (19)

Recently uploaded

Recently uploaded (9)

UXとユーザビリティ計測