To purchase products online, people need to understand what an ecommerce website sells and find an item they are interested in. Some may搜索产品如果他们完全了解他们想要的东西,但还有更多依靠浏览to discover what products are available and which best suit their needs. Usable homepages, category pages, and listing pages are critical to the browsing experience.

主页是销售网站的第一个介绍和销售的产品范围。类别页面和产品上市pages are midlevel pages within an ecommerce site; they introduce product groupings and items within those groupings, respectively. The path to products must be thoughtfully designed to convey differences among various product categories and among individual products, and thus help users locate the item best suited to their needs.

Users who arrive at a site from an external search engine will often land on a category page or a listing page, if they searched for a类型of product, rather than a specific product. These intermediate-level pages can have excellentSEO表现除了他们对现场内部导航的重要性之外,这是关心用户体验的更多原因。

As part of our recent研究49个电子商务网站,我们分析了主页,类别页面和上市页面的各个方面,以导出易于使用的设计指南。在本文中,我们简要概述了我们的建议。

Welcoming, Informative Homepage

并非所有购物者都通过主页进入网站,但对于那些所做的人来说,主页应该有效introduce the site并解释它出售的东西以及与竞争对手的不同。您的主页必须沟通你是谁而且,对于电子商务,应公开主要产品,使用户能够开始购物。

虽然这项建议似乎很简单,但我们的一些学习参与者在主页上挣扎着过于凌乱的并未能展示代表其产品的商品。主页是一个网站前窗口显示到物理商店的网站:挤入窗口中的物品越多,整体越低感知价值(更多杂乱通常意味着较低的质量)。如果您想捕获所有潜在客户,窗口中的这些项目更好地是商店里面可用的东西。

nutriliving.com主页的屏幕截图
用户认为营养上的主页过于凌乱,充满了广告,而不显示出在网站上销售的物品。

清晰的产品组织

导航选项和产品类别需要清除,标签对用户有意义独自,以及网站上的其他选项。用户必须能够快速了解每个类别,和how it differs来自其他人来决定点击。空间允许,利用主导航栏以显示用户可用的产品类别,而不是仅在一个易于俯瞰的内容下将所有内容集中在一起链接。

支持人们浏览产品的多种方式,aPolyHierarchy.can improve findability by allowing certain items or subcategories to exist in more than one parent category. When users don’t find what they want where they expect to find it, they assume the site doesn’t offer what they need.

Rei.com Mega菜单的屏幕截图
REI网站有明确的导航类别,使用户可以轻松找到他们正在寻找的内容。Polyhierarchy允许一些用户找到徒步旅行的衣服Camp & Hike,而其他人浏览过男子要么妇女类别然后由活动购物。

在公开产品列表时促进子类别

这种最新一轮的研究发现,与过去相比,在呈现各个产品之前,更少的网站提供传统的类别页面作为临时页面。为了减少用户必须单击的页数,许多网站现在已经替换或增强了包含产品列表的类别登陆页面,以及用户使用的选项过滤器或方面缩小它们。

The most successful mergers of category and listing pages were those that highlighted available subcategories separately from other filters, most often above the product listings. This practice increased the discoverability of the subcategories and encouraged users to navigate to a more specific group of products to reduce the number of items listed and avoid choice overload. 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:顶部厨房和用餐部分看起来像一个传统的类别着陆页,带有可用子类别的链接;底部显示单独的产品列表,以便立即访问物品并最大限度地减少点击次数。
ASOS类别页面的屏幕截图
asos.com:类别页面配件显示上述产品列表的突出子类别链接。由于子类别区域的相对较小的占地面积相对较小,这种布局鼓励通过上面的目标布局来浏览各个项目。

Differentiating Product Information

该最新研究中看到的另一种趋势是产品上市页面的产品信息增加。只要信息是策划和整洁的,这种趋势就允许用户在不访问每个细节页面的情况下对产品进行明智的决策。特别是在移动浏览器上,如果Internet连接较弱,每次点击计数打开多个标签为了比较项目比桌面更繁琐,用户期望产品列表提供足够的差异信息,以便他们完全了解物品是否值得点击。

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

  • Concise names that contain important and meaningful product characteristics
  • 照片足够大to identify a known item and show differences between items
  • Indication of other available colors, styles, or options
  • 价格(虽然这项最新研究侧重于B2C电子商务网站,我们早期的研究表明缺乏价格是B2B网站上的巨大可用性问题)

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

对用户有帮助的其他产品信息包括:

  • Customer ratings
  • Icons or similar indications将物品标记为流行,新的,出售,等等
  • Availability information (in stock, or available in a nearby physical store; sizes that are available if applicable)
  • 链接到快速视图工具,可在不加载新页面的情况下查看简要的产品描述和其他详细信息
  • 通过悬停或通过单击可获得的备用产品映像旋转木马
Sears产品清单页面的屏幕截图
SEARS上的产品列表包括详细的姓名,大照片,替代颜色样本,价格,客户评级和有关交付窗口的信息。
Airbnb移动网站的屏幕截图
The mobile site of Airbnb allowed users to view additional photos by swiping within the main image area for each listing, as indicated by thesmall white dots靠近每张照片的底部。在桌面上,悬停在图像暴露的箭头控件上,以查看其他照片。

结论

人who browse ecommerce websites need to get a clear understanding of the options available to them, with a minimum expense of time or effort. A good presentation of the breadth of products available both on the homepage and within the category pages, as well as clear, descriptive product listings can go a long way towards improving the usability of ecommerce sites. Some of the new trends in category pages and product listings are positive developments inspired by mobile and responsive designs; they minimize the number of clicks and allow users to make informed selections sooner in the shopping process than in the past.

完整的报告

我们完整的新版222页报告主页, Category Pages, Listing Pages, and Product Comparisons69基于证据的UX设计指南现在可用。(这是新版本的报告之一电子商务用户体验系列。)