Evaluating a Large Language Model on Searching for GUI Layouts

PAUL BRIE, teleportHQ, Romania

NICOLAS BURNY, Université catholique de Louvain, Belgium

ARTHUR SLUŸTERS, Université catholique de Louvain, Belgium

JEAN VANDERDONCKT, Université catholique de Louvain, Belgium

引用

Brie, Paul, et al. "Evaluating a Large Language Model on Searching for GUI Layouts." Proceedings of the ACM on Human-Computer Interaction 7.EICS (2023): 1-37

论文：https://dial.uclouvain.be/pr/boreal/object/boreal%3A274724/datastream/PDF_01/view

摘要

本文提出了一个特定的研究问题:基于LLM的系统是否能够搜索相关的GUI布局?为了解决这个问题，我们进行了一项对照研究，评估如何通过生成预训练的训练来搜索网页GUI布局的基于LLM的系统Instigator,，返回与给定指令相关的GUI布局，以及(N=34)从业者与Instigator 交互的用户体验。结果发现，煽动者生成的GUI布局的排名与从业者就其与给定设计指导的相关性的排名之间存在非常高的相似性和适度的相关性。本文强调了通过13个UEQ+量表获得的结果，这些量表描述了从业者的用户体验，用它们来讨论改进此类未来工具的前景。

1 引言

GUI布局出于各种原因而受到追求，如启动设计流程或完成部分布局，引入新思路，使现有布局适应新的使用环境（例如，与样式指南保持一致），或简单地改善整体布局。Lee等人强调了示范设计的主导作用，指出从示例创建的布局更受从业者青睐，这可能比经验丰富的设计师更有益于初学者。灵感来源是设计研究中的常见主题，但很少有研究彻底探讨了具体的灵感搜索策略。这些策略通常通过代码、关键词、图像、草图、线框图或组件搜索GUI布局，就像基于文本的搜索。约束水平影响GUI布局的搜索：低约束导致分歧和迭代搜索，产生多样化的设计，中等约束导致缓慢而深思熟虑的迭代和同质化的设计，高约束导致灵活的括号化和快速的设计任务使用，从而产生多样化的设计。

为实现多重目标，向从业者提供一个有效高效的GUI布局搜索引擎至关重要。本文研究了LLM在这个领域的应用前景：“LLM基础系统能否搜索相关的GUI布局？”

为了回答这个问题，本文进行了一项受控研究，评估了Instigator，一个基于LLM的系统，用于搜索GUI布局。本文针对两个问题进行了评估：Instigator如何使从业者能够搜索到与指令相对应的GUI布局，以及从业者与Instigator互动的用户体验如何。

2 技术介绍

本文对最近关于使用机器学习使从业者成为可能的研究做出了贡献搜索GUI布局，并依赖于LLM的现有研究流为此目的。

2.1 所有GUI布局的相关工作

1. 通过代码搜索。基于语义的代码搜索允许用户在项目存储库中指定搜索，使用类或方法签名、测试用例、合约和安全约束，然后经过程序转换以检索相应的GUI代码。

2. 通过关键词搜索。通过对从Google Play下载的大型应用程序数据集进行自动化动态分析，Guigle提取并索引GUI布局及其元数据。根据这些关键词，用户可以按组件搜索GUI布局，并相应地显示。

3. 通过图像或屏幕截图。Erica记录用户与移动应用程序的交互，包括GUI截图、它们的转换以及用户交互数据，将其聚合成交互迹线，形成用户流。通过这种方式，约3,000个流的数据集被聚类为23个类别，使用户能够搜索相应的GUI布局。

4. 通过草图。Ge将每个Rico条目转换为GUI元素的层次结构，以训练深度学习模型。用户绘制了一个低保真度的自由手绘GUI草图，也通过基于语法的草图解析器转换为GUI层次结构。然后使用这个层次结构来搜索数据集中按相似度评分排名的相似GUI布局。

5．通过线框图。GUIFetch根据关键词匹配搜索公共存储库以找到应用程序，然后使用静态和动态分析构建识别应用程序的GUI屏幕的模型，并计算相似度度量来对GUI布局进行排序。

6. 通过组件。LayoutGAN是一个生成对抗网络（GAN），接收一组随机放置的GUI元素作为输入，推断它们之间的几何约束，使用自注意力模块生成GUI布局的布局。然后，一个可微分的线框渲染引擎将这个布局映射到一个线框图上，然后基于CNN的鉴别器对布局进行优化。

7. 通过探索。设计地图使用户能够根据在GUI特征向量上运行的ML技术（例如，主成分分析）获得的四组五个簇的点云来可视化Rico数据集的移动GUI。当从零开始时，可以将任选的GUI导入线框软件，并将其解组成代表GUI元素的图标。当从初始线框开始时，它会自动将用户定位在任何选择的点云中，从而实现了通过接近或相似性进行视觉探索。

2.2 LLM的最新进展

Transformer是一种深度学习模型，包含自注意机制，允许对输入数据的每个组件的重要性进行差异加权。尽管RNN在处理序列（如自然语言句子或计算机语言指令）方面已被证明是有效的，但它们的顺序性质导致训练时间受到瓶颈限制，因为无法并行化。Vaswani等人提出了一种解决方案，通过提出一种利用自注意机制和全连接层的Transformer，允许在训练输入中处理更广泛的上下文。多头注意力机制的实现还能够学习不同表示和连接，而不受它们之间距离的影响。Transformer的采用减少了计算复杂性和时间，因为操作易于并行化，并已被证明能够产生最先进的结果。

大量未标记的基于文本的内容的存在催生了OpenAI的生成式预训练Transformer（GPT）的发展。与在特定的标记数据集上训练模型的传统方法不同，GPT是通过一个初始的无监督阶段在一个大量的未标记数据语料库上进行训练的，该语料库包含大约7k本书籍。随后通过一个监督的微调过程利用标记数据集，利用了Transformer解码器架构的修改版本。GPT模型的有效性通过其在各种自然语言处理任务中的出色性能得到了证明。

而像GPT这样的模型是以单向方式处理其数据的，Google假设通过双向解析可以更好地理解语言的深层上下文。这导致了来自Transformers的双向编码器表示（BERT）的出现，它结合了transformer的编码器部分，并采用了类似的无监督预训练和监督微调技术。预训练阶段通过使用Masked Language Modeling完成，其中模型基于周围上下文来预测句子中缺失的单词。这些技术为模型提供了关于上下文中的单词和句子的信息。在微调了11个特定领域任务后，如来自GLUE数据集的自然语言理解挑战以及问题回答或句对完成，BERT已经取得了最先进的结果。RaWi采用了基于BERT的学习排序方法，该方法是在通过众包技术获得的GUI布局数据上进行训练的。他们表明，这种方法在基于TF-IDF搜索GUI布局方面优于经典方法。

iGPT证明了Transformer在视觉处理中的进一步应用。它在不了解图片的二维结构的情况下执行图像补全，并使用与GPT-2相同的模型架构。通过额外的微调，这种方法使得模型在ImageNet数据集上与自监督基准具有竞争力。

OpenAI推出了一种高度创新的模型，称为GPT-3，通过利用“少样本”学习方法，绕过了训练过程中的微调方面。与微调不同，少样本学习不会改变模型的权重，而是通过提供少量示例来对其进行条件化。模型的评估通过零样本学习和一样本学习进行，其中提示被减少到一个或零个示例。GPT-3获得的结果表明，在几项语言建模任务中，包括开放-封闭练习、翻译、常识推理和算术等，其性能水平可与或超过最先进的微调模型相媲美。此外，GPT-3能够生成对人类难以准确识别的合成新闻文章，成功率为52%。当Instigator的开发完成时，只有GPT-3可用：GPT-4和ChatGPT稍后出现，这需要对它们的结果进行比较。

最近的iGPT发展进一步巩固了Transformer在视觉处理中的潜在应用。这个模型在不需要任何关于图片二维结构的先验知识的情况下执行图像补全，并采用了与GPT-2相同的模型架构。通过微调的增加，这种方法证明在ImageNet数据集上与自监督基准具有竞争力。推理领域，虽然不像图像处理或自然语言处理那样受欢迎，但也通过使用transformer架构，利用了GPT-f这一证明助手来解决。该模型在给定最终目标的情况下执行证明步骤，并在Metamath环境中取得了最先进的结果，完成了56%的证明。

总之，类似于GTP的方法，特别是基于预训练transformers的方法，有潜力处理由HTML代码捕获的大量GUI布局，将其解释为处理语言以基于它们生成布局。从未以这种方式实施和评估过这种处理。已经探索了GUI布局的其他用途，但没有用于生成布局。Scones使用GPT-2将用户的文本场景转换为一系列描绘场景中包含的指令的图形草图。Stylette应用LLM来支持和改进GUI布局：通过解释用户重塑网页的目标自然语言，这个浏览器插件从包含170万GUI元素的数据集中提取GUI样式建议，并生成带有其值的CSS属性，供用户应用。

2.3 Instigator

Instigator是一个基于Transformer架构的模型，旨在执行证明步骤，以完成逻辑推理等任务。该步骤指南可能包括如何准备输入数据、配置模型参数、运行模型以及解释输出等内容。Instigator的原理是利用生成式预训练训练（GPT）架构进行零样本学习。在推理时，提供关于期望的GUI布局及其元素的元信息，并且Instigator将逐个生成令牌。

元信息包括GUI功能（例如，闪屏、“主页”、“呼吁行动”页面、导航栏、登录界面）、布局结构（即，布局的分层分解为元素以及受到FormsVBT启发的它们的行和列对齐），以及GUI内容（例如，元素和每个元素的数量）。然后，Instigator将逐个生成布局令牌，直到生成一个序列结束（EOS）令牌为止。我们选择了一种YAML格式，其中每个节点都在一个接一个的情况下出现，由一个行结束（EOL）令牌分隔开，并包含节点内容（例如，容器、图像、段落、节点深度以及节点的坐标和大小）。然后，这个令牌序列被转换成数据框架和低保真度的布局。

图表 1 Instigator返回的一些GUI布局

3 实验评估

给定布局的文本指令，Instigator的预训练语言模型将生成一系列符合其训练的HTML元素分布的布局。为避免术语混淆，并便于大多数利益相关者（不一定是专家）理解这个过程，我们使用了“搜索”这个术语，而不是“生成”。

然而，我们不知道Instigator返回的GUI布局是否符合从业者期望的布局（例如，Guigle返回的GUI布局中有68.8%是相关的；GuiFetch返回的GUI布局中有81%是相关的，并且对65%的初始GUI都可以找到建议），以及他们如何欣赏这些建议中找到的元素组合。本节的其余部分将按照Ko等人的结构，逐步定义我们控制研究的各个方面：参与者、任务以及定量和定性的度量。

3.1 实验设置

参与者是从一个国家和一个国际邮件列表中招募的，总共约有200名从业者，这两个邮件列表都由匿名维护。一封电子邮件被发送到邮件列表，询问愿意评估Instigator的从业者。作者要求每位参与者要完成的四项任务：

(1) 发现任务，在该任务中，参与者观看了一段2分33秒的演示视频（请参见补充材料），然后在Instigator上自由地与之交互5分钟，从一个干净的Prompt阶段开始。他们没有收到任何具体的指示或信息。

(2) 热身任务，在该任务中，参与者需要使用Instigator自由地设计一个电子商务网站的首页。虽然没有强制规定时间限制，但建议在15分钟内完成。参与者被要求根据他们最好的知识设计一个从初始阶段到最终阶段的GUI。

(3) GUI布局搜索和排名任务，在该任务中，参与者需要搜索Instigator生成的GUI布局，并按照与给定指令的相关性递减的顺序对它们进行排序（例如，“建立一个包含5张图片、5段文字和5个按钮的区域”）。对于测试的21个指令（请参见表2的第一列），我们提取了三个Instigator生成的布局子集，分为三个相关性级别（低、中、高 - 详细信息请参见补充材料中的Instigator-rankings.pdf文件）。指令和它们的刺激被随机呈现在一个网络应用程序中，允许参与者通过拖放方式排列刺激。该设置是一个在被试设计，包括21个指令 × 7.8个刺激 = 165次试验（56次用于功能 + 54次用于内容 + 55次用于功能与内容相结合）。

(4) 评估任务，参与者被要求填写UEQ+问卷（用户体验问卷），这是UEQ的模块化扩展，我们选择了13个量表，涵盖了一般方面、实用性和感官质量，根据Schrepp 的建议，即吸引力、效率、明晰度、可靠性、刺激性、实用性、新奇性、适应性、实用性、价值、视觉美学、直观使用、内容的可信度和内容的质量，以便重点评估参与者与Instigator的互动体验。可以添加自由评论。我们选择使用UEQ+的理由如下：它明确涵盖了用户体验的实用性和感官维度，而不仅仅是可用性；它由多个量表组成，可单独和整体进行分析；有用于解释其结果的分析工具和已发布的规范，而其他类似方法则不具备这一特点。

3.2 量表平均分数和量表平均重要性

我们使用UEQ+数据分析工具计算并解释参与者对所选量表的反应，以便在表1中报告结果，并分别在图2和图3中显示每个量表的结果，参考区间为[-3，+3]。

表格 1在Instigator上评估的量表平均得分和量表平均重要性

图表 2 Instigator获得的量表平均得分（SMS）

图表 3 Instigator的量表平均重要性（SMI）。误差棒显示95%的置信区间。

总体而言，所有的量表评分都在0.76以上，因此表明参与者认为Instigator在这13个方面符合他们的期望。明晰度（M=2.06，SD=1.10）和直观使用（M=1.88，SD=1.10）获得了两个最高的分数，同时具有很高的重要性（M=2.0，SD=1.0和M=2.03，SD=1.04）。所有量表的重要性也都是正值，均值在1.12以上。适应性（M=0.76，SD=1.39）和视觉美学（M=0.77，SD=1.29）被参与者评为Instigator的较不令人信服的方面，但相对重要（M=1.5，SD=1.22；M=1.12,SD=1.28）。实用性（M=1.67，SD=0.99）被评估为最重要的量表（M=2.24，SD=0.92），其次是直观使用（M=1.88，SD=1.10），其也获得了非常积极的平均分数（M=2.03，SD=1.04）。

由于量表的平均分数明显不同（Kruskall-Wallis检验给出Hstat=155.94，Hties=166.71，df =12，p≤0.0001），我们计算Nemenyi两两比较测试来确定不同的量表（表4的结果在图9中复制）。我们计算Cohen's d系数来确定效果大小（8个小，15个中等，5个大）。类似地，我们进行了第二次Kruskall-Wallis检验，以确定量表平均重要性之间是否存在显著差异。我们发现只有一个差异：实用性显著大于视觉美学（Rcrit=120.60，SD=21.90，qstat=5.50，p≤0.0067）。

Cronbach's α从0.73（Dependability）到0.95（Visual Aesthetics）不等，有九个量表被解释为“优秀”，三个量表被解释为“良好”，只有一个量表被解释为“可接受”（见表3），其均值为0.89，被解释为“良好”，几乎达到“优秀”的水平。尽管参与者的专业水平和设计经验各不相同，但他们对量表的回答方式是一致的。为了评估参与者对子量表重要性的内部一致性，我们计算了三个指标：Cronbach's系数α=0.82（被解释为“良好”），Spearman等级相关系数ρ=0.93（被解释为“非常强”，最高值），Guttman的可靠性λ2=0.95（用2000次迭代计算并被解释为“非常高”）。这种内部一致性为结果的讨论奠定了坚实的基础。

3.3 量表的基准测试

Schrepp等人提到了比图2中最初定义的3个区域（差、中性、好）更精确的区间，这些区间是基于对一组评估进行的基准测试而确定的。图11显示了六个量表的分布，根据这个基准测试，将其分解为五个区间：差、低于平均水平、高于平均水平、好和优秀。明晰度和新奇性被评为“优秀”，效率被评为“良好”，吸引力、可靠性和刺激性被评为“高于平均水平”，所有这些都是对它们评价的积极迹象。

3.4 关键绩效指标

UEQ+的另一个最新发展是关键绩效指标（Key Performance Indicators，KPI）扩展[32]的构建。KPI结合了用户体验因素的主观感知重要性和UEQ+的结果，以便将量表平均分数与其重要性之间的关系更好地理解为一个指标。平均KPI（M=1.51，SD=0.67）高于1的正阈值。虽然KPI的理论值是其值再次在一个区间[-3，+3]，Hinderks等人经验性地确定了实际值的范围为-0.286到2.14。由于平均KPI为1.51，我们可以估计对于Instigator整体的KPI评估相当积极。两个单独的KPI较低，KPI6=−0.10和KPI30=0.19，这意味着这两位参与者认为某些量表是不相关或不太重要的，因此对其评分较低。六个单独的KPI更为积极，但低于阈值1，即，KPI5=0.98，KPI15=0.76，KPI19=0.76，KPI21=0.91，KPI25=0.76和KPI32=0.78，其余26位参与者的KPI均高于阈值，15/34=44%高于平均KPI。

3.5 个别量表分析

吸引力。这个量表是所有量表中最重要的，因为它捕捉到了Instigator的“用户总体印象”，这是用户体验的三个维度之一，也是UEQ+结构的顶层量表（见图13）。感知吸引力被认为是对软件相关方面在给定使用场景中的感知质量进行平均处理的结果[50]。吸引力的平均分数（±标准差）为1.45（1.37），平均重要性（±标准差）为1.85（1.09），所有这些数字都属于正值区间（见图10），因此被解释为一个良好的评估。这个评估也得到了基准测试中的“高于平均水平”的位置（见图11）和Q1和Q4的位置的支持（见表1）。所有这些结果都与这个量表的积极评估一致，参与者的内部一致性达到了较高的可信度（α=0.90）。这种感知的吸引力被建议足够好，可以纳入用户界面设计过程中，特别是与预期的GUI布局相结合时。

图表 4 Instigator的重要性绩效分析。

表格 2 根据两种方法，将量表分配到IPA四象限：Q1=“继续保持良好的工作”，Q2=“可能过度投入”，Q3=“低优先级”，Q4=“集中注意力”。

效率。这个量表被认为是用户体验的实用品质，是“目标导向”的（其评估基于可以使用Instigator执行的任务）。效率（M=1.67，SD=1.54）属于正值区域，具有很高的重要性（M=1.82，SD=1.00），在基准测试中被解释为'良好'，在两种情景下都位于Q1，并且具有良好的评分者一致性（α=0.88）。这种感知的效率表明，参与者感到足够快速地搜索GUI布局并找到它们，以便将它们纳入到设计过程的其余部分中。这种效率体现在能够分解一个建议的布局成为可以独立编辑的元素上，因此不会强迫从业者要么完全采用一个布局，要么拒绝它。

图表 5 UEQ+的量表结构

明晰度。这个量表表达了参与者认为熟悉Instigator并学会如何使用它有多容易。因此，它也被认为是用户体验的一个实用品质，是“目标导向”的。明晰度（M=2.06，SD=1.10，所有量表中最高的平均分数）属于正值区域，具有非常高的重要性（M=2.00，SD=1.00），在基准测试中被解释为'优秀'，在两种情景下都位于Q1的最右边，具有优秀的一致性（α=0.93）。这种感知的明晰度表明，参与者对于Instigator的运行方式以及流程的步骤化结构感到非常舒适，他们认为这是一个基本的质量，远远超过其他因素。

可靠性。这个量表表达了参与者在多大程度上感觉能控制Instigator。因此，它被认为是第三个实用品质，是“目标导向”的。可靠性（M=1.38,SD=1.20）属于正值区域，具有较高的重要性（M=1.85，SD=0.73），在基准测试中被解释为'高于平均水平'，在情景中位于Q1和Q4，并具有可接受的一致性（α=0.74）。这种感知的可靠性表明，参与者对于能够控制Instigator有一定程度的幻觉，这被定义为显式的对话控制，是最佳的配置。

这应该通过在定义指令时可能出现的控制丧失进行缓解。如何使用受控词汇来进行指导应该得到改进。例如，“构建一个表单类型的部分”是可以适度控制和可预测的，因为“类型”可能有多种含义：输入密码与输入城市名或特定术语（如人名），然后使用本地搜索工具进行输入是不同的。指令“构建一个包含3个图像和3个段落的部分”会生成在每个图像下方放置的段落，而更灵活的方法是使用其他结构，例如“构建一个<内容|导航|相册>部分，其中包含3个图像和3个段落，并放在下方”，或者使用一个方向指示符，如“ltr”（从左到右）。

其他选项可以细化术语：“图像”可以附加到一些精细的术语中，以指定语义，比如“照片”、“图表”、“标志”、“图表”，并带有一些修饰词，如“大”、“小”、“中”。这将产生例如以下结构的指令：“构建一个带有2张小照片、1个搜索输入、2个导航链接和1个下载按钮的旁注/主要部分”，“通过行/列构建一个包含5张图像、5段落和5个按钮的部分”。然后，如果选择“列”，Instigator可以自动生成5列，每列有1张图像、1个段落、1个按钮。

转述：韩廷旭