HCI216発表スライド

Web ページ上の要素がもつクリック可能性に対する 人間による認知とVLM による認識の一致度調査 明治大学 徳原眞彩 木下裕一朗 中村聡史 1

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

背景 3

背景 4

背景 普及と弊害： ・Webサービスは一般的になったが、使いにくいUIも散見される ・開発者は自作UIに慣れているため、ユーザの 「分かりにくさ」に気づきにくい 問題： 「クリックができなさそうでできる」要素や 「クリックができそうでできない」要素がユーザの 体験を損なわせてしまう 5

対象としている要素 △ クリックできそうでできない ×クリックできなさそうでできる →この要素が残されて しまうことが問題 6

関連研究 UI評価の自動化： - VLMを用いて、デザイン案に対するフィードバックや修正案を生成 - ユーザビリティ評価ツールによる問題点の検出 [Duan+ 2024] ユーザ行動の予測と定量化： - UI要素が「タップ可能」と認識される確率の予測 [Swearngin+ 2019] - ユーザが特定の要素を見つけるまでの時間や注目箇所の予測 [Schoop+ 2022] Duan, P. et al.: Generating Automatic Feedback on UI Mockups with Large Language Models, Proc. of the CHI '24, pp. 1-20 (2024). Swearngin, A. et al.: Modeling Mobile Interface Tappability Using Crowdsourcing and Deep Learning, Proc. of the CHI '19, pp. 1-11 (2019). Schoop, E. et al.: Predicting and Explaining Mobile UI Tappability with Vision Modeling and Saliency Analysis, Proc. of the CHI '22 (2022). 7

関連研究 UI評価の自動化： - VLMを用いて、デザイン案に対するフィードバックや修正案を生成 - ユーザビリティ評価ツールによる問題点の検出 [Duan+ 2024] ユーザ行動の予測と定量化： - UI要素が「タップ可能」と認識される確率の予測 [Swearngin+ 2019] - ユーザが特定の要素を見つけるまでの時間や注目箇所の予測 [Schoop+ 2022] 開発者側への支援を目的とした研究が多い Duan, P. et al.: Generating Automatic Feedback on UI Mockups with Large Language Models, Proc. of the CHI '24, pp. 1-20 (2024). Swearngin, A. et al.: Modeling Mobile Interface Tappability Using Crowdsourcing and Deep Learning, Proc. of the CHI '19, pp. 1-11 (2019). Schoop, E. et al.: Predicting and Explaining Mobile UI Tappability with Vision Modeling and Saliency Analysis, Proc. of the CHI '22 (2022). 8

背景 これまでの研究： VLM (視覚言語モデル) を使い、ユーザが誤認しそうな要素を 自動推定・指摘する手法を提案(HCI212) 徳原 眞彩, 木下 裕一朗, 中村 聡史. Webページ上のクリック操作にまつわるBADUIのVLMを用いた改善手法, 情報処理学会 研究報告ヒューマンコンピュータインタラクション（HCI） , Vol.2025-HCI-212, No.43, pp.1-8, 2025. 9

背景 これまでの研究： VLM (視覚言語モデル) を使い、ユーザが誤認しそうな要素を 自動推定・指摘する手法を提案(HCI212) 徳原 眞彩, 木下 裕一朗, 中村 聡史. Webページ上のクリック操作にまつわるBADUIのVLMを用いた改善手法, 情報処理学会 研究報告ヒューマンコンピュータインタラクション（HCI） , Vol.2025-HCI-212, No.43, pp.1-8, 2025. 10

背景 これまでの研究： VLM (視覚言語モデル) を使い、ユーザが誤認しそうな要素を 自動推定・指摘する手法を提案(HCI212) 徳原 眞彩, 木下 裕一朗, 中村 聡史. Webページ上のクリック操作にまつわるBADUIのVLMを用いた改善手法, 情報処理学会 研究報告ヒューマンコンピュータインタラクション（HCI） , Vol.2025-HCI-212, No.43, pp.1-8, 2025. 11

背景 これまでの研究： VLM (視覚言語モデル) を使い、ユーザが誤認しそうな要素を 自動推定・指摘する手法を提案(HCI212) × 徳原 眞彩, 木下 裕一朗, 中村 聡史. Webページ上のクリック操作にまつわるBADUIのVLMを用いた改善手法, 情報処理学会 研究報告ヒューマンコンピュータインタラクション（HCI） , Vol.2025-HCI-212, No.43, pp.1-8, 2025. 12

背景 人とVLMが同程度の誤認をするかは明らかにしていない RQ： クリックできなさそうで機能する要素に対し、VLMは人間と 同様の傾向を示すか？ 13

データセット構築 対象： 日本全国の市区町村ホームページ 1,000枚の スクリーンショット アノテーション： 4人の学生にそれぞれ500枚、1つの画像に対し2回づつ クリックができそうな場所をボックスで囲んでもらった 14

データセット構築 15

結果 2人のアノテータの両方がクリック可能と判断した要素を 人間のクリック可能判断数として算出 それぞれの要素の数と結果 人間のクリック可能判断数 10,884 VLMのクリック可能認識数 10,081 人間：クリック可能◯ 人間：クリック不可能× VLM：クリック可能 ◯ 9,436 645 VLM：クリック不可能× 1,448 × 16

VLM ＞ 人 要素の分類 文字や写真に対して人がクリック可能と判断していない要素に 対してクリック可能と認識する割合が高かった VLMのみがクリック可能と判断した要素のカテゴリ内訳(N=230) カテゴリ 件数 割合 文字 121 52.6% 写真 56 24.3% ロゴ 29 12.6% バナー 13 5.7% アイコン 11 4.8% 合計 230 100.0% 17

VLM ＜ 人 要素の分類 文字をクリック可能と判断しないことが多いという結果に 人のみがクリック可能と判断した要素のカテゴリ内訳(N=1,448) カテゴリ 件数 割合 文字 957 66.1% アイコン 241 16.6% バナー 204 14.1% 写真 31 2.1% ロゴ 14 1.0% その他 1 0.1% 合計 1,448 100.0% 18

VLMのみが推定した要素の例 × ◯ 人が正解の例 19

VLMのみが推定した要素の例 × ◯ 人が正解の例 20

VLMのみが推定した要素の例 × ◯ 人が正解の例 21

VLMのみが推定した要素の例 × ◯ VLMが正解の例 22

VLMのみが推定した要素の例 × ◯ VLMが正解の例 23

人のみが推定した要素の例 ◯ 人が正解の例 × 24

人のみが推定した要素の例 ◯ 人が正解の例 × 25

考察 過剰検出が起きた理由 行政などの文字に対して自治体のサイトと判断した上で 意味的な解釈をしたことで検出してしまった可能性がある 文字をぼかしたり 視覚的特徴の評価を優先する プロンプトを入れたりする必要がある 26

まとめ 背景： クリックできなさそうでできる要素がWebサイトにある 目的： 提案システムの有効性の確認 データセット構築： 1,000枚のWeb画像で認識領域の比較 結果： 適合率は比較的高くなったが、自明な要素の見落としが多い 考察： VLMの意味的な解釈が過剰な可能性 27