待機画面におけるプログレスバーの進行速度変化が離脱に及ぼす影響

待機画面におけるプログレスバーの 進行速度変化が離脱に及ぼす影響 明治大学B3 宮本快士 三山貴也 中村聡史（明治大学） 山中祥太（LINE ヤフー株式会社） 1

2

多い 少ない 3

背景 Webページを表示するとき，読み込みによる待機時間が発生 ストレス モチベーションの低下 ページからの離脱 プログレスバーのような視覚的フィードバックが有効 プログレスバーによる時間提示は，テキストによる時間提示や 時間提示無しの場合に比べ，体感時間を短縮する [Gronierら 2008] G. Gronier, and S. Gomri, “Etude des métaphors temporelles sur la perception du temps d'attente,” Proceedings of the 20th International Conference of the Association Francophone d'Interaction Homme-Machine, pp.205-208, Metz, France, Sept.2008. 4

関連研究 Webの待機時間 • 待機時間の満足度はサービスの満足度を決める重要な要素である [Bielenら 2007] • ビデオコンテンツでは，開始に2秒以上かかると視聴者は離脱を始め， 遅延が1秒増加することで離脱率が5.8%増加する [Krishnanら 2012] • 通信遅延の際にキャラクタと文章をスマートフォンの画面に表示することで 通信の遅延によるQoEの低下を緩和できる [白井ら 2017] F. Bielen and N. Demoulin: “Waiting time influence on the satisfac- tion ‐ loyalty relationship in services”, Managing Service Quality: An International Journal, 17, 2, p. 174–193 (2007). S. S. Krishnan and R. K. Sitaraman: “Video stream quality impacts viewer behavior: inferring causality using quasi-experimental designs”, Proc. of IMC’12, pp. 211–224 (2012). 白井丈晴, 藤田真浩, 荒井大輔, 大岸智彦, 西垣正勝: “スマートフォンの通信遅延におけるユーザのアウェアネスとQoEの関係に関する基礎検討”, 情報処理学会論文誌, 58, 12, pp. 1901–1911 (2017). 5

関連研究 プログレスバーと時間知覚 • プログレスバーに進行速度変化をつけることで体感時間が変化し，途中で停 止があると時間が長く感じられ，進行が加速するものが好まれる [Harrisonら 2007] • 形状は体感時間には影響せず，後半に加速，あるいは減速すると体感時間が 短縮される [Kimら 2017] • 速度が減速するプログレスバーが最もユーザの満足度が高いが，待機時間の 認識には有意な差はない [Gronierら 2019] C. Harrison, B. Amento, S. Kuznetsov and R. Bell: “Rethinking the progress bar”, Proc. of UIST ’07, pp.115–118 (2007). W. Kim and S. Xiong: “The effect of video loading symbol on waiting time perception”, Proc. of DUXU’17, pp.105–114 (2017). G. Gronier and A. Baudet: “Does progress bars’ behavior influence the user experience in human-computer interaction?”, Psychology and Cognitive Sciences – Open Journal, 5, 1, p.6–13 (2019). 6

先行研究 これまでの研究 Webページの読み込み中に表示する進捗インジケータの種類が ユーザの離脱に及ぼす影響の調査 スロバー 24.94% プログレスバー 4.81% 三山貴也, 小川剣二郎, 青木柊八, 中村瞭汰, 中村聡史, 山中祥太: “周辺視野への視覚刺激の提示が読み込み中のページ離脱率に及 ぼす影響”, 電子情報通信学会 ヒューマンコミュニケーション基 礎研究会(HCS), 123, 188, pp. 35–40 (2023). 7

目的 進行速度が一定のプログレスバーは実験参加者にとって Webページの読み込みにかかる時間が容易に予測できる Webページの読み込み中に提示される プログレスバーの進行速度変化が ユーザのページ離脱に及ぼす影響を調査 8

実験 実験概要 • ページ遷移しながら情報探索を行い，ページ読み込み中における 離脱率と離脱タイミングを調査 • 読み込み中の待機画面に表示されるプログレスバーの 進行速度変化によって，離脱行動が変化するか調査 • クラウドソーシングを利用して大規模に実験 9

実験 プログレスバーの速度変化条件 • Linear：進行速度が一定 • Ease In：進行速度が遅い→加速 • Ease Out：進行速度が速い→減速 • Ease In Out：進行速度が遅い→加速→減速 • Ease Out In：進行速度が速い→減速→加速 10

実験 実験条件 • 閲覧可能なページは50ページ • ページの内容は山形県のラーメン屋のレビューサイト • 読み込み時間は75%の確率で1s，25%の確率で5s〜10s • 通常時は1sで，突発的に5s以上となる状況設定 ページの読み込みが長い場合は離脱して， 代替ページを閲覧する状況を再現 11

実験 環境統制 Web実験用環境統制システム [三山ら，HCS 2024 5月研究会] クレジットカードなどの大きさのカードを合わせる操作を2回 12

実験 解答画面 参加者には5分間の制限時間で用意されたページを閲覧しながら 1問の質問に解答してもらった 13

実験 実験中のページ遷移 14

実験 離脱の判定 ブラウザバック リロード 15

実験 実験中のページ遷移 待機画面 （プログレスバーを表示） ページ一覧画面 各ページ 離脱 16

実験 仮説 • プログレスバーのアニメーション開始時の進行速度が遅い条件 の離脱率が高くなる →Ease In条件とEase In Out条件の離脱率が高くなる • プログレスバーが進行の途中で停止しているように見える条件 の離脱率が高くなる →Ease Out In条件の離脱率が高くなる 17

結果 実験参加者 • Yahoo!クラウドソーシングにおいて，295名が実験を完了 • 以下の参加者を除外 • 不適切なユーザIDを入力 • サイズ未調整 • 実験中のアクセス数が10回未満 • 離脱数が10回以上 →分析対象：165名（男性98人，女性66人，その他1人） 18

結果 １．離脱率 ２．離脱タイミング 19

結果 読み込み時間が5s~10sの離脱率の平均 Linear 7.35% Ease In 20.85% Ease Out 4.47% Ease In Out 11.00% Ease Out In 12.35% プログレスバーの進行速度変化が 離脱率に影響している 20

結果 １．離脱率 ・条件ごとに離脱率が大きく異なる ２．離脱タイミング 21

結果 経過時間ごとの離脱発生タイミング 離脱タイミングの分布（Linear条件） ページ読み込み時間が9秒のとき 読み込み開始から7秒で離脱 22

結果 経過時間ごとの離脱発生タイミング Linear Ease In Out 離脱タイミングが ２秒以内に集中している 23

結果 経過時間ごとの離脱発生タイミング Ease In 離脱タイミングが ２秒〜5秒に集中している 24

結果 経過時間ごとの離脱発生タイミング Ease Out In 離脱タイミングが 分散している 25

結果 離脱までの平均待機時間 Ease Out Linear 平均待機時間[秒] 2.58 Ease In Out Ease In 3.23 Ease Out 5.96 Ease In Out Ease Out In 2.43 3.93 • Ease Out条件は待機時間が長い • Ease In Out条件は待機時間が短い 26

結果 まとめ １．離脱率 ・条件ごとに離脱率が大きく異なる ２．離脱タイミング ・離脱タイミングは条件ごとに特色がある 27

考察 Linear 進行度ごとの離脱発生タイミング Ease In Ease Out Ease In Out Ease Out In 28

考察 Linear 進行度ごとの離脱発生タイミング Ease In Ease Out Ease In Out Ease Out In プログレスバーの進行速度が 遅いタイミングで離脱が発生 29

考察 進行度ごとの離脱発生タイミング 進行度が90〜100%の 遅いタイミングでの離脱が存在 プログレスバーに進行速度変化を 加えることがページの読み込みに 要する予測時間が長くなる 30

考察 離脱率[%] アニメーション開始時の進行速度 Linear 7.35 Ease In 20.85 Ease Out Ease In Out Ease Out In 4.47 11.00 12.35 アニメーション開始時の進行速度が遅いEase In条件の離脱率が高い アニメーション開始時の進行速度が速いEase Out条件の離脱率が低い 31

考察 アニメーション開始時の進行速度 アニメーション開始時の進行速度が遅いEase In条件の離脱率が高い アニメーション開始時の進行速度が速いEase Out条件の離脱率が低い プログレスバーのアニメーション開始時の Ease In Ease Out 進行速度が速いと離脱しにくい Linear 離脱率[%] 7.35 Ease In 20.85 Ease Out 4.47 Ease In Out Ease Out In 11.00 12.35 32

考察 離脱率[%] プログレスバーの停止が離脱に及ぼす影響 Linear 7.35 Ease In 20.85 Ease Out Ease In Out Ease Out In 4.47 11.00 12.35 アニメーション開始時の進行速度が遅いEase In Out条件の離脱率が低い アニメーション開始時の進行速度が速いEase Out In条件の離脱率が高い 33

考察 プログレスバーの停止が離脱に及ぼす影響 アニメーション開始時の進行速度が遅いEase In Out条件の離脱率が低い アニメーション開始時の進行速度が速いEase Out In条件の離脱率が高い 進行度が早めの段階で Ease Out In 停止しているように見えると 離脱が発生しやすい Ease In Out Linear 離脱率[%] 7.35 Ease In 20.85 Ease Out 4.47 Ease In Out Ease Out In 11.00 12.35 34

考察 進行速度が遅い時間が離脱に及ぼす影響 Linear 平均待機時間 [秒] 離脱率[%] Ease In Ease Out Ease In Out Ease Out In 2.58 3.23 5.96 2.43 3.93 7.35 20.85 4.47 11.00 12.35 プログレスバーの進行の早い段階で 進行速度が遅い時間が長いと離脱が発生しやすい 35

今後の展望 • Ease Out条件のようにアニメーション開始時の進行速度が 速いものに絞ってより離脱率が低くなる条件を検証 • 複数の速度変化条件を組み合わせることで，離脱率を低くする ことが可能であるかの検証 • PCとスマートフォンの比較 36

まとめ 背景：Webページの読み込み中に離脱が発生 目的：Webページの読み込み中に提示されるプログレスバーの 進行速度変化がユーザのページ離脱に及ぼす影響を調査 実験：読み込み中の待機画面に表示するプログレスバーの 速度変化条件を5種類で離脱率を比較 結果：プログレスバーの進行速度変化が離脱行動に影響している 考察：プログレスバーの進行速度変化を加えることが， ページの読み込みに要する時間の予測を困難にしている 37

予備 38

各条件のしき • Ease In • Ease Out • Ease In Out • Ease Out In 39

Linear Ease In Ease Out Ease In Out Ease Out In 40

実験 プログレスバーの速度変化条件 • Linear：進行速度が一定 • Ease In：進行速度が遅い状態から 徐々に加速 • Ease Out：進行速度が速い状態から 徐々に減速 • Ease In Out：進行速度が遅い状態 から徐々に加速し，その後減速 • Ease Out In：進行速度が速い状態 から徐々に減速し，その後加速 41

関連研究 これまでの研究 Webページの読み込み中に表示する進捗インジケータの種類が ユーザの離脱に及ぼす影響の調査 進行速度が変化する プログレスバーで調査 スロバー プログレスバー 三山貴也, 小川剣二郎, 青木柊八, 中村瞭汰, 中村聡史, 山中祥太: “周辺視野への視覚刺激の提示が読み込み中のページ離脱率に及 ぼす影響”, 電子情報通信学会 ヒューマンコミュニケーション基 礎研究会(HCS), 123, 188, pp. 35–40 (2023). 42

実験 環境統制 Web実験用環境統制システム [三山ら，2024] クレジットカードなどの大きさのカードを合わせる操作を2回 43

実験 実験中のページ遷移 待機画面 （プログレスバーを表示） ページ一覧画面 各ページ 離脱 44

実験 解答画面 参加者には5分間の制限時間で用意されたページを閲覧しながら 1問の質問に解答してもらった 45

実験 実験中のページ遷移 待機画面 （プログレスバーを表示） ページ一覧画面 各ページ 離脱 46

実験 仮説 • プログレスバーのアニメーション開始時の進行速度が遅い条件 の離脱率が高くなる →Ease In条件とEase In Out条件の離脱率が高くなる Ease In Ease In Out • プログレスバーが進行の途中で停止しているように見える条件 の離脱率が高くなる →Ease Out In条件の離脱率が高くなる Ease Out In 47

結果 実験参加者 • Yahoo!クラウドソーシングにおいて，295名が実験を完了 • 以下の参加者を除外 • 不適切なユーザIDを入力した4名 • サイズ未調整群の86名 • 実験中のアクセス数が10回未満の37名 • 離脱数が10回以上の3名 →分析対象：165名（男性98人，女性66人，その他1人） 48

結果 読み込み時間が5s~10sの離脱率の平均 Ease In Linear 7.35% Ease Out Ease In 20.85% Ease Out 4.47% Ease In Out 11.00% Ease Out In 12.35% Ease In条件の離脱率が高い Ease Out条件の離脱率が低い 49

結果 読み込み時間が5s~10sの離脱率の平均 Linear Ease In Linear Ease In 7.35% 20.85% Ease Out 4.47% Ease In Out Ease Out In Ease In Out Ease Out In 11.00% 12.35% Linear条件と比較して Ease In条件，Ease In Out条件，Ease Out In条件は 離脱率が高い 50

結果 読み込み時間が5s~10sの離脱率の平均 Linear Linear 7.35% Ease Out Ease In 20.85% Ease Out 4.47% Ease In Out 11.00% Ease Out In 12.35% Linear条件と比較して Ease Out条件は離脱率が低い 51

結果 設定された待機時間ごとの離脱率 Ease Out • Ease In Out条件以外の 条件は，設定された 読み込み時間に比例して 離脱率が上昇する傾向がある Ease In Ease Out Ease Out In • Ease In条件は他の条件と 比較して，離脱率の上昇が 急激である 52

結果 設定された待機時間ごとの離脱率 Ease In Out • Ease In Out条件は， 設定された読み込み時間が 長くなるにつれて離脱率が 減少する傾向がある 53

結果 設定された待機時間ごとの離脱率 Ease Out • Ease In Out条件以外の 条件は，設定された 読み込み時間に比例して 離脱率が上昇する傾向がある Ease In Ease Out Ease Out In • Ease In条件は他の条件と 比較して，離脱率の上昇が 急激である Linear 54

結果 １．離脱率 ・条件ごとに離脱率が大きく異なる ・条件ごとに離脱率の変化にも傾向がある ２．離脱タイミング 55

実験 プログレスバーの速度変化条件 • Linear：進行速度が一定 • Ease In：進行速度が遅い状態から 徐々に加速 • Ease Out：進行速度が速い状態から 徐々に減速 • Ease In Out：進行速度が遅い状態 から徐々に加速し，その後減速 • Ease Out In：進行速度が速い状態 から徐々に減速し，その後加速 56

結果 設定時間ごとの結果 linear 読み込み アクセ 時間 ス数 Ease In 離脱数 離脱率 アクセ ス数 離脱数 Ease Out 離脱率 アクセ ス数 離脱数 Ease In Out 離脱率 アクセ ス数 離脱数 Ease Out In 離脱率 アクセ ス数 離脱数 離脱率 1 608 3 0.49% 637 0 0.00% 587 0 0.00% 597 2 0.34% 600 1 0.17% 5 35 0 0.00% 27 4 14.81% 44 0 0.00% 33 2 6.06% 31 2 6.45% 6 40 2 5.00% 37 2 5.41% 32 0 0.00% 24 4 16.67% 37 3 8.11% 7 30 1 3.33% 26 5 19.23% 29 2 6.90% 26 3 11.54% 29 5 17.24% 8 31 2 6.45% 40 11 27.50% 30 1 3.33% 38 4 10.53% 37 4 10.81% 9 25 4 16.00% 30 9 30.00% 34 1 2.94% 33 5 15.15% 23 3 13.04% 10 30 4 13.33% 32 9 28.12% 22 3 13.64% 33 2 6.06% 38 7 18.42% 799 16 829 40 17.87% 778 7 784 22 9.48% 795 25 10.61% 全体 5s~10s の平均 7.35% 6.37% 20.85% 4.47% 3.83% 11.00% 12.35% 57

結果 ページ離脱率 Linear 全体 Ease In Ease Out アクセス 数 離脱数 離脱率 アクセス 数 離脱数 離脱率 アクセス 数 799 16 6.37% 829 40 17.87% 778 5s~10sの 平均 7.35% 20.85% Ease In Out アクセス 数 全体 5s~10sの 平均 784 離脱数 離脱数 22 離脱率 7 3.83% 4.47% Ease Out In 離脱率 9.48% 9.48% アクセス 数 795 離脱数 25 離脱率 10.61% 12.35% 58

結果 ページ離脱率 Linear 全体 Ease In Ease Out アクセス アクセス アクセス 離脱数 離脱率 離脱数 離脱率 離脱数 離脱率 数 数 数 799 16 6.37% 829 40 17.87% 778 7 3.83% 全体 Ease In Out Ease Out In アクセス アクセス 離脱数 離脱率 離脱数 離脱率 数 数 784 22 9.48% 795 25 10.61% 各条件ごとに離脱率が大きく異なる 59

結果 離脱までの平均待機時間と標準偏差 linear 平均待機時間 標準偏差 Ease In 2.58 1.84 3.23 1.17 Ease Out Ease In Out Ease Out In 2.43 1.94 3.93 2.05 5.96 3.24 • Ease Out条件は待機時間が長く， 離脱発生時間が分散している • Ease In Out条件は待機時間が特に短い 60

考察 離脱率 プログレスバーの停止 Linear 7.35% Ease In Out条件 Ease In 20.85% Ease Out Ease In Out Ease Out In 4.47% 11.00% 12.35% Ease Out In条件 アニメーション開始時の進行速度が遅いEase In Out条件の離脱率が低い アニメーション開始時の進行速度が速いEase Out In条件の離脱率が高く プログレスバーが停止しているように見える 時間がプログレスバーの進行度が早めの段階で 存在すると離脱が発生しやすい 61

結果 経過時間ごとの離脱発生タイミング Ease In linear Ease In Out Ease Out Ease Out In 62

結果 ページ離脱率 Linear 全体 Ease In Ease Out アクセス アクセス アクセス 離脱数 離脱率 離脱数 離脱率 離脱数 離脱率 数 数 数 799 16 6.37% 829 40 17.87% 778 7 3.83% プログレスバーの進行速度変化が Ease In Out Ease Out In 離脱行動に影響している アクセス アクセス 離脱数 離脱率 離脱数 離脱率 全体 数 784 22 9.48% 数 795 25 10.61% プログレスバーの進行速度変化が 離脱行動に影響している 63

結果 進行度ごとの離脱発生タイミング Ease In Ease In Out Ease In条件やEase In Out条件 では進行度が0〜10%の 早いタイミングでの離脱多い 64

結果 進行度ごとの離脱発生タイミング Ease Out In Ease Out In条件では 進行度が40〜60%の 中間のタイミングでの離脱多い 65

結果 進行度ごとの離脱発生タイミング Ease Out Ease In Out Ease Out条件やEase In Out条件 では進行度が90〜100%の 遅いタイミングでの離脱多い 66

考察 進行度ごとの離脱発生タイミング Ease In Ease In Out Ease In条件やEase In Out条件 では進行度が0〜10%の 早いタイミングでの離脱多い 67

考察 進行度ごとの離脱発生タイミング Ease Out In Ease Out In条件では 進行度が40〜60%の 中間のタイミングでの離脱多い 68

考察 進行度ごとの離脱発生タイミング Ease Out Ease In Out Ease Out条件やEase In Out条件 では進行度が90〜100%の 遅いタイミングでの離脱多い 69

実験 プログレスバーの速度変化条件 • Linear：進行速度が一定 • Ease In：進行速度が遅い状態から 徐々に加速 プログレスバーの進行速度変化が • Ease Out：進行速度が速い状態から 遅いタイミングで離脱が発生 徐々に減速 • Ease In Out：進行速度が遅い状態 から徐々に加速し，その後減速 • Ease Out In：進行速度が速い状態 から徐々に減速し，その後加速 70

結果 進行度ごとの離脱発生タイミング Ease Out Ease In Out Ease Out条件やEase In Out条件 では進行度が90〜100%の 遅いタイミングでの離脱多い プログレスバーの進行速度が 遅いタイミングで離脱が発生 71

結果 結果のまとめ １．離脱率 ・条件ごとに離脱率が大きく異なる プログレスバーの進行速度が変化が ２．離脱タイミング 離脱行動に影響を与えている ・離脱タイミングは条件ごとに特色がある ・プログレスバーの進行速度が遅いタイミングで離脱が発生 72

考察 進行速度が遅い時間が離脱に及ぼす影響 Linear 平均待機時間 [秒] 離脱率[%] Ease In Ease Out Ease In Out Ease Out In 2.58 3.23 5.96 2.43 3.93 7.35 20.85 4.47 11.00 12.35 Ease In Ease In Out Ease In条件はEase In Out条件に比べてアニメーションの早い段階で の進行速度が遅いが，離脱するまでの待機時間は長く，離脱が多い プログレスバーの進行の早い段階で 進行速度が遅い時間が長いと離脱が発生しやすい 73

74