待機画面におけるプログレスバーの表示位置が待機後の選択に及ぼす影響の調査

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

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

背景：ダークパターン 意図しない選択を誘導するデザイン No Yes メールのお知らせ ※不要な方はチェックを外してください ✅ お得なキャンペーンのお知らせ ✅ ショッピング関連ニュース Arvind Narayanan, Arunesh Mathur, Marshini Chetty, and Mihir Kshirsagar. Dark Patterns: Past, Present, and Future. acmqueue, vol. 18 no. 2 3

背景 インターネット上で 選択 をする場面は多い 選挙や投票などでは 特に 公平性 が重要 4

背景 他にも選択が偏る場合がある 5

背景 他にも選択が偏る場合がある 6

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

背景：これまでの研究 位置と向き [HCI191] 最終位置 [HCI196] 長さ [HCI199] 8 横山 幸大, 中村 聡史, 山中 祥太. 待機画面の視覚刺激が選択に及ぼす影響の調査, 情報処理学会 ヒューマンコンピュータインタラクション（HCI）, Vol.2021-HCI-191, No.3, pp.1-8, 2021. 横山 幸大, 中村 聡史, 山中 祥太. 画面遷移直前におけるプログレスバーのアニメーションの終端が選択に及ぼす影響, 情報処理学会 研究報告ヒューマンコンピュータインタラクション（HCI）, Vol.2022-HCI-196, No.15, pp.1-8, 2022. 横山 幸大, 中村 聡史. 待機画面におけるプログレスバーの長さが選択に及ぼす影響の調査, 情報処理学会 研究報告ヒューマンコンピュータインタラクション（HCI）, Vol.2022-HCI-199, No.1, pp.1-8, 2022.

背景：これまでの研究 位置と向き [HCI191] 最終位置 [HCI196] 長さ [HCI199] 9 横山 幸大, 中村 聡史, 山中 祥太. 待機画面の視覚刺激が選択に及ぼす影響の調査, 情報処理学会 ヒューマンコンピュータインタラクション（HCI）, Vol.2021-HCI-191, No.3, pp.1-8, 2021. 横山 幸大, 中村 聡史, 山中 祥太. 画面遷移直前におけるプログレスバーのアニメーションの終端が選択に及ぼす影響, 情報処理学会 研究報告ヒューマンコンピュータインタラクション（HCI）, Vol.2022-HCI-196, No.15, pp.1-8, 2022. 横山 幸大, 中村 聡史. 待機画面におけるプログレスバーの長さが選択に及ぼす影響の調査, 情報処理学会 研究報告ヒューマンコンピュータインタラクション（HCI）, Vol.2022-HCI-199, No.1, pp.1-8, 2022.

背景：これまでの研究 位置と向き [HCI191] 最終位置 [HCI196] 長さ [HCI199] 10 横山 幸大, 中村 聡史, 山中 祥太. 待機画面の視覚刺激が選択に及ぼす影響の調査, 情報処理学会 ヒューマンコンピュータインタラクション（HCI）, Vol.2021-HCI-191, No.3, pp.1-8, 2021. 横山 幸大, 中村 聡史, 山中 祥太. 画面遷移直前におけるプログレスバーのアニメーションの終端が選択に及ぼす影響, 情報処理学会 研究報告ヒューマンコンピュータインタラクション（HCI）, Vol.2022-HCI-196, No.15, pp.1-8, 2022. 横山 幸大, 中村 聡史. 待機画面におけるプログレスバーの長さが選択に及ぼす影響の調査, 情報処理学会 研究報告ヒューマンコンピュータインタラクション（HCI）, Vol.2022-HCI-199, No.1, pp.1-8, 2022.

背景：これまでの研究 位置と向き [HCI191] 最終位置 [HCI196] 長さ [HCI199] 11 横山 幸大, 中村 聡史, 山中 祥太. 待機画面の視覚刺激が選択に及ぼす影響の調査, 情報処理学会 ヒューマンコンピュータインタラクション（HCI）, Vol.2021-HCI-191, No.3, pp.1-8, 2021. 横山 幸大, 中村 聡史, 山中 祥太. 画面遷移直前におけるプログレスバーのアニメーションの終端が選択に及ぼす影響, 情報処理学会 研究報告ヒューマンコンピュータインタラクション（HCI）, Vol.2022-HCI-196, No.15, pp.1-8, 2022. 横山 幸大, 中村 聡史. 待機画面におけるプログレスバーの長さが選択に及ぼす影響の調査, 情報処理学会 研究報告ヒューマンコンピュータインタラクション（HCI）, Vol.2022-HCI-199, No.1, pp.1-8, 2022.

背景：これまでの仮説 アニメーションの 終端付近 が選ばれやすい 👁 12 👁

背景：これまでの結果 特定の条件で選択が左側 (左から2列目) に偏る 13

研究目的 1. これまでの研究について横断的に分析し 特定の位置に選択誘導可能かについて考察 2. プログレスバーの表示位置により選択を 誘導できてしまうかを調査 14

研究目的 1. これまでの研究について横断的に分析し 特定の位置に選択誘導可能かについて考察 2. プログレスバーの表示位置により選択を 誘導できてしまうかを調査 15

横断分析 1. プログレスバーへ注意を引く提示時間は何秒か 2. なぜ左から2列目の選択率が高くなったのか 3. どうすれば他の位置へ誘導が可能になるか 16

横断分析（提示時間） プログレスバーへ注意を引く提示時間は何秒か 👁 17

横断分析（提示時間） 位置とアニメーション方向に関する調査の結果から 各条件の選択時間を分析 18

横断分析（提示時間） 位置とアニメーション方向に関する調査の結果から 各条件の選択時間を分析 ➡ 提示時間が長くなると選択時間が長くなる * ** 10 選択時間 [s] 8 6 4 2 0 2 5 提示時間 [s] 10 19

横断分析（提示時間） 位置とアニメーション方向に関する調査の結果から 各条件の選択時間を分析 ➡ 提示時間が長くなると選択時間が長くなる 提示時間（待機時間）が 長く なると ** * 画面から 目をそらしやすい 可能性 10 選択時間 [s] 8 6 4 2 0 2 5 提示時間 [s] 10 20

横断分析 なぜ左から2列目の選択率が高くなったのか 21

横断分析（視線移動） プログレスバーの長さに関する調査の結果から 選択開始前後 (-40~40フレーム) の視線移動を分析 22

横断分析（視線移動） プログレスバーの長さに関する調査の結果から 選択開始前後 (-40~40フレーム) の視線移動を分析 ➡ 選択開始直前から視線を左上に動かし始めている 23

横断分析（視線移動） プログレスバーのアニメーションによって 左上から見始める習性をずらした可能性 👁 👁 👁 👁 👁 24 👁

横断分析（視線移動） プログレスバーのアニメーションによって 左上から見始める習性をずらした可能性 左上 と プログレスバーの 終端 との 👁 距離を遠くすることで選択が 右側 に寄る？ 👁 👁 👁 👁 25 👁

横断分析（視線移動） 左上とプログレスバーの終端の距離を遠くする 👁 👁 26 👁

横断分析（視線移動） 左上とプログレスバーの終端の距離を遠くする ➡ 右向きにアニメーション & 下側表示 が有効？ 👁 👁 27 👁

横断分析 異なる調査から特定の条件を 統一した結果を抽出し横断的に分析を行う 調査項目 評価対象 表示位置 向き 最終位置[%] 長さ[%] 時間[s] 速度 [%/s] 位置と向き クラウド 上，下 ←，→ 100 100 2, 5, 10 - 最終位置 クラウド 対面視線 中 → 20,40,60,80,100 100 - 20, 50 長さ クラウド 対面視線 中 → 100 10, 50, 100 1, 2 - 28

横断分析 表示位置以外の条件を統一した結果から 表示位置（上中下）の選択傾向を分析 調査項目 評価対象 表示位置 向き 最終位置[%] 長さ[%] 時間[s] 速度 [%/s] 位置と向き クラウド 上，下 ←，➡ 100 100 2, 5, 10 - 最終位置 クラウド 対面視線 中 → 20,40,60,80,100 100 - 20, 50 長さ クラウド 対面視線 中 ➡ 100 10, 50, 100 1, 2 - 29

横断分析 表示位置以外の条件を統一した結果から 表示位置（上中下）の選択傾向を分析 30

横断分析 表示位置以外の条件を統一した結果から 表示位置（上中下）の選択傾向を分析 31

横断分析 表示位置が上から下になるにつれて ➡ 右から2列目の選択率が↗ & 左下が↘ 0.15 選択率 0.10 0.05 0.00 上 中 左下 右から2列目（平均） 下 32

研究目的 1. これまでの研究について横断的に分析し 特定の位置に選択誘導可能かについて考察 2. プログレスバーの表示位置により選択を 誘導できてしまうかを調査 33

実験概要 仮説 プログレスバーの位置が下側になると 右から2列目の選択率が↗ & 左下が↘ • 表示位置（上中下） を変えたプログレスバーを提示した後に 気になる商品を選ばせる実験 • Yahoo!クラウドソーシング を用いて実験実施 • 実験協力者 1000 名（男性500名、女性500名） • PCからの参加に限定して行った 34

実験設計 • 表示位置 ：上、中、下 • 提示時間 ： 2秒 • 長さ ： 画面幅サイズ • 進行方向 ： ⇨ 向き • 最終位置 ： 100% 35

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

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

仮説 表示位置が上から下になるにつれて ➡ 右から2列目の選択率が↗ & 左下が↘ 0.15 選択率 0.10 0.05 0.00 上 中 左下 右から2列目（平均） 下 38

結果 右から2列目の選択率が上昇 左下の選択率が下降 0.15 選択率 0.10 0.05 0.00 上 中 左下 下 右から2列目（平均） 39

結果（選択時間別） 先行研究で選択にかかった時間によって プログレスバーの影響に差があった 各ユーザ内で14試行の平均選択時間を算出し 実験協力者の中の1/3（4557ms）を基準に 選択が早いユーザと遅いユーザで比較 40

結果（選択時間別） 選択時間長い群では 仮説の傾向がより顕著であった 選択時間短い群 0.15 0.15 0.10 0.10 選択率 選択率 選択時間長い群 0.05 0.00 0.05 0.00 上 左下 中 下 右から2列目（平均） 上 左下 中 下 右から2列目（平均） 41

考察 全体、選択時間長い群で仮説のような傾向 ランダム配置で公平性が保たれているようでも 配置に合わせてプログレスバーの位置を変えることで 特定の対象に選択誘導ができてしまう可能性 42

考察 （例）Web投票システム 43

考察 （例）Web投票システム 〇 投票させたい選択肢 〇 投票させたくない選択肢 44

考察 （例）Web投票システム 総選挙 投票する 45

考察 （例）待機画面をあえて作ることで誘導が可能 総選挙 投票する 46

考察 （例）投票させたい選択肢が左下にある場合 47

考察 （例）投票させたい選択肢が左下にある場合 ➡ プログレスバーを上側に表示する 48

考察 （例）投票させたくない選択肢が左下にある場合 49

考察 （例）投票させたくない選択肢が左下にある場合 ➡ プログレスバーを下側に表示する 50

展望 選択肢の配置を入れ替えても プログレスバーによって選択誘導ができる可能性 プログレスバーが選択に及ぼす影響を明らかにし どのようにデザインすべきかのガイドラインを策定 51

まとめ 背景：プログレスバーが選択を左側に誘導している 目的：プログレスバーの右側への選択誘導可能性を考察 表示位置が及ぼす影響を明らかにする 実験：表示位置が上→下になると右2列目の選択率が↗ 左下 の選択率が↘ 課題：実験が単調になってしまった 展望：選択誘導を考慮したデザインガイドライン設計 他の条件と組み合わせた場合の調査 52