---
title: 待機画面におけるプログレスバーの長さが選択に及ぼす影響の調査
tags:  #プログレスバー #ダークパターン #選択 #待機画面  
author: [Nakamura Laboratory (Meiji University)](https://convert.docswell.com/user/nkmr-lab)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/DJYP24YGJM.jpg?width=480
description: 多くのウェブサイトやアプリケーションにおいて，ユーザが待機する画面にプログレスバーが表示される．我々はこれまでの研究でプログレスバーの表示位置，アニメーションの向き，画面遷移直前のアニメーション位置の 3 つの観点で，待機後のユーザの選択行動に及ぼす影響の調査を行ってきた．しかし，これまでの研究ではウインドウサイズの横幅と同等の長さのプログレスバーに限定して調査を行ってきたため，プログレスバーの長さが及ぼす影響に関してはまだ明らかになっていない．そこで本研究では，プログレスバーが短くなるとユーザの視線の移動範囲が狭くなり，選択が中央に集中するという仮説を立て，長さを変えたプログレスバーを用いて実験を行い，仮説の検証を試みた．実験の結果，プログレスバーの長さがウインドウ幅の 50% の場合よりも 10% の場合のほうが特異な偏りがみられた．また，選択に対する負荷が小さいときにプログレスバーが選択に及ぼす影響が大きくなる可能性が示唆された．
published: August 22, 22
canonical: https://convert.docswell.com/s/nkmr-lab/K264R5-2022-08-22-095121
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/DJYP24YGJM.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/V7N58YP8E8.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/YJ9YKP3X73.jpg)

背景：ダークパターン
意図しない選択を誘導するデザイン
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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/GJ86RDM9ED.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/LJL9KM3M7R.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/47MZ2YD6JW.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/P7R6M94NE9.jpg)

背景：視線と選択行動
注視時間が長いものが
最終的に選ばれやすい
適切な対象があったら
その後の探索が雑になる
[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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/PJXMVQ28EX.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/3JKGQ9ML7D.jpg)

背景：プログレスバーの要素
•
•
•
•
•
•
•
•
表示位置
⇨ 上側 &lt; 下側 [HCI191]
アニメーションの向き ⇨ 左向 &lt; 右向 [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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/LE3NPWY6E5.jpg)

背景：プログレスバーの要素
•
•
•
•
•
•
•
•
表示位置
⇨ 上側 &lt; 下側 [HCI191]
アニメーションの向き ⇨ 左向 &lt; 右向 [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.


# Page. 11

![Page Image](https://bcdn.docswell.com/page/8EDWLK5M7G.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/V7P92KGQJ8.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/2JVMDV6PJQ.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/5EGGYLNQEL.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/4JQXMYQWEP.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/K746VWN1E1.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/LJ1V3Y55EG.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/GJWLPG5WE2.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/4EZMKLN2J3.jpg)

結果（クラウドソーシング）
各分布がどの程度特異かを分析
条件
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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/Y76NQW967V.jpg)

結果（クラウドソーシング）
各分布がどの程度特異かを分析
⮚ 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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/G755RMN574.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/9J2ND95GER.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/DEYP24KGEM.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/VJN58YR878.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/YE9YKPMXJ3.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/GE86RDL97D.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/LEL9KMLMJR.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/4JMZ2YM6EW.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/PJR6M9VN79.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/PEXMVQZ87X.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/3EKGQ98LJD.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/L73NPW2675.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/87DWLKZMJG.jpg)

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


# Page. 34

![Page Image](https://bcdn.docswell.com/page/VJP92KDQE8.jpg)

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


# Page. 35

![Page Image](https://bcdn.docswell.com/page/2EVMDV1PEQ.jpg)

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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/57GGYL2Q7L.jpg)

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


