转换移动用户的新手指南

想一想当您在火车上、坐在机场或只是躺在沙发上时，您必须在智能手机上填写在线表格。 你有没有注意过移动表单设计？

很可能你没有注意到。 这就是目标 — 为用户提供直观的体验，让他们无缝地填写表格并继续他们的一天。

在本指南中，我们将回顾最有效的方法来做到这一点。 在这里，您将学习如何设计不笨重或错位的移动表单，但有助于提高转化率并创造出色的用户体验。

目录

移动与桌面表单设计

今天，您的网站访问者不仅仅是在他们的台式计算机上浏览您的网站、查看您的内容和填写您的表格。 他们还通过移动设备完成这些任务。

从 2022 年 4 月到 2022 年 6 月，移动设备占全球网站流量的近 60%。这意味着您的表单必须能够通过移动设备轻松查看、完成和提交。

为什么移动表单设计很重要？

最好的移动表单设计可以带来积极的用户体验，从而确保网站访问者快乐，他们更有可能转化为客户并成为回头客。

移动表单的设计、布局和功能在网站的整体用户体验中起着重要作用。

如果您的表单不适合移动设备，您可能会遇到转化次数减少、移动网站流量减少以及不满意和沮丧的客户增加的情况。 谁想要那个？

为什么移动表单设计应不同于桌面设计？

“一切在移动设备上的运作方式都不同，因此营销人员需要确保他们网站的任何元素始终针对移动设备进行优化，”屡获殊荣的营销影响者和策略师 Lilach Bullock 说。

“当然，这也包括表格——尤其是因为感觉你必须在移动设备上不断地填写表格。”

具体来说，考虑移动设备（例如 Apple iPhone）之间的显示屏或屏幕尺寸的差异，其尺寸通常在 4.7 英寸到 6.7 英寸之间； 以及 Mac 笔记本电脑或台式机，尺寸通常在 13 英寸到 24 英寸之间。 可以安全地假设适合 iPhone 屏幕的表单不会完全适合桌面屏幕。

如果您的移动访问者无法轻松阅读、填写和提交您的表格，您可能会失去他们的业务。 因此，创建适合任何移动设备屏幕的移动友好型表单对于创造出色的用户体验至关重要，以便给访问者留下持久的印象并帮助您提高转化率。

什么是响应式网页设计？

如果您想进一步提高移动表单设计并确保您的整个网站在所有类型的设备上都能正常运行，您可以实施响应式网站设计。

响应式网页设计考虑了用户的屏幕尺寸、平台、方向和环境。 这是一种创建出色用户体验的简单有效的方法，因为很多人不断地在各种设备上访问和浏览不同的网站。

有几种方法可以确保您的网站具有响应式设计。 例如，如果您是 WordPress 用户，您可以安装和使用多个响应式 WordPress 主题来设计您的网站。

此外，如果您正在或已经使用 Squarespace 等软件构建网站，您的网站可能会自动采用响应式网页设计。

如今，由于通过各种不同的移动设备访问网站的人数众多，响应式网页设计已成为企业的热门选择。 但现在，让我们回到讨论移动表单设计。

移动表单设计：11 条用户体验指南

“在设计您的移动表单时，”Bullock 解释说，“保持简单并尽可能快地完成很重要。 [表格] 在移动设备上更难完成，一切都感觉花费的时间比应该的要长。”

换句话说，最重要的是最终用户的简单性。 在创建适合移动设备的表单时，您需要采取一些步骤来为访问者提供最佳的用户体验。 让我们回顾一下您今天就可以开始实施的 11 个移动表单设计最佳实践。

1. 尽量减少表单域的数量。

听说过“少即是多”这句话吗？ 嗯，这正是您在创建移动表单时应该考虑的问题。

考虑到移动设备屏幕的大小和您需要在表单中放置的内容量，很容易不小心让您的表单显得杂乱无章。 记得去除不必要的绒毛。 仅保留您绝对需要的信息的表单域。

为了简化流程，您还需要清楚简洁地标记表单字段，并将可选字段标记为“可选”或在必填字段旁边加上星号。

图片来源

目的是使表格尽可能容易填写，以便人们完成表格的机会增加。

2. 尽可能自动化输入。

如果您不小心输入了错误的街道地址，而表格为您更正了拼写，表格会自动更正您的回复。

如果您开始输入您的送货地址，然后弹出一个框，其中包含您的其余地址，询问您是否要使用您保存的地址“自动填充”其余的表单字段，那么您的表单会自动完成您的回复。

通过在您的移动表单上实现自动更正和自动填充功能，您可以让用户快速、简单、直接地输入他们的详细信息，从而改善用户体验。

在下面的示例中，一个人可以通过单击出现的小弹出窗口轻松地自动填充他们的信息。

图片来源

3.使用单列布局。

当您创建长表单或多步骤表单时，请在单列布局中列出所有内容。

图片来源

单列表单布局是：

一种。 更容易阅读。

将所有表单字段置于单列格式中可以让访问者一次只关注一个项目，从而使您的表单更易于阅读。

b. 不那么令人生畏。

如果您查看表单，尤其是在狭小的空间内（就像在移动设备上一样），并且看到大量内容混杂在一起，您可能会感到不知所措。 这就是为什么按行分隔您的内容并将您的表单字段置于单列格式中可以使您的内容看起来和感觉起来不那么令人生畏。

C。 更快完成。

当您将多步骤表单放在单列中时，潜在客户可以比多列表单更快地完​​成它。 这是因为格式使表单更易于阅读和逐步完成。

从台式机或笔记本电脑查看 HubSpot 网站上的注册表单。

图片来源

两列布局在这里很有意义，因为在更宽的屏幕上有足够的空间可以使用。 现在在移动设备上查看相同的表单。

图片来源

这种单列布局让眼睛自然流动，同时防止紧凑的移动屏幕上出现混乱。

4. 一致性很重要（外观也很重要）。

如何关闭笔记本电脑上的文件夹或打开的选项卡？

通过单击右上角的“x”按钮。

但是，如果按钮在特定应用程序上没有出现怎么办？ 当你去关窗时，你会有什么感觉？

也许是困惑或恼怒。 您可能会花一两分钟弄清楚如何关闭应用程序。

这只是一个广泛的例子，但很好地说明了一致性的重要性。 观看此视频以了解更多信息。

表单设计的一致性不仅适用于样式（颜色、排版、徽标等），还适用于人们习惯的普遍接受的惯例。

以下是确保一致体验的一些提示：

• 使表单的外观与您的品牌和网站相匹配。
• 确保表单的样式和格式一致且互补（任何东西都不应看起来不协调或不合适）。
• 将您的表单字段输入对齐到左侧。
• 将每个标签贴在其对应的输入框上方并左对齐。
• 使用星号表示必答题。

图片来源

第一印象会留下持久的印象（在生活和商业中）。 这适用于您的移动表单。 没有人愿意完成一个黑暗的、难以阅读的、杂乱的、没有吸引力的表格。

您的移动表单应该既实用又美观。 它的外观应该有助于提高可读性和积极的用户体验。 为实现这一点，请使用简单易读的字体样式和大小、不会让人感到压倒性的调色板以及最少的表单字段。

5.牢记触摸体验。

想一想您在发短信时如何握住手机。

最有可能的是，用两只手握住手机，同时使用拇指与屏幕交互。 或者您甚至可以单手操作或使用食指打字。

我们与智能手机的交互方式与笔记本电脑或台式机的交互方式大不相同（提示短信拇指），移动表单设计应该反映这一点。

以下是一些需要牢记的建议：

• 留出足够的空白以保持表格整洁并避免意外按下按钮。
• 确保按钮的位置合理（例如，提交按钮靠近表单底部，这样用户不必向上滚动就能找到它）。
• 检查文本（字体大小和样式）在小移动屏幕上是否清晰可辨（没有人愿意捏住他们的屏幕并放大以便能够阅读文本）。
• 确保表单字段和按钮足够大，以便用手指轻敲。
• 使表单弹出到屏幕的下部（如果可能），以便于访问。

图片来源

6. 利用输入限制。

输入约束限制了一个人可以在表单字段中输入的响应类型。 这可能包括字数限制（例如，在填写工作申请表时）或只能输入数字（在电话号码的情况下）。

这可以在下面的表格中看到，当一个人去输入他们的电话号码时，会弹出一个数字键盘。

图片来源

输入约束通过限制无意的错误、延迟或混淆来最大化表单效率。 例如，如果某人试图在一家餐厅预订餐桌，但不小心选择了过去的日期，则该约束将阻止他们实际能够选择和确认该日期。

这在为移动设备设计时尤为重要，因为较小的屏幕使得准确输入信息变得更加困难。 通过设置输入限制，您可以在填写表单字段时节省人们的时间，并防止您自己收到冗长或无效的答案。

这是输入约束的另一个示例。

图片来源

7. 创建清晰的操作按钮。

按钮是移动表单设计中被低估的一个方面。 想一想：只有在按下右键后，您才会获得表单提交或转换。 所以你真的不能忽视这个元素。

这个 UI 备忘单和 UX Planet 博客是设计有效按钮的重要资源。 以下是您可以应用于移动表单的一些上述原则的快速浏览。

• 太多的按钮破坏了肉汤（就像表单字段一样，只保留必要的按钮）。
• 一致地设计和标记按钮（大写、格式、对齐等）。
• 通过大小或颜色突出主按钮（您希望用户执行的主要操作），让焦点闪耀在主按钮上。
• 右就是右——移动设备的一个常见经验法则是将主按钮放在右侧，第二个按钮放在左侧（尽管这可能会根据个人需要而有所不同）。
• 特定的标签几乎总是答案（“编辑此页面”而不是“编辑”）。

图片来源

8. 提供刷卡器进行支付。

尝试通过智能手机以表格形式输入您的信用卡详细信息吗？ 在小屏幕上用小键盘输入一堆数字可能是一个乏味的过程。

出于这个原因，卡片扫描应用程序（例如 Microblink）变得越来越流行。 进行购买时，您的访问者可以点击一个按钮，将他们带到一个屏幕，在那里他们可以使用他们的移动设备的相机拍摄他们的卡正面和背面的安全照片，无论是他们的执照还是信用卡。

图片来源

只需几张图片，您的潜在客户就可以完成移动表单完成过程中最耗时的部分之一——让您的访客保持高效、沮丧和无错误。

9. 解释对特定信息的需求。

在完成简单的电子邮件注册或注册表时，您是否曾被要求提供与注册表本身无关的个人信息？

这在所有类型的表单中都很常见（不仅仅是移动）。 向某人询问个人或其他敏感信息而不解释您的需求，这看起来很粗略。

当询问与访问者填写表格的原因没有直接关系的问题时，必须创建一个摘要框（包含附加信息），访问者可以单击该框以了解您询问此信息的原因。

当说明不是很明显时，此类指示符还可以帮助提供有关填写表单字段的额外指导。 在下图中，当有人将鼠标悬停在图标上时，会弹出一个摘要框。

图片来源

这些小细节将使您的表单感觉专业和周到，同时减少用户中途离开的几率。

10. 收集验证和反馈。

用户体验是良好移动表单设计的核心。 验证和反馈在提供出色的用户体验方面发挥着重要作用。

验证让人们知道他们输入的信息是否正确。 请注意下方表单字段中的绿色勾号。

图片来源

在填写移动表单时，您的访问者一定会在这里或那里犯错误。 表单应实时标记这些错误，以便用户可以立即更正它们。

例如，如果有人在他们的街道地址旁边添加了错误的邮政编码，则移动表单应显示一条错误消息。 这应该以易于理解的语言指示错误位置以及此人如何纠正错误（如下图所示）。

图片来源

在人们填写表格时给予反馈也很重要。 例如，冗长的多步骤表单上的进度条可以通过向用户显示他们已经完成了多长时间以及他们还剩下多长时间来完成表单填写过程，从而使表单填写过程更具吸引力。

图片来源

考虑一个人在没有进度条的情况下填写上述表格。 他们会在不知道表单何时结束的情况下点击“下一步”按钮，甚至可能在最后一步之前放弃它，感到沮丧。

一旦人们提交了他们的表格，你应该将他们引导到另一个屏幕或页面，上面写着类似“成功！”的字样。 或“谢谢”，让他们知道他们的提交有效。

下面是 HubSpot 上的一个成功页面示例，该页面在用户注册接收免费的 Google Ads 工具包后出现。

图片来源

11. 使表单易于访问。

辅助功能是表单可用性的基础。 在设计时考虑到可访问性的表单可供更广泛的人使用，包括那些有视觉、身体、感官和认知障碍的人。

以下是万维网联盟 Web 可访问性倡议、WebAIM 和 A11Y 项目清单中创建可访问表单的一些具体建议。

• 在放大表单时检查文本是否像素化或变得模糊（为了更好的可视化）。
• 以屏幕阅读器阅读时可以清楚理解的方式标记您的表单元素。
• 确保您的表单可以在纵向和横向模式下访问。
• 避免使用时间限制（如果可能）来让人们有足够的时间做出回应。
• 在表单中包含任何视频或音频组件的字幕或文字记录。
• 记住颜色对比。 这是一个可以帮助解决这个问题的免费工具。
• 检查您的表单是否仅需键盘即可完全使用。

确保上述所有移动表单设计策略坚持下去的一个好方法是探索您在表单设计中不应该做的事情。 下面的视频展示了一些在移动和桌面上设计表单时不要做的事情的例子。

回到你身边

您的网站访问者正在通过他们的移动设备填写和提交您的网络表单，这已经不是什么秘密了。 这是因为它既方便又高效，因为大多数人随身携带某种类型的移动设备，这使得您的表单对移动设备友好至关重要。

否则，您的表格将难以阅读、填写和提交，这可能会阻碍您的潜在客户或导致您完全失去他们的业务。

通过考虑您的移动表单设计并实施这些准则，您将增强您的移动表单用户体验，与您的潜在客户和客户建立积极的关系，并提高您的转化率。

编者注：这篇文章最初发表于 2018 年 12 月，为了全面性已经更新。