使用视觉建模和显著性分析预测和解释移动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 元素可点击性预测的热力图,同时利用近邻搜索为设计师提供相似但对点击性有不同影响的对比样例。
  • 创新之处:

    1. 基于像素级别的完全视觉模型,与现有方法相比,可适用于各类未完成设计(如 mockup 和早期原型)。
    2. 提供局部和全局层次的解释机制:局部解释通过 XRAI 热力图分析特定输入对预测结果的影响;全局解释通过数据集中相似的对比设计为设计师提供灵感。
    3. 开发了一个包含多用户标注的 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 风格的动态变化。

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/papers/chi/71845/2022

广告推荐

学习 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 篇相关论文