1.
画面遷移直前におけるプログレスバーの
アニメーションの終端が選択に及ぼす影響
横山幸大 中村聡史（明治大学）
山中祥太（ヤフー株式会社）

2.
背景
2

3.
背景
3

4.
背景
5

5.
背景：ダークパターン
ユーザーに意図しない選択を誘導するUI/UXデザイン
7

6.
背景：プログレスバー
 ユーザ体験を向上させるために使われる
 タスクの進捗状況を視覚的に提示するもの
9

7.
関連研究：視線と選択行動
注視時間が長いものが選ばれやすくなる [下條ら 2003]
11
A B

8.
関連研究：視線と選択行動
適切な対象を見つけたら、探索をやめる傾向 [Simonson 1999]
12
A D
C
B

9.
関連研究：視線と選択行動
 注視時間が長いものが選ばれやすくなる [下條ら 2003]
 適切な対象を見つけたら、探索をやめる傾向 [Simonson 1999]
見る順番、時間が変わると、選択されやすさが変わる
13

10.
待機画面の視覚刺激が選択に及ぼす影響の調査 HCI191
アニメーションの 100%位置付近の選択肢が 選ばれやすい
14
仮 説

11.
アニメーションの向きと表示位置の影響を調査
上（⇦）
上（⇨）
下（⇦）
下（⇨）
15
待機画面の視覚刺激が選択に及ぼす影響の調査 HCI191

12.
上(⇦) 条件以外で選択が中央に偏る傾向
16
上（⇦）
上（⇨）
下（⇦）
下（⇨）
待機画面の視覚刺激が選択に及ぼす影響の調査 HCI191

13.
アニメーションの 100%位置付近の選択肢が 選ばれやすい
17
待機画面の視覚刺激が選択に及ぼす影響の調査 HCI191
仮 説

14.
アニメーションの 100%位置付近の選択肢が 選ばれやすい
18
待機画面の視覚刺激が選択に及ぼす影響の調査 HCI191
仮 説
100%付近になったら視線を戻している可能性

15.
仮説
アニメーションの最終位置付近が 選ばれやすい
19

16.
研究目的
画面遷移直前 におけるプログレスバーの
アニメーション位置 が選択に及ぼす影響を調査
20

17.
実験
クラウドソーシング環境
 大規模に傾向を調査
 様々な実験環境
 40, 50代の実験協力者が主
21
対面環境
 視線計測を行い詳細な分析
 実験環境の統一
 20代の実験協力者が主

18.
実験
クラウドソーシング環境
 大規模に傾向を調査
 様々な実験環境
 40, 50代の実験協力者が主
22
対面環境
 視線計測を行い詳細な分析
 実験環境の統一
 20代の実験協力者が主

19.
実験概要 （クラウドソーシング）
 アニメーションの最終位置を変えたプログレスバーを
提示した後に気になる商品を選ばせる実験
 Yahoo!クラウドソーシングを用いて実験実施
 実験協力者1010名（男性500名、女性510名）
 PCからの参加に限定して行った
23

20.
実験設計 （クラウドソーシング）
 画面遷移時のアニメーション位置：5種類
 アニメーション進行速度：2種類（50%/s，20%/s）
24
20% 40% 60% 80% 100%

21.
実験設計 （クラウドソーシング）
 選択肢画像（10カテゴリ×8枚）
 掃除機、ダンベル、デスクチェア、Webカメラ、箱ティッシュ、
マウス、ティーカップ、乾電池、水、PCケース
25

22.
実験設計 （クラウドソーシング）
 選択肢画像（10カテゴリ×8枚）
 掃除機、ダンベル、デスクチェア、Webカメラ、箱ティッシュ、
マウス、ティーカップ、乾電池、水、PCケース
26
選択肢の
配置はランダム

23.
実験手順 （クラウドソーシング）
実験説明画面
待機画面
商品選択画面
実験後アンケート
10回
繰り返す
27

24.
実験手順 （クラウドソーシング）
① 実験手順の説明、画面サイズを最大にするなどの指示
② 性別年代を選択し、実験開始
28

25.
実験手順 （クラウドソーシング）
① 実験手順の説明、画面サイズを最大にするなどの指示
② 性別年代を選択し、実験開始
29

26.
実験手順 （クラウドソーシング）
① 実験手順の説明、画面サイズを最大にするなどの指示
② 性別年代を選択し、実験開始
30
条件に満たない
場合は開始しない

27.
実験手順 （クラウドソーシング）
① これから選択する商品カテゴリとシナリオの説明
② いずれかの提示条件で待機した後、気になる商品を選択
31

28.
実験手順 （クラウドソーシング）
① これから選択する商品カテゴリとシナリオの説明
② いずれかの提示条件で待機した後、気になる商品を選択
32

29.
実験手順 （クラウドソーシング）
アンケートに回答
• 選択で悩んだ商品カテゴリ（複数選択可）
• 画面からどれくらい目をそらしたか（5段階評価）
• 気づいたことや感想（自由記述）
33

30.
実験結果 （クラウドソーシング）
各%で画面遷移した場合の各位置の選択率（全速度条件）
35
20% 40% 60% 80% 100%
ー 選択が集中すると予想した列 ー 最も選択率が高い列

31.
実験結果 （クラウドソーシング）
各%で画面遷移した場合の各位置の選択率（50%/s）
36
20% 40% 60% 80% 100%
ー 選択が集中すると予想した列 ー 最も選択率が高い列

32.
実験結果 （クラウドソーシング）
各%で画面遷移した場合の各位置の選択率（20%/s）
37
20% 40% 60% 80% 100%
ー 選択が集中すると予想した列 ー 最も選択率が高い列

33.
実験結果 （クラウドソーシング）
各条件における列ごとの選択率と期待値のユークリッド距離
39
条件
期待値とのユークリッド距離
全速度 50%/s 20%/s
20% 4.63 3.76 6.15
40% 7.30 9.49 5.84
60% 6.43 8.36 5.23
80% 4.33 3.50 5.68
100% 7.53 7.30 7.82

34.
考察 （クラウドソーシング）
アニメーションの最終位置から右にずれた位置から
選択肢を探索し始めている可能性
40
20% 40% 60% 80% 100%
ー 選択が集中すると予想した列 ー 最も選択率が高い列

35.
考察 （クラウドソーシング）
アニメーションが半分を超えたら
アニメーションを目で追わなくなっている可能性
41
20% 40% 60% 80% 100%
ー 選択が集中すると予想した列 ー 最も選択率が高い列

36.
考察 （クラウドソーシング）
プログレスバー提示開始から約1秒間まで
アニメーションを目で追っている
42
条件
期待値とのユークリッド距離
全速度 50%/s 20%/s
20% 4.63 3.76 6.15
40% 7.30 9.49 5.84
60% 6.43 8.36 5.23
80% 4.33 3.50 5.68
100% 7.53 7.30 7.82

37.
考察 （クラウドソーシング）
アニメーションを目で追い始めるより前に
画面が遷移してしまっている
43
条件
期待値とのユークリッド距離
全速度 50%/s 20%/s
20% 4.63 3.76 6.15
40% 7.30 9.49 5.84
60% 6.43 8.36 5.23
80% 4.33 3.50 5.68
100% 7.53 7.30 7.82

38.
実験
クラウドソーシング環境
 大規模に傾向を調査
 様々な実験環境
 40, 50代の実験協力者が主
44
対面環境
 視線計測を行い詳細な分析
 実験環境の統一
 20代の実験協力者が主

39.
実験概要 （対面環境）
 アニメーションの最終位置を変えたプログレスバーを
提示した後に気になる商品を選ばせる実験
 マウス，ディスプレイを統一して実験実施
 実験協力者22名（男性13名、女性9名）
 Tobii Eye Trackerを用いて視線計測
45

40.
実験手順 （対面環境）
実験説明画面
待機画面
商品選択画面
実験後アンケート
10回
繰り返す
46
2セット
繰り返す

41.
実験設計 （対面環境）
 選択肢画像（10カテゴリ×8枚×2セット）
 掃除機、ダンベル、デスクチェア、Webカメラ、箱ティッシュ、
マウス、ティーカップ、乾電池、水、PCケース
47

42.
実験結果 （対面環境）
各%で画面遷移した場合の各位置の選択率（全速度条件）
48
20% 40% 60% 80% 100%
ー 選択が集中すると予想した列 ー 最も選択率が高い列

43.
各条件におけるプログレスバーを
提示している最中の実験協力者の視線ヒートマップ
実験結果 （対面環境）
50
20% 40% 60% 80% 100%

44.
実験結果 （対面環境）
51
20% 40% 60% 80% 100%
各条件における選択開始から
12フレーム（約200ms）間の視線位置ヒートマップ

45.
実験結果 （対面環境）
52
20% 40% 60% 80% 100%
50%/s
20%/s

46.
考察 （対面環境）
54
20% 40% 60% 80% 100%
60%を超えたあたりから中央に視線を戻し始めている

47.
考察 （対面環境）
55
50%/s
20%/s
アニメーションを目で追うのに約0.2~0.3秒かかる

48.
考察 （対面環境）
56
50%/s
20%/s
アニメーション速度が遅いと目をそらし視線誘導が起きにくい

49.
まとめ考察
 待機開始から約1秒間までユーザはアニメーションを
目で追っている
 半分を超えたあたりから中央に視線が集中し、100%で
遷移した場合には選択が中央に偏る
57

50.
まとめ考察
 待機開始から約1秒間までユーザはアニメーションを
目で追っている
 スケルトンスクリーンやスロバーなどを採用する
 半分を超えたあたりから中央に視線が集中し、100%で
遷移した場合には選択が中央に偏る
 アニメーションの向きや表示位置などを変える
58

51.
課題・展望
 アニメーションの進行速度を加減速させた場合の調査
 他の種類、形状の視覚刺激について影響を調査
61

52.
まとめ
62
背景：プログレスバーのアニメーションが選択を誘導している
目的：画面遷移直前のアニメーション位置が、その後の選択位置
に及ぼす影響を明らかにする
実験：アニメーション位置が半分を超えたら視線を中央に置く傾向
提示開始から約1秒間までアニメーションを目で追っている
課題：アニメーション進行速度を加減速した場合の調査
展望：他の種類、形状の視覚刺激について影響を調査