SSSSLIDE

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

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

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

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

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

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

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

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

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

迷い度 - パフォーマンスメトリクス
見る・測る？
2
6
6
ページ

. 0

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

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

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

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

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

現行管理画面の自動応答メッセージ設定 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.
http://www.measuringux.com

Site: ___________________________
Date: ___/___/___
システムユーザビリティ・スケール（SU
Strongly
Strongly
Disagree S）
Agree
1.
Site: ___________________________
Date: ___/___/___
frequently.
2.
Strongly
Strongly
Disagree
Agree
1.
frequently.
3.
2.
3.
4.
4.
5.
6.
in this website.
7.
5.
8.
9.
10.
6.
in this website.
7.
8.
9.
10.

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

製品リアクションカード
アクセシブルクリエイティブ
速い
意味がある
遅い
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
現行
新
新
現行
エキスパートユーザー

Site: ___________________________
Date: ___/___/___
Participa
your nt ID:
reacti ___
ons __
Site: ________
to the website today.
___________________
Date: ___/___/___
全く同意
非常に
System Usability
できない
Scale
同意できる
1.
Part この
icip シ
anス
t Iテ
Dム
: を
頻繁
___ に
__ 使いたい
Sit と
e: 思
う
質問文ごとのスコア
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.
全く同
全く意
非常に
このシステムは不必要に複雑だと思った
できな
できい
同意できる
き
全く同意
非常に
1. まと
こま
のっ
シて
スい
テる
ムと
を思っ
頻繁た
3. このシ
このス
シテ
スム
テを
ムは頻繁
使いに
や使
すいた
とい
思と
っ
い思
た
とう
できない
同意できる
+1.44
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. まと
こま
のっ
シて
スい
テる
ムと
は思っ
非常た
に扱いにくいと思った
3. このシ
このス
シテ
スム
テは
ム使
をい
使や
えるす
よい
うと
に思
なっ
るた
4. このシステムを使えるようになるには
に、
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. まとま
簡単
まとっ
このに
まて
シ学
っい
スべ
てる
テる
いと
ムと
る思
を思
とっ
使うた
い始
っめる前にたくさんの
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:
7. ほとんどの人がこのシステムの使い方を
簡単に学べると思う
8. このシステムは非常に扱いにくいと思った
9. このシステムを使っていて非常に自信が持てた
10. このシステムを使い始める前にたくさんの

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

サイドメニューって左右どっちにあるべき？

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

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

- DeepGaze
アルゴリズムを DeepGaze に変更して再度確認

- 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 ではないので、
ユーザーの感情がどう変化したかを計測して良し悪しを判断
ユーザーは殆どの情報を目から手に入れる
整理されているか、ムダなモノ・配色はないか計測

定量化／見える化するメリット
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% を使える
- 業務外の勉強ができる
自分はユーザー体験探求ゼミ
というものを運営しています

SSSSLIDE

エンジニアがUXをロジックで考えてみる

LeonardoKen Orihara さんの他のスライド

関連するスライド

このスライドの内容

関連するタグ

SSSSLIDE