エンジニアがUXをロジックで考えてみる
折原 レオナルド賢

折原 レオナルド賢（26歳）
新卒 ３年目
フロントエンドエンジニア
@Leonardo_engr
折原 レオナルド賢

なにをしたの？
はじめに
管理画面のUXを改善した話しをします

なにをしたの？
はじめに
管理画面のUXを改善した話しをします

UXを良くしようと考えた時
こんな言葉が頭に浮かぶかと思います

今回話す内容のキーワード
数字 or 見える化して良さを見ましょうのような内容

1. どうやって UX を見る／測る？
2. 印象の変化を見る／測る
3. 見た目の評価をする

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

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

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

迷い度 - パフォーマンスメトリクス
どうやって UX を
見る・測る？
2
6
6
ページ

. 0

B
ページ
ページ
ページ
A
D
E
ページ
ページ
ページ
B
C
B

6
- 完璧なステップを踏めば 0
迷い度
- 0.5 以上で明らかに迷って見えることが多い
：タスク実行中に閲覧した異なるページの数（ユニークビュー）
：タスク実行中に閲覧したページの数（ページビュー）
：タスクを完了するための最小ページ数

パフォーマンスメトリクスで判別可能だった問題
どうやって UX を
見る・測る？
Butterfly bal ot

パフォーマンスメトリクスで判別可能だった問題
どうやって UX を
見る・測る？
Bluffton University bus crash

ケーススタディ
自動応答メッセージ設定画面を改良してみる

現行管理画面の自動応答メッセージ設定 UI
自動応答メッセージ設定画面
を改良してみる

現行管理画面の自動応答メッセージ設定 UI
自動応答メッセージ設定画面
を改良してみる
この２つが最重要

現行管理画面の自動応答メッセージ設定 UI
自動応答メッセージ設定画面
を改良してみる
その他の項目も必須だけど、
メインの導線からは外したい
この２つが最重要

現行管理画面の自動応答メッセージ設定 UI
自動応答メッセージ設定画面
を改良してみる
仮説を立ててみる
こんにちは
ハジメマシテ

現行管理画面の自動応答メッセージ設定 UI
自動応答メッセージ設定画面
を改良してみる
仮説を立ててみる

修正した自動応答メッセージ設定 UI
自動応答メッセージ設定画面
を改良してみる

修正した自動応答メッセージ設定 UI
自動応答メッセージ設定画面
を改良してみる
必要な要素だけを
必要と思う順番で配置してみる

修正した自動応答メッセージ設定 UI
自動応答メッセージ設定画面
を改良してみる
ユーザーとボット
どっちの文言を設定するかを明確にしてみる

修正した自動応答メッセージ設定 UI
自動応答メッセージ設定画面
を改良してみる
管理設定という項目を設けて
メインタスクから排除したつもり
ここの要素は自動で設定されるか、
デフォルト値が決まっているとしている

UX の比較
自動応答メッセージ設定画面
を改良してみる
どっちが良い UX か（仮説は正しいか）をテストする
現行
新

自動応答メッセージ画面のユーザビリティテスト（計画） 自動応答メッセージ設定画面
を改良してみる
実験
自動応答メッセージを作成してもらう
現行
新
６名
カウンターバランス
テスト順番が学習可用性に影響する場合、
順番を入れ替えることでバイアスを無くす
新
現行
７名
エキスパートユーザー (※)
現行
新
５名
(※) → 現行で運用しているメンバー

計測の内容
自動応答メッセージ設定画面
を改良してみる
パフォーマンスメトリクス
タスク成功率
タスク時間
エラー
効率
指定した項目の入力ができたか
成功 or 失敗
最短ルートから逸脱した行動の数
必須項目の未設定数 など
クリック数、入力数、迷い度

計測の結果 -
自動応答メッセージ設定画面
タスク時間平均、クリック+入力回数平均
を改良してみる
タスク時間平均 [秒]
現行管理画面
クリック+入力回数平均 [回]
現行管理画面
新管理画面
新管理画面
160
25
140
136.
20
120
19.
105.
14
100
57
15
13.
80
13.
17
65.
83
10
60
60
53.
50.
8.
20
46.
40
6.
60
33
43
40
5
83
5.
20
43
0
0
現行
新
新
現行
エキスパート
エキスパートユー
ユーザー
現行
新
新
現行
ザー

計測の結果 -
自動応答メッセージ設定画面
タスク時間平均、クリック+入力回数平均
を改良してみる
タスク時間平均 [秒]
現行管理画面
クリック+入力回数平均 [回]
現行管理画面
新管理画面
新管理画面
160
25
63%減
140
136.
20
120
19.
49%減
105.
14
100
57
15
13.
80
13.
17
29%減
65.
83
10
60
60
53.
50.
8.
20
46.
40
6.
60
33
43
40
5
83
5.
20
43
0
0
現行
新
新
現行
エキスパート
エキスパートユー
ユーザー
現行
新
新
現行
ザー
同じタスクを行うにあたって、
時間短縮が行えている

計測の結果 -
自動応答メッセージ設定画面
タスク時間平均、クリック+入力回数平均
を改良してみる
タスク時間平均 [秒]
現行管理画面
クリック+入力回数平均 [回]
現行管理画面
新管理画面
新管理画面
160
25
140
136.
72%減
20
120
19.
105.
14
100
57
15
51%減
34%減
13.
80
13.
17
65.
83
10
60
60
53.
50.
8.
20
46.
40
6.
60
33
43
40
5
83
5.
20
43
0
0
現行
新
新
現行
エキスパート
エキスパートユー
ユーザー
現行
新
新
現行
ザー
同じタスクを行うにあたって、
アクション数を減らせている

計測の結果 -
自動応答メッセージ設定画面
エラー数平均、迷い度平均
を改良してみる
エラー回数平均 [回]
現行管理画面
迷い度平均 [回]
現行管理画面
新管理画面
新管理画面
4.0
0.12
3.5
0.
3.
0.10
11
43
3.0
0.
10
0.08
2.5
2.0
2.
0.06
00
0.
1.5
0.
06
67
0.
1.
0.
0.04
1.0
43
20
40
0.
0.
0.
0.02
0.5
00
00
00
0.0
0.00
現行
新
新
現行
エキスパート
エキスパート
ユーザー
現行
新
新
現行
ユーザー

計測の結果 -
自動応答メッセージ設定画面
エラー数平均、迷い度平均
を改良してみる
エラー回数平均 [回]
現行管理画面
迷い度平均 [回]
現行管理画面
新管理画面
新管理画面
4.0
0.12
3.5
87%減
0.
3.
0.10
11
43
3.0
0.
10
0.08
2.5
67%減
2.0
2.
0.06
00
0.
1.5
0.
06
67%減
67
0.
1.
0.
0.04
1.0
43
20
40
0.
0.
0.
0.02
0.5
00
00
00
0.0
0.00
現行
新
新
現行
エキスパート
エキスパート
ユーザー
現行
新
新
現行
ユーザー

計測の結果 -
自動応答メッセージ設定画面
エラー数平均、迷い度平均
を改良してみる
エラー回数平均 [回]
現行管理画面
迷い度平均 [回]
現行管理画面
新管理画面
新管理画面
4.0
0.12
3.5
0.
3.
0.10
11
43
3.0
0.
10
0.08
2.5
2.0
2.
0.06
00
0.
1.5
0.
06
67
0.
1.
0.
0.04
1.0
43
20
40
0.
0.
0.
0.02
0.5
00
00
00
0.0
0.00
現行
新
新
現行
エキスパート
エキスパート
ユーザー
現行
新
新
現行
ユーザー

2. 印象の変化を見る・測る

システムユーザビリティ・スケール（SUS）
印象の変化を見る・測る
Participant ID: _____
Site: ___________________________
Date: ___/___/___
System Usability Scale
Instructions: For each of the following statements, mark one box that best describes
your reactions to the website today.
Strongly
Strongly
Disagree
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.
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.
System Usability Scale
http://www.measuringux.com

Participant ID: _____
Site: ___________________________
Date: ___/___/___
System Usability Scale
Instructions: For each of the following statements, mark one box that best describes
your reactions to the website today.
システムユーザビリティ・スケール（SU
Strongly
Strongly
Disagree S）
印象の変化を見る・測る
Agree
1.
I think that I would like to use this website
Participant ID: _____
Site: ___________________________
Date: ___/___/___
frequently.
System Usability Scale
Instructions: For each of the following statements, mark one box that best describes
2.
I found this website unnecessarily complex.
your reactions to the website today.
Strongly
Strongly
Disagree
Agree
1.
I think that I would like to use this website
frequently.
3.
I thought this website was easy to use.
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.
4.
I think that I would need assistance to be
5.
I found the various functions in this website
were well integrated.
→ 他社データなどと照らし合わせることができる
able to use this website.
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.
5.
I found the various functions in this website
8.
I found this website very
cumbersome/awkward to use.
were well integrated.
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.
6.
I thought there was too much inconsistency
in this website.
Please provide any comments about 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.
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.
10.
I needed to learn a lot of things before I
could get going with this website.
System Usability Scale
http://www.measuringux.com
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.

Participant ID: _____
Site: ___________________________
Date: ___/___/___
System Usability Scale
Instructions: For each of the following statements, mark one box that best describes
your reactions to the website today.
システムユーザビリティ・スケール（
全く同SU
意
S）
印象の変化を見る・測る
非常に
できない
同意できる
1. このシステムを頻繁に使いたいと思う
Participant ID: _____
Site: ___________________________
Date: ___/___/___
System Usability Scale
Instructions: For each of the following statements, mark one box that best describes
2. このシステムは不必要に複雑だと思った
your reactions to the website today.
Strongly
Strongly
Disagree
Agree
1.
I think that I would like to use this website
frequently.
3. このシステムは使いやすいと思った
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.
4. このシステムを使えるようになるには、
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.
5. このシステムのさまざまな機能がよく
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.
6. このシステムは一貫性がないところが
Please provide any comments about this website:
- 計算方法が特殊
たくさんあると思った
7. ほとんどの人がこのシステムの使い方を
- ポジティブな質問・ネガティブな質問が交互に並ぶ
簡単に学べると思う
これは不正対策にもなる
8. このシステムは非常に扱いにくいと思った
9. このシステムを使っていて非常に自信が持てた
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.
10. このシステムを使い始める前にたくさんの
ことを学ばなければならないと思った
System Usability Scale
http://www.measuringux.com
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.

製品リアクションカード
印象の変化を見る・測る
アクセシブル クリエイティブ
速い
意味がある
遅い
Accessible
Creative
Fast
Meaningful
Slow
高度
カスタマイズできる
柔軟性がある やる気にさせる 洗練されている
Advanced
Customizable
Flexible
Motivating
Sophisticated
1
1
わずらわしい
最先端
壊れやすい
安全でない
安定している
Annoying
Cutting edge
Fragile
Not Secure
Stable
訴求力がある
時代遅れ
新味がある
価値がない
無味乾燥
Appealing
Dated
Fresh
Not Valuable
Sterile
とっつきやすい
好ましい
親切
奇抜
刺激的
Approachable
Desirable
Friendly
Novel
Stimulating
魅力的
難しい
不満がたまる
古い
ストレート
Attractive
Difficult
Frustrating
Old
Straight Forward
退屈
まとまりがない
楽しい
楽観的
etc ...
8
Boring
Disconnected
Fun
Optimistic
Rosalind W. Picard
Emotion Research by the People, for the People

ケーススタディ
システム間の印象変化を見てみる

システムの印象変化を確認する その１
システム間の印象変化を
見てみる
現行 ・ 新 それぞれの実験終了後に
SUS 調査票を記入してもらう

システム印象テスト結果
システム間の印象変化を
- システムユーザビリティスケール
見てみる
システムユーザビリティスケール [%]
現行管理画面
新管理画面
100.0
90.0
80.0
81.
24%増
76.
47%増
16%増
70.0
07
74.
25
50
60.0
58.
50.0
51.
00
40.0
67
33.
30.0
86
20.0
10.0
0.0
現行
新
新
現行
エキスパートユーザー

Participant ID: _____
Site: ___________________________
Date: ___/___/___
System Usability Scale
Instructions: For each of the following statements, mark one box that best describes
Participa
your nt ID:
reacti ___
ons __
Site: ________
to the website today.
___________________
Date: ___/___/___
全く同意
非常に
System Usability
できない
Scale
同意できる
1.
Part この
icip シ
anス
t Iテ
Dム
: を
頻繁
___ に
__ 使いたい
Sit と
e: 思
う
質問文ごとのスコア
Participant ID: _____
Site: ___________________________
Date: ___/___/___
Instructions: For each of the
システム間の印象変化を
- システムユーザビリティスケール
following statements, mark one box that best describes
your
Particip reacti
ant IDons
:
to the website
_____
Site: today.
見てみる
2. このシステムは不必要に複雑だ System
と思った
System
________Usability
_________
Usability Scale
__________
Date: ___/___/___
Scale
全く同意
非常に 現行管理画面のスコア平均
Instructi
3. このシス
Instructions
テム :は For
使い
For each
やすい
each
とof
思 the
った
the following
System
ing statements,
できない
Usability
statements, mark one
Scale box that best describes
同意できる
describes
新
で上がり幅が大きかった質問文（ポジティブな質問文）
your
1. こ
your reacti
のシステ
reactions
ムを
ons to the website
頻繁に使いたいと
to the website t
思oda
う y.
新管理画面のスコア平均
4. このシステ
Instructioムを
ns:使える
For ように
eachな
る
of には
the 、
following statements, mark one box that best describes
テクニカルサポートが必要だと思う
2.your reactions to the website today.
全く同
全く 意
非常に
このシステムは不必要に複雑だと思った
5. このシステムのさまざまな機能がよく
できな
でき い
同意できる
き
全く同意
非常に
1. まと
こ ま
の っ
シ て
ス い
テ る
ム と
を 思っ
頻繁 た
3. このシ
この ス
シ テ
ス ム
テ を
ムは頻繁
使いに
や使
すいた
と い
思と
っ
い 思
た
と う
できない
同意できる
+1.44
6. このシステムは一貫性がないところが
1. このシステムを頻繁に使いたいと思う
2.67
4.11
2. たく
こ さ
の ん
シ あ
ス る
テ と
ム 思
は った
4. このシ
この ス
シ テ
ス ム
テ は
を不必要
使える
不必要に
よ 複雑
うに
複雑だ
な と
る
だ 思
に
と っ
は た
、
っ
7.
Part テク
icip ニ
ほとanカ
んt Iル
どDサ
の: ポ
人 ー
が ト
こ
___ が
のシ
__ 必要
ステ だ
ム と
の
Sit 思
使
e: う
い
方を
___________________________
Date: ___/___/___
+1.33
2. このシステムは不必要に複雑だと思った
3. 簡単
この に
シ 学
ス べ
テ る
ム と
は 思
使 う
5. この
こ シ
の ス
シ テ
ス ム
テ は
の使
さい
ま や
ざ す
ま
や い
な
す と
い 思
機能
と った
がよ
っ く
た
3.22
4.56
8. まと
こ ま
の っ
シ て
ス い
テ る
ム と
は 思っ
非常 た
に扱いにくいと思った
System Usability Scale
3. このシ
この ス
シ テ
ス ム
テ は
ム 使
を い
使 や
えるす
よい
うと
に思
なっ
るた
4. このシステムを使えるようになるには
に 、
6. このシステムは一貫性がないところが
9. テ
こク
の
テ ニ
シ
ク カ
ス
ニ ル
テサ
Instructi ム
ル ポ
o を ー
ns:使 ト
っ
ー が
て
ト 必要
For い
て
必要だと
非常
だ 思
each に
と う
たくさんあると思った
of 自信
う
the が持て
followた
ing statements, mark one box that best describes
4. このシステムを使えるようになるには、
5. この
新 システムのさまざまな機能がよく
7.
5. この
your シ
ほと ス
ん テ
ど ム
の
で
reacti の
人 さ
が
ons ま
こ ざ
の ま
シ な
ス
下がり幅機能
テムのが
使よ
to the website
い方
t を
テクニカルサポートが必要だと思う
が大きかった質問文
oday.
（ネガティブな質問文）
10. まとま
簡単
まと っ
この に
ま て
シ 学
っ い
ス べ
て る
テ る
い と
ム と
る 思
を 思
と っ
使 う た
い始
っ める前にたくさんの
5. このシステムのさまざまな機能がよく
6.
全く同意
非常に
8.
6. この
こ
こと
こ シ
のを
の ス
シ学
シ テ
まと ス
ス ム
ま テ
っば
テ は
てな 一貫性
いる非常
けれ
と思 に
ばな
一貫性が
っ 扱
らな
た いい
にと
く
い こ
い
と ろ
と
思
こ が
思
っ
ろ っ
た
が た
たくさ
たく ん
さ ある
あ と
る 思
と った
っ
できない
同意できる
6.
1. この
こ シ
の ス
シ テ
ス ム
テ は
ム 一貫性
を頻繁 が
に な
使 い
い と
た こ
い ろ
と が
7. ほとんどの人がこのシステムの使い方
思 を
う
9.
7. ほとんどの人がこのシステムの使い方
このシステムを使っていて非常に自信が持てた
-1.61
簡単
Please
たく
簡単に
さ 学
ん べ
あ る
provide
る と

と
る 思
思
と う
any
っ comment
た
う
s about this website:
1.44
3.06
7.
2. ほと
こ ん
の ど
シ の
ス 人
テムがこ
は のシス
不必要 テ
に ムの
複雑 使
だ い
と 方
思 を
8.
った
10.
8. この
こ シ
の ス
シ テ
ス ム
テ は非常に扱いにく
に い
く と
い 思
と った
このシ
簡単 ス
に テ
学 ム
べ を
る 使
と い
思 始
う める前にたくさんの
っ
-1.61
ことを学ばなければならないと思った
8.
1.33
2.94
3. このシ
この ス
シ テ
ス ム
テ は
ム 非常
は使 に
い 扱
や い
す にく
と い
思 と
っ 思
た った
9. この
こ シ
の ス
シ テ
ス ム
テ を
ム 使って
っ い
て て
い 非常に自
に 信が持てた
て
9.
4. このシ
この ス
シ テ
ス ム
テ を
ム 使
を っ
使 て
え い
る て
よ 非常
うになに
る自
に信
はが
、持てた
10. この
Please シ
この ス
シ テ
ス ム
テ を
provide
ム
を使い
any 始
める
め 前にた
comment
に sく

た さ
く ん
さ の
about
のthis website:
テクニカルサポートが必要だと思う
こと
こ を
と 学ばなければなら
な な
ら いと
い 思
と った
っ
10.
5. この
こ シ
の ス
シ テ
ス ム
テ を
ム 使
の い
さま始
ざめ
まる
な前に
機能たく
が さ
よ ん
く の
ことを
まと 学
ま ば
っ な
ていけ
るれ
と ば
思 な
っ ら
た ないと思った
Please
6. こ provide
のシステム any
は
comment
一貫性がないと s
こ about
ろが
this website:
たくさんあると思った
Please provide any comments about this website:
7. ほとんどの人がこのシステムの使い方を
簡単に学べると思う
8. このシステムは非常に扱いにくいと思った
9. このシステムを使っていて非常に自信が持てた
10. このシステムを使い始める前にたくさんの
ことを学ばなければならないと思った
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.
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.
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.
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.
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.

システム印象テスト結果
システム間の印象変化を
- 製品リアクションカード
見てみる
現行
新

3. 見た目の評価をする

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

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

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

顕著性マップでの UI 確認
サイドメニューって
- DeepGaze
左右どっちにあるべき？
アルゴリズムを DeepGaze に変更して再度確認
明るいところが
目の行きやすいところ

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

A/Bテスト と ヒアリング
サイドメニューって
左右どっちにあるべき？
ペーパーモックをつかったユーザテスト(印象A/Bテスト)
- 画面イメージを印刷することでペーパーモックを作成
- PCのディスプレイに立てかけテスト
ユーザテスト内容
- 左側サイドメニューの意見を確認
- 右側サイドメニューの意見を確認

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

テスト結果
サイドメニューって
- A/Bテスト と ヒアリング
左右どっちにあるべき？
左メニューの意見
右メニューの意見
ヒアリング結果は 左側メニューが圧倒的
左メニューにすることに問題・抵抗は無い
- 左メニューの方が安心感
- 右メニューはほとんど目を当ててな
右メニューは一目であることに気づかないなどの問題
- 使いやすい、慣れている気がする
かった（言われて気づく）
- 目線が左上から入るため、メニューを - 右は絞り込みのような機能があるべき
確認してからコンテンツに入れる

ケーススタディ
ユーザーは何を見てる？何を見てない？

ユーザービリティテスト風景
ユーザーは何を見てる？
何を見てない？

アイトラッキングで得られたデータ
ユーザーは何を見てる？
何を見てない？
定量化できない部分の判定
フォームに入力をしなかった
フォーム部品に気づいてない？

動画
https://youtu.be/S35_aEe9D9M

アイトラッキングで得られたデータ
ユーザーは何を見てる？
何を見てない？
定量化できない部分の判定
フォームに入力をしなかった
フォーム部品に気づいてない？
その他わかったこと
迷っている／困っているときの視線の動き

動画
https://youtu.be/RsutD2GvXWU

ケーススタディ
メニューのグルーピングは感覚と合ってる？

メニュー内容の妥当性
メニューのグルーピングは
感覚と合ってる？
メニューのグルーピングはイメージと合ってる？
この組み合わせの
妥当性を確認する

カードソート
メニューのグルーピングは
- メニュー内容の妥当性
感覚と合ってる？
カードソートというテストを行う
りんご
みかん
スイカ
メロン
.
暖色系
寒色系
その他
どのグループに属すか選ぶ → クローズド・カードソート
グループを用意しない → オープン・カードソート

オープン・カードソートの風景
メニューのグルーピングは
感覚と合ってる？

カードソートの計算方法
メニューのグルーピングは
感覚と合ってる？
A
B
C
同じグループ
異なるグループ
= 距離 0
= 距離 1 （どのグループとも）

カードソート集計
メニューのグルーピングは
感覚と合ってる？
すべてのテスト結果を足し合わせる
足し合わせただけとはいえ、このデータは距離の公理を満たす
→ 数多くの統計手法を用いることができる

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

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

クラスター・デンドログラム
メニューのグルーピングは
- カードソート集計
感覚と合ってる？
多次元尺度構成法（R）
クラスター・デンドログラム（R）
適当な Height（しきい値）で切りグルーピング
data = read.csv(file="matrix.csv", sep=",")
data = read.csv(file="matrix.csv", sep=",")
cmd = cmdscale(data)
- 入れ子メニューなども一発で構築できる
hc = hclust(dist(data), method="ward.D2")
plot(cmd)
plot(hc, hang=-1, colnames(data[0, ]))
text(cmd, colnames(data))

まとめ

まとめ
1. どうやって UX を見る／測る？
パフォーマンスメトリクスを使ってタスクを計測
場合によっては人命に関わるリスクも取り除くことができる
2. 印象の変化を見る／測る
使いやすさだけが UX ではないので、
ユーザーの感情がどう変化したかを計測して良し悪しを判断
3. 見た目の評価をする
ユーザーは殆どの情報を目から手に入れる
整理されているか、ムダなモノ・配色はないか計測

定量化／見える化するメリット
UX を向上させる作業は時間がかかる
マネージャや上長に

これはなかなか効果ある
→ 時間を取ってでもやるべきという認識付けを行う
システムユーザビリティスケール [%]
現行管理画面
新管理画面
100.0
24%増
47%増
16%増
76.
81.
74.
25
07
%
%
50.0
51.
58. 50
67
33.
00
86
0.0 現行 新
新
現行
エキスパートユーザー

@Leonardo_engr
折原 レオナルド賢

には ゼミ制度 があります
- 業務時間中の 20% を使える
- 業務外の勉強ができる
自分は ユーザー体験探求ゼミ
というものを運営しています