有关付款和地址表单的最佳做法

帮助用户尽可能快速、轻松地填写地址和付款表单,从而尽可能提高转化次数。

设计良好的表单有助于用户,并提高转化率。一个小小的修复就能带来很大的改变!

以下是一个简单的付款表单示例,展示了所有最佳实践:

以下是一个简单的地址表单示例,展示了所有最佳实践:

核对清单

使用有意义的 HTML

使用为作业构建的元素和属性:

  • <form><input><label><button>
  • typeautocompleteinputmode

这些元素支持内置的浏览器功能,可以提升无障碍水平,还能为标记添加含义。

按照预期使用 HTML 元素

将表单放在 <form> 中

您可能会想不必将 <input> 元素封装在 <form> 中,而是完全使用 JavaScript 处理数据提交。

请不要这样做!

借助 HTML <form>,您可以使用所有现代浏览器中一组强大的内置功能,并有助于让屏幕阅读器和其他辅助设备访问您的网站。<form> 还可以让您更轻松地为支持 JavaScript 有限的旧版浏览器构建基本功能,并允许表单提交(即使您的代码存在问题),以及为少数实际停用了 JavaScript 的用户提供支持。

如果您有多个用于用户输入的页面组件,请务必将每个组件放入自己的 <form> 元素中。例如,如果您在同一页面上提供搜索和注册功能,请将这两项功能分别放入自己的 <form> 中。

使用 <label> 为元素添加标签

如需为 <input><select><textarea> 添加标签,请使用 <label>

将标签与输入相关联,方法是将标签的 for 属性的值设为与输入的 id 相同的值。

<label for="address-line1">Address line 1</label>
<input id="address-line1" …>

为单个输入使用单个标签:请勿尝试使用单个标签为多个输入添加标签。这种方法最适合浏览器和屏幕阅读器。点按或点击标签会将焦点移至与其关联的输入,当标签或标签的输入获得焦点时,屏幕阅读器会读出标签文本。

让按钮实用

为按钮使用 <button>!您也可以使用 <input type="submit">,但请勿使用 div 或其他随机元素充当按钮。按钮元素提供无障碍行为、内置表单提交功能,并且可以轻松设置样式。

为每个表单提交按钮提供一个值,说明其用途。对于结账流程中的每一步,请使用描述性的号召性用语来显示进度并明确下一步骤。例如,请将送货地址表单上的提交按钮标记为继续付款,而不是继续保存

考虑在用户点按或点击提交按钮后停用该按钮,尤其是在用户进行付款或下单时。许多用户会反复点击按钮,即使按钮正常运行也是如此。这可能会导致结账失败并增加服务器负载。

另一方面,请勿在等待用户输入完整且有效的输入时停用提交按钮。例如,如果某项内容缺失或无效,请勿仅仅停用保存地址按钮。这对用户没有帮助,他们可能会继续点按或点击按钮,并认为按钮已损坏。相反,如果用户尝试提交包含无效数据的表单,请向他们说明问题所在以及如何解决。在移动设备上,这一点尤为重要,因为在移动设备上输入数据更为困难,并且在用户尝试提交表单时,缺失或无效的表单数据可能不会显示在其屏幕上。

充分利用 HTML 属性

让用户轻松输入数据

使用适当的输入 type 属性在移动设备上提供合适的键盘,并启用浏览器的基本内置验证。

例如,请使用 type="email" 表示电子邮件地址,使用 type="tel" 表示电话号码。

两张 Android 手机屏幕截图,显示了适用于输入电子邮件地址(使用 type=email)和输入电话号码(使用 type=tel)的键盘。
适用于电子邮件和电话的键盘。

对于日期,请尽量避免使用自定义 select 元素。如果未正确实现,这些元素会破坏自动填充体验,并且无法在旧版浏览器中使用。对于出生年份等数字,请考虑使用 input 元素而非 select,因为手动输入数字比从长长的下拉列表中进行选择更容易,并且更不容易出错,尤其是在移动设备上。使用 inputmode="numeric" 确保在移动设备上显示正确的键盘,并使用文本或占位符添加验证和格式提示,以确保用户以适当的格式输入数据。

使用自动补全功能可改进网页的无障碍性,让用户无需重复输入信息

使用适当的 autocomplete 值让浏览器可以安全地存储数据并自动填充 inputselecttextarea 值,从而帮助用户填写表单。这在移动设备上尤为重要,是避免较高的表单放弃率的关键。自动补全还具备多项无障碍优势

如果表单字段有适当的自动补全值,您应使用该值。MDN 网页文档提供了值的完整列表,并说明了如何正确使用这些值。

稳定的值

账单邮寄地址

默认情况下,将账单邮寄地址设置为与送货地址相同。提供用于修改结算地址的链接(或使用 summarydetails 元素),而不是在表单中显示结算地址,以减少视觉杂乱。

显示用于更改账单邮寄地址的链接的结账页示例。
添加了用于查看结算信息的链接。

与送货地址一样,请为账单邮寄地址使用适当的自动补全值,以免用户重复输入数据。如果您在不同部分为同名输入设置了不同的值,请为自动补全属性添加前缀字词。

<input autocomplete="shipping address-line-1" ...>
...
<input autocomplete="billing address-line-1" ...>

帮助用户输入正确的数据

尽量避免因为客户“做错了什么”而“训斥”他们。相反,您应帮助用户及时解决问题,让他们更快速、更轻松地填写表单。在结账过程中,客户会尝试向贵公司支付商品或服务费用,您的工作是协助他们,而不是惩罚他们!

您可以添加约束属性来构成元素,以指定可接受的值,包括 minmaxpattern。元素的有效性状态会自动设置,具体取决于元素的值是否有效,:valid:invalid CSS 伪类也是如此,可用于为值有效或无效的元素设置样式。

例如,以下 HTML 指定了出生年份的输入范围为 1900 年至 2020 年。使用 type="number" 会将输入值限制为仅限数字,且必须在 minmax 指定的范围内。如果您尝试输入超出范围的数字,系统会将输入设置为无效状态。

以下示例使用 pattern="[\d ]{10,30}" 来确保付款卡号有效,同时允许空格:

新型浏览器还会对类型为 emailurl 的输入进行基本验证。

在表单提交时,浏览器会自动将焦点设置为存在问题或缺少必填值的字段。无需 JavaScript!

桌面版 Chrome 中登录表单的屏幕截图,显示了浏览器提示和无效电子邮件地址值的焦点。
由浏览器进行的基本内置验证。

在用户输入数据时进行内嵌验证并向用户提供反馈,而不是在用户点击提交按钮时提供错误列表。如果您需要在表单提交后在服务器上验证数据,请列出发现的所有问题,并明确突出显示值无效的所有表单字段,同时在每个存在问题的字段旁边显示一条消息,说明需要解决的问题。检查服务器日志和分析数据,看看是否存在常见错误。您可能需要重新设计表单。

此外,您还应使用 JavaScript 在用户输入数据和提交表单时执行更为可靠的验证。使用Constraint Validation API受到广泛支持),您可以通过内置的浏览器界面添加自定义验证,以设置焦点和显示提示。

如需了解详情,请参阅使用 JavaScript 实现更复杂的实时验证

帮助用户避免缺少必需数据

对必填值的输入使用 required 属性

提交表单后,现代浏览器会自动提示并将焦点设置为缺少数据的 required 字段,您可以使用 :required 伪类突出显示必填字段。无需 JavaScript!

在每个必填字段的标签中添加星号,并在表单开头添加备注,说明星号的含义。

简化结账流程

注意移动商务差距!

假设您的用户有疲劳预算。用完了,用户就会离开。

您需要减少摩擦并保持专注,尤其是在移动设备上。许多网站在移动设备上获得的流量更多,但在桌面设备上获得的转化次数更多,这种现象称为移动商务差距。客户可能只是更喜欢在桌面设备上完成购买交易,但移动设备转化率较低也与用户体验不佳有关。您的目标是尽量减少移动设备上的转化损失,并尽可能提高桌面设备上的转化次数。研究表明,提供更好的移动表单体验蕴藏着巨大的机遇。

最重要的是,用户更有可能放弃看起来很长、很复杂且没有方向感的表单。当用户使用较小的屏幕、分心或匆忙时,这一点尤为重要。尽可能少请求数据。

将访客结账设为默认选项

对于网店而言,减少表单摩擦的最简单方法是将访客结账设为默认选项。 请勿强制要求用户在购买前创建账号。不允许访客结账被列为导致购物车放弃的主要原因。

结账时购物车被放弃的原因。
出处:baymard.com/checkout-usability

您可以在结账后提供账号注册选项。届时,您已经拥有设置账号所需的大部分数据,因此用户应该可以快速轻松地创建账号。

显示结账进度

您可以显示进度并明确说明下一步需要执行的操作,从而让结账流程看起来不那么复杂。以下视频展示了英国零售商 johnlewis.com 如何实现这一点。

显示结账进度。

您需要保持势头!对于付款流程中的每个步骤,请使用页面标题和描述性按钮值,以清晰说明用户当前需要执行的操作以及下一步的结账步骤。

为表单按钮提供有意义的名称,以显示后续步骤。

在表单输入框中使用 enterkeyhint 属性设置移动设备键盘上的 Enter 键标签。例如,在多页表单中使用 enterkeyhint="previous"enterkeyhint="next",在表单中的最终输入中使用 enterkeyhint="done",在搜索输入中使用 enterkeyhint="search"

Android 上地址表单的两个屏幕截图,显示了 enterkeyhint 输入属性如何更改“Enter”键按钮图标。
Android 上的输入按钮:'下一步'和 '完成'。

enterkeyhint 属性在 Android 和 iOS 上受支持。如需了解详情,请参阅 enterkeyhint 说明文档

让用户能够在结账流程中轻松来回切换,即使在最后一步付款时,也能轻松调整订单。显示订单的完整详细信息,而不仅仅是有限的摘要。让用户能够在付款页面轻松调整商品数量。在结账时,您的首要任务是避免中断转化流程。

移除干扰物

通过移除视觉杂乱和干扰元素(例如商品促销信息),减少潜在的退出途径。 许多成功的零售商甚至会从结账页中移除导航和搜索功能。

两张移动设备屏幕截图,显示了在 johnlewis.com 结账过程中的进度。移除了搜索、导航和其他干扰元素。
移除了结账时会造成干扰的搜索、导航和其他功能。

让旅程保持专注。此时不应诱导用户执行其他操作!

移动设备上的结账页屏幕截图,显示了宣传免费贴纸的干扰性宣传信息。
不要干扰客户完成购买交易。

对于回访用户,您可以隐藏他们无需查看的数据,从而进一步简化结账流程。例如:以纯文本(而非表单)形式显示送货地址,并允许用户通过链接进行更改。

结账页“查看订单”部分的屏幕截图,显示了纯文本,其中包含用于更改送货地址、付款方式和账单邮寄地址的链接(未显示)。
隐藏客户无需查看的数据。

轻松输入姓名和地址

仅请求您需要的数据

在开始编写姓名和地址表单的代码之前,请务必了解所需的数据。 请勿请求您不需要的数据!若要降低表单复杂性,最简单的方法是移除不必要的字段。这也有利于保护客户隐私,并可降低后端数据成本和责任。

使用单个名称输入

允许用户使用单个输入框输入姓名,除非您有充分的理由单独存储名字、姓氏、敬称或其他姓名部分。使用单个姓名输入框可简化表单,支持剪切和粘贴,并简化自动填充功能。

特别要注意的是,除非您有充分的理由不这样做,否则请勿为前缀或头衔(例如“Mrs”“Dr”或“Lord”)单独添加输入字段。用户可以根据需要输入该名称。此外,honorific-prefix 自动补全功能目前在大多数浏览器中都不起作用,因此,为姓名前缀或头衔添加字段会破坏大多数用户的地址表单自动填充体验。

启用姓名自动填充功能

使用 name 作为全名:

<input autocomplete="name" ...>

如果您确实有充分的理由拆分名称部分,请务必使用适当的自动补全值:

  • honorific-prefix
  • given-name
  • nickname
  • additional-name-initial
  • additional-name
  • family-name
  • honorific-suffix

允许使用国际名称

您可能需要验证姓名输入内容,或限制姓名数据允许使用的字符。不过,您需要尽可能不限制字母的使用。被告知您的名字“无效”很不礼貌!

进行验证时,请避免使用仅匹配拉丁字符的正则表达式。“仅限拉丁字符”会排除姓名或地址中包含非拉丁字母字符的用户。改为允许 Unicode 字母匹配,并确保您的后端以安全的方式支持 Unicode 作为输入和输出。现代浏览器对正则表达式中的 Unicode 有很好的支持。

错误做法
<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
<input pattern="[\w \-]+" ...>
正确做法
<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>
Unicode 字母匹配与仅限拉丁字母的字母匹配。

支持各种地址格式

在设计地址表单时,请注意地址格式多种多样,即使在同一国家/地区也是如此。请注意,不要对“正常”地址做出假设。(如果您不相信,请参阅 英国地址的奇怪之处!)

让地址表单灵活调整

请勿强迫用户尝试将地址塞入不合适的表单字段。

例如,请勿坚持将门牌号和街道名称分开输入,因为许多地址都不使用这种格式,并且数据不完整可能会导致浏览器无法自动填充。

请特别注意 required 地址字段。例如,英国大城市的地址没有郡,但许多网站仍会强制要求用户输入郡。

使用两个灵活的地址行可以很好地适应各种地址格式。

<input autocomplete="address-line-1" id="address-line1" ...>
<input autocomplete="address-line-2" id="address-line2" ...>

添加匹配的标签:

<label for="address-line-1">
Address line 1 (or company name)
</label>
<input autocomplete="address-line-1" id="address-line1" ...>

<label for="address-line-2">
Address line 2 (optional)
</label>
<input autocomplete="address-line-2" id="address-line2" ...>

您可以通过混剪和修改下面嵌入的演示来试用此功能。

考虑使用单个文本区域输入地址

对于地址,最灵活的选项是提供单个 textarea

textarea 方法适用于任何地址格式,非常适合剪切和粘贴,但请注意,它可能不符合您的数据要求,如果用户之前只使用了包含 address-line1address-line2 的表单,则可能无法使用自动填充功能。

对于 textarea,请使用 street-address 作为自动补全值。

以下示例展示了如何使用单个 textarea 作为地址:

对地址表单进行国际化和本地化

对于地址表单,请务必考虑国际化和本地化,具体取决于您的用户位于何处。

请注意,地址部分的命名方式和地址格式因国家/地区而异,即使是同一语言也是如此。

    ZIP code: US
 Postal code: Canada
    Postcode: UK
     Eircode: Ireland
         PIN: India

如果看到不适合您的地址或不使用您预期字词的表单,可能会令人感到不快或困惑。

您的网站可能需要针对多个语言区域自定义地址表单,但使用一些方法来最大限度地提高表单灵活性(如上所述)可能就足够了。如果您不本地化地址表单,请务必了解处理各种地址格式的关键要点: * 避免对地址部分过于具体,例如坚持要求提供街道名称或门牌号。 * 尽可能避免将字段设为 required。例如,许多国家/地区的地址没有邮政编码,农村地址可能没有街道或道路名称。* 使用包容性命名方式:使用“国家/地区”而非“国家”;使用“邮政编码”而非“邮政编码”。

保持灵活性!上文中的简单地址表单示例可以进行调整,以便在许多语言区域中“足够好”地运行。

考虑避免使用邮政编码地址查找功能

某些网站会使用服务来根据邮政编码或邮政编码查找地址。这对于某些用例来说可能很明智,但您应注意潜在的缺点。

邮政编码地址建议功能并不适用于所有国家/地区,在某些地区,邮政编码可能包含大量可能的地址。

邮政编码可能包含多个地址!

用户很难从长长的地址列表中进行选择,尤其是在移动设备上,如果用户处于匆忙或紧张状态时,更是如此。让用户能够利用自动填充功能,只需点按或点击一下即可输入完整的地址,这样既简单又不易出错。

只需输入一个名称,即可一键(一击)输入地址。

简化付款表单

付款表单是结账流程中最重要的部分。付款表单设计不当是导致购物车放弃的常见原因细节决定成败:小问题可能会导致用户放弃购买,尤其是在移动设备上。您的工作是设计表单,让用户能够尽可能轻松地输入数据。

帮助用户避免重复输入付款数据

请务必在支付卡表单中添加适当的 autocomplete 值,包括支付卡号、卡面上的姓名以及到期月份和年份:

  • cc-number
  • cc-name
  • cc-exp-month
  • cc-exp-year

这样,浏览器就可以安全地存储付款卡详细信息并正确输入表单数据,从而帮助用户填写表单。如果没有自动填充功能,用户可能会更有可能保留付款卡详细信息的实际记录,或者在设备上不安全地存储付款卡数据。

避免为付款卡日期使用自定义元素

如果未正确设计,自定义元素可能会破坏自动填充功能,从而中断付款流程,并且无法在旧版浏览器上运行。如果自动补全功能无法针对自定义元素自动填充付款卡详细信息,而用户不得不找到实体付款卡查询到期日期,那么您很可能会失去一次销售机会。请考虑改用标准 HTML 元素,并相应地设置其样式。

付款表单的屏幕截图,显示了会中断自动填充功能的卡片到期日期自定义元素。
自动补全功能填充了所有字段,但到期日期除外!

使用单个输入框输入付款卡和电话号码

对于付款卡和电话号码,请使用单个输入:不要将号码拆分成多个部分。这样可以让用户更轻松地输入数据,简化验证流程,并让浏览器能够自动填充数据。不妨对其他数字数据(例如 PIN 码和银行代码)也采取同样的做法。

显示信用卡字段分为四个输入元素的付款表单屏幕截图。
请勿为信用卡号使用多个输入框。

仔细验证

您应实时验证数据输入,并在提交表单之前进行验证。实现此目的的一种方法是向付款卡输入添加 pattern 属性。如果用户尝试使用无效值提交付款表单,浏览器会显示一条警告消息,并将焦点设置为输入框。无需 JavaScript!

不过,您的 pattern 正则表达式必须足够灵活,能够处理付款卡号长度范围:介于 14 位数(或更少)到 20 位数(或更多)之间。您可以访问 LDAPwiki,详细了解付款卡号的结构。

允许用户在输入新的付款卡号时添加空格,因为实体卡上的数字就是以这种方式显示的。这样对用户更友好(您不必告诉他们“他们做错了什么”),转化流程不太可能中断,并且在处理之前可以轻松移除数字中的空格。

在各种设备、平台、浏览器和版本上进行测试

在用户最常用的平台上测试地址和付款表单尤为重要,因为表单元素的功能和外观可能会有所不同,而视口大小的差异可能会导致定位问题。借助 BrowserStack,您可以在各种设备和浏览器上免费测试开源项目

在 iPhone 7 和 11 上显示的付款表单 payment-form.glitch.me 的屏幕截图。“完成付款”按钮显示在 iPhone 11 上,但未显示在 iPhone 7 上
iPhone 7 和 iPhone 11 上的同一页面。
缩减较小移动视口的内边距,以确保完成付款按钮不会被隐藏。

实现分析和 RUM

在本地测试易用性和性能可能很有帮助,但您需要真实的数据来正确了解用户对付款表单和地址表单的体验。

为此,您需要分析和真实用户监控功能,以获取有关实际用户体验的数据,例如结账页面加载所需的时间或付款完成所需的时间:

  • 网页分析:包含表单的每个网页的网页浏览量、跳出率和退出次数。
  • 互动分析目标漏斗事件可显示用户在哪个环节放弃了结账流程,以及他们在与表单互动时执行了哪些操作。
  • 网站性能以用户为中心的指标可以告诉您结账页是否加载缓慢,如果是,则可以告诉您原因。

将网页分析、互动分析和真实用户效果衡量与服务器日志、转化数据和 A/B 测试相结合,可获得更有价值的信息,帮助您解答诸如折扣代码能否提高收入或表单布局更改能否提高转化次数等问题。

这反过来为您确定工作重点、做出改变和奖励成就提供了坚实依据。

学无止境

此照片由 Unsplash 用户 @rupixen 拍摄。