设计多步骤表单时要遵循的用户体验最佳实践
Posted: Wed Dec 04, 2024 5:52 am
2023 年 4 月更新:我们添加了新的提示并更新了本文以反映新的最佳实践。
在设计易于使用的多阶段表单时不知道从哪里开始?
你并不孤单。在这份综合指南中,我们将揭示多步骤表单设计的用户体验最佳实践,这些实践借鉴了转化率优化、付费营销和表单设计方面的多年经验。
这些见解会将您的表单转变为引人入胜、易于使用的体验,不仅看起来很棒,而且性能也非常出色。
我们将深入研究优化用户参与度的理想字段数量,探索要优先考虑的最重要的表单元素,并讨论如何对表单问题进行排序以实现最大转化。
我们将分享有关如何为用户提供清晰说明、纳入进度指示器以及实施验证技术以最大程度地减少错误并确保无缝用户体验的专家建议。
读完本文后,您将全面了解设计成功的多步骤表单的关键组成部分,并有能力创建引人入胜、易于使用的表单来推动用户前进。因此,让我们深入研究并开始将您的多步骤表单转变为强大的转换工具!
目录
8.删除所有非必要字段
7.避免多列
6. 使用标签,而不是占位符
5. 如果某个字段是必填字段,请将其标记为必填。
4.提供在线验证
3.使用清晰的号召性用语
2. 从简单的问题开始
1.使用进度条
进而?
8.删除所有非必要字段
根据传统观点,表格越短,产生的转化就越多。
但正如许多传统观点一样,它是否真实存在争议。
HubSpot的一项主要研究发现,当您向表单添加更多字段时,阿尔及利亚手机数据 转化率下降相对较小。此外,具有 2-5 个字段的表单比只有 1 个字段的表单转换效果更好:
在另一项研究中,Unbounce 发现减少表单字段的数量会导致转化率下降 14%。
因此,具有多个字段的表单实际上可能比单字段替代方案转换得更好。不仅如此,添加更多字段还可以让您捕获更详细的信息,从而提高潜在客户的质量。
余额是多少?多步骤表单中的正确字段数是多少?
简而言之,如果您不是绝对需要获取有关您的联系人的某些信息,请不要询问。
例如,如果您仅通过电子邮件跟进联系人,则不必费心询问他们的电话号码。
挪威电子商务公司 BliVakker 进行的一项研究强调了严格的多步骤表单设计的好处,该研究测试了删除不必要的表单字段的影响。他测试了三种不同形状的版本:
控件:原始表单,包含17个字段
Skjema-Light:原始形式,但删除了三个字段:帐号、电话号码和晚间电话号码。
Skjema-Uberlight:更小的表单,字段和导航元素更少
现在,传统观点认为,标题优雅的Skjema-Uberlight配对应该名列前茅。但Skjema-Light实际上夺得了桂冠,转化率提高了近 11%:
在运行测试并处理数据后,BliVakker 得出结论,减少不必要的字段数量会增加转化率,但消除太多信息实际上会损害性能。
建议从相对较少的字段开始(我们建议大约 5-6 个,通常不超过 10 个),然后根据需要测试是否包含其他字段。
7.避免多列
多个专栏有时间和地点。
如果你是古希腊建筑师,那就疯狂吧:柱子越多越好。
但是,如果您正在构建潜在客户捕获表单,那么单列绝对是最佳选择,因为它们更容易让用户理解和完成。
Baymard Institute的用户体验研究专家表示,多列表单布局“容易被误解”,这通常会导致两个常见的用户错误:
缺少字段,要么是因为您不理解多列的含义,要么是因为您只是忽略它们
填写不相关或不正确的字段,因为您认为这些步骤是必要的。
这是这种现象的一个很好的(或者更确切地说,不好的)例子,由跨国零售巨头沃尔玛提供:
这是怎么回事?我们可以看到相关用户已开始填写第 1 列,添加他们的名字和姓氏。但随后他们完全跳过了电话字段,直接进入了第二栏。
主要问题是用户没有统一的方式来解释列,如 Baymard 所示:
讽刺的是,该图是按列排列的,看起来也很混乱。
一件明确的事情是:如果您想提高转化率,请对多列说“不”。
6. 使用标签,而不是占位符
表单字段只是一个大的空框。
因此,许多品牌选择在其中填充占位符文本,旨在为所请求的信息提供有用的提示,这是可以理解的。
然而,该占位符副本弊大于利。
需要明确的是,以下是我们所讨论内容的说明,由Norman Nielsen Group (NNG) 提供:
您可能认为标签和占位符可以互换。然而,根据 NNG 的说法,用户测试一再表明,用占位符文本替换标签对可用性弊大于利,原因如下:
当您开始输入时,占位符文本就会消失,因此如果您忘记了“提示”,您需要删除已经编写的内容(或者在某些情况下刷新整个页面)。
由于缺少标签,因此无法返回并检查最后所有内容是否填写正确。
如果您收到错误消息,则很难找出问题所在。
如果您使用 Tab 键而不是鼠标进行导航,则在删除占位符副本之前您很可能不会阅读它。
人们的眼睛自然会被空白字段吸引,因此包含占位符副本的字段很容易被忽视。
占位符文本和自动填充的数据很容易混淆。
有时,必须手动删除占位符副本,这特别烦人。
那么,如果独立的占位符文本是不行的,你应该怎么做?
很简单:使用标签并在表单字段外添加提示,如 NNG 所示:
在设计易于使用的多阶段表单时不知道从哪里开始?
你并不孤单。在这份综合指南中,我们将揭示多步骤表单设计的用户体验最佳实践,这些实践借鉴了转化率优化、付费营销和表单设计方面的多年经验。
这些见解会将您的表单转变为引人入胜、易于使用的体验,不仅看起来很棒,而且性能也非常出色。
我们将深入研究优化用户参与度的理想字段数量,探索要优先考虑的最重要的表单元素,并讨论如何对表单问题进行排序以实现最大转化。
我们将分享有关如何为用户提供清晰说明、纳入进度指示器以及实施验证技术以最大程度地减少错误并确保无缝用户体验的专家建议。
读完本文后,您将全面了解设计成功的多步骤表单的关键组成部分,并有能力创建引人入胜、易于使用的表单来推动用户前进。因此,让我们深入研究并开始将您的多步骤表单转变为强大的转换工具!
目录
8.删除所有非必要字段
7.避免多列
6. 使用标签,而不是占位符
5. 如果某个字段是必填字段,请将其标记为必填。
4.提供在线验证
3.使用清晰的号召性用语
2. 从简单的问题开始
1.使用进度条
进而?
8.删除所有非必要字段
根据传统观点,表格越短,产生的转化就越多。
但正如许多传统观点一样,它是否真实存在争议。
HubSpot的一项主要研究发现,当您向表单添加更多字段时,阿尔及利亚手机数据 转化率下降相对较小。此外,具有 2-5 个字段的表单比只有 1 个字段的表单转换效果更好:
在另一项研究中,Unbounce 发现减少表单字段的数量会导致转化率下降 14%。
因此,具有多个字段的表单实际上可能比单字段替代方案转换得更好。不仅如此,添加更多字段还可以让您捕获更详细的信息,从而提高潜在客户的质量。
余额是多少?多步骤表单中的正确字段数是多少?
简而言之,如果您不是绝对需要获取有关您的联系人的某些信息,请不要询问。
例如,如果您仅通过电子邮件跟进联系人,则不必费心询问他们的电话号码。
挪威电子商务公司 BliVakker 进行的一项研究强调了严格的多步骤表单设计的好处,该研究测试了删除不必要的表单字段的影响。他测试了三种不同形状的版本:
控件:原始表单,包含17个字段
Skjema-Light:原始形式,但删除了三个字段:帐号、电话号码和晚间电话号码。
Skjema-Uberlight:更小的表单,字段和导航元素更少
现在,传统观点认为,标题优雅的Skjema-Uberlight配对应该名列前茅。但Skjema-Light实际上夺得了桂冠,转化率提高了近 11%:
在运行测试并处理数据后,BliVakker 得出结论,减少不必要的字段数量会增加转化率,但消除太多信息实际上会损害性能。
建议从相对较少的字段开始(我们建议大约 5-6 个,通常不超过 10 个),然后根据需要测试是否包含其他字段。
7.避免多列
多个专栏有时间和地点。
如果你是古希腊建筑师,那就疯狂吧:柱子越多越好。
但是,如果您正在构建潜在客户捕获表单,那么单列绝对是最佳选择,因为它们更容易让用户理解和完成。
Baymard Institute的用户体验研究专家表示,多列表单布局“容易被误解”,这通常会导致两个常见的用户错误:
缺少字段,要么是因为您不理解多列的含义,要么是因为您只是忽略它们
填写不相关或不正确的字段,因为您认为这些步骤是必要的。
这是这种现象的一个很好的(或者更确切地说,不好的)例子,由跨国零售巨头沃尔玛提供:
这是怎么回事?我们可以看到相关用户已开始填写第 1 列,添加他们的名字和姓氏。但随后他们完全跳过了电话字段,直接进入了第二栏。
主要问题是用户没有统一的方式来解释列,如 Baymard 所示:
讽刺的是,该图是按列排列的,看起来也很混乱。
一件明确的事情是:如果您想提高转化率,请对多列说“不”。
6. 使用标签,而不是占位符
表单字段只是一个大的空框。
因此,许多品牌选择在其中填充占位符文本,旨在为所请求的信息提供有用的提示,这是可以理解的。
然而,该占位符副本弊大于利。
需要明确的是,以下是我们所讨论内容的说明,由Norman Nielsen Group (NNG) 提供:
您可能认为标签和占位符可以互换。然而,根据 NNG 的说法,用户测试一再表明,用占位符文本替换标签对可用性弊大于利,原因如下:
当您开始输入时,占位符文本就会消失,因此如果您忘记了“提示”,您需要删除已经编写的内容(或者在某些情况下刷新整个页面)。
由于缺少标签,因此无法返回并检查最后所有内容是否填写正确。
如果您收到错误消息,则很难找出问题所在。
如果您使用 Tab 键而不是鼠标进行导航,则在删除占位符副本之前您很可能不会阅读它。
人们的眼睛自然会被空白字段吸引,因此包含占位符副本的字段很容易被忽视。
占位符文本和自动填充的数据很容易混淆。
有时,必须手动删除占位符副本,这特别烦人。
那么,如果独立的占位符文本是不行的,你应该怎么做?
很简单:使用标签并在表单字段外添加提示,如 NNG 所示: