bts防弹少年团演唱会

bts防弹少年团演唱会

优化移动表单以获得更多转化 - 以及竞争优势

《优化移动表单以获得更多转化 - 以及竞争优势》

如果做得好,优化的移动表单可以提供超过提高的转化率:它们可以成为竞争优势 – 用户选择在您的网站上填写表单的原因。

这不是夸张。 考虑一下在Hotel Tonight预订房间与其竞争对手相比所需的互动次数,Luke Wroblewski在%E4%BB%96%E5%85%B3%E4%BA%8E%E7%A7%BB%E5%8A%A8%E8%AE%BE%E8%AE%A1%E7%9A%84%E6%BC%94%E8%AE%B2%E4%B8%AD%E5%BC%BA%E8%B0%83%E4%BA%86%E8%BF%99%E4%B8%80%E7%82%B9%EF%BC%9A”>

《优化移动表单以获得更多转化 - 以及竞争优势》
“通过3次点击和轻扫即可预订酒店。 这是一个竞争优势,“Hotel Tonight首席执行官Sam Shank称。

对于Hotel Tonight,移动表格优化的解决方案是“无情地编辑。 即使你有最薄的漏斗,再次切割。“

减少表单字段通常有效,但是,就像每个“最佳实践”一样,它%E4%B8%8D%E6%98%AF%E4%B8%80%E7%A7%8D%E4%BF%9D%E8%AF%81“>

以下是用于表单优化的特定于移动设备的框架

  1. 移动和桌面UI之间的主要区别
  2. 表格范围的考虑因素
  3. 特定领域的考虑因素
  4. 测量表单性能的工具

%E5%A6%82%E6%9E%9C%E6%82%A8%E6%98%AF%E5%88%9D%E6%AC%A1%E5%BD%A2%E6%88%90%E4%BC%98%E5%8C%96%E7%9A%84%E4%BA%BA%EF%BC%8C%E8%AF%B7%E4%BB%8E%E8%BF%99%E9%87%8C%E5%BC%80%E5%A7%8B” new>在CXL研究所%E7%9A%84%E8%AF%BE%E7%A8%8B“>

1.移动和桌面UI之间的主要区别

三个关键的UI差异为移动设备设计带来了挑战:

1.宽高比。 大约80-90%EF%BC%85%E7%9A%84%E6%99%BA%E8%83%BD%E6%89%8B%E6%9C%BA%E4%BD%BF%E7%94%A8%E6%98%AF%E7%BA%B5%E5%90%91%E7%9A%84%EF%BC%8C%E8%BF%99%E4%BD%BF%E5%AE%BD%E5%BA%A6%E6%88%90%E4%B8%BA%E4%B8%80%E7%A7%8D%E5%AE%9D%E8%B4%B5%E7%9A%84%E5%95%86%E5%93%81%EF%BC%9A%E5%9E%82%E7%9B%B4%E7%A9%BA%E9%97%B4%E6%9B%B4%E5%A4%A7%EF%BC%8C%E5%9E%82%E7%9B%B4%E6%BB%9A%E5%8A%A8%E6%9B%B4%E7%9B%B4%E8%A7%82%E3%80%82″>

此外,当然,与平板电脑和台式机相比,屏幕尺寸较小,因此无需滚动即可将整个表单放在屏幕上的可能性降低。

2.触摸屏导航。 没有鼠标,带手写笔的智能手机用户占少数。 触摸屏对元件的尺寸和间距提出了更高的要求。 这也意味着没有悬停状态可以添加有用的信息。

3.键盘有限。 智能手机的键盘有限,而且不一致。 这些因素证明仔细考虑哪个键盘显示哪个字段以及是否启用(或禁用)自动功能,如自动大写。

这些UI差异增加了现有的挑战 – 移动用户已经代表了一个匆忙的,容忍度较低的用户群。 %E7%A7%BB%E5%8A%A8%E8%BD%AC%E6%8D%A2%E7%8E%87%E4%BB%8D%E7%84%B6%E8%90%BD%E5%90%8E%E4%BA%8E%E5%8F%B0%E5%BC%8F%E6%9C%BA%E8%AE%BE%E5%A4%87%EF%BC%8C%E4%BD%86%E8%BD%AC%E6%8D%A2%E5%B7%AE%E8%B7%9D%E7%BB%A7%E7%BB%AD%E5%9C%A8

2.全层面的考虑因素

单柱设计

%E4%B9%8B%E5%89%8D%E7%9A%84%E4%B8%80%E9%A1%B9%E7%A0%94%E7%A9%B6%E4%B8%AD“>与多列形式相比 , 单列形式可以更快地完成

《优化移动表单以获得更多转化 - 以及竞争优势》
在我们的内部研究中,调查参与者完成了线性单柱形式,平均比多柱形式快15.4秒。

在移动设备上,完成时间的差距几乎肯定更大,移动设备优先考虑垂直滚动。

多步形式

多步骤表单有可能通过在智能手机窗口中拟合每个表单部分来完全消除滚动。 它们为长形式增加了好处:

  • 可以在每个步骤之后保存信息,从而使表单放弃者更容易跟进,并避免因意外点击或连接丢失导致的完全输入丢失而导致的潜在用户挫败感。
  • 他们%E5%9D%97%E5%BD%A2%E5%BC%8F%E7%9A%84%E9%83%A8%E5%88%86“>
《优化移动表单以获得更多转化 - 以及竞争优势》
图像来源

然而,多步骤表单需要付出代价: 每一步都需要另一个页面加载 – 如果访问者没有很好的连接(无论他们住在农场还是通过地铁隧道),加载时间可能会滞后。

字体大小

16px%E5%AD%97%E4%BD%93%E5%A4%A7%E5%B0%8F%E6%98%AF“>移动设备上正文的 标准 %E5%B0%BA%E5%AF%B8“>。 较小(或较大)的字体大小可能会导致问题,尤其是对于有视力障碍的人。

根据%E9%BA%BB%E7%9C%81%E7%90%86%E5%B7%A5%E5%AD%A6%E9%99%A2%E7%9A%84%E7%A0%94%E7%A9%B6“>

测试阅读速度的MIT研究比较了两种字体大小(10px和8px)以及不同的案例和字母宽度。 他们的研究结果为小于平均值的文本提供了基线建议:

  • 不要使用低于10px的字体大小。
  • 使用全部大写。
  • 保持标准字体宽度。
《优化移动表单以获得更多转化 - 以及竞争优势》
麻省理工学院对字体大小的研究发现,全帽,标准宽度的字母更容易阅读。 ( 图片来源

触摸目标大小

小按钮可能会对用户或设备造成不精确的影响。 移动设备的触摸目标具有最小尺寸建议。 Per” steven hoober> , 当目标远离屏幕中心时,最小尺寸 %E4%BC%9A%E5%8F%98“>大,用户点击最精确:

  • 屏幕中央7毫米。
  • 沿边缘9毫米。
  • 角落12毫米。

材料设计辅助功能指南提供了类似的建议:触摸目标为7-10mm“>

《优化移动表单以获得更多转化 - 以及竞争优势》
触摸目标尺寸应随着按钮与屏幕中心的距离而增加。 ( %E5%9B%BE%E7%89%87%E6%9D%A5%E6%BA%90“>

值得注意的是, 可见按钮或图标可能小于触摸目标,触摸目标的大小应覆盖最小区域,即使图标或按钮未填充空间。

至于触摸目标之间的填充 – 再次,不是可见按钮,而是围绕它们的隐形触摸目标 – 材料设计指南建议至少1.3″ mm> 。

总表单字段

如前所述,传统形式的智慧表明,较少的形式场会产生更多的转换,因为每个场都会增加摩擦力。

由于填写表单在移动设备上不太方便 – 键盘较小且部分,触摸不如鼠标点击精确 – 删除表单字段通常适用于任何设备的原因可能更适用于智能手机。 (这个逻辑不会让你退出测试。)

一些转换前的表单字段可以被移动而重新感动:

帐户创建。 创建帐户是购买时不必要的常见摩擦源。 “ %E8%B0%A2%E8%B0%A2%E2%80%9D%E9%A1%B5%E9%9D%A2%E5%8F%AF%E4%BB%A5%E9%80%9A%E8%BF%87%E4%BB%A5%E4%B8%8B%E6%96%B9%E5%BC%8F%E5%B8%AE%E5%8A%A9%E8%A7%A3%E5%86%B3%E8%BF%99%E4%B8%80%E6%8C%91%E6%88%98%EF%BC%9A”>

  • 将表单字段从结帐流程移动到购买后阶段。
  • 只询问过去的购买者创建一个简化重复购买的帐户。
  • 使用刚刚完成的销售信息预填充字段。

CAPTCHA。 考虑用电子邮件确认替换CAPTCHA; 半可缩放字母在移动设备上可能完全不可思议,并且电子邮件确认在忽略垃圾邮件条目方面可能同样有效。

表单部署

2017年,谷歌开始降级“用户在移动搜索结果过渡时无法轻松访问内容的页面。”这些页面通过弹出窗口或插页式广告阻止了他们的“主要”内容,这些弹出广告通常是潜在客户生成形式:

《优化移动表单以获得更多转化 - 以及竞争优势》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

Google定义了三种可接受的插页式广告

  1. 那些告知用户cookie使用的那些。
  2. 那些需要年龄验证的人。
  3. 那些使用“合理数量的屏幕空间”的人。

任何忽略Google%E6%8C%87%E5%8D%97%E7%9A%84%E8%A1%A8%E5%8D%95%E4%BC%98%E5%8C%96%E5%B7%A5%E4%BD%9C%E9%83%BD%E6%9C%89%E5%8F%AF%E8%83%BD%E5%88%87%E6%96%AD%E7%94%A8%E6%88%B7%E5%A1%AB%E5%86%99%E8%BF%99%E4%BA%9B%E8%A1%A8%E5%8D%95%E7%9A%84%E9%A3%8E%E9%99%A9%EF%BC%8C%E6%97%A0%E8%AE%BA%E5%85%B6%E8%BD%AC%E6%8D%A2%E7%8E%87%E5%A6%82%E4%BD%95%E3%80%82″>

3.特定领域的考虑因素

自动化

智能手机的自动化功能%E6%8F%90%E4%BE%9B%E9%A3%8E%E9%99%A9%E5%92%8C%E5%9B%9E%E6%8A%A5” html>

《优化移动表单以获得更多转化 - 以及竞争优势》

  • 自动更正。 自动更正可能会错误地纠正具有专有名词的字段中的信息(例如姓名,地址)。
  • 自动大写。 自动大写可以节省用户对名称和地址字段的工作量,但应禁用密码字段。
  • 自动填充或自动填充。 自动填充可能对完成已知的电子邮件地址很有用,但可能会错误地尝试使用电话号码填写订单号,反之亦然。 您可以%E5%9C%A8%E4%BB%A3%E7%A0%81%E4%B8%AD%E6%8F%90%E4%BE%9B%E6%8F%90%E7%A4%BA“>
《优化移动表单以获得更多转化 - 以及竞争优势》
如果部署正确,自动填充可以节省用户的时间。 ( %E5%9B%BE%E7%89%87%E6%9D%A5%E6%BA%90“>
《优化移动表单以获得更多转化 - 以及竞争优势》
使用当前位置或手动输入信息的选项为用户提供了选择。 ( %E5%9B%BE%E7%89%87%E6%9D%A5%E6%BA%90“>

下拉菜单

Luke Wroblewski将下拉列表称为“ %E6%9C%80%E5%90%8E%E7%9A%84UI“>

  • 需要更多互动。
  • 模糊的用户选择。

还有其他选择:

踏步机。 可以将+/-组控件组合在一起或由元素标签分隔。 %E6%AD%A5%E8%BF%9B%E5%99%A8%E9%80%82%E7%94%A8%E4%BA%8E%E5%85%B7%E6%9C%89%E5%90%88%E7%90%86%E4%B8%8A%E9%99%90%E7%9A%84%E6%95%B0%E9%87%8F%EF%BC%8C%E5%A6%82%E9%85%92%E5%BA%97%E6%88%96%E8%88%AA%E7%A9%BA%E5%85%AC%E5%8F%B8%E9%A2%84%E8%AE%A2%E3%80%82″>

《优化移动表单以获得更多转化 - 以及竞争优势》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

段。 当选项有限时,分段控件允许用户一次查看所有可用选项:

《优化移动表单以获得更多转化 - 以及竞争优势》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

滑块。 滑块可用于大范围或具有Min-Max变量的滑块:

《优化移动表单以获得更多转化 - 以及竞争优势》

日期选择器。 日历选择器而不是日期,月份和年份的下拉列表可以减少点击总数。 (除非你要求出生日期 – 在日历中点击几十年将是一次折磨。)

%E5%90%8C%E6%A0%B7%E7%9A%84%E7%A0%94%E7%A9%B6%E5%8F%91%E7%8E%B0%EF%BC%8C%E5%AE%8C%E6%88%90%E4%B8%8B%E6%8B%89%E9%80%9F%E5%BA%A6%E5%87%8F%E6%85%A2%E4%B9%9F%E5%8F%91%E7%8E%B0%E5%8D%95%E4%B8%AA%E6%97%A5%E6%9C%9F%E9%80%89%E6%8B%A9%E5%99%A8″>

《优化移动表单以获得更多转化 - 以及竞争优势》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

值得注意的是,Luke Wroblewski的研究%E5%8F%91%E7%8E%B0%E4%BA%86%E7%9B%B8%E5%8F%8D%E7%9A%84%E6%95%88%E6%9E%9C“>

要增加选择后的清晰度,请考虑显示用户选择的一周中的总时间和天数:

《优化移动表单以获得更多转化 - 以及竞争优势》
%E5%9B%BE%E5%83%8F%E6%9D%A5%E6%BA%90“>

对于不适合上述替代方案的大范围 – 例如美国用户的状态预测输入字段(一种自动完成形式)可以在用户输入第一个字母或两个字母后快速缩小长列表

野战面具

%E5%AD%97%E6%AE%B5%E6%8E%A9%E7%A0%81“>可以通过显示可能具有多种格式的响应的正确格式(如电话或信用卡号) 来帮助减少错误并加快表单完成

《优化移动表单以获得更多转化 - 以及竞争优势》
一旦用户输入字段,字段掩码就会显示正确的格式。 ( 图片来源

掩码还可以忽略无效输入 (例如,信用卡号中的斜线)并减少为了数据验证而分割字段的冲动(例如,将电话号码设置为三个单独的字段)。 在移动设备上移动字段之间,特别是具有小触摸目标的字段之间的移动是麻烦的。

%E6%AD%A3%E5%A6%82Luke” wroblewski> , 面具也应该:

  • 从一开始就可见。 如果掩模逐渐显露出来,如果他们在正确的轨道上,用户仍然会从输入到输入进行猜测。
  • 不包括占位符文本。 这样做可能会导致用户跳过某个字段,因为它显示为预填充。 预期输入的概述,例如“() – ”可以设定期望,同时也明显看起来不完整。 如果您使用占位符文本,显然不正确的响应“(XXX)XXX-XXXX”可能会导致更少的用户跳过它。

占位符文本不是表单标签的替代品,因为一旦用户开始输入它就会消失,迫使他们依靠短期记忆来进行表单字段识别,如果该字段稍后返回错误则会%E5%8F%98%E5%BE%97%E6%9B%B4%E5%85%B7%E6%8C%91%E6%88%98%E6%80%A7“>

现场标签

移动设备上的压缩空间使得易于阅读的现场标签至关重要。 单独的纵横比(纵向而不是横向)有效地强制要求上面的标签而不是表单字段。 否则,几乎任何条目都需要水平滚动才能同时查看标签和输入字段。

一种解决方案是浮动标签, %E9%80%9A%E8%BF%87CSS%E6%88%96

《优化移动表单以获得更多转化 - 以及竞争优势》

该解决方案保留了屏幕空间,同时还保留了持久字段标签。

特定领域的键盘

自2014年发布以来,HTML5允许开发人员定义输入类型(例如“电子邮件”,“电话”,“日期时间”等),以便在用户使用该字段时%E8%BF%94%E5%9B%9E%E9%80%82%E5%BD%93%E7%9A%84%E7%A7%BB%E5%8A%A8%E9%94%AE%E7%9B%98“>

键盘类型提供了明显的(电话号码的数字键盘)和微妙的(包含电子邮件地址的“@”符号)便利。

《优化移动表单以获得更多转化 - 以及竞争优势》
“tel”和“email”输入的默认键盘类型。 请注意,电子邮件输入中包含“@”符号。

在线验证

在大多数移动表单上,用户无法看到整个表单 ; 要查看所有字段,必须进行垂直滚动。 这使得%E5%AE%9E%E6%97%B6%E7%9A%84%E5%9C%A8%E7%BA%BF%E9%AA%8C%E8%AF%81%E6%88%90%E4%B8%BA%E4%BB%BB%E4%BD%95%E8%AE%BE%E5%A4%87%E4%B8%8A%E8%A1%A8%E5%8D%95%E7%9A%84%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5″>

《优化移动表单以获得更多转化 - 以及竞争优势》
描述性文本 – 而不是简单的绿色或红色突出显示 – 可帮助用户快速纠正错误并确保视障用户的可访问性。

如果用户需要滚动到表单顶部以查看错误,然后向下滚动到特定字段,他们可能会迷路或沮丧并放弃。

其他优化

形成自动对焦。 自动对焦( %E5%8F%A6%E4%B8%80%E7%A7%8DHTML5%E5%B1%9E%E6%80%A7“>

暗示性的字段大小。 相对于预期输入的长度确定字段大小(例如,与邮政编码相比,街道地址的较长字段)向用户提供关于输入期望的微妙提醒。

禁用提交按钮。 用户点击提交表单或完成购买后,禁用按钮可防止可能导致重新提交的意外点击或在转换完成之前将用户导航到异地。

4.测量表单性能的工具

粒度测量有助于识别表格中的故障点:

  • 表单的哪些部分需要用户最长的完成时间?
  • 用户最常放弃表格?

反过来,这些问题点可以实现更智能的测试。 Google跟踪代码管理器(GTM)能够通过六个%E5%86%85%E7%BD%AE%E8%A1%A8%E5%8D%95%E5%8F%98%E9%87%8F%E8%B7%9F%E8%B8%AA%E8%A1%A8%E5%8D%95%E6%8F%90%E4%BA%A4%E7%9A%84%E8%AE%B8%E5%A4%9A%E6%96%B9%E9%9D%A2%EF%BC%9A”>

  1. 表单类:gtm.elementClasses
  2. 表单元素:gtm.element
  3. 表格ID:gtm.elementId
  4. 表单目标:gtm.elementTarget
  5. 表格文字:gtm.elementText

Simo Ahava发布了几个关于如何通过GTM %E8%B7%9F%E8%B8%AA%E8%A1%A8%E5%8D%95%E6%8F%90%E4%BA%A4%E7%9A%84%E6%8C%87%E5%8D%97%EF%BC%8C%E5%8C%85%E6%8B%AC%EF%BC%9A”>

%E6%88%91%E4%BB%AC%E7%9A%84Facebook%E5%B0%8F%E7%BB%84%E6%9C%80%E8%BF%91%EF%BC%88%E7%BB%9F%E8%AE%A1%E4%B8%8A%E6%97%A0%E5%85%B3%E7%B4%A7%E8%A6%81%EF%BC%89%E5%85%B3%E4%BA%8E%E8%A1%A8%E5%8D%95%E5%88%86%E6%9E%90%E7%9A%84%E8%AE%A8%E8%AE%BA%E4%B8%AD%EF%BC%8C” formisimo>

跟踪更有限的表单分析集的其他工具包括Clicktale%E5%92%8C

结论

移动表单限制用户交互 – 没有鼠标,不完整的关键字和较小的垂直屏幕。 这些限制使得直观和高效的用户体验变得更加重要,有时甚至更难以交付。

但他们也更容易做出一些选择; 并非每种形式的“优化”都需要进行测试。 为适当的领域提供合适的键盘是一个明显的胜利。 因此,也是一个合理大小的触摸目标或使用字段掩码来拒绝无效输入。 这些用户体验改进是所有站点的直接机会,而不仅仅是高流量站点。

与所有在线工作一样,表单优化不是静态规程。 较新的功能,如Touch ID,面部识别或信用卡照片扫描,可以在关键时刻实现简化的交互,每年在移动设备上更频繁地发生。

相关文章

点赞

发表评论

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