如何设计出“让用户高效使用”的表单?

访客4年前黑客文章1157

笔者针对差异范例的表单做了可用性测试与阐明后,获得了有助于用户高效利用的表单设计要点,但愿内容对你有所开导。

如何设计出“让用户高效利用”的表单?

我们一直想研究表单中标签如何安排才气让用户带来好的体验,所以我们借助眼动仪对差异种类的表单举办了可用性测试与阐明,期间我们发明白许多有趣的数据,以下是我们对数据的具体阐明。

在各人具体阅读前,我们先说明下此次测试搭建的情况是一个有别于真实环境的、姑且的,因为我们需要正确的测试视觉跳动的进程、跳动的次数,我们需要消除测试中其他的滋扰因子,用户纯粹聚焦在表单的填写上。

卢克在我们测试筹备前和阐明数据的时候都给了又代价的看法和反馈,我们将他的一些理论纳入了可用性测试中,并通过数值数据来饱满和举证。

在构建我们要测试的表单的进程中,我们尊重卢克的两点发起,首先是思量标签位置和名目配置之间的干系,其次是表单填写内容熟悉数据与生疏数据之间的干系。

因此,您将在我们测试的每个页面上找到两种范例的数据。为了添加一些真实的环境,我们将用户熟知的数据输入字段与其他难的表单位素(如下拉列表框)配对。这样做也有助于我们确认我们以前对表格的发明。

我们的测试工具既包罗专家用户(主要是设计师和措施员),也包罗一些可用性专家和新手用户。我们要求用户填写我们提交给他们的所有表格。一旦用户点击提交按钮,我们的注视路径记录就完成了。

测试1:标签在输入框左边,标签左对齐

如何设计出“让用户高效利用”的表单?

这个是我们测试的之一个案例,是我们在日常糊口中常见的利用表单。毫无疑问,我们的两类用户在填写的进程中,对付标签和输入框的关联性的识别做的很是好。我们发明所有的用户在每个标签和输入框中都有一个单一的视觉跳动,这说明用户照旧很容易感知前后的接洽。同时我们也发明,典范的中等视觉跳动的一连时长是500毫秒,这个数值相对付其他环境长许多,这表白用户有较强的认知负荷。

标签及其输入框之间的空缺在视觉上很好地引导用户,让用户顺势去查察输入框。但同时也有一个问题,标签和输入框之间的留白是不牢靠,一些标签和它们的输入字段之间的间隔过大,迫利用户耗费更多的时间与表单举办可视化交互。

因为我们在表单中加了一个下拉列表框,所以我们也有时机确认我们之前关于它的发明:它们是最引人注目标表单位素。对面临一个白色页面上的简朴表单时,所有用户之一眼城市牢靠在下拉列表框上。这个表单位素清楚地转达了它的寄义以及用户该如何与之交互,在用户的大脑中赋予它更高的重要性。

另外,在我们的之一个测试表单中,在下拉列表中选择的项目仅显示一个数字,没有反复标签转达的寄义。我们发明,大大都测试工具,包罗专家用户,都被迫从头查抄标签,以提醒本身下拉列表中包括的数字的寄义。

测试2:标签在输入框左边,标签右对齐

如何设计出“让用户高效利用”的表单?

测试2比起测试1,标签在输入框左侧的环境与前面的测试完全沟通,但标签的右对齐将视觉停驻点的总数量淘汰了近一半,表白这种机关大大淘汰了用户完成任务所需的认知负荷。另外,表格填写时长也淘汰了近一半。

标签和它们对应的输入框之间险些没有视觉跳动,这表白用户很快领略了输入字段的寄义,同时也是因为眼睛在短距的侧眼移动上较量擅长。

固然我们利用左对齐标签淹灭了500毫秒用做扫视,但在右对齐标签上专家用户在标签和输入框之间的扫视时间仅为170毫秒,新手用户也仅仅淹灭了240毫秒。

我对这类表单最初担忧是用户眼睛在前一个输入框与下一个标签的开头之间的转换会较量坚苦,因为它的位置是不行预测的,泛起了锯齿状。可是功效证明,我的记挂是多余的。用户眼睛的斜视眼动很是快,在阅读第二行的时候,眼睛不需要调解核心和视距。

我们可以看到测试2与测试1对比,尽量视觉跳动次数有所下降,可是大大都用户(专家和新手)照旧需要从头查抄输入框的相应标签。

测试3:标签在输入框上方紧贴,标签左对齐

如何设计出“让用户高效利用”的表单?

相关文章

经验主义的陷阱:谈谈需求探索中的认知偏差

经验主义的陷阱:谈谈需求探索中的认知偏差

编辑导语:履历主义亦称“履历论”,是一种认识论学说。与“理性主义”相对。履历主义认为感性履历是常识的独一来历,一切常识都通过履历而得到,并在履历中获得验证。在日常事情中,我们往往需要鉴戒调入“履历主义...

经典案例拆解:3天涨粉18W,我是如何策划的免费送活动的?

经典案例拆解:3天涨粉18W,我是如何策划的免费送活动的?

编辑导读:在勾当运营时,免费送XXX勾当是很常见的一种方法。可是近些年来,这种方法并不吃香了,这是怎么回事呢?本文作者按照自身事情经验,拆解了一个经典案例举办阐明,但愿对你有辅佐。 我们经常会看到免...

2020年 UI 设计趋势之细节分析

2020年 UI 设计趋势之细节分析

此前在一些设计网站看到一些设计趋势相关的内容,但大多是属于全品类的趋势。因此,我想通过我自己的了解和一些收集,重新整理一些属于移动UI设计方向的设计趋势,并且进行一些设计相关的分析。这样或许对于许多移...

产品的PoC对于创新意味着什么?

产品的PoC对于创新意味着什么?

编辑导语:PoC(Proof of Concept),即为概念提供证据。它可用于论证团队和客户的设计,答允评估和确认观念设计方案,PoC的评价大概引起规格和设计的调解。那么,产物的PoC对付创新来说,...

用产品思维看丁真为什么会爆火?

用产品思维看丁真为什么会爆火?

编辑导语:最近几天,康巴夫君“丁真”凭借着一张野性而又温柔的脸,袭卷了各大app的热搜,更是霸屏了抖音。各大电视台和新闻媒体也都争相报道,甚至还火到了海外。如今,丁真已经成为了老家四川甘孜的旅游代言人...

数字人民币驾到:微信、支付宝们等待戈多

数字人民币驾到:微信、支付宝们等待戈多

编辑导语:克日,深圳市人民当局连系中国人民银行开展数字人民币试点事情。从10月12日开始,参加“礼享罗湖数字人民币红包”勾当的中签者,可前往罗湖区已完成数字人民币系统改革的商户举办消费。数字人民币为什...