使用视觉建模和显著性分析预测和解释移动UI的可点击性
可解释人工智能(XAI)AI 辅助决策与自动化系统UI/UX 设计师AI/ML 研究员与工程师
文献标题
Predicting and Explaining Mobile UI Tappability with Vision Modeling and Saliency Analysis
文献信息
- 主题领域: 人机交互 (HCI),尤其是移动界面设计与用户可用性分析
- 关键词: Mobile UIs, 深度学习, 可解释人工智能 (XAI), 视觉模型, tappability, 用户界面设计, 机器学习, 杂乱视野分析, 数据驱动设计, UI 可用性
研究背景与问题
-
发现的问题或挑战:
- 移动用户界面(UI)的设计中,用户是否能准确感知元素是否可点击(tappable)是一个关键问题,但现有用户研究费时且昂贵。
- 深度学习虽被用于预测可点击性,但缺乏可解释性,尤其是在给设计师提供明确的改进指导方面。已有方法一般需要详细的 UI 层级数据,难以支持未完成的设计(如线框稿或视觉模型)。
- 不同用户对 UI 的可点击性认知存在主观性,这对数据标注和模型训练提出了更高的要求。
-
重要性:
- UI 元素的可点击性直接关系到应用的可用性和用户体验(UX)。错误的界面设计可能导致“伪可点击性”或重要功能的低可发现性。
- 在早期设计阶段获得准确且快速的用户反馈,有助于优化设计流程,并避免后期高昂的修复成本。
-
研究动机与相关工作:
- 相关工作包括对 UI 的数据驱动可用性评估、用户注意力建模,以及深度学习辅助的界面分析方法。然而,这些工作要么依赖复杂的输入(如视图层级、特定平台特性),要么缺少对模型预测的可解释性。
- 本研究在上述问题基础上,旨在突破传统方法的局限,开发基于视觉的 tappability 模型,并结合机器学习解释技术提供对预测结果的深入理解。
解决方案
-
方法与解决方案:
- 提出了一个完全基于视觉信息的深度学习模型,用以预测移动 UI 元素的可点击性(tappability),无需视图层级等非视觉信息。
- 使用解释性人工智能(XAI)技术,包括 XRAI 算法,生成 UI 元素可点击性预测的热力图,同时利用近邻搜索为设计师提供相似但对点击性有不同影响的对比样例。
-
创新之处:
- 基于像素级别的完全视觉模型,与现有方法相比,可适用于各类未完成设计(如 mockup 和早期原型)。
- 提供局部和全局层次的解释机制:局部解释通过 XRAI 热力图分析特定输入对预测结果的影响;全局解释通过数据集中相似的对比设计为设计师提供灵感。
- 开发了一个包含多用户标注的 tappability 数据集(扩展自 RICO 数据集),更好地捕捉了用户的主观多样性。
-
实施步骤与关键技术:
- 数据集构建:从 RICO 数据集中筛选并标注18667个 UI 元素,建立多用户(5人标注)对同一元素点击性认知的数据集。
- 模型构建与训练:基于 ResNet-18 网络,输入为 UI 截图及目标区域的二值掩码(表示预测区域)。优化使用交叉熵损失与随机梯度下降。
- 解释性分析:XRAI 热力图评估模型所依赖的屏幕区域;基于模型的嵌入空间,使用 k 最近邻搜索生成对比样本。
研究成果
-
具体成果:
- 模型在测试集上取得了 91.54% 的精度、80.23% 的召回率以及 0.903 的 AUC。相比现有方法(Swearngin et al. 2019),在使用仅像素信息时表现显著更优。
- 提出了一种与用户感知一致的 tappability 数据标注流程,有助于改进后续研究中的训练与分析方法。
- 使用解释性方法成功显示了 UI 设计中的明显影响因素,包括文本标签、图标邻近性、界面布局等。
-
优势:
- 与基于长文本和层级数据的传统方法相比,该方法扩展了可操作范围,允许对非完整实现的 UI 进行即时分析。
- 在设计与模型预测之间建立更强的可解释性联结,为设计师提供更多实用的设计改进建议。
-
实验与评估结果:
- 精度上显著优于像素输入方法;与结合多种输入特征的更复杂方案相比,虽然召回率略低,但保持了高对比优势。
- 用户研究(对 13 名 UI/UX 专业设计师)显示,该系统能显著降低设计评估成本,特别是在早期迭代阶段;部分用户认为解释结果如对比样例具有一定的启发性。
-
局限性与未来方向:
- 对大图像(例如复杂的 ImageView)部分预测可能受限,需进一步调整 XRAI 热力图的生成。
- 模型为静态 UI 设计,缺乏考虑 UI 流程动态上下文的能力。
- 对未来的改进方向包括:提供更细粒度的设计建议,增加对 iOS 等其他平台的适配,以及根据最新 UI 数据集更新模型以适应 UI 风格的动态变化。
研究问题 / 现实痛点
这篇论文在当前问题库中对应的问题线索。
help
研究问题
3- 如何利用视觉信息预测移动端UI元素的可点触性(tappability)?分类: 交互性能与人类运动预测模型同类问题arrow_forward
- 基于机器学习如何解释UI元素可点触性的预测结果并为设计者提供改进建议?分类: 交互性能与人类运动预测模型同类问题arrow_forward
- 在缺乏UI层级数据的情况下,如何提升UI可用性分析的适用性与解释性?分类: 交互性能与人类运动预测模型同类问题arrow_forward
lightbulb
现实痛点
1- 用户很难快速直观判断UI元素是否可点触,影响体验。分类: 界面感知、交互节奏与表达设计同类问题arrow_forward
- 80%
质疑人工智能:为可解释人工智能用户体验的设计实践提供信息
CHI '20· 可解释人工智能(XAI) +1
- 80%
如何使用可解释性方法来支持计算机视觉模型中的错误识别?
CHI '22· 可解释人工智能(XAI) +1
- 80%
设计思维理解:支持AI赋能的用户体验设计构思的模型透明度信息需求
CHI '23· 大语言模型(LLM)的人机协作 +2
- 80%
我应该相信谁:AI还是我自己?利用人类和AI正确的可能性来促进对AI辅助决策的适当信任
CHI '23· 可解释人工智能(XAI) +1
- 80%
fAIlureNotes:支持设计师了解计算机视觉任务中AI模型的局限性
CHI '23· 可解释人工智能(XAI) +2
- 80%
芝诺:用于机器学习行为评估的交互式框架
CHI '23· 可解释人工智能(XAI) +1
- 80%
VIME: 用于识别序列决策机器学习模型能力与局限性的视觉交互式模型浏览器
UIST '24· 眼动追踪与注视交互 +2
- 67%
您会接受不完美的AI吗?探讨调整AI系统终端用户期望的设计
CHI '19· 可解释人工智能(XAI) +2
- 67%
通过设计研究人工智能的可读性
CHI '20· 可解释人工智能(XAI) +2
- 67%
重新审视人类与AI交互的独特设计难度及其原因
CHI '20· 生成式AI(文本、图像、音乐、视频) +2
基于研究子主题与职业分类的 Jaccard 相似度(≥60%)
快捷操作
广告推荐
学习 AI 编程到 CodeNow
open_in_new打开DOI链接
DOI: https://dl.acm.org/doi/abs/10.1145/3491102.3517497
一眼看懂
fact_check论文快照
dataset
来源
CHI
calendar_month
年份
2022
emoji_events
奖项
未标记奖项
group
作者
6 位作者
sell
研究子方向
可解释人工智能(XAI)、AI 辅助决策与自动化系统
work
职业/产业
UI/UX 设计师、AI/ML 研究员与工程师
article
内容状态
已索引正文
hub
相关论文
10 篇相关论文