您的位置:首页 > 运维架构 > 网站架构

分析了49个电商网站后,我们得出了设计有效页面的几个准则

2019-12-05 11:35 786 查看

转自:集创堂(ID:OCI_education)


概要:网上购物的客户依靠商品页面来决定购买什么。商品页面能够回答顾客商品方面的问题,帮助顾客进行同类型商品比较,提供买家评论和通过促销机制刺激顾客消费。

在电子商务中,商品页面是网站成功的关键。顾客需要有足够的信息才能做出明智的购买决定。商品页面(或商品详情页面)是用户决定是否购买和购买什么样的商品的地方。页面必须包含完整的商品信息,以最直接的方式将有关商品信息展示给用户。

网购的时候顾客不能直接接触到商品,不能问销售人员问题,不能试穿商品,也不能使用商品。当然,有些消费者可能会购买一些样品来感受商品材质,或者通过在线聊天的方式向客服咨询相关问题。胆大的消费者甚至愿意尝试虚拟试用工具。但所有这些方法都有很高的交互成本,不仅需要消费者有迫切的需求和强烈的意愿,还需要消费者花大量时间在APP或网站上。在大多数情况下,顾客不想投入那么多时间,因此商品页面需要帮助他们尽快获得信息。确保用户的问题得到了解答,商品得到了准确的呈现,是商店的最大利益所在。

糟糕的商品页面主要会在两个方面损害客户与购物网站之间的关系:

1. 消费者不能判断商品是否符合他们的要求,因此放弃购买。(小心总比后悔好。)

2. 消费者基于一些不准确的假设,购买了错误的商品,导致他们对商品不满意甚至退货。(有越来越多的人遇到这类糟糕的购物体验,当他们遇到信息缺失的商品页面时,他们就会越不确定,从而放弃购买。)

在分析了来自49个电子商务网站的数百个最新研究案例后,我们得出了如何设计有效的商品细节页面的几个原则。本文简要介绍了我们的研究结果和给出的一些建议。



在商品页面上应该包括哪些内容


商品页面是一个担负很大责任的主要界面,需要完成的工作包括回答客户的问题以及做好一切准备让购物者舒适地购物。因此,在网站和APP中正确地设计该页面是至关重要的。

设计良好的商品页面需要具有三种特性,我们将这些特性区分为基本功能、期望功能和兴奋功能。(不要被“兴奋功能”这个名字所迷惑——如果它们不是真正必要的或者被执行得不好,这些元素可能会分散客户的注意力或让他们产生失望情绪)。



预测并回答商品问题

购物者可以通过查看商品页面来解决他们关于商品的所有问题。在我们的研究中,只有那些已经知道目标商品确切信息的客户才会很少关注商品页面。当然,即使是这些客户也需要商品页面来确认他们是否找到了正确的商品。

许多网站提供的商品信息不足,这给用户留下了未能解决的问题,因此就没有足够的信息来做出购买决定。虽然不可能提前了解每个人关于商品的每一个问题,但有些网站甚至忽略了提供基本的商品信息。

网上购物的一个常见问题就是退货。如果网站能完整地描述商品,客户就更有可能购买正确的商品,并对他们的购买决定充满信心,不用担心可能需要退货。有效的商品页面应该结合恰当的图文来描述商品:

首先,信息要完整,但不能拖泥带水。用户需要的不是营销上的废话,而是对商品的真实描述,如何使用,外观如何,功能如何。用户浏览界面时通常会略读文本,在描述的开头读的要比结尾多一些,在一行的开头读的要比一行的结尾多一些,所以不要浪费商品描述的前几行——要抓住要点。

商品描述还应该解释用户可能不知道的任何术语。例如,Urban Outfitters网站上的一些项目被贴上了“城市再生利用”的标签。在商品详情中解释了这个标签的含义:每件衣服都是手工重制的,所以你收到的衣服的颜色、色调和款式都可能与你在这里看到的衣服有所不同。

UrbanOutfitter的网站上有一篇商品介绍,其中有一段名为“关于城市再生利用”,很好地解释了为什么没有两件衣服是完全相同的。

使用图片或视频来回答问题。商品图片决定了用户对他们选择和购买的商品的期望。图片和视频应该与商品描述互相配合使用,方便客户能够对商品有一个完整的了解。仅仅一个角度的商品图片不足以回答用户的疑问,用户更喜欢提供多角度视图或动图的网站,包括旋转的图片、商品细节放大图片和商品在使用过程中的图片。

举个例子:一位eBags的用户正在考虑一款在分类页面上展示出的手提袋。当她点击图片进入手提袋的商品页面时,她心想着:“我想要知道手提袋里面是什么样子”。当她浏览整个页面时,她在心中感叹道:“哇!看起来很漂亮!而且它有两个侧口袋。”然后她又回到了分类页面,选择了其他她喜欢的包并立即进入其商品页面,查看包包内部和细节图。她在看另一款包时也感到很满意,“它的内衬很好,侧拉链也很方便。”最终她挑走了一款包,甚至没看任何商品说明。

在eBags.com上购物的人主要依靠手提袋的图片来决定哪款包最符合他们的需求



帮助用户比较商品

用户经常比较不同网站上的商品,并希望看到关于每个商品相同维度的信息。关于可比产品的一致信息是关键。如何展示信息也影响了商品比较的难易程度。一些网站改变了页面设计或产品可用的信息,迫使用户到处寻找所需信息。

购物者需要在四个不同的层面上获得可靠的信息:

1. 商品变体消费者在考虑某件商品的尺寸、颜色或味道等时,希望不管商品基于什么样的变化都能得到相同方面的信息。

一名参与者对Adagio.com网站上缺乏一致性的信息感到失望。该网站贴心地告诉用户,根据样本给出的尺寸大约可以制作多少杯茶。然而,对于较大的尺寸,它并没有给出同样的信息。相反,它列出了每杯咖啡的成本,让用户根据价格来评估这些选项。虽然有所帮助,但是这种信息不一致让用户困惑不解。

“对我有帮助的是这个样品下面说明了这种尺寸能制作多少杯茶。但是在其他的下面没有提到能制作多少杯。我只能大概地猜测,但如果能知道准确的数值就更好了。”

一位用户很欣赏Adagio的网站,因为该网站指出了样本大小的商品可以制作多少杯茶,但同时他也希望知道更大尺寸的相同商品可以制作的茶的具体数额

2.商品类别。购买某种类型商品的客户希望该网站能够给出类似商品不同品牌和型号之间的详细信息。例如,正在考察洗衣机的客户希望能够比较关于容量、占用的空间以及洗涤周期模式(如轻柔洗涤模式、节能模式和快洗模式)等信息。若数据较多,表格可能是展现此类信息的最佳方式。

3. 站点范围内的商品页面一般来说,当人们在一个网站内上下滚动浏览时,他们希望页面的外观和感觉是一致的。这是用户界面设计的十大原则之一。每个页面上信息的数量和类型可以因商品类型的不同而有所不同,但是外观和感觉、对整个网站导航和搜索都应该是一致的。

4. 竞争对手的商品页面花时间了解用户可能在竞争对手的网站上看到什么样的信息,并在商品页面上提供相同类型的信息是值得的。例如,一位顾客在TuftAndNeedle.com和Casper.com上比较了同一款床垫,但只有Casper的网站在商品页面上强调了免费送货。他解释说:“Casper可以免费退货、取货、送货,所以这两家公司的价格差异可以归结到运输上。”然后他打开了Tuft & Needle网站,“我得再看看Tuft & Needle的购买流程,看看他们送货是否免费。”在这个网站,他必须先在购物车里添加一个床垫,才能看是否免费送货。


Casper的页面在商品页面上提到了免费送货。用户注意到了免费送货,并在评估床垫价格时将其考虑在内

与Casper不同的是,Tuft& Needle的网站要求用户先在购物车里添加一个床垫,然后才能确认运费是否免费

最后,商品页面显示相关商品的推荐对购物者是有帮助的。这些建议帮助用户发现了他们可能从没想到过的商品替代品,即使是单一类别的高度相关的推荐,比如“你可能喜欢的商品“或“来自别人的推荐”(购买了该商品的客户也购买了哪些商品)。但记住要谨慎使用,只提供高度相关的推荐,因为在商品页面上显示太多的相关推荐会分散或模糊重要的商品信息。




展示用户体验——即使是不好的体验

即使是最完整的商品描述也不能解决所有顾客的疑问。来自其他客户或专业的商品评论将为网站带来另一种声音,帮助顾客进一步了解商品。

用户经常使用商品评论来收集更多关于潜在购买的信息。在很多情况下,这些评论准确地回答了用户提出的问题,而这些问题通常与商品的使用有关。商品描述可以描述商品特性,但是商品评论可以提供对商品使用的反馈

一位消费者在fossil网站上看到了对智能手表褒贬不一的评论。他说:“有人说这条橡皮带非常难用。还有人说,这款表带很廉价,就像儿童手表一样。但也有人说材料很好。”最终,尽管人们对这款手表的评价很负面,但正面的评价足以说服他继续考虑这款手表。他离开了评论界面,返回到商品特性、规格和商品图片界面。

Fossil手机网站上的一位用户发现,对智能手表褒贬不一的评论很有帮助。正面的评论比负面的评论更能说服他

消费者期待强有力的评论,包括正面和负面的评论,并要能快速浏览。我们持续地观察那些想要直接跳到负面评论的用户,他们希望知道这个商品可能最糟糕的地方是什么。下面是在商品页面上就如何创建有效的客户评论部分给出的一些指南:

明确区分正面和负面的评论。仅仅提供评论是不够的,用户希望查看评论概要,以快速了解商品的总体质量并且快速找到好评和差评。为此需要对评论进行排序或过滤的工具。

提供评论者的相关信息。对用户来说,了解发布评论的人的一些信息也很有帮助,比如说评论者的年龄、购买商品的尺寸、商品的用途或其他相关细节。通常不需要查看完整的用户信息,一旦评论可能会对用户的购买决定起到参考作用的时候,这些基本信息就派上了用场。

在Macys.com上购物的人通过商品评论来决定在网站上买什么。她拿一个包的评论举了个例子,

“我喜欢这个评论,因为它包含了发表评论的人的年龄。我想知道我这个年龄的人是怎么想的,因为我觉得我们应该有相似的生活方式。而一个23岁的年轻人使用这个包的原因就可能和我非常不一样。”

一些顾客会怀疑评论者是否真实可信。为了建立彼此之间的信任,网站可以显示出该评论已经通过了验证。


启动购买流程

商品页面是用户决定购买商品并将其加入到购物车中的关键区域。为此,用户必须知道他们的商品选项是什么以及如何选择它们。

为了帮助用户开始进行购买过程,商品页面必须:

解释每个商品的变体。用户必须理解每个选项的含义——无论是颜色、尺寸、容量大小还是任何其他商品特性。选项必须很简单,这样用户就可以很容易地选择他们想要的商品。

告知是否有货。如果同一商品不同大小不同颜色的存货量是不一样的,那么给出具体的余货量是特别重要的。用户需要知道目标商品什么时候有货,而不必等将商品添加到购物车中才知道它已售罄。

在购物车中添加物品后提供清晰的反馈。将用户指引到到购买流程的最后一步是把商品放入购物车。令人惊讶的是很多顾客因为不知道某件商品是否被放进了购物车而遇到了麻烦。

反馈不足造成了许多问题。一些用户认为他们已经将商品添加到购物车了,但实际并没有。在其他情况下,用户没有意识到他们已经添加了商品,所以重复地添加它们,最终在购物车中出现了多个相同的商品。更糟糕的是,一些用户以为购物车里装满了他们想要的商品,结果却发现购物车是空的,或者里面有重复的商品,要么就是只包含一些他们收藏着想买但还不打算买的商品。

更有效的方法是显示一个明显的持续窗口,或者显示一个通知用户已添加商品的层,或者将用户带到一个不同的页面来确认商品已被成功添加。当用户向购物车添加商品时,Chewy.com会将用户移动到一个中间页面。从这个页面,用户可以确认他们添加的商品是正确的,他们可以继续结账,或者查看他们的购物车。中间页面还应该包括一个“继续购物”按钮,这样,如果用户还没有准备好结账,就不必使用浏览器的“返回”按钮。(Chewy.com没有包含这样的链接。)

在购物车中添加商品后,Chewy.com会引导购物者进入一个中间页面



结论
商品页面是用户决定商品是否符合他们需求的地方。电商网站必须首先进行调研,了解客户对商品的有哪些疑问,然后让设计师结合文字描述和商品图片来回答用户的问题,帮助他们比较商品,使人们尽可能高效和轻松地购物。

END


编译作者:叶苏 | 纽约 | 数字媒体研究生

原文作者:TEOSIANG


原文链接:https://www.interaction-design.org/literature/article/bad-design-vs-good-design-5-examples-we-can-learn-frombad-design-vs-good-design-5-examples-we-can-learn-from-130706




推荐阅读

(点击标题可跳转阅读)

这是2020年最值得关注的9个网页设计趋势

UI设计中的10条经验法则

我们需要用户增长设计师UGD吗?



关注『网页设计精选』

看更多精选网页设计文章

↓↓↓

好文章,我在看❤️

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: