待機画面におけるプログレスバーの長さが選択に及ぼす影響の調査

第199回HCI研究会｜2022.08.22 待機画面における プログレスバーの長さが 選択に及ぼす影響の調査 明治大学大学院 明治大学大学院 横山幸大 先端数理科学研究科 中村聡史

背景 インターネット上で 選択 をする場面は多い 2

背景：ダークパターン 意図しない選択を誘導するデザイン No Yes Offer ends in... 00:02:59 Buy Now Arvind Narayanan, Arunesh Mathur, Marshini Chetty, and Mihir Kshirsagar. Dark Patterns: Past, Present, and Future. acmqueue, vol. 18 no. 2 3

背景：ダークパターン UI設計者が無意識に採用している 滞在時間延ばしたい！ 売り上げ良くしたい！ UI設計者 Arvind Narayanan, Arunesh Mathur, Marshini Chetty, and Mihir Kshirsagar. Dark Patterns: Past, Present, and Future. acmqueue, vol. 18 no. 2 4

背景：ダークパターン UI設計者が無意識に採用している 滞在時間延ばしたい！ 売り上げ良くしたい！ プログレスバーもダークパターンの一部？ UI設計者 Arvind Narayanan, Arunesh Mathur, Marshini Chetty, and Mihir Kshirsagar. Dark Patterns: Past, Present, and Future. acmqueue, vol. 18 no. 2 5

背景：プログレスバー タスクの進捗状況を 視覚的 に提示するUI 6

背景：視線と選択行動 注視時間が長いものが 最終的に選ばれやすい 適切な対象があったら その後の探索が雑になる [Shimojoら 2003] [Simonson 1999] 見る時間が 長く 、見る順番が早い 選択肢が選ばれやすくなる Shimojo, S., Simion, C., Shimojo, E. and Scheier, C.. Gaze bias both reflects and influences preference. Nature Neuroscience. 2003, vol. 6, no. 12, pp. 1317–1322. Simonson, I.: The effect of product assortment on buyer preferences. Journal of Retail-ing 75(3), 347–370 (1999). 7

背景：プログレスバーの要素 • • • • • • • • 表示位置 アニメーションの向き アニメーションの位置 長さ 色 形状 待機時間 加減速 …など 8

背景：プログレスバーの要素 • • • • • • • • 表示位置 ⇨ 上側 < 下側 [HCI191] アニメーションの向き ⇨ 左向 < 右向 [HCI191] アニメーションの位置 ⇨ 途中から目を外す [HCI196] 長さ 色 形状 待機時間 加減速 …など 横山 幸大, 中村 聡史, 山中 祥太. 待機画面の視覚刺激が選択に及ぼす影響の調査, 情報処理学会 ヒューマンコンピュータイ ンタラクション（HCI）, Vol.2021-HCI-191, No.3, pp.1-8, 2021. 横山 幸大, 中村 聡史, 山中 祥太. 画面遷移直前におけるプログレスバーのアニメーションの終端が選択に及ぼす影響, 情報 処理学会 研究報告ヒューマンコンピュータインタラクション（HCI）, Vol.2022-HCI-196, No.15, pp.1-8, 2022. 9

背景：プログレスバーの要素 • • • • • • • • 表示位置 ⇨ 上側 < 下側 [HCI191] アニメーションの向き ⇨ 左向 < 右向 [HCI191] アニメーションの位置 ⇨ 途中から目を外す [HCI196] 長さ 色 形状 待機時間 加減速 …など 横山 幸大, 中村 聡史, 山中 祥太. 待機画面の視覚刺激が選択に及ぼす影響の調査, 情報処理学会 ヒューマンコンピュータイ ンタラクション（HCI）, Vol.2021-HCI-191, No.3, pp.1-8, 2021. 横山 幸大, 中村 聡史, 山中 祥太. 画面遷移直前におけるプログレスバーのアニメーションの終端が選択に及ぼす影響, 情報 10 処理学会 研究報告ヒューマンコンピュータインタラクション（HCI）, Vol.2022-HCI-196, No.15, pp.1-8, 2022.

研究目的 プログレスバーの 長さ が ユーザの 選択位置 に与える影響の調査 11

実験概要（クラウドソーシング） 仮説 プログレスバーが短くなると 視線移動が減り選択が中央に集中する • 長さ を変えたプログレスバーを提示した後に 気になる商品を選ばせる実験 • Yahoo!クラウドソーシング を用いて実験実施 • 実験協力者 1000 名（男性500名、女性500名、平均年齢48歳） • PCからの参加に限定して行った 12

実験設計 • 待機時間（被験者内）：1秒, 2秒 • 長さ（被験者間）：10% , 50% , 100% 13

実験設計 • 選択肢画像 ：14 カテゴリ × 8 枚 掃除機、ダンベル、デスクチェア、Webカメラ、PCケース、 箱ティッシュ、マウス、ティーカップ、乾電池、水、ほうき、 充電ケーブル、手持ち扇風機、歯ブラシ 14

実験手順 実験説明画面 待機画面 商品選択画面 14回 繰り返す 実験後アンケート 15

結果（クラウドソーシング） 各列の選択率 各位置の選択率 各位置の選択率と各列の選択率 16

結果（クラウドソーシング） 長さによらず 中央2列 に選択が偏る傾向 各位置の選択率と各列の選択率 17

結果（クラウドソーシング） 2秒提示の方が列ごとの偏りが小さい 各位置の選択率と各列の選択率（1秒提示） 各位置の選択率と各列の選択率（2秒提示） 18

結果（クラウドソーシング） 各分布がどの程度特異かを分析 条件 10% 50% 100% 期待値とのユークリッド距離 全時間 1秒提示 2秒提示 ** 3.80 * 4.54 4.14 * 2.93 * 4.53 2.60 ** 4.59 ** 4.98 ** 4.22 * p ≤ .05 ** p ≤ .01 19

結果（クラウドソーシング） 各分布がどの程度特異かを分析 ⮚ 10％、50% の長さにおいて 2 秒提示した場合、有意な偏りがなかった 条件 10% 50% 100% 期待値とのユークリッド距離 全時間 1秒提示 2秒提示 ** 3.80 * 4.54 4.14 * 2.93 * 4.53 2.60 ** 4.59 ** 4.98 ** 4.22 * p ≤ .05 ** p ≤ .01 20

結果（クラウドソーシング） 各ユーザ内で14試行の平均選択時間を算出 ユーザ間の平均選択時間（5711ms）を基準に 選択が早いユーザと遅いユーザで比較 21

結果（クラウドソーシング） 選択が遅い群は全体的に偏りが小さい 各位置の選択率と各列の選択率（選択早い群） 各位置の選択率と各列の選択率（選択遅い群） 22

結果（クラウドソーシング） 各分布がどの程度特異かを分析 ⮚ 選択に時間がかかった場合、長さによらず有意な偏りがなかった 条件 10% 期待値とのユークリッド距離 選択早い 選択遅い ** 5.91 2.28 50% ** 6.27 1.38 100% ** 6.45 3.02 * p ≤ .05 ** p ≤ .01 23

考察（クラウドソーシング） 10% ,50%の長さにおいて 2 秒提示した場合、有意な偏りがなかった 待機時間が長くなると仮説のような傾向とは異なり 長さが短いほど選択が分散される可能性 24

考察（クラウドソーシング） 選択に時間がかかった場合、 長さによらず有意な偏りはなかった 選択に時間がかかると、各選択肢間で探索時間の 差が小さくなり、見る順番の影響がなくなった可能性 25

実験概要（対面環境） 仮説 プログレスバーが短くなると 視線移動が減り視線と選択が中央に集中する • クラウドソーシング上のものと実験手順、実験設計は同様 • マウス、ディスプレイを統一して実験実施 • 実験協力者 31 名（男性15名、女性16名、平均年齢20歳） • Tobii Eye Trackerを用いて視線計測（計測周期：60fps） 26

結果（対面環境） 長さによらず 中央2列 に選択が偏る傾向 各位置の選択率と各列の選択率 27

結果（対面環境） プログレスバーの周辺に帯状に分布している 10% 50% 100% 待機画面中の視線ヒートマップ 28

結果（対面環境） 長さが長くなると選択開始時の視線が分散 10% 50% 100% 選択開始から約200ms間の視線ヒートマップ 29

考察（対面環境） 待機中の視線はプログレスバー上に帯状に分布 長くなると選択開始時の視線は分散する 「プログレスバーが短くなると視線の移動が減る」 という視線に関する仮説は支持された 30

まとめ考察 長さが短い場合において 1秒提示 ➡ 選択が中央に集中した 2秒提示 ➡ 選択位置が分散された 仮説の傾向は、長い待機時間の場合に棄却された 31

まとめ考察 長さが短い場合において 1秒提示 ➡ 選択が中央に集中した 2秒提示 ➡ 選択位置が分散された 待機時間が長く予想される場合は プログレスバーを短くすれば 選択の公平性が担保される可能性 32

まとめ考察 アニメーションの速度が速いと 選択が誘導されやすい スロバーはある程度の速度で アニメーションし続けるため 誘導が起きやすい可能性 33

課題・展望 選択時間が遅い人と早い人で影響に違いがあった プログレスバーが選択に及ぼす影響と 選択に対する負荷との関係性も調査していきたい 34

課題・展望 黒色のバー状に限定して調査を行った 誘目性の高い色や、異なる形状で調査 35

まとめ 背景：プログレスバーが選択を誘導している可能性 目的：プログレスバーの長さが、待機後の選択位置に 及ぼす影響を明らかにする 実験：待機時間が長い時、長さを短くすると選択が分散 スロバーでは誘導が起きやすい可能性 課題：黒色、バー状に限定して調査した 展望：他の色、形状の視覚刺激について影響を調査 36