表单设计最佳实践:提高转化率和用户体验的15个技巧

想想你访问过的网站不是包括任何类型的形式。我正在说注册表格，调查，结算或运送表，客户反馈表，甚至简单的电子邮件注册表格。

公司在他们的网站上执行表单，为访问者提供一种方式来注册账户、购买产品、支付物品等等。这就是为什么在线表单设计如此重要 - 没有简单，用户友好的美观美观形式，您应该如何吸引您的访客，花时间为您提供所有这些个人信息？

那么，你真的不能 - 不能没有伟大的形式设计。

为什么表单设计很重要?

简单的说，伟大的网络形式设计帮助您增加转换。

表单的设计会影响网站的整体效果用户体验(UX)，这反过来直接影响你的快乐访问者数量和转化率。一个设计良好的表单向用户展示你的品牌是有用的、周到的、专业的、技术娴熟的，并且使用起来很愉快。

一个设计拙劣的形式，另一方面，可能会导致网页和网站放弃或沮丧的用户，因此，转化和销售的下降。例如，Expedia的教训，他们正在失去1200万美元一年的利润因为一个无关表单框单独!

Web表单对于将用户转换为客户至关重要，因此您需要使您的表单易于使用、专业和圆滑。在本指南中，我们将回顾15种设计优秀表单的方法，包括web表单用户界面(UI)设计、移动表单设计和CTA设计的重要性。

表单设计最佳实践:提高转化率和用户体验的15个技巧

我们策划的15个技巧和窍门设计一个下面的列表与一个伟大的用户体验形成．根据你的表单类型和长度，你可以选择最适合你需要的提示。

1.简单而简单

如果表单要求提供太多的信息，可能会丢失提交的文件和转换。事实上，Imagescape能够通过提高转换率120％只需将它们的表格字段数减少到四到四个。创建表单时，仅包括您需要的最重要信息，并避免添加任何不必要的字段和问题。

2.使用一个列

粘到一个单柱Web表单布局-创建长表单时的一个特别重要的提示。单栏布局更容易遵循，理解，完成，并提交给您的访问者。

CXL研究所的一项研究发现，参与者能够完成一个单栏表格的平均成绩是15.4秒更快而不是多列形式。你的访问者不想浪费时间去理解和完成你的表单。事实上，如果您的表单太难处理，可能会失去他们的业务。

3.安排你的表单字段从简单到困难

以最简单的问题(如姓名和电子邮件)开始你的表单，然后再问访问者更耗时的问题(如账单和运输信息)。一旦你的访问者开始填写你的表单，并想，“好吧，我可以快速添加我的名字和电子邮件”，他们就不太可能离开页面，因为他们已经提交了。

如果第一个表格字段是他们的麻烦（“拍摄，我附近没有我的信用卡......”）他们可能更有可能放弃表格，因为他们还没有投资它。

4.使用内联表单现场验证

内嵌表单验证是指当他们的工作他们的方式通过形式的访客的信息是实时审核的过程。如果访问者填写不正确的信息，一个领域，如无效的电子邮件地址或信用卡号码，错误信息会出现在表单栏的下方或内部，通知访问者他们的错误，以便他们可以快速更正并继续下一个问题。

来源

5.将文本对齐

将所有的文本(问题和标签)对齐到表单的左侧，这样浏览者阅读和填写时就会更自然。巴塞尔大学研究人员发现，将文本对齐到表单框上方的左侧，可以减少填写表单所需的时间。这种自然对齐减少了用户需要在页面上跳转的次数，使表单更具可读性。

6.清楚地给表单加上标题

为您的表格提供一个标题，帮助您的访问者确切地了解他们在提交后将收到的内容。例如，一个简单的形式标题，如“HUBSPOT的营销博客注册表格”，明确指出，一旦他们提交信息，访问者就会向Hubspot的营销博客注册。

来源

7.不要要求电话号码

除非获取访问者的电话号码对您的业务至关重要（例如引用请求或产品演示），否则不需要以您的形式要求它。clicktale ran一个测试，发现他们丢失了39％当他们需要一个电话号码时，用户注册。询问访问者的电话号码可能会让人感觉很粗略，除非他们知道有正当的理由要求他们提供这些信息。

如果可能的话，用电子邮件的方式联系你的访客(在许可的情况下)。或者让访问者可选地填写表单中的电话号码字段。

8.使用自动浏览器

由于谷歌Chrome和Firefox等浏览器具有自动填充功能，可以从访问者设备上输入的过去信息(比如他们的名字和姓氏)中提取信息，完成特定表单字段的速度比以往任何时候都要快。最好的做法是给每个字段加上一个术语或共同属性，浏览器将识别，以帮助加快您的访问者的表单完成过程。

9.地址可能的用户的关注与总结箱

通常很容易猜测哪些问题最有可能阻止潜在客户填写您的表格。例如，如果访问者实际上没有点任何东西，要求他们提供邮政编码可能会令人不安。您可以使用说明您需要某些信息的摘要框或说明表单字段是否可选的语句来解决这些问题。

来源

10.设计移动表格不同

如今，这已经不是什么秘密的人正在浏览您的网站，购买你的产品，并通过移动设备完成的形式 - 这就是为什么它是至关重要的实现移动友好的形式设计．这样一来，您的访问者可以很容易地查看您的网站的任何移动设备上，所有形式的信息符合它正在观看屏幕，并且形式可以完成并提交容易，而在-The-Go的。

11.使用正面错误消息

当创建网络形式的错误信息，它作为确保仅提交准确信息的有效方法，请务必发出正面。你应该绝不责怪用户 - 而是使用清晰简洁的语言，并包括将访问者指向错误的信息，以便它们确切地知道它所在哪里以及应该如何纠正。

12.包括智能违约

启用聪明的违约是另一种伟大的方式来加快填写表单流程，并确保准确性。智能默认使用像你的用户的当前位置信息自动进入像城市或城镇，使网站访问者不必细节。

13.为长表单添加进度条

你有没有完成长期或调查并想知道，“有多少问题？”

进度条显示您的访客需要在您的表单上回答的问题数量。他们为访问者提供了一个想法，他们需要更多的时间来完成它。这些都是特别有帮助的，多步骤的形式．

14.使用reCAPTCHAS，而不是CAPTCHAS

在完成表单时，您是否曾被要求查看一个相当难以阅读的图像，其中包含一系列数字和字母，然后将这些数字和字母输入表单字段，以证明您“不是一个机器人”?

来源

如果是这样，你已经完成了验证码。验证码存在检测垃圾邮件和僵尸程序。然而，它们可以是耗时且令人沮丧的完整。目前仍然使用他们虽然，你可能要包含在此形式加入的安全措施。如果是这样的话，你应该实现recaptchas.而不是你的表格。

来源

reCAPTCHAS不仅在检测假帐户和机器人方面更有效，但他们也只是要求您的访问者在表单提交之前检查一个框。

15.启用选项卡到下一个表单字段的能力

现在有这么多快捷键可用，你的表单没有理由不启用它们。允许访问者在表单上使用tab键，这样他们就可以在不离开键盘的情况下移动到下一个表单字段。

抓住我们的指南，学习如何优化和分割测试您的着陆页。

网络形式UI.

Web表单UI，也称为用户界面，是信息设备(如智能手机)的一部分，人(或用户)直接与之交互(如屏幕或键盘)。

改善您的UI是一种增强您的用户体验的方法。表单的用户界面有三个主要部分，您应该在创建表单时关注：结构，布局和模式。

结构

考虑你的表格结构战略方式 - 构建表单以提高用户体验的最佳方法是什么？考虑您的字段出现的顺序，表单在网页上的外观以及您的字段和部分的字段和部分如何从一个到另一个。

例如，看看Airbnb预订住宿的多步骤表格。

来源

因为表单包含多个步骤和许多表单字段，所以将表单分为不同的步骤和页面，以使访问者不那么畏惧这个过程。访客在第一页输入他们的住宿详情(时间和地点)，然后在第二页提示他们选择他们想住的地方，然后在最后一页输入支付信息。表单字段被适当地组合在一起，并以一种有意义的方式组织。

布局

当涉及到UI时，表单字段的布局也很重要。确保你的问题的布局和顺序让你感觉自然。例如，与其将电子邮件和支付字段放在一起，不如将它们分开，以便根据访问者提供的信息类型将它们放在有意义的区域。

您也可以使用您的表单布局获得创意。例如，而不是普通的单列形式，其中您的访问者必须简单地添加他们的信息，然后单击提交，您可以实现疯狂填词-Style布局所以访问者可以填补空白并使用他们的回复创造更多的故事。

来源

完成一个网页表单并不总是令人兴奋的任务，所以它有助于使表单完成成为一个有趣的、交互式的体验。

模式

UI模式是常见的重复的解决方案，反复出现的同时完成表单访问者脸设计相关的问题。这些解决方案的工作了一遍又一遍，以提高您的表单的用户界面和易用性。有几十个用户界面设计模式您可以根据自己的需要在自己的表单中使用。

例如，您是否曾曾签署过一个新帐户，并且当您输入密码时，出现了错误消息，说您的密码条目不被接受，因为它“不够强大”？

为了使您的访问者更轻松地创建密码，请添加密码强度仪表，该仪表将实时地告诉他们密码的实力，因此他们知道它应该如何提高其安全性。

来源

这种UI模式使访问者能够简单地创建有效的密码，并了解密码的安全性，从而改进了用户体验。

移动表单设计

移动表格设计是表单和网站整体成功的关键。在本节中，我们将介绍一些设计基础知识，以及可以在自己的表单中实现以增强用户体验的技巧。

什么是移动表单设计?为什么它很重要?

移动形式的设计是在创建了用户友好以及响应于移动设备，诸如智能电话或平板电脑网络形式的过程。这意味着，在窗体上的书面和视频内容必须适应各种设备的屏幕。

可以肯定地说，我们大多数人每天都随身携带某种移动设备。人们在上班、旅行或者只是坐在沙发上的时候都会访问你的网站。确保通过实施来简化他们未来的注册、注册或购买过程移动友好的形式设计．

通过确保一个成功的设计，你将增强用户体验，从而增加转化率。谁不想要更多的客户和更多的业务呢?

五个手机设计UX提示

当构建移动友好的网页形式，考虑下面的设计技巧来帮助你创造最好的用户体验。

1.实现单列布局

想想普通智能手机的屏幕大小。尽管像苹果这样的公司继续制造更大、更令人印象深刻的显示屏，但移动屏幕仍然比台式电脑小得多。因此，创建一个包含多个列的表单很可能很难让访问者阅读和理解。你应该坚持单列布局，这样你的访问者就可以一次浏览和完成一个字段，并在浏览表单时简单地向下滚动页面。

2.启用自动更正和自动完成功能

这不仅是一个移动设备的屏幕比台式机小，但键盘也是。除非您有小手指或您是一个优秀的发号，否则将诸如运输或付款细节等详细信息键入移动表格可能是您的访客的乏味且耗时的任务。

这就是为什么你应该确保表单具有自动更正（这意味着表单自动纠正了拼写的已知错误）和自动完成（这表明该表格将自动完成基于其位置填写访客的邮政编码的特定字段）。这加快了表单完成过程，确保仅提交准确信息，并将访问者保存到必须输入每条信息。

4.让你的美丽的形式

外观很重要——包括你的移动网页表单。有些屏幕可能很小，所以要保持你的表单设计极简、颜色协调和美观。你也应该用一种简单的方式来标识你的表单——即使表单是在一个小屏幕上，品牌会使它看起来很专业，并提醒你的访问者他们是在和谁做生意。

5.保持极简主义者

通常情况下，你可以将说：“少即是多”到你的网站的各个方面。没有人希望通过一堆无用的东西阅读或环顾四周杂乱的网站，他们需要的信息。这是特别真实的紧凑，移动设备显示器上。保持你的表单字段数到最低限度，用直白的语言，并保持你的设计简洁的所有其他元素。

CTA表单设计

几乎所有Web表单都包括某种呼叫动作（CTA）。您的CTA按钮越点心 - 这可能会读取“了解更多”，“立即获取更多转换”，或“立即下载” - 获取新的领导或客户的可能性越大。您的CTA的设计至关重要......否则，为什么有人想要要“了解更多”或“下载”您的产品，更不用说甚至在您的页面上发现CTA？

在我们深入讨论创建自己的CTA时需要考虑的不同CTA表单设计因素之前，让我们快速回顾一下什么是CTA。

什么是CTA?

HubSpot描述了CTA，或号召性的行动，为“...按钮或链接放置在网站上吸引潜在客户通过登陆页面形式转换为线索。”

CTA应放置在Web表单上的易于点位置。除了Web表单外，CTA可能会放在网页，博客文章，或电子邮件中。您的CTA应该看起来很好，抓住您的访客的注意力，并使用一个简单的设计，以便您的访客可以快速了解您的优惠所包含的内容。

让事情更轻松，抓住这25多个免费的CTA设计模板。

需要考虑的五个CTA设计因素

现在，让我们回顾一下CTA设计的五个不同方面:大小、动作按钮、字体、特效和位置。

1.CTA大小

如果你的CTA太小，你可能有完全有人错过。如果你的CTA太大，你可能脱落的垃圾，不专业，和爱出风头。

在确定您的CTA的大小，看看整个网页。你不希望它觉得杂乱，但你也想确保你的访客有机地注意到你的CTA在浏览网页或形式。

来源

2.操作按钮

每个CTA都有一个动作按钮(因此命名为call-to-)动作)．这个动作按钮是你的访问者实际点击“现在下载”或“了解更多”的东西——所以，它的外观和内容相当重要。

您的操作按钮应该突出。你不想让任何人怀疑他们是否点击了正确的按钮。你还应该使用简洁、直接、面向行动和有影响力的语言，这样你的访问者就会毫无疑问地知道他们从你的CTA中得到了什么。

来源

3.字体

你有没有看过网站内容，并意识到你有多少钱将你的眼睛变得实际上读内容？不管它的大小，字体或颜色，您的字体起着访问者的体验的重要作用。

与CTA一样重要，这会直接影响您的转换和销售，您没有任何错误的空间，例如选择太小或难以阅读的字体。实现一种易于读取的字体，它适用于CTA的颜色，样式和大小。

来源

4.特殊效果

当我说“特殊效果”时，我并不是指在电影或视频中的特殊效果。我正在谈论你可以轻松地添加到CTA以创造更引人注目的设计的特殊效果。例如，斜面边缘，丢弃阴影，圆角，箭头和渐变是创建访问者单击的CTA的简单方法。

来源

5.安置

因为你希望访问者有机地看到它通过表单的工作，而你的CTA的位置是非常重要的。包括您的网页或表格上CTA的点是在它让您的访客自然蹒跚，而他们是在您的网站或填写表单域 - 没人应该曾经有搜索周围的CTA。这将失去意义。

来源

要了解一些伟大的CTA示例，请这个博客帖子。

结论

无论您运行哪种类型的业务或工作，您网站上至少有一种类型的Web表单。通过应用这些表单设计提示，可增强UX，以及UI设计，移动表单设计和CTA设计，您将为您的访客提供可靠和积极的体验，可以帮助您提高转换。因此，请考虑您在网站上包含的表格，并开始实施适用于您的业务需求和目标的设计提示和外卖。