bts防弹少年团演唱会

bts防弹少年团演唱会

13经验支持的表格设计最佳实践

《13经验支持的表格设计最佳实践》

如果您没有遵循表单设计最佳实践,那么您可能会在桌面上留下大量资金。

%E8%99%BD%E7%84%B6%E8%A1%A8%E5%8D%95%E4%B8%8D%E6%98%AF“>

当然,最佳实践在所有站点上的工作方式不同。 这是背景。 但一般来说,实施经常工作的表单设计策略是一种很好的入门方式。

[…]“/>

幸运的是,不缺少关于表单设计最佳实践的数据,案例研究,研究和示例。 它来自各地:商业案例研究,博客文章, A” b>实例,可用性研究,眼动追踪研究等。

本文将概述一些最常见的表单设计最佳实践。 如果您刚开始进行优化,请将它们用作基线。

如果您正在处理表单,这些指南有望帮助您尽早获得一些快速获胜。

表格设计最佳实践

1.少即是多(删除表单字段)

您要求用户填写的每个字段都会增加摩擦力。 你可以做的最好的事情是改进表单完成是为了摆脱尽可能多的字段。

%E5%9C%A8%E4%B8%80%E4%B8%AA%E6%A1%88%E4%BE%8B%E7%A0%94%E7%A9%B6%E4%B8%AD“>

在另一项测试中,5场形式的表现优于9场形式34%。 在这一个中,他们也没有注意到数据质量或铅质量的任何下降。

大多数表格太长。 这是“贪婪的营销人员综合症”,我们认为我们需要所有的数据。

Baymard Institute发现平均结账时包含14.88表格字段。 但他们的结账可用性测试也表明,大多数网站默认显示的表单字段数量可以减少20-60%。

基本上,平均结帐显示的表单字段数是所需数量的两倍。

《13经验支持的表格设计最佳实践》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

因此,对于漏斗转换优化的底部,形式字段缩减是基础零。 在这里你可以获得一些最快的胜利。 所需的努力和资源是超低的,潜在的收益是巨大的,特别是在规模上(你有多少种形式?有多少人经历过它们?每种形式增加10%意味着什么?)

现在,肯定存在数据问题。 特别是如果您是一家B2B%E5%85%AC%E5%8F%B8%EF%BC%8C%E8%B4%9F%E8%B4%A3%E9%A2%86%E5%AF%BC%E5%B9%B6%E5%B0%86%E9%94%80%E5%94%AE%E7%BA%BF%E7%B4%A2%E4%BC%A0%E9%80%92%E7%BB%99%E9%94%80%E5%94%AE%E5%9B%A2%E9%98%9F%EF%BC%8C%E6%82%A8%E9%9C%80%E8%A6%81%E7%A1%AE%E4%BF%9D%E4%BB%96%E4%BB%AC%E6%98%AF%E5%90%88%E6%A0%BC%E7%9A%84%E9%94%80%E5%94%AE%E7%BA%BF%E7%B4%A2″>

这方面的一个例子是添加分配预算的分层系统。 基本上,领导愿意支付多少钱? 将最低的酒吧设置在您认为有价值的领先价值的最低点,并且您将%E6%B7%98%E6%B1%B0%E8%AE%B8%E5%A4%9A%E8%BD%AE%E8%83%8E%E8%B8%A2%E7%90%83%E8%80%85“>

《13经验支持的表格设计最佳实践》

当您优化表单字段时,询问数据:您真的需要它吗?

你真的需要人的电话,传真或地址吗? 如果你卖蜡烛,你需要某人的公司名称吗? 只询问相关的是什么。 Expedia%E4%BB%8E%E9%A2%84%E8%AE%A2%E8%A1%A8%E4%B8%AD

也知道,特别是对于B2B,像Clearbit%E8%BF%99%E6%A0%B7%E7%9A%84%E6%95%B0%E6%8D%AE%E4%B8%B0%E5%AF%8C%E5%85%AC%E5%8F%B8%E5%AD%98%E5%9C%A8%E3%80%82″>

以这种方式思考:每增加一个领域就会让你失去一些前景。 您从字段中获得的额外信息是否会失去这些人? 如果你没有立即得到所有数据,你会失去什么吗?

《13经验支持的表格设计最佳实践》
大多数表格都太长了( 图片来源

最好的注册形式很简短:

《13经验支持的表格设计最佳实践》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

与往常一样,我需要提及例外情况 – 当然, %E5%87%8F%E5%B0%91%E8%A1%A8%E5%8D%95%E5%AD%97%E6%AE%B5%E5%B9%B6%E4%B8%8D%E6%80%BB%E6%98%AF%E4%BC%9A%E5%A2%9E%E5%8A%A0%E8%BD%AC%E6%8D%A2%E6%AC%A1%E6%95%B0“>

还有数据方面的问题。 您收集的用户信息越多,您可以使用的营销和定位就越有效(通常)。

但是,一般来说,遵循以下启发式是安全的:删除无用或多余的表单字段。

2.单列节拍多列表格

这在眼动追踪研究(包括我们自己的研究),商业案例研究和A / B测试中得到了很好的研究。 当您在单列表单和多列之间进行决策时,默认为单列。

《13经验支持的表格设计最佳实践》

%E5%9C%A8%E9%80%9A%E8%BF%87

调查参与者完成了线性单列形式(n = 356),比多列形式(n = 346)平均快15.4秒。 这在95%置信水平下明显更快。

%E8%BF%99%E4%B8%AA%E6%8C%87%E5%8D%97%E5%B9%B6%E4%B8%8D%E6%96%B0%E9%B2%9C” b>

我确信这条规则有例外(和任何一条规则一样),但我没有找到任何已经发表的经验。 如果您知道任何有冲突的资源,请随时发送。

3.清楚地传达错误

用户会犯错误。 这是不可避免的。 即使您使用了每种表单设计的最佳实践,您仍然会让用户收到错误消息。

如何处理%E9%94%99%E8%AF%AF%E6%B6%88%E6%81%AF%E5%8F%AF%E4%BB%A5%E6%9E%81%E5%A4%A7%E5%9C%B0%E5%BD%B1%E5%93%8D%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C%E3%80%82″>

《13经验支持的表格设计最佳实践》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

设计错误消息的目的仅限于用户对表单感到的挫败感。

当用户感到沮丧时,他们会感到压力,皮质醇开始积聚。 如果达到某个阈值,用户将放弃并转到竞争对手的网站。 生命太短暂,不能疯狂试图处理糟糕的表单设计以及无益的错误处理。

所以,是的,自己做可用性研究,但从这些错误消息的最佳实践开始:

  • 不要责怪用户。
  • 像人一样写,而不是机器人。
  • 确保错误清晰,并将消息放置在直观的位置。
  • 确保用户知道如何修复所述错误。
  • 不要在页面顶部列出所有错误。 内联验证是一个很好的解决方案。

我们写了一篇关于%E9%94%99%E8%AF%AF%E6%B6%88%E6%81%AF%E7%9A%84%E6%95%B4%E7%AF%87%E6%96%87%E7%AB%A0%EF%BC%8C%E4%BD%A0%E5%8F%AF%E4%BB%A5%E5%9C%A8%E8%BF%99%E9%87%8C%E6%9F%A5%E7%9C%8B%E4%BB%A5%E8%8E%B7%E5%8F%96%E6%9B%B4%E5%A4%9A%E4%BF%A1%E6%81%AF%E3%80%82″>

4.使用内联表单字段验证

与错误消息相关的是您如何与用户沟通他们的提交是否正常或他们是否需要更改某些内容。 表单验证是它自己的一个完整主题,但我们可以在这里介绍一些快速方面。

内联验证是一种实时查找,警报和纠正错误的好方法。 而不是等到按“提交”来了解您的错误,而是立刻告诉您出了什么问题。

这是内联验证的一个很好的例子:

《13经验支持的表格设计最佳实践》
图像来源

内联验证有很多实证支持。 2009年, Luke” wroblewski> (提交后验证) %E6%B5%8B%E8%AF%95%E4%BA%86%E5%86%85%E8%81%94%E9%AA%8C%E8%AF%81“>

  • 成功率提高22%,
  • 错误减少22%,
  • 满意度增加31%,
  • 完成时间减少42%,和
  • 眼睛固定次数减少47%。
  • 通过表单制作它的人数增加了22%非常值得付出努力 – 因此为填写表单的任何人创造更令人满意的体验。

我会拿这些结果。 我在许多电子商务网站上看到了A / B测试的类似结果。

如果我们退一步并基于此创建一个启发式,那就有意义了:它完全是关于透明和清晰的期望和沟通。 用户不应该猜测什么会起作用,哪些不起作用。 您可以更轻松地了解表单上的期望,人们将犯的错误越少,以及您将实现的表单完成次数越多。

这是一个双赢的局面。 查看表单的内联验证。

字段应该从最简单到最难填写

Robert” cialdini>告诉我们,当某人采取%E5%B0%8F%E5%8A%A8%E4%BD%9C%E6%88%96%E8%BF%88%E5%90%91%E6%9F%90%E4%BA%8B%E6%97%B6%EF%BC%8C%E4%BB%96%E4%BB%AC%E4%BC%9A%E6%84%9F%E5%88%B0%E6%9B%B4%E6%9C%89%E5%BF%85%E8%A6%81%E5%AE%8C%E6%88%90%E3%80%82″>

等到以后引入摩擦诱导形式字段,如账单信息或任何太个人化的东西。 基本上,您可以通过允许人们在结算之前完成发货信息来实现此操作(无论如何它们通常是相同的,因此他们不需要再次输入)。

先从简单的东西(比如名字)开始,然后用信用卡号码结束。

不要这样做:

《13经验支持的表格设计最佳实践》

6.轻松打字:autoformat,支持复制/粘贴,提出建议(并不总是!)等。

表单设计最佳实践的一般指导原则不断涌现:为用户提供方便。

特别是在移动设备上,这意味着限制他们完成表单所需的物理输入量。 减轻所需打字量的一种特别有效的方法是尽可能地自动化。

使用自动填充:

《13经验支持的表格设计最佳实践》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

在设计表格和决定自动填充时,以下是一些需要反思的好问题:

  • 你对这个领域有什么好的默认值吗?
  • 有什么历史?
  • 我们有任何常用的价值观吗?
  • 您可以使用移动功能或设置的浏览器填充该字段吗?
  • 你能计算出这个领域吗? (例如,根据邮政编码自动填写州)

Autoformatting也非常重要(并且令人沮丧地未充分利用)。 允许用户以他们想要的方式输入数据(特别是邮政编码,电话号码和信用卡等字段)。 输入后需要几行代码才能修复格式。 不要让你的懒惰破坏用户体验。

所以不要这样做:

《13经验支持的表格设计最佳实践》

7.指出每个字段是必需的还是可选的,除非它们都是必需的

首先,问问自己是否确实需要包含这些可选字段。 如果你真的深入挖掘,你会发现大多数时候他们完全没有必要。 例如, LL” bean>并不真正需要我的标题或我的中间名。 他们四个领域的成就可以在一个领域完成:

《13经验支持的表格设计最佳实践》

最初,专注于让访问者开始所需的信息。 这个数字并不那么重要。 重要的是你的访客不会坐在家里思考,“为什么他们需要这个?!”

指示每个字段是必需的还是可选的,除非全部都是必需的。

《13经验支持的表格设计最佳实践》

8.姓名和电话号码字段应为一个字段,而不是多个字段

您可以只使用一个“全名”字段代替名字和姓氏字段。而不是电话号码的3或4字段条目,您只能拥有一个字段。

《13经验支持的表格设计最佳实践》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

多个字段的主要问题是交互问题。 一般来说,表单设计最佳实践是“字段越少越好”。

想象一下,你的移动设备必须经历五个字段的名称和数字(两个名称,三个数字)而不是两个? 不必要的摩擦。

9.表格应在下拉框选择上提供单选按钮

UXmovements.com发表了一篇文章,引发了我们对另一种表单字段类型起作用时使用多选表单字段的好奇心。 在他们的文章“ %E4%B8%BA%E4%BB%80%E4%B9%88%E7%94%A8%E6%88%B7%E6%94%BE%E5%BC%83%E9%80%89%E6%8B%A9%E8%8F%9C%E5%8D%95%E7%9A%84%E5%BD%A2%E5%BC%8F“>

更具体地说,他们说他们通过打断用户流量,难以阅读以及需要灵巧的鼠标机动来减缓用户的速度。

但是,它们没有提供数据来支持这一点。

嗯,这很容易测试。 %E6%89%80%E4%BB%A5%E6%88%91%E4%BB%AC%E5%81%9A%E5%88%B0%E4%BA%86“>

《13经验支持的表格设计最佳实践》

结果? 带单选按钮的表单更快完成。

调查参与者完成了单选按钮表格(n = 354),比使用多选按钮(n = 354)的表格平均快2.5秒。 这在95%的水平上显着更快。

10.不要使优惠券代码字段突出

当人们看到“在此输入优惠券代码”字段时, %E4%BB%96%E4%BB%AC%E6%84%9F%E8%A7%89%E4%B8%8D%E9%82%A3%E4%B9%88%E7%89%B9%E5%88%AB“>

许多人去谷歌搜索优惠券。 有些人会在第三方网站上找到优惠券,例如RetailMeNot ,这会削减您的利润。 %E8%AE%B8%E5%A4%9A%E4%BA%BA%E6%B0%B8%E8%BF%9C%E4%B8%8D%E4%BC%9A%E5%9B%9E“>

%E7%A6%BB%E5%BC%80%E7%BD%91%E7%AB%99%E6%90%9C%E7%B4%A2%E4%BC%98%E6%83%A0%E5%88%B8%E6%98%AF%E6%94%BE%E5%BC%83%E8%B4%AD%E7%89%A9%E8%BD%A6%E7%9A%84

所以这不是一个好主意:

《13经验支持的表格设计最佳实践》

相反,有一个文本链接说,“有优惠券?”或类似的东西,点击链接使输入字段 – 如上所述 – 出现。 文字链接在视觉上不太突出,因此较少人会关注它们。

已经拥有优惠券代码的客户将寻找进入它的方式 – 所以除非你真的很好地隐藏它,否则他们会找到它并且能够应用他们的优惠券代码。 如果客户收到优惠券(通过电子邮件),则自动将其应用于总计并显示折扣。

11.避免使用清除字段按钮

没有人填写你的表格想清除这些字段。 如果他们不想填写,他们就可以离开。

如果他们填写表格并意外地清理了田地,他们很有可能不会重新开始。

《13经验支持的表格设计最佳实践》

移动特定表单设计最佳实践

虽然上述大部分内容也可以应用于移动设备,但是对于较小的屏幕,请注意一些具体问题。 通常,您希望尽可能省力。 移动用户不那么耐心,使用智能手机比使用桌面更困难。

因此,请遵循这些指南,以了解移动特定表单设计的最佳实践。

1.提供现场焦点

如果您的表单包含多个字段,则不希望用户在表单中迷路。 特别是在移动设备上这很重要,因为较小的屏幕允许对整个表格进行较少的视觉控制。

因此,使当前正在编辑的输入字段突出并集中。

《13经验支持的表格设计最佳实践》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

2.不要掩盖密码

虽然在用户输入密码时显示密码似乎是一个安全问题,但它对用户体验来说要好得多。

正如NN” g> ,“当用户输入密码时,可用性会受到影响,他们获得的唯一反馈是一排子弹。 通常,屏蔽密码甚至不会增加安全性,但由于登录失败,它确实会使您的业务付出代价。“

《13经验支持的表格设计最佳实践》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

警告:运行自己的实验

仅仅因为某些东西是“最佳实践”并不意味着它始终是最佳解决方案。 有时%E6%9C%80%E4%BD%B3%E5%81%9A%E6%B3%95%E4%BC%9A%E5%A4%B1%E8%B4%A5“>

网站是上下文的。 在一个站点上工作的可能不适用于另一个站点。

此外,您的业务环境可能不同。 谁知道,也许你真的需要这个中间名作为一个数据。 我该判断谁?

所以拿出一粒盐。 知道它已经过测试和研究,但最终,重要的是它如何在您的网站和您的业务环境中运作。

让这成为一个指导方针,而不是授权。

结论

表单设计最佳实践可能更常用,但它们并不普遍。 他们绝对不是银弹解决方案:你必须自己测试这些东西。

但是,如果您从头开始或刚开始优化您的网站,这些表单设计最佳实践将使您获得良好的基线。 他们是一个很好的起点,而不是你最终会走向何方。

本文中的所有指南都有经验支持,并经受了可用性研究和许多A / B测试的考验。 他们不是基于意见的。 所以从这开始是一个安全的开始点。

相关文章

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注