表格就像人与人之间的对话。如果做得好,它们可以帮助自动化并减少官僚作风。
通过创建表单,您可以构建一个对话发生的界面。因此,这里的目标是确保表单在正确的时间提出正确的问题。
一列与多列
关于表单是否适合一个屏幕有很多争论,即使我们必须在多个列中进行设计。当然,这取决于一个案例,有时使用屏幕上的所有空间都是有益的,但在一般情况下,这是一个不好的做法。
人们必须扫描以Z模式在多列中设计的表单。如果单个列中的表单,则完成的路径直接到底部。因此,在表单完成后,很难做错并跳过对用户有益的必填字段或字段。
从逻辑上订购表格
在他们的名字之前要求某人的地址是不寻常的。
将输入字段数减少到最小值
隐藏表单下方可扩展框中的可选字段,或将其移动到侧面的其他面板。
删除不必要的字段或可以与其他字段组合的字段。
为了使表单更简单,如果可能,您需要将多个输入字段合并为一个。例如,如果您有三个字段的日期,例如日,月和年。
复杂表单可以拆分多个页面
步数有助于导航并显示用户在过程中所处的位置。巨大的形式导致认知超负荷和完成的失败。使用选项卡或可扩展块/步骤在一个页面上简化和拆分它,以打破较小块上的大表单。
表格分组
组字段以批量完成完成过程。例如,您可以创建包含个人信息的组,另一组包含付款详细信息,另外一组用于发送详细信息。
标签
如果是大型表单,则在字段左侧放置标签;对于较小的表单,将标签放在顶部。
使标签文本简短。在输入字段下方或附近为解释文本留下大句子。只留下必需品。总是尽量减少单词的数量并立即达到目的。人们不读它,他们快速扫描。
使用句子而不是标题案例。我们不应该关注标签上的每个单词,并且没有上下文。句子案例稍微容易一些,因此比标题案例更快地遵循语法。有一件事是肯定的:永远不要使用全部大写,否则表格看起来不专业,难以扫描。
保持一致并保持词汇量。使用与产品相关的常用词汇。
占位符
这是一个很好的解决方案,适用于小型表格,如登录,让您的手机给您回电,或类似的东西。但是,它们在具有大量数据的大型表单中表现不佳。
问题是人们填写了很多不同的数据,在这个流程结束时你不记得哪个字段意味着什么?你可以猜测或仔细检查。但是,如果要检查它的含义,则需要从中删除数据以再次查看占位符。
它的好方法是浮动标签。它们看起来像占位符,但是当您单击它时,占位符将成为您输入的值之上的标签。
我们可以使用标签和占位符。但是,每个人都有自己的目的。例如,标签要求提供数据,占位符显示此数据的示例,并且您已经知道需要输入询问信息的大致答案或格式。
纽扣
不要忘记区分主要行动和次要行动。使这些按钮在视觉上不同。此外,如果其中一个按钮即将返回或取消,请确保它位于主要操作的左侧,例如确认或提交。
确认按钮应位于最后一个输入字段的正下方。所以,它就像是同时延续形式和结束。
具体名称。不要使用“提交”或“完成”等常规命名。通过按下此按钮让人们知道他们正在做什么动作,甚至让他们知道接下来会发生什么。这有助于建立信心并使其看起来更专业。
默认值
几乎所有使用您创建的表单的人都选择了值。我们应该默认一些。或者,它可以是用户先前已经处理过的预定义信息,并且可以从他的简档中获取或以某种方式计算。
自动化
避免尽可能多地填充。允许从具有重复/复制功能的现有记录中预填充。
这与机器学习的发展趋势有关。因此,现代界面可以帮助填写表格,同时考虑到以前的经验。例如,税表可以自动计算来自不同来源的数据,如金融账户,交易,以前的提交。
反馈
留出空间以获得对现场条目的反馈。这应该有助于为用户提供现场输入数据的快速验证。复杂和通常的领域也可能从建议中受益。这有助于平衡屏幕和有用的信息。
为用户提供撤消功能以回滚更改或将表单重置为其默认状态。
立即现场验证增加了信心和专业性。
提供当前字段的可视指示符。它允许更多地集中在当前场上并在中断或中断后更快地恢复工作。
对具有许多预定义选项的字段使用预测搜索。
当您在选择框中有大量选项列表时,自动完成功能也非常有用。
其他的内容
对于大屏显示器,表单确保在打开特定表单时在第一个输入字段上具有自动对焦。此外,如果您可以使用Tab键在元素之间移动,那就太好了。
在移动体验中,最好将键盘类型与您要输入的数据类型相匹配。
希望这很有用。我将使用更全面的信息和示例更新本文。因此,如果您想要更新,请使用下面的小表格订阅更新。