链接栏—电子商务手机主页导航替代品(汉堡菜单)

我们最近进行的AB测试表明,许多电子商务网站可以通过在移动主页顶部添加“条形”导航链接来提高移动转化率,而不是仅仅依靠汉堡菜单。 我们称之为“顶部导航链接栏”, […]

2018年10月3日

我们最近进行的AB测试表明,许多电子商务网站可以通过在移动主页顶部添加“条形”导航链接来提高移动转化率,而不是仅仅依靠汉堡菜单。

我们称之为“顶部导航链接栏”,或者只是“链接栏”。

链接栏是非常讨厌的“汉堡菜单”的替代品,它隐藏了著名的三小节背后的链接。 在谷歌搜索“汉堡菜单”的地方,你会发现“汉堡菜单”在前5个结果中都是反汉堡菜单的!

在本文中,我们将通过两个AB测试案例研究讨论链接栏概念,其中我们看到产品页面访问量和购买转换率增加。

最后,我们还将展示一系列来自流行电子商务网站的设计示例,这些网站以不同方式实现了链接栏概念。

我们的假设是,链接栏允许购物者通过暴露通常隐藏在汉堡菜单后面的产品和类别页面链接来更快地访问产品页面。 只需更少的点击,链接就更加突出,因此增加了用户进行“筛选”和看到产品的机会。

让我们来看两个案例研究。

注意:我们还可以分析您的移动电子商务商店用户体验。 详细了解我们在此处所做的工作,或加入我们的电子邮件列表,以便通过电子邮件将这些新文章发送给您

 

移动导航链接栏为拥有1000种产品的服装店增加了5%的订单

首先,我们有一个服装客户,它有9个类别(以及他们网站上的多个子类别)的1000多种产品。

所以,这是典型的电子商务公司。

移动主页的外观如何?

由于我们对客户进行匿名化,让我们使用具有类似布局的知名品牌的移动主页:Urban Outfitters。

这个移动主页的主要特征(我们客户的移动主页也是如此):

  • 基于大图像的全出血照片,根据当前的营销活动(大约每月一次)而变化。
  • 隐藏在汉堡菜单中的主导航。
  • 如果向下滚动足够远,最终会链接到类别。

这是我们测试的内容:

在变体中,我们只是将链接栏添加到主页,共有9个类别。

请注意,我们没有更换汉堡菜单,它仍然存在,仍然是导航不同产品类别的最常用方法。但它不再是最简单的方式 – 链接栏。链接栏左右可滚动,并有箭头来帮助指示。

结果如下。

首先,完成订单。 28天后,我们看到增加了5%,具有93%的统计显着性:

注意Optimizely的统计引擎使用更严格的“双尾”统计显着性计算,这没有任何意义,但传统的p值计算显示:

所以这绝不是一个“失控的赢家”。 行业惯例是,如果测试达到预定数量的访问者时达到95%的统计显着性或更高,则宣布获胜者。

但那就是最终的“惯例”。

有超过80,000名访问者,每次变化有2,300次转换事件,并且运行了整整4个星期,基本上整个测试都有变化,我们认为结论是“这很可能是赢家,更有可能在超过2%-5%的时间表现的更好。

但这只是一个指标(虽然是一个重要指标)。 如果你看一下额外的指标,这个故事会变得更有趣。

只有暴露的列表页面显示网页浏览量增加

类别页面的网页浏览量明显增加了10% –  12%(显着性达到99%),验证了我们的一个关键假设,即链接栏会向更多用户发送“筛选”。

例如,这里是我们添加的快速链接栏左侧的第一个类别链接(例如上面“B”模型中的“TOPS”链接):

其他两个类别页面显示了类似的结果。

但是,只有暴露的类别链接才能看到那些综合浏览量增加:

那些“隐藏在卷轴后面”的链接怎么样呢?换句话说,你需要使用箭头,或向右滚动以显示它们?

他们没有显示网页浏览量的变化:

对于隐藏在滚动后面的所有类别页面链接,这是一致的。

这证实了该测试的原始假设:显示产品和类别页面的链接将增加达到它们的客户数量。

当然,如果我们的链接栏右侧的类别页面没有看到网页浏览量的增加,那么隐藏汉堡包菜单后面的所有链接会使网站无法吸引购物者购买产品。

适用于您的移动网站:

  • 在你的移动主页的顶部测试你最受欢迎的产品类别的链接。
  • 尝试使栏可滚动,看看是否可以在商店中重现此结果。
  • 您是否看到过完成订单增加的迹象,就像我们一样? 也许你的商店显示的转化率比我们在上面看到的轻微的提升要明显得多。

 

案例研究2:健康食品品牌在主页上使用导航链接栏增加了29%

接下来,我们有一个非常不同的电子商务品牌,在健康食品领域有3种产品口味。
同样,主页有副本和图像和链接,但您必须向下滚动页面才能获得3个PDP的链接。
所以我们像以前一样添加了导航链接栏:

这种情况的变化直接链接到3种不同口味的PDP(每种口味都有自己的PDP)。

14天后,我们看到订单增加29%,显着性为98%。但是,此网站的流量较低,因此每次变化的测试结果仅为139次,而转换次数为107次。这很低。差异只有大约30个订单,所以我们再次提出一个限定词,即变化“可能”表现得更好。

然而,没有迹象表明它会比没有链接更糟糕。

链接栏可以帮助客户了解新产品

在这种情况下,在3种口味中,第二种和第三种味道的PDP浏览量大幅增加(上面的模型中的巧克力和草莓):访问量增加25%,77%具有99.9%的统计显着性和每次超过600次转换变异。

但是,最流行的味道没有看到太大的增加。

为什么?

在这种情况下,这个网站以其最受欢迎的口味而闻名。从历史上看,这是该品牌首次推出时唯一的口味。推荐链接不成比例地出现在那里,博客链接不成比例地链接到那个味道,主页图片和拷贝主要是关于这种味道的。

因此,在这种情况下,链接栏可以让更多客户了解公司的其他产品。

这是链接栏的一个很棒的额外好处。 请注意,这些替代口味也在汉堡包菜单中,但正如我们在第一个案例研究中看到的那样,在页面上(通过链接栏)显示主题显示这些PDP的访问者明显增加。

 

结论以及如何将此应用到您自己的移动电子商务网站

在两个非常不同的电子商务商店(1000个产品与3个产品)上进行了这两项测试,提出了类似的主题:

让移动购物者尽可能轻松地获得您的产品。

如果您有数百或数千种产品,请尽可能将链接放在最受欢迎的类别之上。在上面的第一个例子中,测试的自然迭代(尚未测试)将堆叠链接而不是让它们在一个可滚动的行中。

这将使购物者更准确地了解商店提供的商品。

这应该会让更多的访问者“向下流动”,并且可能会让测试更加明确地赢得基线。

如果您只有少数产品,请创建指向产品详细信息页面的顶级导航链接。

最后,和往常一样,你应该自己测试一下。 不要认为这些结果适用于您的商店。

上述两项AB测试都看到了对类别或产品详细信息页面访问量的明显增加,但订单率的增加并非“失控”的赢家,我们将其定义为99%+显着性,每次转化事件数百或数千次变异。

这没关系,正如我们之前所写的那样,并非所有电子商务商店都拥有那么多数据的奢侈品。 这并不意味着你举起手来不测试任何东西也不意味着你应该只使用“在一个房间里辩论设计,最响亮的声音赢得并彻底实施”的老式方法。

那更危险。

旁白:我们曾经有一位内部设计师组成的客户询问他们是否可以在桌面上实施汉堡包菜单,因为它“看起来很时尚”(捂脸)

这就是为什么测试很重要的原因,即使您没有获得转换率完美增加的图片(99%显着性,以及数周的数千次转换)

 

桌面呢?为什么这个手机是唯一的?

这与桌面无关的原因是,几乎所有的电子商务网站都公开了指向所有类别的链接(并且经常下拉到子类别,也就是“超级菜单”)。因此,从定义上来说,这几乎总是已经在桌面上实现了。

只是移动空间的限制导致了汉堡包菜单的出现。

希望这篇文章和我们分享的数据能帮助你开始思考,除了需要崩溃之外,汉堡包菜单后面的一切,并开始打开其他的可能性。

在这一点上,我们的变异并不是唯一的解决办法。以下是来自不同电子商务移动网站的汉堡包菜单替代品的几个例子。

 

电子商务移动主页示例

谁已经做得很好了?

以下是移动主页顶部有明确链接的其他一些品牌,它们完全摆脱了对汉堡包菜单的依赖:

Gap.com

盖普罗得产品和类别。它们在其移动主页顶部有与主要类别的明确链接:

照片的使用是一个很好的触摸,可能会增加与链接的参与度和某些商店的清晰度。

注意,这些链接在滚动时并不是粘性的,而指向Gap Incs页面顶部的其他品牌的链接则是。有意思的,有趣的。

Abercrombie

在服装世界里,Abercrombie选择简单地被男人和女人分开。这是值得测试的,而不是更深层次的分类,比如上面的空白:

Lowe’s

对于搜索量大的商店,Lowes.com提供了一个很好的例子,既包括搜索功能,也包括使用建议区域来推送一些类别链接。我们以前没有通过这个设备访问Lowes.com,所以这些可能只是他们想要推广的类别(相对于基于过去访问的个性化列表)。

最后,这里有一个更大胆的概念,由Cos服装,谁不需要一条薄薄的建议类别,而只是将网页的大部分用于发送购物者到正确的类别。

(注意到我们发表这篇文章的时候,Cosclothing主页已经改变了,包括在顶部的提升,而不是完整的出血照片链接到女性和男性的部门。)

它们为妇女和男子提供了充分的流血图像,然后是明确的联系。

我们很乐意和我们的一个客户一起测试一些如此大胆的东西。

最后搁置:主页通常是电子商务组织的圣地。人们为了那里的房地产而争吵和谈判。因此,即使是我们,作为第三方优化机构,也经常对网页的测试有严格的限制,更不用说从根本上重新设计它了。非常感谢让我们运行上述测试的两个客户端。

想和我们一起工作来提高你的移动转化率吗?在这里了解更多关于与我们合作的信息,或者加入我们的电子邮件列表,在我们发布这些新文章时,你可以通过电子邮件发送给你。


文章来源:https://icons8.com/articles/popular-ui-design-trends-dribbble/

作者:Devesh Khanal                   翻译:姜晓宇                    责编:崔辰皓

发表评论

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