为您的主页赢得更多客户和销售的最佳布局设计层次结构

铺设您的在线商店会引发各种问题。 您的主页是该网站的中心 你网上商店最好的东西,包括图像滑块,购物车按钮,产品缩略图和按钮以及电子邮件营销订阅表单等组件。

每个都是必不可少的,但考虑到主页通常是您网站上最常访问的页面,您如何组织它们以吸引更多客户? 如果我们看看一些最有创意,最成功的电子商务商店,我们可以找出一个标准的布局层次结构,为每个组件在主页上的位置生成一些模板。

我们将从主页的顶部开始,然后继续努力。 继续阅读以了解主页的最佳布局设计层次结构,以吸引更多客户。

您的徽标向左或中心(和标题组件)

您的主页标题也涵盖整个站点,因此这些模块需要深入思考。 标题的目标是快速向人们展示您的网站的所有内容,并为用户提供一些功能最强大的按钮和字段以查找内容。

标志

徽标位置

从您的徽标开始。 设计精美的徽标在这里提供了最大的价值,但您需要确保它位于标题中间的左上角。 人们从左到右阅读,徽标通常会提供网站提供的内容。 如果您的徽标没有立即解释您的公司,请在徽标的下方或侧面添加一个简短的标语。

搜索栏

搜索栏的重要性

每个电子商务网站本身都是一个小型搜索引擎。 如果你的一个顾客,让我们叫他史蒂文,登陆你的主页寻找项链,他只有几个选项来找到他需要的东西。

第一种效率较低的方法涉及点击其中一个菜单导航类别。 第二种方法通常会让用户更快地访问正确的页面,它是一个搜索栏。 如果搜索栏隐藏在滑块下方,或者它位于侧边栏的某个位置,则会强制客户筛选杂乱,以执行简单搜索。

将其放在标题中并清楚说明。

购物车图标和按钮

在2015 06-01-AM 11.25.00屏幕快照

由于许多在线商店将购物车图标放置在网站的右上角,您可以假设大多数客户本能地在那里查找以找到购物车中的商品。

不幸的是,在购物车模块方面,您通常会遇到主题或电子商务平台提供的任何内容,但如果您在市场上更改设计,这里有一个指导原则:

  • 包含购物车图标
  • 合并一个链接或图标,从网站上的任何页面提供一键式结帐
  • 显示一个数字以指示购物车中有多少商品

送货公告

在2015 06-01-AM 11.25.09屏幕快照

创造紧迫感的一种美妙方式是在用户购买一定数量的产品后提供免费送货或其他奖励。 如果您选择在策略中包含类似的内容,则必须在您的网站标题中发布公告。

上面的截图显示了Kutoa公司如何在不占用太多空间的情况下解释其运输政策的一个很好的例子。

季节性横幅

这类似于我们上面谈到的运输政策,但如果您持有季节性促销或特殊优惠,您希望人们如何了解这一点? 在标题中预留一个空间,用于小型促销横幅。 通过这种方式,当假期滚动时,您只需放入图形并将其保留,直到促销结束。

登录/注册按钮

这是电子商务主页上的主要支柱之一。 在标题中清楚地显示登录/注册链接。 它为客户创建了一个无缝的结账流程,您可以收集一些客户信息。

带有适当选项卡的导航菜单

您的菜单项完全取决于您运行的业务类型,但显然需要将其包含在主页层次结构中。 最好的策略是记下您希望客户先前移动的位置,然后根据该选项选择菜单项。 你主要卖衬衫吗? 让您的第一个菜单项之一直接链接到您最受欢迎的衬衫。

图像或滑块与覆盖的号召性用语和按钮

CTA滑块

图像滑块位于标题正下方,用作分享产品精美照片的方式。 只有图像的滑块是没用的。 整合号召性用语和按钮,将用户推送到您最受欢迎的产品或促销活动中。

在滑块中包含四个或五个幻灯片,并根据您自己的策略更改它们。

产品缩略图网格或滑块

缩略图作为滑块或网格

在此 Shopify博客解释了如何提供太多选择让客户感到困惑,推动他们离开你的网站或减少购买。 虽然您的主页在图像滑块正下方需要一个产品网格,但请考虑包装超过四个或五个项目。

电子邮件营销订阅表

收集电子邮件以发送未来的促销和新闻简报是留住客户并使其保持循环的最简单方法之一。 这是受欢迎的电子商务商店在主页上的简报注册位置方面有所不同的领域之一。 但结论很清楚:如果您希望人们注册,您必须在主页上放置注册表单。

第一种方法是在标题中使用注册表单命中用户。 这假设您的时事通讯提供高质量的内容,您不会感到尴尬直接营销。
在标题中添加注册

其他商店在共享简报注册表单时更喜欢侧边栏或页脚。 我注意到,当他们不发送许多电子邮件时,在线商店通常会将表单放在页面底部附近。 他们只是试图收集电子邮件以发送偶尔的促销活动。
在2015 06-01-AM 11.25.39屏幕快照

我最喜欢的电子邮件获取策略是弹出窗体,它会在用户进入您的网站几秒钟后显示出来。 这些通常会产生最多的订阅,您可以清楚地说明客户收到的回报。
弹出窗口

侧边栏或基于网格的布局?

侧边栏提供了一个独特的机会来整合您不太重要的组件,同时仍然为他们提供他们应得的曝光。 类似的方法就是我们所说的网格布局,其中整个主页涉及一个方格模块,方形模块彼此相邻堆叠。

基于网格的布局

边栏中包含哪些实体组件?

  • 您博客的按钮或链接
  • 促销或季节性横幅
  • 媒体链接
  • 社交模块或链接
  • 关于我们的小部件或区域,解释网站的所有内容

最新的鸣叫

页脚

您的大多数客户不会向下导航到页脚,但需要一些重要且不太紧急的链接。

页脚

我经常发现将完美的电子商务页脚放在一起是一项繁琐的工作,因为很容易忘记一些必需的项目。 这是一个让你入门的清单:

  • 联系我们链接
  • 电邮我们链接
  • 电话号码
  • 订单状态链接
  • FAQ链接
  • 社交按钮
  • 保修链接
  • 隐私政策链接
  • 博客链接
  • 送货信息链接
  • 返回信息链接
  • 公司信息链接
  • 工作链接

生成有效的电子商务主页层次结构是一门艺术,但只要稍微帮助并了解哪些区域可以转换大多数客户,您就可以将主页变成活动中心。 也就是说,如果你想到这个列表中的任何其他项目,请在下面给我们留言。

特色图片 克里斯班纳斯特

Catalin Zorzini

我是一名网页设计博客,在花了几周时间努力寻找出来之后开始了这个项目 最好的电子商务平台 为了我自己。 看看我的电流 顶级10电子商务网站建设者.