如何改善WEB表单的用户体验

来源:设酷网     作者:日期:2020-08-28     浏览:185    评论:0    
  
核心提示:形式就像人与人之间的对话。如果操作正确,它们可以使事情自动化并减少多余操作。 通过创建表单,您可以建立一个进行对话的界面。因此,本文的目标是确保表单可以给用户更好的体验。 一列与多列 即使我们必须在多列中设计表单,也存在许多关于表单是否适合的争论。当然

形式就像人与人之间的对话。如果操作正确,它们可以使事情自动化并减少多余操作。

通过创建表单,您可以建立一个进行对话的界面。因此,本文的目标是确保表单可以给用户更好的体验。

一列与多列

即使我们必须在多列中设计表单,也存在许多关于表单是否适合的争论。当然,这取决于具体情况,有时使用屏幕上的空间可能会有所帮助,但是在一般情况下,这是一种不好的做法。

人们必须以Z模式扫描在多列中设计的表单。如果表单在单列中,则完成的路径直接到达底部。因此,尽量做成一列表单,用户在使用及选择时更清晰。


将输入字段的数量减少

将可选字段隐藏在表单下方的可扩展框中,或将其移动到侧面的其他面板中。

删除不必要的字段或可以与其他字段合并。

为了简化表单,如果可能,您需要将多个输入字段合并为一个。例如,如果您将日期分为三个字段,例如日,月和年,可以合并在一起,月,日,年。


复杂的表格可以分为多页

分步有助于导航并向用户显示他们在过程中的位置。巨大的表单导致认知超负荷和完成的动力不足。使用选项卡或一页上的步骤简化和拆分它,可以将较大的表格拆分为较小的块。


表格分组

将字段分组以使完成过程分批完成。例如,您可以创建一个包含个人信息的组,另一个创建包含付款详细信息的组,再创建一个包含运输详细信息的组。


标签

如果是大表格,则将标签放在字段的左侧;如果是小表格,则将标签放在字段的顶部。

使标签文字简短。在输入字段下方或附近留下文字说明。始终尝试减少单词的数量,并指出重点。

保持一致并保持词汇准确。使用与产品相关的常用词。


占位符

对于诸如登录,留下电话之类的小型表单来说,这是一个极好的解决方案。但是,它们在具有大量数据的大型表单中不适合。

问题在于人们填写了很多不同的数据,而在此流程结束时,您不记得哪个字段意味着什么?

好的解决方案是浮动标签。它们看起来像占位符,但是当您单击它时,占位符将成为您输入的值之上的标签。

我们可以同时使用标签和占位符。但是,每个人都有其目的。例如,标签询问数据,占位符显示该数据的示例,并且您已经知道输入询问信息所需的大概答案或格式。


按钮

不要忘记将主要动作与次要动作区分开。使这些按钮视觉上有所不同。此外,如果其中一个按钮是要返回或取消,则请确保该按钮位于主要动作的左侧。

确认按钮应在最后一个输入字段的正下方。因此,这就像是形式的延续,同时也是形式的结束。

具体说明名称。不要使用“提交”或“完成”之类的通用命名。按下此按钮,让人们知道他们在做什么,甚至让他们知道下一步是什么。这有助于建立信心并使它看起来很专业。


默认值

几乎所有使用表单的人都会选择默认值。默认情况下,我们应该在那里。或者,它可以是用户先前已经处理过的预定义信息,并且可以从其个人资料中获取或以某种方式进行计算。

自动化

避免尽可能多地填写。允许使用制功能从现有记录中进行预填充。

这与机器学习的增长趋势有关。因此,考虑到以前的经验,现代的界面可以帮助填写表格。例如,可以自动从不同来源(例如财务帐户,交易,先前提交的内容)收集数据来计算。

反馈

在字段条目上留出反馈空间。这应该有助于为用户提供对字段输入数据的快速验证。复杂而通常的领域也可以从建议中受益。这有助于平衡屏幕。

为用户提供撤消功能以更改或将表单重置为其默认状态。

提供当前字段的可视指示符。它可以使您更加专注于当前领域,并在中断或中断后更快地恢复工作。

对具有很多预定义选项的字段进行预测搜索

当选择框中有大量的选项列表时,自动补全也非常有用。


其他

对于台式机,表单确保打开特定表单时自动聚焦在第一个输入字段上。此外,如果您可以使用Tab键在元素之间移动,那是很好的。

在移动体验中,最好将键盘类型与要输入的数据类型进行匹配。

最后

希望这些方法有助于您的WEB表单设计,使得您的表单可以给用户更好体验。


本文来源:如何改善WEB表单的用户体验    http://www.sjschina.com/archives/21006.html
相关评论