网站建设之如何提高网站WEB表单的用户体验

表格就像人与人之间的对话。如果做得好，它们可以帮助自动化并减少官僚作风。

通过创建表单，您可以构建一个对话发生的界面。因此，这里的目标是确保表单在正确的时间提出正确的问题。

一列与多列

关于表单是否适合一个屏幕有很多争论，即使我们必须在多个列中进行设计。当然，这取决于一个案例，有时使用屏幕上的所有空间都是有益的，但在一般情况下，这是一个不好的做法。

人们必须扫描以Z模式在多列中设计的表单。如果单个列中的表单，则完成的路径直接到底部。因此，在表单完成后，很难做错并跳过对用户有益的必填字段或字段。

从逻辑上订购表格

在他们的名字之前要求某人的地址是不寻常的。

将输入字段数减少到最小值

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

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

为了使表单更简单，如果可能，您需要将多个输入字段合并为一个。例如，如果您有三个字段的日期，例如日，月和年。

复杂表单可以拆分多个页面

步数有助于导航并显示用户在过程中所处的位置。巨大的形式导致认知超负荷和完成的失败。使用选项卡或可扩展块/步骤在一个页面上简化和拆分它，以打破较小块上的大表单。

表格分组

组字段以批量完成完成过程。例如，您可以创建包含个人信息的组，另一组包含付款详细信息，另外一组用于发送详细信息。

标签

如果是大型表单，则在字段左侧放置标签;对于较小的表单，将标签放在顶部。

使标签文本简短。在输入字段下方或附近为解释文本留下大句子。只留下必需品。总是尽量减少单词的数量并立即达到目的。人们不读它，他们快速扫描。

使用句子而不是标题案例。我们不应该关注标签上的每个单词，并且没有上下文。句子案例稍微容易一些，因此比标题案例更快地遵循语法。有一件事是肯定的：永远不要使用全部大写，否则表格看起来不专业，难以扫描。

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

占位符

这是一个很好的解决方案，适用于小型表格，如登录，让您的手机给您回电，或类似的东西。但是，它们在具有大量数据的大型表单中表现不佳。

问题是人们填写了很多不同的数据，在这个流程结束时你不记得哪个字段意味着什么？你可以猜测或仔细检查。但是，如果要检查它的含义，则需要从中删除数据以再次查看占位符。

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

我们可以使用标签和占位符。但是，每个人都有自己的目的。例如，标签要求提供数据，占位符显示此数据的示例，并且您已经知道需要输入询问信息的大致答案或格式。

纽扣

不要忘记区分主要行动和次要行动。使这些按钮在视觉上不同。此外，如果其中一个按钮即将返回或取消，请确保它位于主要操作的左侧，例如确认或提交。

确认按钮应位于最后一个输入字段的正下方。所以，它就像是同时延续形式和结束。

具体名称。不要使用“提交”或“完成”等常规命名。通过按下此按钮让人们知道他们正在做什么动作，甚至让他们知道接下来会发生什么。这有助于建立信心并使其看起来更专业。

默认值

几乎所有使用您创建的表单的人都选择了值。我们应该默认一些。或者，它可以是用户先前已经处理过的预定义信息，并且可以从他的简档中获取或以某种方式计算。

自动化

避免尽可能多地填充。允许从具有重复/复制功能的现有记录中预填充。

这与机器学习的发展趋势有关。因此，现代界面可以帮助填写表格，同时考虑到以前的经验。例如，税表可以自动计算来自不同来源的数据，如金融账户，交易，以前的提交。

反馈

留出空间以获得对现场条目的反馈。这应该有助于为用户提供现场输入数据的快速验证。复杂和通常的领域也可能从建议中受益。这有助于平衡屏幕和有用的信息。

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

立即现场验证增加了信心和专业性。

提供当前字段的可视指示符。它允许更多地集中在当前场上并在中断或中断后更快地恢复工作。

对具有许多预定义选项的字段使用预测搜索。

当您在选择框中有大量选项列表时，自动完成功能也非常有用。

其他的内容

对于大屏显示器，表单确保在打开特定表单时在第一个输入字段上具有自动对焦。此外，如果您可以使用Tab键在元素之间移动，那就太好了。

在移动体验中，最好将键盘类型与您要输入的数据类型相匹配。

希望这很有用。我将使用更全面的信息和示例更新本文。因此，如果您想要更新，请使用下面的小表格订阅更新。