Webページ上のクリック操作にまつわるBADUIのVLMを用いた改善手法

Web ページ上のクリック操作にまつわる BADUI の VLM を用いた改善手法 明治大学 徳原眞彩 木下裕一朗 中村聡史

背景 赤枠部分のみが タップ可能 5

背景 ホバーにより色が変わるが 文字のみがクリック可能 6

背景 赤枠の数字部分クリック により詳細が確認可能 7

関連研究 UIテストの自動化 • LLMを活用した自動UIテスト「Guardian」を提案[Ranら, 2024] • 動的なタスクを含むUIをカバーしたUI操作の理解能力向上を 達成したモデル「GUI-Vid」を提案[Dongpingら, 2024] ユーザの行動予測 • ユーザが要素をタップ可能と認識する確率を予測するモデルを提案 [Swearnginら, 2019] • ユーザが特定の要素を見つけるまでの時間を高精度で予測 [Yuanら, 2020] Ran, D., Wang, H., Song, Z., Wu, M., Cao, Y., Zhang,Y., Yang, W. and Xie, T.: Guardian: A RuntimeFramework for LLM-Based UI Exploration, Proceedingsof the 33rd ACM SIGSOFT International Symposiumon Software Testing and Analysis, pp. 958–970 (2024). Chen, D., Huang, Y., Wu, S., Tang, J., Chen, L., Bai,Y., He, Z., Wang, C., Zhou, H., Li, Y., Zhou, T., Yu,Y., Gao, C., Zhang, Q., Gui, Y., Li, Z., Wan, Y.,Zhou, P., Gao, J. and Sun, L.: GUI-WORLD: A Datasetfor GUI-oriented Multimodal LLM-based Agents (2024).Swearngin, A. and Li, Y.: Modeling Mobile InterfaceTappability Using Crowdsourcing and Deep Learning,Proceedings of the 2019 CHI Conference on HumanFactors in Computing Systems, pp. 1–11 (2019). Yuan, A. and Li, Y.: Modeling Human Visual SearchPerformance on Realistic Webpages Using Analyticaland Deep Learning Methods, Proceedings of the 2020CHI Conference on Human Factors in ComputingSystems, pp. 1–12 (2020). 8

関連研究 UIテストの自動化 • LLMを活用した自動UIテスト「Guardian」を提案[Ranら, 2024] • 動的なタスクを含むUIをカバーしたUI操作の理解能力向上を 達成したモデル「GUI-Vid」を提案[Dongpingら, 2024] ユーザの行動予測 UIのデザイナーを支援する研究が多く見られる • ユーザが要素をタップ可能と認識する確率を予測するモデルを提案 [Swearnginら, 2019] • ユーザが特定の要素を見つけるまでの時間を高精度で予測 [Yuanら, 2020] Ran, D., Wang, H., Song, Z., Wu, M., Cao, Y., Zhang,Y., Yang, W. and Xie, T.: Guardian: A RuntimeFramework for LLM-Based UI Exploration, Proceedingsof the 33rd ACM SIGSOFT International Symposiumon Software Testing and Analysis, pp. 958–970 (2024). Chen, D., Huang, Y., Wu, S., Tang, J., Chen, L., Bai,Y., He, Z., Wang, C., Zhou, H., Li, Y., Zhou, T., Yu,Y., Gao, C., Zhang, Q., Gui, Y., Li, Z., Wan, Y.,Zhou, P., Gao, J. and Sun, L.: GUI-WORLD: A Datasetfor GUI-oriented Multimodal LLM-based Agents (2024).Swearngin, A. and Li, Y.: Modeling Mobile InterfaceTappability Using Crowdsourcing and Deep Learning,Proceedings of the 2019 CHI Conference on HumanFactors in Computing Systems, pp. 1–11 (2019). Yuan, A. and Li, Y.: Modeling Human Visual SearchPerformance on Realistic Webpages Using Analyticaland Deep Learning Methods, Proceedings of the 2020CHI Conference on Human Factors in ComputingSystems, pp. 1–12 (2020). 9

本研究での目的 サイト上でクリックが出来なさそうなのに実際には可能な 要素をユーザに提示する仕組みの実現 → 1. クリック可能性を認知しづらい要素を示す拡張機能の作成 2. 作成した拡張機能の精度の調査 10

対象とするUI Webサイト上のそれぞれの要素のクリック可能性を対象 クリック可能要素 クリック不可能要素 クリック出来そうな要素 〇 △ クリック出来なさそうな要素 × 〇 11

対象とするUI Webサイト上のそれぞれの要素のクリック可能性を対象 クリック可能要素 クリック不可能要素 クリック出来そうな要素 〇 △ クリック出来なさそうな要素 × 〇 → もう一度探しなおさなければならない 12

ユーザの振る舞いを明らかにする アノテーションや情報共有によるUIの改善 • 使いづらいUIをアニメーションで他者と共有[Hikawaら, 2018] • 改善情報を共有し、自動でUIを改良[Tajimaら, 2020] • クリック可能位置のアノテーションによる機械学習 [Swearngin,2019] → 他人のアノテーションが必要である Deconaby: Animations for Improving Understandability of Web Images. In Human-Computer Interaction. Theories, Methods, and Human Issues: 20th International Conference, HCI International, 2018. Kazuki Tajima, Satoshi Nakamura. WePatch: A System Enabling Users to Improve Bad User Interfaces on the Web, Proceedings of the 29th Australian Conference on Computer-Human Interaction, pp.448 - 451, 2017. Swearngin, A. and Li, Y.: Modeling Mobile InterfaceTappability Using Crowdsourcing and Deep Learning,Proceedings of the 2019 CHI Conference on HumanFactors in Computing Systems, pp. 1–11 (2019). 13

VLMの利用 中村 聡史. BADUI診療所：カルテ48：人なみに引っかかるAIさん, Vol.26, No.1, pp.22-23, 2024. VLMも人間と同じように分かりづらい説明やUIに対して誤った 回答を行うことがある → 人と同じ感覚でUIを認識すると考えられるため VLMを利用したシステムが有用と判断 14

VLMの利用 中村 聡史. BADUI診療所：カルテ48：人なみに引っかかるAIさん, Vol.26, No.1, pp.22-23, 2024. 15

提案手法 1. 機能利用を検知し，それぞれへ コードやスクリーンショットを移行 2. クリック可能位置を取得 3. VLMへクリック可能位置の推測を 行うプロンプト共にスクリーン ショットを送信し，結果を取得 4. 実際のクリック可能位置とVLMの 推定の差分を抽出 5. 差分部分の強調表示を行う 16

提案手法 1. 機能利用を検知し，それぞれへ コードやスクリーンショットを移行 2. クリック可能位置を取得 3. VLMへクリック可能位置の推測を 行うプロンプト共にスクリーン ショットを送信し，結果を取得 4. 実際のクリック可能位置とVLMの 推定の差分を抽出 5. 差分部分の強調表示を行う 17

提案手法 1. 機能利用を検知し，それぞれへ コードやスクリーンショットを移行 2. クリック可能位置を取得 3. VLMへクリック可能位置の推測を 行うプロンプト共にスクリーン ショットを送信し，結果を取得 4. 実際のクリック可能位置とVLMの 推定の差分を抽出 5. 差分部分の強調表示を行う 18

提案手法 1. 機能利用を検知し，それぞれへ コードやスクリーンショットを移行 2. クリック可能位置を取得 3. VLMへクリック可能位置の推測を 行うプロンプト共にスクリーン ショットを送信し，結果を取得 4. 実際のクリック可能位置とVLMの 推定の差分を抽出 5. 差分部分の強調表示を行う 19

提案手法 1. 機能利用を検知し，それぞれへ コードやスクリーンショットを移行 2. クリック可能位置を取得 3. VLMへクリック可能位置の推測を 行うプロンプト共にスクリーン ショットを送信し，結果を取得 4. 実際のクリック可能位置とVLMの 推定の差分を抽出 5. 差分部分の強調表示を行う 20

提案手法 1. 機能利用を検知し，それぞれへ コードやスクリーンショットを移行 2. クリック可能位置を取得 3. VLMへクリック可能位置の推測を 行うプロンプト共にスクリーン ショットを送信し，結果を取得 4. 実際のクリック可能位置とVLMの 推定の差分を抽出 5. 差分部分の強調表示を行う 21

システム動作イメージ クリック可能位置 申し込み キャンセルはこちら 詳細情報 キャンセル条件 VLMの推定位置 申し込み ユーザへの表示画面 申し込み キャンセルはこちら 詳細情報 キャンセル条件 キャンセルはこちら 詳細情報 キャンセル条件 22

システム動作例 23

拡張機能を用いた調査 クリック可能位置が取得できればその全てを提示可能で あるが、デザイナーの意図したデザインから離れてしまう 可能性がある → 明らかなクリック可能位置を除去するためどの程度 システムが推定可能か調査 24

Webサイトのアクセス数TOP30を対象に調査 未認識率 = VLMがクリック可能と予測しなかった要素の数 実際にクリックが可能な要素の数 未認識率 = 314/1075 = 約29% クリック可能要素 クリック不可能要素 VLMがクリック可能と 予測した要素 71% / VLMがクリック可能と 予測しなかった要素 29% / 25

追加検証 上手く動作した例 29

追加検証 上手く動作した例 30

追加検証 上手く動作した例 31

追加検証 上手く動作した例 32

追加検証 上手く動作した例 33

追加検証 予想以上に検出した例 赤枠部分をクリック可能と判断 34

考察 未認識率は約3割という結果に → プロンプト次第で改善可能と考えられる 文言次第で過剰に推定する傾向が見られる → 優先順位や可能性を算出してもらう 35

今後 • システムにより抽出した要素がユーザの振る舞いと 一致するか実験 • システムの実用化 • 適切な強調表示の調査 • クリック以外のUIを対象にした調査 37

まとめ 背景：使いづらいUIを含むWebサイトが存在する 目的：クリック可能と判断するのが難しい要素をユーザに提示 提案：クリック可能要素とVLMの差分を示す 調査：日本のアクセス数上位30サイトでツールを使用 結果：約7割の要素をクリック可能だと推測 38