帮助用户尽可能快速轻松地填写地址和付款表单,尽可能提高转化次数。
设计良好的表单可帮助用户和提高转化率。一个小小的改变,大的改变!
下面是一个简单的付款表单示例,它展示了所有最佳做法:
下面是一个简单地址表单的示例,演示了所有最佳实践:
核对清单
- 使用有意义的 HTML 元素:
<form>
、<input>
、<label>
和<button>
。 - 使用
<label>
为每个表单字段添加标签。 - 使用 HTML 元素属性使用内置浏览器功能,尤其是具有适当值的
type
和autocomplete
。 - 避免将
type="number"
用于不应递增的数字,例如支付卡号码。请改用type="text"
和inputmode="numeric"
。 - 如果
input
、select
或textarea
有适当的自动补全值,您应使用该值。 - 为了帮助浏览器自动填充表单,请为输入
name
和id
属性提供稳定值,这些值在网页加载或网站部署之间不会改变。 - 当用户点按或点击提交按钮后,停用提交按钮。
- 在用户输入过程中(而不仅仅是在提交表单时)验证数据。
- 将访客结账设为默认结账方式,并在结账完成后轻松创建帐号。
- 以清晰的步骤展示结账流程的进度,并配有明确的号召性用语。
- 通过消除干扰和干扰因素限制潜在的结账退出点。
- 在结账时显示完整的订单详情,并轻松调整订单。
- 不要要求用户提供您不需要的数据。
- 除非您有充分的理由,否则请一次性输入姓名,除非您有充分的理由。
- 请勿将姓名和用户名强制使用纯拉丁字符。
- 支持多种地址格式。
- 考虑使用单个
textarea
作为地址。 - 使用自动补全帐单邮寄地址。
- 在必要时进行国际化和本地化。
- 建议避免查找邮政编码地址。
- 使用相应的支付卡自动补全值。
- 使用一次性输入支付卡卡号。
- 避免使用自定义元素,以免它们破坏自动填充体验。
- 在现场和实验室中测试:网页分析、互动分析和实时用户性能衡量。
- 在各种浏览器、设备和平台上进行测试。
使用有意义的 HTML
使用为作业构建的元素和属性:
<form>
、<input>
、<label>
和<button>
type
、autocomplete
和inputmode
这些控件可实现内置的浏览器功能、改进无障碍功能,并为标记添加含义。
按预期使用 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)的键盘。](https://web.developers.google.cn/static/articles/payment-and-address-form-best-practices/image/two-screenshots-androi-cfa72e7cf108a.jpg?authuser=7&hl=ro)
对于日期,请尽量避免使用自定义 select
元素。如果实现不当,便会破坏自动填充体验,且无法在旧版浏览器上正常运行。对于出生年份等数字,请考虑使用 input
元素而非 select
,因为与从长的下拉列表中选择数字来手动输入数字相比,手动输入数字更简单且不易出错,尤其是在移动设备上。使用 inputmode="numeric"
可确保在移动设备上正确使用键盘,并添加带有文本或占位符的验证和格式提示,以确保用户以适当的格式输入数据。
使用自动补全功能来改进无障碍功能,帮助用户避免重复输入数据
使用适当的 autocomplete
值可让浏览器安全地存储数据并自动填充 input
、select
和 textarea
值,从而帮助用户。这在移动设备上尤为重要,对于避免较高的表单放弃率至关重要。自动补全还具有多种无障碍功能优势。
如果有适合表单字段的自动补全值,您应使用该值。MDN Web 文档包含值的完整列表,以及有关如何正确使用这些值的说明。
稳定的值
账单邮寄地址
默认情况下,将账单邮寄地址设置为与配送地址相同。提供用于修改帐单邮寄地址的链接(或使用 summary
和 details
元素),而不是在表单中显示帐单邮寄地址,从而减少视觉干扰。
![结账页示例,其中显示了用于更改账单邮寄地址的链接。](https://web.developers.google.cn/static/articles/payment-and-address-form-best-practices/image/example-checkout-page-sho-dcd9ea1de2cf8.png?authuser=7&hl=ro)
如同为送货地址使用适当的自动补全值一样,请为账单邮寄地址使用适当的自动补全值,这样用户就无需多次输入数据。如果您在不同部分中对同名的输入内容有不同的值,请为自动补全属性添加前缀字词。
<input autocomplete="shipping address-line-1" ...>
...
<input autocomplete="billing address-line-1" ...>
帮助用户输入正确的数据
请尽量避免因客户“做错了事”而“指责”客户。相反,应该帮助用户在出现问题时及时解决问题,从而更快速、更轻松地填写表单。在结账流程中,客户会尝试向贵公司提供产品或服务资金,您的工作是协助他们,而不是惩罚他们!
您可以向表单元素添加约束条件属性,以指定可接受的值,包括 min
、max
和 pattern
。元素的有效性状态是自动设置的,具体取决于元素的值是否有效,:valid
和 :invalid
CSS 伪类(可用于设置具有有效值或无效值的元素样式)也是如此。
例如,以下 HTML 指定输入 1900 年至 2020 年之间的出生年份。使用 type="number"
可将输入值限制为仅包含 min
和 max
指定的范围内的数字。如果您尝试输入超出范围的数字,输入内容将被设置为无效状态。
以下示例使用 pattern="[\d ]{10,30}"
来确保支付卡号有效,同时允许有空格:
现代浏览器还会对 email
或 url
类型的输入执行基本验证。
提交表单时,浏览器会自动将焦点置于必需值有问题或缺失的字段上。无需 JavaScript!
![桌面版 Chrome 中一个登录表单的屏幕截图,其中显示了与无效电子邮件地址值对应的浏览器提示和焦点。](https://web.developers.google.cn/static/articles/payment-and-address-form-best-practices/image/screenshot-a-sign-form-354be7a245f85.png?authuser=7&hl=ro)
进行内嵌验证并在用户输入数据时为其提供反馈,而不是在用户点击提交按钮时提供错误列表。如果您在提交表单后需要验证服务器上的数据,请列出发现的所有问题,并清楚地突出显示包含无效值的所有表单字段,并在每个有问题的字段旁边显示一条内嵌消息,说明需要解决的问题。检查服务器日志和分析数据中是否存在常见错误 — 您可能需要重新设计表单。
在用户输入数据和提交表单时,您也应使用 JavaScript 进行更可靠的验证。使用 Constraint Validation API(受到广泛支持),通过内置浏览器界面添加自定义验证,以设置焦点和显示提示。
如需了解详情,请参阅使用 JavaScript 实现更复杂的实时验证。
帮助用户避免错过必要数据
请在输入中使用 required
属性来获取必填值。
用户提交表单时,现代浏览器会自动提示并重点关注缺少数据的 required
字段,您可以使用 :required
伪类突出显示必填字段。无需 JavaScript!
为每个必填字段向标签添加星号,并在表单开头添加备注以说明星号的含义。
简化结账流程
注意移动商务的差距!
假设您的用户存在疲劳预算。用完该存储空间,您的用户就会离开。
您需要减少阻力并保持专注,尤其是在移动设备上。许多网站在移动设备上获得的流量更多,但在桌面设备上获得的转化更多,这种现象被称为移动商务差距。客户可能只是更喜欢在桌面设备上完成购买,但移动转化率较低也会导致用户体验不佳。您的任务是最大限度地减少移动设备上未观测到的转化,而最大限度提高桌面设备上的转化次数。研究表明,提供更好的移动设备表单体验有巨大机会。
最重要的是,用户更有可能放弃看起来长、复杂、没有方向感的表单。当用户使用小屏幕设备、分心或时间匆忙时尤其如此。请求尽可能少的数据。
将访客结账方式设为默认付款卡
对于网店,减少表单障碍的最简单方法是将“访客结账”设置为默认结账方式。 请勿强制用户在购买之前创建帐号。不允许访客结账是客户放弃购物车的一个主要原因。
![结账时放弃购物车的原因。](https://web.developers.google.cn/static/articles/payment-and-address-form-best-practices/image/reasons-shopping-cart-ab-d6f494f8481a1.png?authuser=7&hl=ro)
您可以在结账后提供帐号注册选项。这时,您已经拥有设置帐号所需的大部分数据,因此用户可以快速轻松地创建帐号。
显示结账进度
通过显示进度并明确指出接下来需要完成的步骤,您可以简化结账流程。下面的视频展示了英国零售商 johnlewis.com 是如何做到这一点的。
你需要保持动力!对于完成付款的每一个步骤,请使用页面标题和描述性的按钮值,以清楚地了解现在需要执行哪些操作,以及接下来执行哪个结账步骤。
对表单输入使用 enterkeyhint
属性,以设置移动设备键盘的 Enter 键标签。例如,在多页表单中使用 enterkeyhint="previous"
和 enterkeyhint="next"
,为表单中的最终输入使用 enterkeyhint="done"
,为搜索输入使用 enterkeyhint="search"
。
![Android 上的地址表单的两个屏幕截图,显示了 Enterkeyhint 输入属性如何更改 Enter 键按钮图标。](https://web.developers.google.cn/static/articles/payment-and-address-form-best-practices/image/two-screenshots-an-addre-75a36b70b4e17.png?authuser=7&hl=ro)
Android 和 iOS 支持 enterkeyhint
属性。如需了解详情,请参阅 enterkeyhint 说明文档。
让用户可以在结账过程中轻松切换,轻松调整订单,即使他们处于最终付款步骤也是如此。显示订单的完整详细信息,而不仅仅是有限的摘要。让用户能够在付款页面轻松调整商品数量。结账时的首要任务是避免打断转化进度。
移除不想要的内容
移除视觉元素和分心(例如产品宣传内容),尽量减少潜在的退出点。 许多成功的零售商甚至取消了结账流程中的导航和搜索功能。
![移动设备上的两张屏幕截图,显示 johnlewis.com 结账进度。移除搜索、导航和其他分散注意力的对象。](https://web.developers.google.cn/static/articles/payment-and-address-form-best-practices/image/two-screenshots-mobile-s-8170de02ed5c4.png?authuser=7&hl=ro)
在旅程中保持专注。这可不是诱导用户进行其他行动的好时机!
![移动设备上的结账页屏幕截图,其中显示了干扰性免费贴纸促销活动。](https://web.developers.google.cn/static/articles/payment-and-address-form-best-practices/image/screenshot-checkout-page-500566178ec4d.jpg?authuser=7&hl=ro)
对于回访用户,您可以隐藏他们不需要看到的数据,从而进一步简化结账流程。例如:以纯文本(而非表单)显示送货地址,并允许用户通过链接更改送货地址。
![结账页“查看订单”部分的屏幕截图,其中显示了纯文本和用于更改配送地址、付款方式和账单地址的链接(这些链接并未显示)。](https://web.developers.google.cn/static/articles/payment-and-address-form-best-practices/image/screenshot-review-order-8faf48dbff9f1.png?authuser=7&hl=ro)
方便输入姓名和地址
仅要求提供您需要的数据
在开始编写姓名和地址表单之前,请务必了解所需的数据。 不要索要您不需要的数据!降低表单复杂度的最简单方法是移除不必要的字段。这也有利于保护客户隐私,并且可以降低后端数据费用和责任。
使用单一名称输入
除非您有充分的理由单独存储给定名字、姓氏、敬称或其他姓名部分,否则用户只需一次输入即可输入姓名。使用单一名称输入内容可降低表单复杂程度,支持剪切粘贴功能,并简化自动填充操作。
特别是,除非您有充分的理由,否则不要为前缀或名称添加单独的输入项(例如 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} \-]+" ...>
支持多种地址格式
在设计地址表单时,请务必注意地址格式多种多样,即使是在单个国家/地区内也是如此。请注意不要对“正常”地址做出假设。(如果您不确定,请查看 UK Address Oddities!!)
让地址表单更加灵活
请勿强迫用户试图将其地址挤到一个填满的表单字段内。
例如,不要在单独的输入内容中坚持使用门牌号和街道名称,因为很多地址并不采用这种格式,而且不完整的数据可能会破坏浏览器的自动填充。
请特别注意 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-line1
和 address-line2
的表单,则可能会错过自动填充功能。
对于文本区域,请使用 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 元素,并为这些元素设置相应的样式。
![付款表单的屏幕截图,其中显示了卡失效日期会中断自动填充的自定义元素。](https://web.developers.google.cn/static/articles/payment-and-address-form-best-practices/image/screenshot-payment-form-1979c4cb5d1d8.jpg?authuser=7&hl=ro)
只需输入一次即可输入支付卡和电话号码
对于支付卡和电话号码,请单独输入:请勿将支付卡号码拆分为多个部分。这使用户可以更轻松地输入数据、简化验证过程并支持浏览器自动填充数据。对于 PIN 码和银行代码等其他数字数据,请考虑执行相同的操作。
![付款表单的屏幕截图,其中显示了拆分为四个输入元素的信用卡字段。](https://web.developers.google.cn/static/articles/payment-and-address-form-best-practices/image/screenshot-payment-form-ae75caa2b392b.jpg?authuser=7&hl=ro)
仔细验证
您应该在提交表单之前实时验证数据输入。一种方法是在支付卡输入信息中添加 pattern
属性。如果用户尝试提交包含无效值的付款表单,浏览器会显示警告消息,并将焦点设置为输入。无需 JavaScript!
但是,pattern
正则表达式必须足够灵活,能够处理支付卡号码长度的范围:14 位(或更少)到 20 位(或更多)。您可在 LDAPwiki 中找到更多关于支付卡号码结构的信息。
允许用户在输入新的支付卡号时包含空格,因为数字卡在实体卡上的显示方式。这样对用户来说更友好(您不必告诉他们“他们做错了什么”),不太可能中断转化流程,并且在处理之前移除数字中的空格也很简单。
针对各种设备、平台、浏览器和版本进行测试
由于表单元素的功能和外观可能会有所不同,并且视口大小的差异也可能会导致在定位时出现问题,因此请务必在用户最常使用的平台上测试地址和付款方式。BrowserStack 支持在各种设备和浏览器上对开源项目进行免费测试。
![iPhone 7 和 11 上付款表单 pay-form.glitch.me 的屏幕截图。iPhone 11 上显示了“完成付款”按钮,但在 iPhone 7 上不显示](https://web.developers.google.cn/static/articles/payment-and-address-form-best-practices/image/screenshots-a-payment-fo-3bf6037d5a688.jpg?authuser=7&hl=ro)
针对较小的移动设备视口减少内边距,确保完成付款按钮不会隐藏。
实现分析和 RUM
在本地测试易用性和性能可能很有用,但您需要真实的数据来正确了解用户的付款和地址表单体验。
为此,您需要分析和真实用户监控,即有关实际用户体验的数据,例如结账页面需要多长时间加载或完成付款需要多长时间:
- 网页分析:包含表单的每个网页的网页浏览量、跳出率和退出次数。
- 互动分析:目标漏斗和事件可指明用户在哪里放弃结账流程,以及他们在与您的表单互动时执行了哪些操作。
- 网站性能:通过以用户为中心的指标,您可以了解结账页加载速度是否缓慢以及如果加载缓慢,具体问题是什么。
与服务器日志、转化数据和 A/B 测试结合使用时,网页分析、互动分析和真实用户性能衡量会变得特别有价值,使您能够解答折扣代码是否增加了收入,或者表单布局更改是否提高了转化率等问题。
这反过来又为您确定优先努力、做出改变并奖励成功的坚实基础。
继续学习
- 登录表单最佳实践
- 有关注册表单的最佳做法
- 使用 WebOTP API 在网页上验证电话号码
- 创建出色的表单
- 移动表单设计最佳实践
- 更强大的表单控件
- 创建无障碍表单
- 使用 Credential Management API 简化注册流程
- Frank 的邮政地址强制指南针对 200 多个国家/地区的地址格式提供了实用链接和广泛指导。
- 国家/地区列表具有一个工具,可让您以多种格式下载多种语言的国家/地区代码和名称。