周辺視野への視覚刺激の提示が読み込み中のページ離脱率に及ぼす影響

周辺視野への視覚刺激の提示が 読み込み中のページ離脱率に及ぼす影響 小川剣二郎 明治大学B3 三山貴也 青木柊八 中村瞭汰 中村聡史（明治大学） 山中祥太（ヤフー株式会社） 1

背景 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. 2

関連研究 プログレスバーに関して ⚫ アニメーションの加速度を変更することによって、速度を速く 知覚する [Kurokiら 2015] ⚫ 形状は体感時間には影響せず、後半に加速、あるいは減速する と体感時間が短縮される [Kimら 2017] ⚫ 中心視野にプログレスバーが提示されている場合、周辺視野へ 視覚刺激を提示することで体感時間が増減する [松井ら 2019] Y. Kuroki, and M. Ishihara, “Manipulating Animation Speed of Progress Bars to Shorten Time Perception,” HCI International 2015 - Posters’ Extended Abstracts, pp.670-673, Los Angeles, USA, Aug.2015. W. Kim, and S. Xiong, “The Effect of Video Loading Symbol on Waiting Time Perception,” Design, User Experience, and Usability: Understanding Users and Contexts, pp.105-114, Vancouver, Canada, July 2017. 松井啓司, 中村聡史, 鈴木智絵, 山中祥太, “周辺視野への視覚刺激提示によるプログレスバーの主観的な待機時間短縮手法,” 情報処理学会研究報告ヒューマンコンピュータインタラクション(HCI), vol.2019-HCI-181, no.25, pp.1-6, Jan.2019. 3

関連研究 プログレスバーの周辺への視覚刺激の提示 体感時間を短縮するのに効果的な視覚刺激の調査 [小川ら 2023] 横向き 縦向き 楕円回転 小川剣次郎, 青木柊八, 中村瞭汰, 中村聡史, 山中祥太, “PCとスマートフォンにおけるプログレスバーと周辺視野への視覚刺激の提示による体感時間短縮効果の調査,” 情報処理学会研究報告ヒューマンコンピュータインタラクション(HCI), vol.2023-HCI-202, no.55, pp.1-7, Mar.2023. 4

関連研究 プログレスバーの周辺への視覚刺激の提示 体感時間を短縮するのに効果的な視覚刺激の調査 [小川ら 2023] 横向き 縦向き 楕円回転 PC上では横向きの視覚刺激が効果的 5

関連研究 プログレスバーに関して ⚫ プログレスバーの体感時間を回答する実験において、 数え方によって体感時間が変動する [青木ら 2021] ⚫ 開始と同時に0秒から数える人 ⚫ 開始と同時に1秒から数える人 ⚫ 開始後に少しの間をあけて0秒から数え始める人 ⚫ 開始後に少しの間をあけて1秒から数え始める人 青木柊八, 中村瞭汰, 中村聡史, 山中祥太, “プログレスバーの周辺の視覚刺激と数え方による体感時間の変化の調査,” 情報処理学会研究報告ヒューマンコンピュータ インタラクション(HCI), vol.2021-HCI-195, no.31, pp.1-8, Dec.2021. 6

関連研究 プログレスバーの周辺への視覚刺激の提示 体感時間を短縮するのに効果的な視覚刺激の調査 [小川ら 2023] 待機時間中のユーザの行動を 加味した調査を行いたい 横向き 縦向き 楕円回転 PC上では横向きの視覚刺激が効果的 7

関連研究 Webの待機時間に関して ⚫ コンシェルジュのキャラクタと文章をスマートフォンの画面に表示 することによって、通信の遅延によるQoEの低下を緩和できる [白井ら 2017] ⚫ 旅行サイトにおいてページが3秒以内に表示されない場合、57%の ユーザがそのページの閲覧を諦めて離脱する [SmartBear 2012] 白井丈晴, 藤田真浩, 荒井大輔, 大岸智彦, 西垣正勝, “スマートフォンの通信遅延におけるユーザのアウェアネスとQoEの関係に関する基礎検討,” 情報処理学会論文誌, vol.58, no.12, pp.1901-1911, Dec.2017. K. Peiguss, “The Cost of Poor Web Performance[INFOGRAPHIC],” SmartBear, https://smartbear.com/blog/the-cost-of-poor-web-performanceinfographic/, Nov.2012. 8

目的 待機時間中のユーザの行動として ページからの離脱が想定される Webページの読み込み中に プログレスバーと視覚刺激を提示することが ページ離脱率に及ぼす影響を調査 9

実験 実験概要 ⚫ 複数のページが検索結果のように一覧提示されている状況で、 必要な情報をページ遷移して探す場面を想定 ⚫ 各ページの読み込みにランダムな遅延を入れ、その読み込み 時間におけるページ離脱率を調査 ⚫ クラウドソーシングを利用して大規模に実験 10

実験 Web実験環境統制システムの実装 実験参加者のPC上でWebシステムを用いた実験を行う場合の問題点 ⚫ 実験環境による画面サイズの違い ⚫ 動画の視聴やWeb閲覧など、ながら作業での実験参加 ⚫ ブラウザにおいて使用してほしくない機能やボタン これらが実験に影響を及ぼす可能性がある 11

実験 Web実験環境統制システムの実装 フルスクリーン上にブラウザを模したインタフェースを提示し、 そのインタフェース上でブラウジングを行う ⚫ インタフェースのピクセル数を統一し、サイズを統制 ⚫ フルスクリーン表示によって他の作業をできないように ⚫ ページ遷移をインタフェース内のリンクとボタンに限定 Web上での実験の問題点に対して可能な限り対策を行う 12

実験 Web実験環境統制システムの実装 フルスクリーン上にブラウザを模したインタフェースを提示し、 そのインタフェース上でブラウジングを行う 解像度 1920×1080 解像度 3840×1600 13

実験 実験手順 実験の流れ（1アクセス） 検索結果画面 読み込み中の画面 ページ内容 14

実験 実験手順 実験の流れ（1アクセス） 検索結果画面 読み込み中の画面 ページ内容 ページ離脱 15

実験 実験手順 参加者は5分間の制限時間で全10ページを閲覧しながら 5問の問題に解答することが求められる 16

実験 実験条件 ページ読み込み中の画面表示方法 スロバーのみ プログレスバーのみ プログレスバーと 周辺視野への視覚刺激 （スロバー条件） （プログレスバー条件） （プログレスバー＋視覚刺激条件） 17

実験 実験条件 ⚫ ページ読み込み時間の条件は、1～10秒を1秒ずつ区切った秒数 ⚫ 読み込み時間はページにアクセスするごとにランダムに決定 ⚫ 1人の実験参加者について、読み込み中の画面表示方法は 1種類に限定 18

実験 仮説 ⚫ 残りの読み込み時間が可視化されていないため、 スロバー条件ではプログレスバーを利用する条件 に比べ離脱率が高くなる ⚫ プログレスバー＋視覚刺激条件では体感時間が短縮 されて離脱率が減少する 19

結果 実験参加者 Yahoo!クラウドソーシングにおいて、PCを対象として実験を依頼 実験参加者：600人（男性300人、女性300人） 分析対象外となる参加者を除外 ⚫ 不適切なユーザIDを入力：6人 ⚫ 実験中のページアクセス数が5未満：24人 ⚫ 解答するように求められた問題に対して正解がない：141人 20

結果 実験参加者 分析対象：429人（男性220人、女性209人） 男性 女性 合計 スロバー 66 73 139 プログレスバー 81 68 149 プログレスバー＋視覚刺激 73 68 141 全体 220 209 429 21

結果 ページ離脱率 各条件におけるページ離脱率 スロバー 2.07% プログレスバー プログレスバー ＋視覚刺激 1.38% 1.39% スロバー条件では、プログレスバー条件や プログレスバー＋視覚刺激条件に比べて 離脱率が高くなる傾向 22

結果 ページ離脱率 各条件におけるページ離脱率 プログレスバー 1.38% プログレスバー ＋視覚刺激 1.39% プログレスバー＋視覚刺激条件の離脱率は プログレスバー条件との差がなかった 23

結果 ページ離脱率 プログレスバー条件では プログレスバー＋視覚刺激条件に比べ 離脱率が上昇するのが早い 特定の待ち時間までの累積離脱率 24

結果 離脱の発生時間 各条件においてページ離脱が発生したタイミング スロバー プログレスバー プログレスバー＋視覚刺激 25

結果 離脱の発生時間 ページ離脱が発生したタイミング（スロバー） 読み込み時間が7秒のページで 読み込み開始から5秒付近で離脱 26

結果 離脱の発生時間 各条件においてページ離脱が発生したタイミング スロバー プログレスバー プログレスバー＋視覚刺激 スロバー条件において離脱の発生時間が分散している 27

結果 離脱の発生時間 各条件においてページ離脱が発生したタイミング スロバー プログレスバー プログレスバー＋視覚刺激 標準偏差 2.37秒 標準偏差 1.27秒 標準偏差 1.68秒 28

結果 離脱の発生時間 各条件においてページ離脱が発生したタイミング スロバー プログレスバー プログレスバー＋視覚刺激 スロバー条件において 読み込み完了まで残りわずかでの離脱がみられる 29

結果 離脱の発生時間 各条件においてページ離脱が発生したタイミング スロバー プログレスバー プログレスバー＋視覚刺激 プログレスバーを利用する条件では、 3～4秒までに発生した離脱が多い 30

結果 離脱の発生時間 各条件においてページ離脱が発生したタイミング プログレスバー プログレスバー＋視覚刺激 プログレスバー＋視覚刺激条件では、 プログレスバー条件に比べ離脱の発生が少し遅くなる傾向 31

考察 ページ離脱率 離脱の発生時間 （スロバー） 各条件におけるページ離脱率 スロバー 2.07% プログレスバー プログレスバー ＋視覚刺激 1.38% 1.39% スロバーでは残りの読み込み時間が可視化 されていないため離脱が発生 32

考察 離脱の発生時間 各条件においてページ離脱が発生したタイミング スロバー プログレスバー プログレスバー＋視覚刺激 プログレスバーが表示された場合、ユーザは読み込みが 長いことを察知するとすぐに離脱する可能性 33

考察 離脱の発生時間 各条件においてページ離脱が発生したタイミング プログレスバー プログレスバー＋視覚刺激 わずかな体感時間の短縮によって、 ユーザが待機できる時間が少し長くなっている 34

考察 ページ離脱率 [松井ら 2019]によると、待機時間が 2～4秒では体感時間の短縮効果が あるが、5～8秒では延長効果がある 特定の待ち時間までの累積離脱率 35

考察 実験設計 実験において発生した離脱が非常に少なかった原因 ⚫ ページの情報に独立性が高く、代替のページが存在しない ⚫ ページの読み込み時間が完全にランダムであった ページ離脱が多く発生するような実験設計を行う 36

考察 実験システム Web実験環境統制システムについて ⚫ 過去の研究においても、画面サイズなどの問題が影響している可能性 ⚫ 画面の解像度やDPIが異なるため実際の画面サイズを統一できない システムを改良し、様々な環境に対応して適切な条件下で実験 37

まとめ 背景：Webページの読み込み中にページ離脱の発生が想定される 目的：プログレスバーと周辺視野への視覚刺激が読み込み中のページ離脱率 に与える影響を調査 実験：Web実験環境統制システムを実装し、読み込み中の画面表示を スロバーのみ、プログレスバーのみ、プログレスバー＋視覚刺激 の3種類として離脱率を比較 結果：スロバーではプログレスバーより離脱率が高く、視覚刺激を用いると 離脱までの時間が少し長くなる傾向 考察：スロバーでは読み込みが可視化されていないため離脱率が高く、 視覚刺激を用いるとわずかな体感時間の短縮によって待機できる 時間が少し長くなる 38