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

待機画面におけるプログレスバーの 進行速度変化が離脱に及ぼす影響 明治大学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