Menu 关闭

万博官网manbetx下载电子商务主页的用户体验指南,类别页,和产品列表页

通过 Aurora HarleyAugust 12,二千零一十八

总结:通过提供清晰的differentiating product information at all levels — from the homepage to product listing pages.


To purchase products online,人们需要了解电子商务网站的销售情况,并找到他们感兴趣的商品。Some maysearch for a product如果他们知道自己想要什么,但更多依靠浏览了解哪些产品可用,哪些最适合他们的需求。可用主页,类别页,列表页面对浏览体验至关重要。

主页是第一次介绍一个网站和一系列的产品或服务出售。类别pages and产品上市页面是电子商务网站中的中级页面;他们介绍产品分组和这些分组中的项目,respectively.产品之路必须经过深思熟虑的设计,以传达不同产品类别和个别产品之间的差异,manbetx官方网站手机版从而帮助用户找到最适合自己需求的商品。

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 atype产品,而不是特定的产品。这些中级页面可以SEO performance,which is one more reason to care about their user experience,除了它们对站点内导航的重要性之外。

作为我们最近的一部分49个电子商务网站的研究,我们分析了主页的各个方面,类别页,并列出页面,以获得使这些页面易于使用的设计准则。manbetx官方网站手机版在本文中,我们简要概述了我们的建议。

Welcoming,信息型主页

不是所有的购物者都通过主页进入一个网站,但是,对于那些这样做的人,the homepage should effectivelyintroduce the site并解释它的销售情况以及与竞争对手的区别。你的homepage must communicate who you are,而且,for ecommerce,应该公开主要产品并让用户开始购物。

虽然这一建议似乎很直截了当,some of our study participants struggled on homepages that were过于杂乱未能展示代表其产品的物品。The homepage is to a website what a front-window display is to a physical store: the more items crammed into the window,整体越低感知价值(更多的杂乱往往意味着更低的质量)。橱窗里的那些东西最好能很好地反映出商店里有什么东西,如果你想抓住所有潜在客户。

nutriliving.com主页截图
一位用户认为Nutriliving主页太乱,广告太多,不显示网站上销售的商品。

Clear Product Organization

Navigational options and product categories need to be clear,带有标签make sense to users独自一人,以及与网站上其他选项相关的。用户必须能够快速了解每个类别,and它是如何不同的为了决定点击的位置。When space allows,leverage the main navigation bar to show users what product categories are available,不是把所有的东西都集中在一起,容易被忽视商店链接。

To support the multiple ways people browse through products,一多层次通过允许某些项或子类别存在于多个父类别中,可以提高可查找性。当用户找不到他们想要的东西时,他们认为网站没有提供他们需要的东西。

rei.com超级菜单截图
The REI site had clear navigational categories that made it easy for users to find what they were looking for.The polyhierarchy allowed some users to find hiking clothes under营地和徒步旅行 ,while others browsed to the男人 女人 分类,然后按活动购物。

在公开产品列表时提升子类别

This latest round of research found that,与过去相比,fewer sites provide traditional category pages as interim pages before presenting individual products.In an effort to reduce the number of pages that users must click through,many sites now have replaced or augmented category-landing pages with lists of products plus options for users to use过滤器或面缩小范围。

分类页面和列表页面最成功的合并是那些突出显示可用子类别的合并,这些子类别与其他筛选不同,通常在产品列表上方。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.网站库存的广度通常决定了这些分类页面和列表页面的准确合并,with some sites (like Target) leaning toward a more-traditional category-landing page with product listings appended to the bottom,其他网站(如ASOS)倾向于展示产品列表页面,页面顶部突出显示子类别导航。

目标分类页面截图
Target.com: The top part of the厨房和餐厅 该部分看起来像传统的类别登录页,链接到可用的子类别;底部部分显示单个产品列表,允许立即访问项目并最小化单击次数。
ASOS分类页面截图
asos.com:的类别页Accessories displayed prominent subcategory links above product listings.由于子类别区域的占地面积相对较小,此布局鼓励浏览单个项目,而不是以上目标的布局。

Differentiating Product Information

这项最新研究发现的另一个趋势是产品列表页面上的产品信息量增加。As long as the information is well-curated and uncluttered,this trend allows users to make informed decisions about products without visiting each detail page.尤其是在移动浏览器上,如果互联网连接很弱,那么每次点击都是重要的。打开多个选项卡比较项目比在桌面上更麻烦,users expect product listings to provide enough differentiating information so they can fully understand whether an item is worth a click.

有助于区分每个产品列表的信息应包括:at a minimum:

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

Additional product information that can be helpful to users includes:

  • Customer ratings
  • 图标或类似指示要将项目标记为热门,新的,on sale,等等
  • 可用性信息(库存,或在附近的实体店中提供;尺寸(如适用)
  • 链接到快速查看工具以查看简短的产品说明和其他详细信息,而不加载新页面
  • 通过鼠标悬停或单击旋转木马
Sears产品列表页面截图
Product listings on Sears included detailed names,large photos,交替色样,price,customer ratings and information about the delivery window.
Screenshot of Airbnb mobile site
Airbnb的移动网站允许用户在每张列表的主图像区域内滑动以查看其他照片,如所示small white dots靠近每张照片的底部。桌面上,hovering over an image exposed arrow controls for viewing the additional photos.

Conclusion

浏览电子商务网站的人需要清楚地了解可供他们使用的选项,花费最少的时间或精力。在主页和分类页面上都能很好地展示产品的广度,而且很清楚,描述性的产品列表可以在很大程度上提高电子商务网站的可用性。类别页面和产品列表中的一些新趋势是由移动和响应式设计激发的积极发展;manbetx官方网站手机版they minimize the number of clicks and allow users to make informed selections sooner in the shopping process than in the past.

完整报告

新版我们的全套222页报告主页,类别页,Listing Pages,and Product Comparisons具有69循证UX设计指南万博官网manbetx下载manbetx官方网站手机版现在可用。(这是Ecommerce User Experience系列)