菜单

电子商务主页,类别页面和产品列表页面的UX准则

通过 奥罗拉哈利2018年8月12日

摘要:通过在所有级别(从主页到产品列表页面)提供清晰,差异化的产品信息,简化用户的产品路径。


要在线购买产品,人们需要了解电子商务网站的销售情况并找到他们感兴趣的商品有些人可能寻找一个产品如果他们确切地知道他们想要什么,但还有更多依靠浏览了解哪些产品可用,哪种产品最适合他们的需求可用的首页、类别页面,和清单页面浏览体验至关重要。

主页是网站的首次介绍以及销售的产品或服务范围。类别页面和产品清单pages are midlevel pages within an ecommerce site; they introduce product groupings and items within those groupings, respectively产品之路必须深思熟虑manbetx官方网站手机版ed转达各产品类别间差异和个人产品,从而帮助用户定位项目最适合他们的需求。

从外部搜索引擎到达站点的用户通常会在类别页面或列表页面上登陆,如果他们搜索到的话类型的产品,而不是一个特定的产品这些中级页面可以很好SEO表现除了它们对站内导航的重要性之外,这是关心用户体验的另一个原因。

作为我们最近的一部分对49个电子商务网站进行研究,我们分析了主页,类别页面和列表页面的各个方面,以获得manbetx官方网站手机版指南,使这些页面易于使用在本文中,我们将简要介绍我们的建议。

欢迎,信息主页

并非所有购物者都通过主页进入网站,但是对于那些购物者来说,主页应该有效介绍这个网站并解释其销售,以及它是如何不同于竞争对手您的主页必须告知您的身份,对于电子商务来说,应该公开的主要产品,让用户开始购物。

虽然这个建议看起来简单,我们的一些研究参与者在主页上过于杂乱和失败的展示物品的代表他们的产品主页是一个网站前窗显示物理存储:物品塞进窗子越多,越低感知价值(更混乱往往意味着低质量)如果您想要捕获所有潜在客户,那么窗口中的这些项目可以更好地表示商店内可用的内容。

Nutriliving.com的主页截图
用户认为NutriLiving主页太杂乱且没有广告,没有显示网站上销售的商品。

明确产品的组织

导航选项和产品类别需要清晰,标签有意义的用户独立,以及与网站上的其他选项相关用户必须能够快速理解每个类别,它有何不同从他人来决定在哪里点击当空间允许时,利用主导航栏向用户显示可用的产品类别,而不仅仅是将所有内容集中在一起,易于忽视商店链接。

为了支持人们浏览产品的多种方式,多分级通过允许某些项目或子类别存在于多个父类别中,可以提高可查找性当用户没有找到他们想要找到的东西时,他们会认为该网站没有提供他们需要的东西。

截图的REI.com超级菜单
丽网站有清晰的导航分类,让用户更容易找到他们寻找的东西polyhierarchy允许一些用户发现徒步旅行的衣服露营和远足 ,而其他人浏览了男人 要么女性 类别然后购物活动。

Promote Subcategories While Exposing Product Listings

这最新一轮的研究发现,与过去相比,更少的网站提供传统类别页面临时页面之前个人的产品为了减少用户必须点击的页面数量,许多网站现在已经用产品列表和用户使用的选项替换或扩充了类别登陆页面过滤器或方面缩小。

类别和列表页面最成功的合并是那些与其他过滤器分开突出显示可用子类别的合并,通常在产品列表之上这种做法增加子类的可发现性和鼓励用户导航到一个更具体的集团的产品列出的物品减少和避免选择过载The breadth of the site’s inventory often dictated the exact merge of these category pages and listing pages, with some sites (like Target) leaning toward a more-traditional category-landing page with product listings appended to the bottom, and other sites (like Asos) leaning toward presenting a product listing page with subcategory navigation highlighted at the top of the page.

(缩短的)目标类别页面的屏幕截图
Target.com的一部分厨房和餐厅 section looked like a traditional category-landing page, with links to available subcategories; the bottom part displayed individual product listings to allow immediate access to items and minimize the number of clicks.
Asos类别页面的屏幕截图
Asos.com:类别页面饰品 显示产品列表上方的显着子类别链接由于子类区域的相对较小的足迹,这种布局鼓励浏览个别项目多目标上面的布局。

区分产品信息

在这项最新研究中看到的另一个趋势是产品列表页面上的产品信息量增加只要信息精心策划和整洁,这一趋势就可以让用户在不访问每个详细信息页面的情况下做出有关产品的明智决策Especially on mobile browsers, where every click counts if the internet connection is weak and打开多个标签比较项目是更多的麻烦比桌面,用户期望产品上市提供足够的微分信息,这样他们就可以完全理解一个项目是否值得一点击。

每个产品列表的有用差异化信息应至少包括:

有些网站提供了更多信息,超出了这些基本要求用户欣赏这些额外信息,因为它允许他们在提交新页面加载之前获得有关项目的进一步知识。

可为用户提供帮助的其他产品信息包括:

  • 客户信用评级
  • 图标或类似的迹象将商品标记为热门,新品,特价商品等
  • 可用性信息(有货,或在附近的实体店中提供;如果适用,可提供尺寸)
  • 链接到快速查看工具,无需加载新页面即可查看简要的产品说明和其他详细信息
  • 通过悬停或单击可用的替代产品图像圆盘传送带
Sears产品列表页面的屏幕截图
Sears上的产品列表包括详细名称,大型照片,备用颜色样本,价格,客户评级以及有关交付窗口的信息。
Airbnb移动网站的截图
Airbnb的移动网站允许用户通过在每个列表的主图像区域内滑动来查看其他照片,如下所示小白点每张照片的底部附近在桌面上,将鼠标悬停在图像上显示的箭头控件可用于查看其他照片。

结论

浏览电子商务网站的人需要清楚地了解他们可用的选项,并且花费最少的时间或精力良好的主页上的广度的产品和类别页内,以及清晰,描述产品上市可以改善电子商务站点的可用性Some of the new trends in category pages and product listings are positive developments inspired by mobile and responsive manbetx官方网站手机版s; they minimize the number of clicks and allow users to make informed selections sooner in the shopping process than in the past.

完整报告

我们的全新版本222页的报告主页,类别页面,列表页面和产品比较69年以证据为基础的UX manbetx官方网站手机版指南现在是可用的(这是新版本中的报告之一电子商务用户体验系列。)