下载我们的免费电子书43 A / B检测案例研究,从世界领先的公司寻找考试创意和灵感。 现在下载

优化博客

构建您的实验计划的提示和技巧



电子商务主页设计最佳实践主页通常是电子商务网站上的最高流量页面。此单页负责建立信托,驾驶销售和创建终身客户。

创建有效的主页可能是一项艰巨的任务。如果您有数百或数千个产品的产品,则难以将有效展示您产品的主页,而不会过于压倒性。诱惑往往是扔掉你在主页上的一切,导致一个复杂的混乱吓到了客户。

为了帮助提供关于最新电子商务主页设计最佳实践的建议,我们在电子商务领域达到了十几个专家,他们分享了最佳提示,了解如何创建有效的主页。


Alejandra Meza.

Alejandra Meza.

UX总监 斯特拉& Dot

跟随 @alejandra_z_m. on Twitter


利益相关者总是想要一个闪亮的新设计,但经常不’T理解为什么或实际上是什么问题。

1)知道你的问题是什么

弄清楚为什么你的利益相关者想要改变网站– Create goals and 明确假设 在设计前的页面。它 ’对所有人都同意成功指标是重要的。完全询问您网站有什么问题。找出转换, 弹跳率 并获得客户的定性反馈。看看不同的受众段,了解问题所在(例如’s just mobile).

2)牢记你过去的学习

每个人’第一次倾向是撕掉一切,但通常你实际上就是做正确的事情。先前的A / B测试,访谈和分析是查看页面的哪些部分正在执行的方法。

3)具有定性和定量反馈

在重新设计之前,在A / B测试之前获得定性反馈。通常,A / B测试不会达到意义,只有通过 你发现为什么的定性反馈。在测试之前这样做可能会为您节省一轮测试。

4)测试多种变化

通常,您的利益相关者只想测试新版本与旧版本。问题是你赢了’知道如何解释测试结果。这是设计吗?是内容吗?在新设计中测试旧内容,以及旧设计中的新内容。在阶段测试页面的部分也是另一种理解为什么设计赢或丢失的方式。

5)在下一步中有游戏计划和对齐

我们都会喜欢100%的赢利率,但如果结果不是你的预期,就会出现会发生什么。由于所有的工作和努力,利益相关者可能希望通过努力推出新设计。相反,尝试专注于如何迭代设计或对旧设计表现更好的事实感到舒服。在您的测试摘要中,陈述从转换视角下向失败设计前进的含义 获得买入.


那里se Kokot

那里se Kokot

高级体验建筑师 Lyonscg.

跟随 @designforusers. on Twitter


主页通常是您网站的第一印象客户,因此重要的是响亮和清晰地传达您的品牌信息。成功的电子商务主页有什么策略?

1)保持简单

在线零售商传统上使用主页作为传达关于公司及其产品的一切的地方。然而,研究表明,页面上的竞争越大,最终用户必须进程越多,而且经历了更多的认知负载。最终结果是*所有*消息都稀释,客户没有强大的方向。

提供一个强大的统一消息,代表您的品牌,并使用它来指导您的用户可以帮助他们快速开始购物过程。 A / B测试 可以帮助指导哪些消息提高转换最多。

2)让事情找到

曾经去过没有全球导航的主页,没有明显的方法可以找到你正在寻找的东西吗? 研究表明了 当用户没有找到他们正在寻找的东西时,他们很快就会离开。

达到最低限度,应在主页(和每个页面)上提供全局导航,作为用户查找产品的方式。但在那里拥有最追捧的产品也非常重要。不要指望您的客户成为侦探!

3)责任

曾几何时,在线零售商有单独的移动和桌面设备网站。我们越来越多地看到转移到响应的电子商务网站,其中使用一个码基,并且内容不同地展示出不同的观点以适应各种视口。

这种方法有多种好处,包括改进的搜索排名,跨设备的无缝内容更新以及一致的客户体验。但另外,使用统一的代码库更容易做A / B测试。


Kenny Rosenberg.

Kenny Rosenberg.

VP,设计/开发 品牌价值加速器

跟随 @ikennyrosenberg. on Twitter


1)陈述明确的价值主张

访客需要立即理解您的品牌在市场上的竞争对手。为什么消费者应该选择购买你:你的价格降低了吗?你有更快的运输吗?您有更好的产品质量吗?

从您的消费者到达您的网站时,您需要立即产生影响。一个公然明确的价值主张的一个很好的例子是 Indochino.。客户观点的第一个横幅,“现代制作,以衡量从最好的羊毛制作的西装,即时秋天,然后”现在商店“CTA搭配,”节省50%的选择秋季套装。 “因此,他们的客户不仅是他们有优质的量身定制的套装,而且他们也知道他们可以为它带来良好的价格。它立即吸引印度诺州客户,并将他缩小到转换的一步。

2)使用直接链接到产品集合中的迷你图像

为什么驱动流量收集页面?重要的是不要将客户隔离为一个特定产品–让他们有机会探索多个产品,并在不击中后按钮的情况下自由浏览您的收藏。他们是否透过了 英雄图像,瓷砖或其他形象类型,您正在进行用户体验更令人愉快的体验。

一个很好的例子是MVMT手表。到达网站后,您可以轻松地单击到首选产品类别。

3)简化导航,添加搜索栏

帮助游客找到他们正在寻找最少量的摩擦。考虑添加搜索栏并为您的观众提供最少的方法。这就是你在导航中所带来的导航。众多品牌将希望在导航思想中放弃许多选择更好。相反是正确的。购物者的选择越多,越难。


瑞克威尔逊

瑞克威尔逊

总统合唱团 Miva,Inc。

跟随 @rickmiva. on Twitter


第一印象对品牌至关重要。在电子商务中,你的第一印象往往是主页。您所做的设计选择可以确定访客是否继续购物或完全留下您的网站。

了解主页的重要作用是创建繁荣的在线商店的关键。

1)让您的主页游客

这似乎与上面的句子相矛盾,但这是真的。您希望访问者进行购买,除非您只销售一个产品,否则这些购买赢得了’t在主页上

您的主页需要提供清晰的导航和一个很好的流程,以保持用户兴趣以发现更多。

2)不要压倒用户

我们都听到了是否应该保留您的所有网站的重要内容的论据 在折叠之上。无论您站在哪里,事实都仍然是页面的最大可见性是它的最大部分。

这应该为您提供所有原因,不能使用链接,消息传递和PROMOS打包每个像素。你越少投掷用户,他们更容易做出决定下一步做什么。

简化导航和消息传递,以限制更广泛类别的决策,并将复杂的过滤留给子类别页面。

3)了解您的受众

在制定设计决策之前,深入了解您的分析并了解有关客户的更多信息。

他们使用什么浏览器或设备?他们用来找到你的搜索条件吗?最受欢迎的产品或类别?了解此信息将帮助您在主页上显示最相关的内容。

4)令人难忘

是什么让您的商店比亚马逊,沃尔玛或竞争对手购买更好的地方?如果客户可以购买,那将鼓励他们举办另一个?

主页是展示竞争优势,个性的好地方,或者对您的业务非常酷和独特的东西。留下持久的印象,让你的主页有些灵魂!

主页是您的业务的强大网关,如果正确杠杆,可以成为您的在线销售的主要差异制造商。


Mari Corella.

Mari Corella.

美丽&时尚电子商务总监 MaricOrella.com.

跟随 @marinekko. on Twitter


谈到主页时,最好的建议是 保持简单,以避免压倒客户。

  • 页面的左上部分将获得最大的视图,因此请使用该空间进行特殊优惠等关键消息。将您的导航类别放在上面 最突出的类别.
  • 确保搜索在页面顶部突出显示。
  • 将最强大的内容故事放在上面,以便他们获得最大的观点。
  • 避免在页面上具有太多内容,因为内容进一步下来页面将具有递减返回。
  • 从背景中保持较大的文本并以对比的颜色保持最小,以便读取易于阅读。呼叫采取行动按钮,特别是“流行”,同时将其清除为客户,如果他们单击它们时,他们究竟会被带走。
  • 电子邮件注册应该突出,无论是朝向顶部还是在弹出窗口中,只显示到尚未注册的客户。
  • 信息内容(例如关于我们或送货信息)应保持在页面底部。

当然,没有一种尺寸适合的方法,可以应用于所有主页。 A / B测试颜色,内容放置,优惠和主题,以确定您的在线客户的最佳体验。这里’s a list of 电子商务A / B检测案例研究.


詹姆斯威斯

詹姆斯威斯

铅网/ UX设计师 博纳扎

跟随 @roboospent. on Twitter


在Bonanza,我们最近推出了我们电子商务主页设计的全面大修(Yay!)。我们发现并成功实施了以下最佳实践,您应该为自己的首页重新设计项目提供帮助。

1)了解您的受众

即使是一个精美的主页,如果对于访问它的人而言,它也会失败。研究谁来到您的网站,他们正在寻找什么,以及他们为什么选择竞争对手。使用此洞察力来确定页面上的内容,并衡量其执行方式。

2)讲故事

您的主页是一个机会为您的公司创造印象 - 不仅仅是您卖的东西,而且您是谁以及为什么人们应该和您一起购物。虽然人们浏览,请帮助他们了解更多关于使品牌独特的东西的更多信息。

如果您展示了许多产品,则会使用您的品牌的评论,推荐,策划集合和内容进行平衡。使用导航来突出显示与竞争对手不同的产品。

3)不包括一切

适合在主页上的一切诱人,但请记住,太多可能会压倒。它与最重要的内容竞争并降低了其有效性。

从移动设计开始,可以帮助优先考虑什么非常重要。如果您有很多所需内容,则为5-7组的“块”事物可以使页面更易于扫描。这里有一些 移动A / B测试提示 帮助设计移动优化的体验。

4)推出后计划页面

获取主页现场只是第一步。在此之后,将页面以新鲜内容更新以保持人们的兴趣,这是重要的。

创建可以轻松更新内容的空格。使用内容日历和设计模式库以确保可以定期开发新内容并快速创建。如果可能,请使用自动内容模块(适用于新的或推荐项目)以减少对手动更新的需求。


艾伦沃尔顿

艾伦沃尔顿

首席执行官 spyguy安全

跟随 @allenthird. on Twitter


以下是电子商务主页设计的2个提示:

1)添加描述您是谁的视频

向我们的主页添加解释器视频对于为我们的品牌建立信任非常有帮助。看着我解释了一个间谍的人安全让客户与我们做生意更舒服。

我们从在我的主页视频中看到我的客户一直到达电话,并决定与我们的业务相信,而不是与竞争对手相信。访问我们的主页的一半以上的客户单击播放按钮。

2)在您的网站顶部放置电话号码

那里’今天有一个流行的趋势与电子商务店–他们隐藏他们的电话号码。他们不’要在电话中绑定,所以他们隐藏电话号码以释放资源。从我什么’学到了,顾客讨厌这个。

我们将我们的电话号码放在明天的视线中,所以客户知道我们’很容易抓住并愿意和他们谈谈。


彼得鲁

彼得鲁

数据铅at. DT.

跟随 @mrpeterluu. on Twitter


1)保持一般

特征类别级内容而不是主页上的特定产品。主页是导航条目点,帮助用户浏览到他们的预期产品和/或内容。此时,个别产品只会与非常少数的访客相关。

2)保持新鲜

返回访客通知更改,并将与新的相关内容进行聘用。如果可能,每周更改新闻头条,图像和竞选活动。搜索引擎也喜欢新鲜的内容。

3)保持简单

太多的选择分散和破坏了。拆下旋转木马,计算器,弹出窗口,镶字器,汽车播放视频。


丽莎亨肯

丽莎亨肯

Web内容总监 在游泳中

跟随 @lisahendron. on Twitter


客户基地越来越地转移到移动世界。 坐在你的(巨大的)iPhone 6加上并为你的下一个小黑色连衣裙店铺等等,这是等待直到你到达你的桌面。电子商务网站需要迎合这一新观众,或者他们将忽略大的人口和失去收入。

以下是我们通过我们的移动设计努力学习的一些提示。

  • 导航需要易于理解。
  • 用户喜欢使用搜索栏,不要隐藏它!
  • 预测搜索框结果非常有用。
  • 保持您的呼叫雅致,但仍然存在。
  • 您的手机与您联系到社区,使您的社交媒体链接引人注目。
  • 设计用于手指水龙头,而不是手写笔或鼠标。
  • 不要害怕设计大!!你不希望人们眯着眼睛,试图缩放不恰当。
  • 点击次数较少,相同的更幸福的购物者!
  • 利用刷卡,点击和捏合以显示更多信息。
  • 最后,不要害羞地从响应的网站上意识到,如果正确实施,它具有惊人的能力!
  • 阅读更多关于优化移动商店的更多信息 这里.

加勒特特权

加勒特特权

创始人&创意总监 偶数

跟随 @g_perks. on Twitter


那里 are two approaches 为建立一位伟大的电子商务主页,每个电子商务主页都根据提供的产品或服务。一方面,简单的主页已被证明可以推动最高的 转换率。如果您有一个产品或少数产品,那么简单性是您最好的选择。

另一方面,如果你的话,你可能不会有一个很好的方法’销售大型或多样的产品库存。客户需要更多信息来了解大量产品,并且他们需要清晰的路标,可以快速有效地指导它们’s best for them.

您可以在Amazon.com和Uber.com中看到每个方法的大示例。亚马逊拥有巨大的产品,而优步专注于三四个密切相关的产品。像优步一样的主页’如果您可以简化您的产品,则S会更好地转换。如果您的产品更像是亚马逊 - 广泛,众多而不是密切相关 - 那么你’迫使你的主页做了更多的事情。在这种情况下,请确保清楚地了解每个客户类型,并在主页上为每个非常清晰的路标提供,将它们指向他们想要的分支或类别。

人们很不耐烦。 如果深刻的简单是一个选择,请与之使用. 如果没有,你至少需要深刻的清晰度。努力工作,让自己了解您的复杂产品,在您的客户中组织和命名它们’词汇。如果您的复杂主页是’T立即直观,人们赢了’花点时间了解它 - 他们会离开。


乍得里德

乍得里德

通讯总监 jotform.

跟随 @ thebig3c. on Twitter


电子商务店忽略的一个简单的事情是在主页上包含真实人物的图片是多么强大。

当你’要求某人’它通过互联网,它’始终是建立信任感,图片有助于建立这种信任。出于同样的原因, 制作“About Us” page easy to see from the homepage。人们更有可能与他们所知道的人交易。隐藏“About Us” link 折叠下方 因为这个原因而不是建议。

I’在现在的一些不同的电子商务公司工作,每次我们大修我们的关于页面,我们都会在销售中看到一个上涨。 Google Analytics向我们展示了它总是高贩运,所以我们需要使A / B测试成为优先级。主页应该很容易在顶级栏上找到。


丽莎楚

丽莎楚

首席执行官 黑色n bianco.

跟随 @blacknbianco. on Twitter


精心设计的电子商务主页对于客户在商店感受舒适的购买方面至关重要。学习一些基本技巧以保持客户订婚和通知将有助于提高您的转换。

您的主页必须拥有的第一个工具是一个搜索框。 让您的搜索栏全部且易于发现。 大多数客户知道他们正在寻找什么,如果他们可以’在几分钟内查找,他们会反弹并返回搜索引擎。将搜索栏放在页面底部是必须避免的东西。永远记住通过设计的功能。

由于我的主页的设计,我犯了在我的页面一侧放置我的搜索栏。客户无法找到我的搜索栏,并在页面侧面的内容中感到困惑。由于无法找到他们想要的东西,我的反弹率约为49%。这是一个简单的修复,在我的搜索栏很容易观看后,我的反弹率明显下降到22%。

审理页面的另一个重要方面是导航栏。 确保您的客户可以在您的网站上轻松找到途径。 拥有一个设计不良的导航栏可以轻松杀死您的业务。顾客不’想要浪费时间在不值得信赖的地方。

如果客户从未听说过您的公司’害怕向他们展示与您的推荐和关于主页的评论的链接。 在最初的几分钟内建立潜在客户的可信度将导致您提高销售额。 您的电子商务主页是您的业务的脸,所以请记住,可以轻松访问和专业。


Josh Stutt.

Josh Stutt.

Vaporfi省电子商务总监

跟随 @Vaporfi. on Twitter


我喜欢想象像物理店面的主页。它需要在视觉上吸引和吸引访问者来探索该网站的其余部分。

除了视觉上诉之外,必须旨在旨在轻松地将访客直接指向他们感兴趣的产品。 我不’想要他们在主页上闲逛 - 我希望他们检查我的产品并购买。如果有’太过分了,或者购买的路径并不直观,那么访客将迷失在洗牌中并最终离开。

作为一个例子,我们曾经在主页上有标准翻转横幅横幅和中心。我们决定运行A / B测试,其中将它们交换为2个静态图像,与我们的2个主要产品类别并列。结果很清楚。在我们的测试期结束时,我们已经实现了一个 主页游客每届会议收入12%。页面上的时间显着下降,但我们认为这是一个积极的,因为它意味着人们在花费 更少时间弄清楚去哪里和更多时间购物。让人们快速轻松地去(以及你想要他们去的地方),你将在你的努力中更成功。

视觉上吸引人,容易理解,明确的组织结构,快速装载时间是我团队的首页成功的最大驱动因素。永远记住,它’不是你个人认为的更好,它’关于数据告诉你的更好。


詹姆斯沃尔特斯

詹姆斯沃尔特斯

发展总监 Pixflyte.

跟随 @pixelflyte. on Twitter


我的公司Pixflyte是一家完整的服务网络设计和开发公司,位于田纳西州纳什维尔,拥有丰富的电子商务经验。

在Pixelfyte,我们已经了解到电子商务的主页设计中最大的陷阱之一并未为您的产品提供清晰的简洁途径,最小咔嗒声。主要导航应该是持久的,很容易理解,标题是简短的。理想情况下,产品搜索栏也应成为主导航的一部分,应通过自动完成功能定义。

对于主页上的内容,主要目标应该是尽可能多地删除混乱。不要利用大型旋转幻灯片以特色。研究表明,主页幻灯片无效,很少参与客户。相反,专注于单个特色产品,具有明显的呼叫动作,将客户直接带到产品上。此外,不要压倒用户在特色产品下面的内容太多。不要尝试为每个类别提供所有产品或产品。提供太多的选择将实际上疏远和混淆您的潜在客户。

底线更容易为访问者制作,您将越有可能提高您的销售额。通过使您的导航可以如此可理解并在主页上限制杂乱,您将实现电子商务网站的最终目标:将访客转换为快乐客户。


Anna Daugherty.

Anna Daugherty.

营销经理 Stratashops.

跟随 @stratashops. on Twitter


我们在2015年初完成了完整的网站重新设计,自从我们’通过推出我们的网站和营销,以更好地利用我们的新设计。这是我们的一些事情’ve learned:

图像规则:当您在线销售产品时,人们喜欢看,但他们不’天必要读。引人注目的图像和可点击的照片使消费者想要更多地探索产品。太多的文字可以让人们有点玻璃眼镜,特别是如果你出售复杂的产品。伟大的产品图像绝对将一些产品放在我们的CTR顶部。清晰,易于理解,简单的消息也很重要,可以充分利用您的产品页面。

SEO.很重要:是的,人们喜欢大,泼溅图像和光滑的图形,但网站仍然需要在有机搜索条件下进行井。优秀的,关键词友好型副本和内容,良好的标题标记以及其他优化应该是任何电子商务网站的重要组成部分。刷新复制始终如一地更相关,并有助于改善您的 搜索引擎优化.

点评Rock:让人看待您的产品的好方法是包括以易于理解的方式显示这些产品的良好评论。无论您是有利于审查的明星评级或报价,将客户反馈建立在您的网站中,可以帮助增加客户在购买之前寻找的可信度和权限。


你在电子商务网站上工作吗?我们’d喜欢在下面的评论中听到你的提示!

优化X.