我们每天都使用表单进行基本的在线操作。在线购物，注册电子邮件，社交网络，甚至讨论，描述美味的午餐等都需要我们填写表格。可以毫不夸张地说，表格是数字信息共享的生命线。然而，多年来，形式的体验很少有所改善，只是保持足够的功能而不是体验。现在，借助正确的技术，我们可以设计出更快，更简单，更高效的表单体验。

形式体验中的经典原则是“越短越好”。获得更高的转换率需要付出很多努力，这当然看似合乎逻辑，但是这个原则没有考虑很多因素，例如应用场景，设计方法，表单体验的吸引力等等。

例如，我发现引用次数远远高于其他报告。许多文章和演讲都提到了它的测试结果，被视为“真理”。可怕的是，研究结果非常有限。性。这份报告是近十年前Imagiry Landscape（一家开源网络开发机构）的一项实验。当表格从11个字段减少到4个字段时，转换率增加了160％。但这仅仅是一个页面，一个测试，两个变量的实验结果，假设他们已经进行了多组4场实验，或者10场用11场场形式进行比较，4场和5场场对比也将使实验更多有说服力的。但是，它们没有，它只表明在这种特殊情况下，通过使表单中64％的字段更容易填写表单确实更容易。

在2015年的Call to Action演讲中，来自Unbounce的Michael Aagaard分享了类似案例。作为提高特定表单业务转换率的任务，他首先将表单中的字段数从9减少到6，转换率下降了14％。经过深入研究，他发现表格中删除的字段构成了不太引人注目的体验，这是用户最有吸引力的部分。在第二个实验中，他调整了原始形式的组织结构和清晰度，保持了9个字段不变，转换率提高了19％。事实证明，短形式并不总是更好。

因此，如果不是缩短形式，我们如何使用现代技术来设计最佳形式？让我们考虑一些新原则：

- 优先考虑表格的可见度

- 提供更易于格式化的表单格式

- 给出适当的输入限制

- 使用目标

1.优先考虑表格的可见性

很久以前，Jakob Nielsen的研究告诉我们，用户通常只是快速浏览网页而不是从上到下阅读。填写表格时也是这种情况，尽管设计师希望此人全心全意地填写表格，但用户可能不是您想要的。允许用户有效地浏览表单对于避免错误填写至关重要，尤其是当表单仅供用户使用时（例如电子商务地址表，注册表等）。

- 标签位置

对标签的位置进行了大量研究，但这种争论仍在继续。表格大师Luke Wroblewski在研究中确定用户完成了标签顶部对齐形式的最短时间，因为它减少了所需的眼球运动量。在通常意义上的表单标签中，右对齐方式允许用户以最快的速度完成表单，尤其是当页面高度有限时。虽然左对齐标签的表单用户是最慢完成的，但这种方法可以提高对表单需要填充的数据不太常见的理解。

-tip text

如果标签在框中用作提示文本，则不是很有用。一旦表单获得单击焦点，提示文本就会消失，用户将无法再看到它。这将允许用户产生短期记忆压力并增加出错的机会。

即使标签被分开并且添加了框中的文本，用户也会觉得他们已经乍一看已经填写了。例如，Nielsen Norman Group进行的眼动追踪研究表明，空输入框比带有提示文本的输入框更容易吸引用户注意，并且用户比空输入框更容易忽略。带有提示文本的输入框。换句话说，被认为有用的表单提示文本实际上更有害而不是好，特别是对于通常习惯于浏览的用户。

好的：空表单字段

错误：表单字段被提示文字掩盖

在某些情况下，提示文本比普通文本轻，这可以缓解上述问题。但是，这种技术会产生对比度问题，白色背景上的浅灰色文本通常不符合普遍接受的网络可访问性指南（普通文本比较4.5: 1）。此外，根据W3C，提示文本不支持残疾人的辅助设计（如屏幕阅读器，见https://www.w3.org/WAI/tutorials/forms/instructions/），这使得这些残疾用户准确填写表格。 。

- 浮动标签

浮动代码是一种快速交互的新方式。在其设计中，标签文本以提示文本开头，一旦用户开始填写，标签将上升，解决了上述提示文本消失的问题。

虽然这种方法也可以帮助减少页面长度，但它在移动端尤其有用。但它并没有解决上面的文本框似乎已被填充的问题。因此，尼尔森诺曼集团不建议采用这种方法，除非页面长度是最重要的设计问题，否则它仍然应该将标签保持在最顶层。

2.提供更容易填写的表格格式

以前，用户在填写表单时会有很多猜测。 “我的电话号码应该是哪种格式？我的信用卡丢失了吗？这个键盘上的符号“ @” Where？”新技术使我们能够防止用户受到这些问题的困扰。提供更清爽的体验。

- 输入掩码

帮助用户格式化输入文本的输入掩码虽然在外观上与提示文本相似，但实际上是完全不同的。首先，只有当用户点击输入框时才会出现遮罩，避免了上述浏览障碍的问题。其次，输入文本自动应用正确的文本格式，允许用户在填充字段时专注于所需的数据，从而更容易发现错误。在下面的示例中，填写电话号码时会自动填充括号和短划线。

这种简单的技术在填写手机号码，信用卡，货币等时节省了我们的时间和精力。

- 输入字段的HTML属性

设计人员知道有必要显示正确的移动键盘以输入特定数据，但是对于哪种键盘类型正确存在疑问。

例如，对于“数字”类型属性的最常用输入框，通常不会触发数字小键盘，触发具有数字区域的普通键盘，数字键的大小远小于小键盘。

“ Number" Keyboard" Phone”小键盘

对于仅包含数字的字段，例如日期，邮政编码，信用卡等。使用数字小键盘可以获得更大的点击目标，从而允许用户轻松输入。 （为了使其显示，前端可以用作“类型值”或添加属性“ld_; pattern=[0-9] *”。）但是，设置全键盘为数字状态，如街道地址等。起始混合字段仍然有用。

可以将其他几个属性添加到输入框以消除额外的点击和错误。

自动填充：使用浏览器保存并列出用户先前填写的值。应为敏感数据关闭此功能。

自动更正：更正输入的拼写错误。对于名称，地址等特殊字段，应关闭此功能。

自动初始化大写：自动大写输入的第一个字母。这适用于填写姓名而不适用于电子邮件地址。

拼写检查：拼写错误拼写的单词。对于名称，地址等特殊字段，应关闭此功能。

3.限制输入

如今越来越多的人使用小屏移动设备，我们需要考虑使用小屏幕，避免用户不必要的输入，提高用户满意度，同时降低错误率。

- 地址预填充

填写在线注册表单中的地址通常是最麻烦的，因为它包括多个字段和长地址名称。通过将长地址分成单个字段，它不仅可以帮助用户专注于输入（是的，它们总是频繁地切换页面），而且还会减少大量输入。

在下面的示例中，输入Google总部的地址（街道，城市，州，邮政编码，国家/地区）。完整的输入过程只需要输入10个字母，如果不需要自动填充，用户需要手动输入50次以上。

上述使用Google API的解决方案在大多数情况下都可以很好地运行，但对输入地标和公寓号的适用性有限，因为这些可能不包含在API提供的反馈中。

ThinkGeek的方法由软件即服务（SaaS）提供商提供，称为PCA预测。执行初始搜索时，允许输入公寓号，输入后地址格式正确。

THINKGEEK.COM

- 邮箱预填充

减少输入的另一种方法是在电子邮件地址字段中提供常用电子邮件域名列表。当用户输入“@”时，列表会出现。按钮，主要使用预先填充的解决方案，每个传入的电子邮件地址最多可节省12次击键。

请注意输入框文字“电子邮件地址”。已经消失了

4.使用定位

虽然通常在移动应用中使用呼叫位置数据，但我们不能忘记在所有平板电脑和台式机上使用它。特别是当在触摸屏上打字是麻烦的时，基于位置的信息预填充可以节省用户宝贵的时间并提高转换率。

Nordstrom百货商店网站上的产品详细信息页面就是这项技术的一个很好的例子，产品使用定位完全省略了表格填写。该页面不是要求用户输入邮政编码来获取地址，而是调用位置信息并自动查找最近商店中物品的库存。这不仅可以节省用户的时间，还可以让用户直接看到“最近的商店地址”。这个有用的信息。

NORDSTROM.COM

尽管由于准确性问题预先填充完整地址可能是困难的。通过Google的Places API，您可以使用地理位置信息和地址预填充来获得最佳效果，根据用户的实时位置提供更准确的位置填充参考。

ZUPPLER.COM

当然，由于无法保证准确性，因此必须允许用户手动修改自动生成的位置数据。

总结

总之，遵循这些原则可以帮助设计易于使用的表单并创建愉快的表单体验：

优先考虑表单的可浏览性，设计易于阅读的标签，并避免妨碍用户的不相关内容。

提供更易于格式化的表单格式，每种输入条目的输入掩码以及适当的键盘（以及其他HTML属性）。

给出适当的输入限制，使用预填充

使用定位，您无需再次单击“添加”。

以上表明，在不断变化的数字时代，我们总是需要学习更多东西。还附带一些高质量的表单设计资源：

Luke Wroblewski的书《Web表单设计》和他的博客（http://www.lukew.com/ff/），涵盖了各种UX主题

W3C表格指南（https://www.w3.org/WAI/tutorials/forms /）

Amanda Cheung在UX Booth的文章中写道：“如何使表单风格易于理解”（http://www.uxbooth.com/articles/styling-forms-accessibly /）

英文原文：MIKE MADAIO，新的表格设计规则。

原始地址：HTTP: //WWW.UXBOOTH.COM/ARTICLES/THE-NEW-RULES-OF-FORM-DESIGN/

翻译地址：http://ddc.dianrong.com/?p=2531