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

タグ

スライド概要

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

profile-image

Nakamura Laboratory (Meiji University)

@nkmr-lab

作者について:

明治大学 総合数理学部 先端メディアサイエンス学科 中村聡史研究室

スライド一覧
シェア
埋め込む»CMSなどでJSが使えない場合

公開日

2022-01-11 11:30:56

各ページのテキスト

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

2. 背景 2

3. 背景 3

4. 背景 5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

33. 実験結果 (クラウドソーシング) 各条件における列ごとの選択率と期待値のユークリッド距離 条件 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

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

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

36. 考察 (クラウドソーシング) プログレスバー提示開始から約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

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 43

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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