发布时间：2023-6-5 分类： 电商动态
用户可能不愿意填写表单，因此它尽可能简单，并且小的更改可以极大地改善用户体验。
目录
表格构成
表格结构
输入字段
标签
按钮
验证
会话界面：设计表单的新方法
总结
总结
用户有一个目的是使用应用程序或代购源码网站。通常，用户实现目标的方式之一是表单。表单仍然是用户与网页和应用程序交互的最重要类型之一。在大多数情况下，表格通常是实现目标的最后一步。用户应该能够快速完成表单。
在本文中，您将看到可用性测试，试验测试，眼动追踪研究和用户投诉的实用技巧。当正确使用这些技术时，它们可以产生更简单，更有效的表单体验。在文章的最后，我还将介绍一种设计表单的新方法。
1.表格构成
常见表格有以下五个部分：
结构：这包括字段的顺序，页面上表单的显示以及多个字段之间的逻辑关系。
输入字段：这些字段包括文本字段，密码字段，复选框，单选按钮，滑块以及用于输入的任何其他字段。
文本标签：告诉用户相应的输入字段的含义。
操作按钮：当用户按下按钮时，执行操作。
反馈：反馈允许用户理解他们的输入。大多数应用和代购源码网站都使用纯文本作为反馈形式。
表格还可能包含以下内容：
辅助信息：说明如何填写表格。
验证：自动检查用户的数据是否有效。
本文介绍了表单结构，输入字段，标签，按钮和验证的许多方面。
2.表格结构
表格是一种对话。就像对话一样，它应该包括双方之间的逻辑通信：用户和应用程序。
只保留必要的字段
确保只有真正需要的字段。添加到表单中的每个附加字段都会影响转换率。始终考虑为什么要从用户请求此信息以及如何使用它。
按逻辑顺序排列
从用户的角度提问，而不是从应用程序或数据库的角度提问。例如，在他们的名字之前询问某人的地址是不合理的。
聚合相关字段
将相关字段分组。从一组问题到下一组问题的方式更像是一个对话。将相关字段分组在一起还可以帮助用户了解他们需要填写的信息。比较下面的两个信息表格。
与聚合相关的字段（图片:尼尔森诺曼集团）
一列或多列？
多列显示表单字段的问题之一是用户填写字段的顺序可能偏离预期。如果表单有多列字段，则用户必须以Z模式扫描，这会降低理解速度并混淆已完成的路径。但是，如果您在列中，则完成的路径是显式行。
在左边，有很多方法可以解释表单字段之间的关系，右边是清晰的界限。
3.输入字段
输入字段是用户填写的字段，例如文本字段，密码字段，下拉菜单，复选框，单选按钮，日期选择器等。
字段数
形式设计的一个经验法则是越短越好。这当然看起来很直观：降低用户的成本并提高转换率。因此，尽可能减少字段数。这将使您的表单更简单，特别是如果您需要用户填写大量信息。但是不要过度。通常的做法是在给定时间仅显示五到七个输入字段。
在一个易于填充的字段中聚合多个字段，例如地址（图片: Luke Wroblewski）
是必需的还是可选的？
尽量避免表单中的可选字段。但是如果要使用它们，请务必清楚地区分所需的输入字段。星号（*）通常用于必填字段。如果您决定在必填字段中使用星号，请在表单页面上显示星号的用途，因为不是每个人都明白这意味着什么。
MailChimp邮件列表的订阅表单。
设置默认值
除非您认为大多数用户会选择此值，尤其是必填字段，否则请避免设置默认值。为什么呢？
因为您可能会增加错误。用户将快速扫描表单，因此他们可能会跳过一些已经具有默认值的字段。
但是这条规则并不适用于智能默认值——这是根据用户信息设置的默认值。智能默认设置使表单更快，更准确。例如，基于定位数据预先选择用户所在的国家。但请谨慎使用。
智能预选国家表格
输入掩码
字段掩码是一种帮助用户格式化输入文本的技术。一旦用户专注于一个字段，就会出现一个掩码，文本会在填写单词时自动格式化，帮助用户专注于所需的数据并更容易发现错误。在下面的示例中，输入电话号码和信用卡号时会自动应用括号，空格和短划线。这种简单的技术可以在输入电话号码，信用卡和货币时节省时间和精力。
（图片: Josh Morony）
PC端：键盘调整
用户应该只能使用键盘完成表单。用户的手指可以在不离开键盘的情况下轻松编辑字段。您可以在W3C的“设计模式指南”中找到键盘交互的详细要求。
即使是简单的日期选择器也应遵循W3C指南。 （图片: Salesforce）
PC端：自动对焦
自动聚焦字段为用户提供指示和起点，以快速开始填写表格。提供清晰的视觉信号，焦点已经改变，通过改变颜色，闪烁箭头。亚马逊的注册表具有自动对焦和视觉指示。
手机：适应键盘
移动电话用户更喜欢提供合适键盘的应用程序。应在整个应用程序中实施键盘调整，而不仅仅是某些任务。
（图片:谷歌）
限制输入（自动完成）
随着越来越多的人使用他们的手机，减少不必要的打字将改善用户体验并减少错误。自动完成可减少键入的数量。例如，填写地址栏通常是表单中最有问题的部分，并且诸如地址自动填充（基于用户定位和键入提供准确推荐）之类的工具允许用户以较少的键入完成输入。
4.标签
清除标签是使界面易于理解的一种方法。一个好的标签告诉用户该区域应该是什么，并且当焦点在该区域时应该保持可见，并且即使在填充后也可以看到。
字
标签不是帮助文档。应使用简单的描述性文本以允许用户快速扫描表单。以前版本的亚马逊注册表包含大量词汇，导致完成率较低。当前版本更好，标签很短。
句子风格还是标题风格？
在大多数应用程序中，有两种方法可以使用大写字母：
标题样式：每个单词的首字母大写。 “这是标题案例。”。
句子风格：句子的第一个字母大写。 “这是一个句子。”。
句子样式标签比标题样式有一个优点：它们更容易阅读（因此更快）。虽然短标签的差异可以忽略不计（“全名”和“全名”），但对于更长的标签，差异会更明显。
避免全部大写
不要一直大写，否则表格难以阅读，难以快速扫描。
所有大写标签都很难阅读。
标签对齐：左对齐，右对齐，顶部在上面
Matteo Penzo 2006年关于标签放置的文章显示，如果标签位于字段上方，表格将更快完成。如果您希望用户尽快扫描表单，则顶部对齐的标签非常棒。
左对齐，右对齐和顶对齐标签（图像: UX事项）
顶级标签的最大优势是可以更轻松地将不同大小的标签和版本集成到用户界面中。 （这对于空间有限的屏幕特别有用）
（图片: CSS-Tricks）
左对齐标签的最大缺点是它具有最慢的完成时间。这可能是因为标签和输入字段之间的视觉距离。标签越短，距离输入越远。但是，缓慢的完成率并不总是坏事，特别是如果表单需要敏感数据。如果您申请驾驶执照号码或社会安全号码，您可能会故意减慢用户的速度以确保正确进入。因此，读取敏感数据标签的时间是可以接受的。左对齐标签有另一个缺点：它们需要更多的水平空间，这对移动应用程序来说可能是一个问题。
（图片: CSS-Tricks）
右对齐标签的最大优点是标签和输入之间清晰的视觉关联。彼此接近的物品应该是相关的。对于简短形式，右对齐标签可以具有快速完成时间。缺点是体验不舒服：左边缘是锯齿状的，这使得它看起来更不舒服，更难阅读。
（图片: CSS-Tricks）
提示：如果您希望用户快速扫描表单，请将标签放在字段上方。这种布局将更容易扫描，因为眼睛将直接向下移动页面。但是，如果您希望用户仔细阅读，请将标签放在字段的左侧。此布局会降低阅读器的速度，并允许在Z模式下进行扫描。
占位符文本
字段具有焦点后，在输入字段中设置为占位符的标签将消失;用户将无法再查看它。虽然占位符文本可能适用于双字段表单（例如，带有用户名和密码字段的简单表单），但当用户需要更多信息时，占位符体验很差。
（图片: snapwi）
一旦用户点击该字段，标签将消失，因此用户无法仔细检查他们是否已写入所请求的内容。这增加了出错的可能性。另一个问题是用户可能会将占位符文本误认为是预填充数据，因此请忽略它（如Nelson Norman
该组织的眼动追踪研究所证实）。
占位符文本作为标签
占位符文本的一个很好的解决方案是浮动标记。默认情况下将显示占位符文本，但是一旦单击输入字段并输入文本，占位符文本将淡出并更改为顶部对齐的标签。
（图片: MDS）
提示：不要仅仅依赖占位符文本，因为一旦填写了字段，占位符文本将不再可见。使用浮动标记使用户可以轻松确保填写正确的字段。
5.按钮
单击时，该按钮会触发一些操作，例如提交表单。
主要和辅助按钮
主按钮和辅助按钮之间缺乏视觉区别很容易导致故障。减少次要行为的视觉爆发并最大限度地减少错误的可能性。
相同和不同的视觉水平（图片: Luke Wroblewski）
按钮位置
复杂形式通常需要后退按钮。如果此类按钮位于输入字段的正下方（如下面的第一个屏幕截图所示），则用户可能会意外地单击它。由于后退按钮是辅助操作，因此在视觉上可以区分（下面第二种形式的按钮更合理）。
命名规则
避免使用诸如“submit”之类的通用术语，因为它似乎适用于任何形式。命名应描述按钮在单击时将执行的操作，例如“创建帐户”。
多按钮
避免多个按钮，因为它们可能分散用户的注意力。每个流程都应有明确的目的，以确保用户朝着这个方向前进。
重置按钮是
不要使用重置按钮。这个按钮没什么意义，经常伤害你的体验。
按钮的视觉表现
确保按钮看起来像一个按钮：让用户知道它是可点击的。
阴影表示您可以单击。 （图片: Vadim Gromov）
视觉反馈
在设计“提交”时按钮，重要的是清楚地通知用户它正在被处理。必须向用户提供反馈，同时防止双重提交。
（图片: Michaë l Villar）
6.验证
验证错误是不可避免的，并且是数据输入中不可或缺的一部分（因为用户容易出错）。虽然应尽量减少错误，但永远不会错过验证错误。所以最重要的问题是如何让用户更容易纠正错误？
实时验证
用户不喜欢在提交时发现他们犯了错误。特别令人沮丧的是，在完成一个长表单并“提交”之后，我收到了多条错误消息。当你不知道你犯了什么错误时，它会更烦人。
（图片:堆栈交换）
一旦用户输入数据，应立即通知用户文本的正确性。良好的表单验证的主要原则是：与用户交谈！告诉他们出了什么问题！实时验证可以告诉用户数据的正确性。
该方法允许他们更快地纠正错误，而不必等到“提交”错误。按下按钮以查看错误。
但是，请避免验证每个字段，因为在大多数情况下，验证仅在输入完成之前完成。因此，一旦在数据输入过程中验证的字段开始输入数据，就会发生错误。
Google的表单会在输入完成之前表明电子邮件地址无效。 （图片:中等）
如果在用户完成输入后进行验证，则用户无法立即知道错误已得到纠正。
在Apple Store中，输入完成后进行验证。 （图片:中等）
在他的《表格中的内联验证：设计体验》中，MihaelKonjević研究了不同的验证策略，并提出了一种满足两种情况的混合策略：奖励早期和晚期惩罚。
如果用户在验证为正确的字段中输入数据（即，先前输入的数据有效），则在输入数据之后验证该数据。
如果用户在已验证错误的字段中输入数据（即，先前输入的数据无效），则在数据输入过程期间执行验证。
混合策略：奖励早期，延迟罚款。 （图片:中等）
7.会话界面：设计表格的新方法
最近，我们看到了很多关于会话界面和聊天机器人的令人兴奋的方法。这种现象有几种趋势，其中之一是人们在消息传递应用程序上花费的时间多于在社交应用程序上花费的时间。这导致了许多尝试支持对话中的交互，例如在购物应用程序中，这通常模仿消息的传递方式。即使在这种趋势下，互动的形式也发生了变化。设计师正在尝试将传统的Web表单转换为交互式对话框。
使用自然语言
每个界面都是一个对话。传统形式与对话非常相似。唯一的缺点是我们提出问题的方式。但是，如果我们设计一个表单，请以接近真人（而不是机器）对话的方式提问。所以，我们必须与人类互动。以下表单创建一个不需要依赖于Web表单的传统元素（如标记和输入字段）的会话。
Codrops的表单设计使用会话模型来更好地帮助用户完成他们的任务。
会话形式
对话表单是一个开源项目，它将网页上的表单转换为对话。它使用对话，可重用变量以及样式的完全自定义和控制来替换所有输入元素。该项目代表了我们对用户体验和互动的思考的有趣转变，使用基于文本的对话来帮助用户实现他们的目标。
8.结论
用户可能不愿意填写表单，因此它尽可能简单。较小的更改（例如聚合相关字段并指示字段的含义）可以显着改善用户体验。可用性测试在表单设计中是必不可少的。很多时候，只需要几个人进行测试，或者只是让同事通过原型就能让您深入了解表单的可用性。
作者：尼克巴比奇
译者：
原始地址：https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/
在这篇文章中，每个人都是产品经理翻译团队@吉诺是比利翻译发布，未经本代购源码网站许可，禁止转载。
该地图来自unsplash，基于CC0协议
