画面遷移直前におけるプログレスバーのアニメーションの終端が選択に及ぼす影響

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

背景 2

背景 3

背景 5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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