你有没有想过为什么杂货店把牛奶放在商店后面，把巧克力放在收银台附近?
简单的: 将必需品放在商店后面鼓励购物者四处走动并浏览其他产品. 放置小物件 (像巧克力) 靠近收银台鼓励冲动购买.
这是商店设计科学的一部分. 这 正确的商店布局 可以促进销售, 提高忠诚度并帮助客户更快地找到他们想要的东西.
您的在线商店没有任何不同. 产品的组织和布局对什么有很大影响 (如何) 顾客向你购买.
在本文中, 我们将向您展示如何布局您的产品以最大限度地提高销售额和转化率.
3 选择产品布局时要考虑的事项
当您第一次接触产品布局时，它可能听起来像是一个简单的问题. 然而, 像电子商务中的大多数东西, 一旦你深入细节，复杂性就会出现. 选择产品布局时必须考虑三件事:
1. 选择
选择对电子商务商店来说是一把双刃剑. 缺乏选择意味着你限制了机会. 选择太多, 然而, 你会让访客感到困惑.
有效的产品布局本质上就是平衡这种二元性的过程. 那是: 给人选择丰富的印象, 同时仍然保持网站易于使用和导航.
科学说 做决定是精神上的负担. 当您面对购物者太多选择时, 他们可能根本不做选择.
那么你如何在你的商店布局中克服这个问题?
一种解决方案是使用特色图片来引导其他产品. 例如, 注意如何 制造网 对整个产品类别使用单独的图像 (例如“花园家具”):
将此视为吸引购物者的预告片.
理想情况下, 您会希望将最畅销或最受欢迎的产品放在首位和中心位置.
所以, 在开始布局过程之前, 列出以下内容:
- 您的整个产品系列及其各自的类别和子类别
- “畅销产品”等功能类别, “特色产品”, ETC. 以及其中的产品.
下一步是使用此信息构建组织良好的导航菜单. 注意亚马逊如何在其菜单中将产品分类.
这样做将帮助购物者找到他们想要的东西，而不会被太多的选择压得喘不过气来.
如果您的 Ecwid 商店被添加到网站, 您可以通过添加一段代码来添加导航菜单:
- for a horizontal layout
- 对于垂直布局.
Here are the instructions for Ecwid stores added on WordPress的 和 蜡 网站, 也. 在 Ecwid 即时网站上, 水平菜单仅可用.
2. 产品信息
这是您在选择商店布局时应该执行的另一个平衡行为: 显示产品信息.
您想为客户提供他们点击并进行购买所需的信息. 同时, 你不想用太多的细节让他们不知所措 – 至少在他们出现在实际产品页面之前.
在这种情况下，您的心智模型应该是简化决策并激起客户兴趣. 问你自己: 什么 最低信息 我的客户需要点击产品吗?
您会发现这个答案因商店和产品而异.
例如, 注意亚马逊如何在类别页面上只给你四个信息点: 产品名称, 价格 (包括折扣), 评级和 Prime 可用性:
在Ecwid, 您可以在 Stampled.io 应用程序的帮助下添加相似的评分和评论.
尽管此信息对于像亚马逊这样的大型零售商来说是必需的, 对于像这样的小型企业 沙 & 宝石饰品, 评分没那么重要. 因此, 类别页面仅显示产品名称和价格.
很容易陷入类别页面中提供的信息太少的陷阱. 避免这种情况的最好方法是采访您的客户并询问他们使用哪些信息来做出购买决定.
3. 店面设计
您如何设计商店将对您的产品布局产生重大影响.
电子商务商店通常具有三个关键页面:
- 主页
- 类别和搜索页面
- 个别产品页面
您选择在每种页面类型上展示的产品将决定您的客户最终购买的产品.
例如, 如果您尚未登录，请注意亚马逊如何在其主页上推广自己的产品:
商店在主页上宣传最新优惠很常见. 确保将这些优惠与您的目标受众保持一致. 最佳制造公司, 例如, 举办父亲节促销活动，牢记主要是男性客户.
专注于:
- 弄清楚您希望客户购买什么产品 (理想情况下你最畅销, 和/或利润率最高的产品)
- 保持不同页面类型的设计一致性.
无论您决定突出畅销商品还是新品, Ecwid 允许您为 主页上的特色产品 并根据需要命名.
6 电商产品布局最佳实践
虽然您当然可以为您的电子商务商店创建一个独特的布局方案, 它有助于遵循一些最佳实践.
1. 将顶级产品和优惠推到首屏
“首屏”区域是客户首次登陆您的网站时可见的屏幕空间. 实际上, 这个区域占 80% 大多数网站上所有观众的注意力.
考虑到这个空间受到的关注, 将您的顶级产品放在首屏是个好主意. 这可以包括:
- 最新优惠, 销售和折扣
- 畅销产品或产品类别
- 最近推出的产品 (在购物季开始时效果最好)
在 目标网站, 例如, 您会在页面顶部看到最新优惠:
如果你有很多优惠, 考虑添加一个滑块, 就像沃尔玛的这个例子. 另请注意导航菜单下方的促销活动:
一些时装零售商避开传统布局，转而提升品牌形象. 在 ASOS, 例如, 你会得到一个品牌形象，可以选择“选购男士”或“选购女士”.
当您尝试通过产品图册宣传品牌愿景时，这种策略会奏效. 大多数零售商, 然而, 使用传统产品会做得更好-首先在折叠布局之上.
在类别页面上遵循相同的想法: 将您最畅销和评价最高的产品推向首屏. 例如, 查看亚马逊的类别页面:
2. 混合水平和垂直布局
您基本上可以通过两种方式在任何页面上布置您的产品: 水平或垂直.
水平布局保持静态. 页面边缘有一个按钮可以进一步滚动列表.
这个来自亚马逊的例子更好地说明了事情:
在Ecwid, 最近浏览的产品 也水平显示. 您可以选择要在店面顶部或底部显示的商品数量.
相关产品 是另一个水平方向的部分. 该组中的产品是为每个产品页面单独设置的，允许通过高度相关的订单添加来定位您的客户. 您可以在产品页面和购物车页面上显示它们.
相比之下, 垂直布局没有这些滚动按钮. 反而, 向下滚动时，您会看到越来越多的产品呈网格状排列. 像这样:
理想情况下, 你应该混合使用这两种布局:
- 水平布局，当你想显示很多类别的一些产品时, 例如在最近查看的产品中
- 当您想显示同一类别的大量产品时的垂直布局, 例如一个搜索和类别页面
3. 遵循惯例和用户期望
在某些情况下，您会希望自己的设计与众不同. 产品布局不是其中之一.
您的产品布局旨在引导用户登陆您的网站. 传统的布局确保他们找到他们想要的东西并且不会迷失方向.
惯例, 当然, 因行业而异. 然而, 有几件事你必须考虑:
使用网格布局
在网格布局中, 产品排列在大小相同的长方形盒子中, 像这样:
这种布局长期以来一直是电子商务网站的惯例. 您的客户不仅会熟悉它, 它也适合展示产品. 更远, 它可以很好地扩展 – 你可以在小屏幕上只显示一个框, 或在较大的盒子上扩展到几个盒子.
使用此布局时, 确保盒子大小相同. 正如本案例研究所示, 使用同样大小的盒子可以增加每位访客的收入 17%.
如果您使用 Ecwid 出售, 这对你来说不是问题——Ecwid 有一个大小相同的网格，可以自动适应不同的屏幕.
在产品列表顶部显示导航
您应该遵循的另一个惯例是将排序选项放在页面顶部.
客户已经开始期待这个展示位置，当他们登陆类别页面时自然会看这里.
用面包屑定位客户
面包屑是导航元素，向用户显示他们从主页开始的路径, 像这样:
将它们添加到页面顶部有助于定位访问者. 它告诉他们他们所在的页面或类别以及他们如何返回主页.
4. 专注于视觉效果, 但不要忘记产品页面上的文字
在线的, 展示产品的唯一方法是通过视觉效果. 这就是为什么大型产品图片以提高电子商务转化率而著称的原因.
然而, 虽然视觉效果很重要, 您的布局还应该为描述性文字留出空间. 好的文案不仅描述了产品, 但也有助于销售它和你的品牌.
例如, 考虑 BestMadeCo 如何在其主页上使用强大的副本来销售最近推出的产品. 布局有助于文本与图像完美搭配.
产品文案 在产品页面上尤为重要. Your layout should give customers all the key information they need to make a decision right above the fold. This should include:
- 价格 (包括折扣, represented visually)
- Product rating and number of reviews
- Product and brand names
- Whether the product is in stock (and whether stock is running low)
- Shipping details
- 2-3 key product details
This is an example of how not to layout products. The product page has no copy at all – it’s difficult to make a decision.
As with most things, Amazon’s layout is perfect here, 为客户提供做出决定所需的一切.
5. 添加产品推荐和相关产品
在产品页面上, 你有两个目标:
- 让客户进入结帐页面, 或者
- 让客户查看另一个产品
对于后者, 你应该有 推荐或相关产品部分. 您可以将其放在产品信息之后或之前.
亚马逊在这方面做得特别好. 注意首屏下方的相关产品和“还查看过”列表:
如果您在同一个系列中有多个产品, 确保也显示它们. 这是 WorldMarket 的一个很好的例子:
相关产品列表并不一定要直观. 您还可以显示相关搜索以将客户引导至他们可能感兴趣的项目.
为相关/推荐产品尝试不同的布局. 尝试将它们放在页脚上方, 以下产品描述, ETC.
6. 尝试在类别页面上使用鼠标悬停详细信息
提高点击率的一种方法是在客户将鼠标移到类别页面上的产品图片上时提供额外的详细信息.
例如, 这个网站 在鼠标悬停时显示产品详细信息和添加到购物车按钮:
这种策略的目的是让用户一目了然地了解关键信息. 当您希望用户快速浏览大量产品时，它最有效, 比如在服装店. 它可能不适用于其他类别, 但您仍然可以运行一些拆分测试并查看结果.
在Ecwid, 您可以在产品列表上启用“立即购买”按钮，以帮助您的客户快速浏览 (并购买) 你的产品.
当客户点击这样的按钮时, 您的商店不会打开整个产品页面. 反而, 您的客户将看到带有产品选项的弹出窗口:
如果您的产品没有选项, 它会直接进入购物车.
结论
在产品布局方面, 最好遵循惯例并遵循市场领导者已经在做的事情. 详细编目您的产品, 彻底分类, then organize them out in a standard grid layout.
The best practices shared above will work for most stores across sectors. Try them at your own store!
- How to Fix Your Store’s Navigation
- 关于产品推销你需要知道的一切
- Online Merchandising: How to Layout Products in Online Store
- What is Fashion Merchandising, 以及为什么它如此重要?
- 10 Design Mistakes of Online Stores
- 15 为您的电子商务网站提供完美的字体搭配
- Color Theory: 关于颜色主题您需要了解的一切
- 7 电子商务产品页面的创意
- 网页设计中英雄形象的力量
- 在线商店必须遵循的用户体验原则
- 网站设计审核
- 释放电子商务用户体验设计的力量
- 电子商务中的 UI 和 UX 有什么区别?
