网站首页 > 设计资讯> 文章内容

信息最全用户就能看得到吗?——由 Amazon 发散来讨论的电商类网页设计中的“

※发布时间:2018-3-18 21:06:35   ※发布作者:habao   ※出自何处: 

  上一周看到果子的Amazon《一键下单》的书评,觉得很有兴趣。正好前两天去了一个E-commerce 的设计,主讲人是从事电商多年的设计师。在他的 ppt 里AmazonTarget等美国零售电商大企业因为信息繁杂、缺少条理等等问题而纷纷中枪。相较于Amazon、Ebay之类的大鳄,设计师们反而更为青睐Warby ParkerFab之类的小清新网站,认为他们才是电商类用户体验的成功作品。

  纽约是 Startup 云集之地,充满着热情的设计师和创业者。设计师对于 Warby Parker 的推崇,不排除是因为对于中小规模的 startup 来说,它更具有借鉴价值。因为规模相对较小,领域更为,中小型电商往往用户群更为典型集中,设计也更有空间和针对性。

  Amazon 等大型电商则是面向所有用户,不同年龄、职业、收入等等,所以为了满足不同客户的需要,所有产品均有极为详细的各类信息:价格、折扣、送货日期、产品细节、评星、评论、加入购物车、加入等待列表、登陆、相关产品、组合购买产品、推荐产品、广告产品⋯⋯零零总总超过加起来超过 50 。

  Amazon 可谓煞费苦心,所有用户可能会感兴趣的信息都在这儿了,只要你愿意逐条看完。可是问题是,用户真的会看完吗?

  就像是买东西附赠的说明书,很厚一本字又很小,里面有对产品各种使用功能的详细介绍,可谓应有尽有。但是,又有几个人打开包装盒的第一件事情是把说明书从头到尾读一遍呢?Amazon 的产品页也像说明书,然而问题就在于信息是很多,但是用户却不容易找到。

  不知道有没有人和我一样打开 Amazon 的产品页面就两眼茫然(特别是还是英文的时候)?那些估计只有 12像素的小字变换着各种颜色,让人的眼睛也跟着跳来跳去。颜色过多(黑红黄蓝绿)且文字过小,使得页面看起来缺乏视觉层次,感觉就像是未经处理的原始数据。

  第一次使用 Amazon的用户会觉得“信息过量”,不过“熟客”经过反复“训练”已经养成了自己找信息的习惯。比如说,基本看完价钱(再看看减价幅度)、评分、送货时间(有无运费),直接点“一键购买”,东西就到手了。至于下面四分之三的内容,则是快速扫一眼而已。

  这其中就凸显了 “ Viewability(信息可见度)” 的问题,信息在那里,可是用户看不见,需要的时候也找不到。

  Google 的搜索结果页面看似简单,却做过多次优化,其中最有意思的是其用户体验研究组对于Google Search Results “viewability” 的测试。这个测试的方法是这样的:邀请用户凭着自己的印象画出 Google Search 的页面,越详细越好。

  没有人会忘记“搜索栏,页码,搜索结果”,也有一部分人注意到 “分类菜单”、“赞助结果( sponsored result ) ”、“广告”和“视频结果”,但是基本没有人会画出“搜索结果下面的网址”,“ Google帐户 ”,“显示/隐藏私人结果选项”和“设置”。

  从 Viewability 来说,最重要的“搜索栏,页码,搜索结果”是 100%,而其他信息则依次递减。并不能说那些很少让人留有印象的部分就不重要,而是他们对于“搜索结果”这一用户行为来说是次要的,没有他们用户也能找到自己要的网页。

  依旧以 Amazon 产品页面为例,的信息大概分为 19个信息模块( module )。如果用 Google对于信息可见度的方法进行测试,可以得出很有意思的数据:

  用户在仅凭回忆的情况下,基本可以完整画出产品的基本信息模块(名称,厂商/作者,评分,价格,折扣力度,产品图片)、购买模块(一键购买)。这是因为当用户凭记忆画出草图的时候,他们其实在脑海中复述的是自己使用时的场景。而这些信息,如价格、评分,则是影响用户进行购买的决定因素;而“一键购买”,则是他们完成购买的必经步骤。

  用户同样会注意到页面上相关产品推荐的模块,但是都没有画全,而且不是按照 Amazon 排列的顺序。细数一下,页面上的推荐模块竟然有五个之多:“组合产品销售”、“买过这个产品的用户也买了⋯⋯”、“你可能对这些赞助链接有兴趣”、“买完这个又买了⋯⋯”、“你最近浏览过的商品”。不可否认推荐模块对电商有很好的作用,促进销售又增长用户留在页面的时间。不过重复 5次之多不仅仅使用户不会想要下滑页面,也会带来信息“冗余”的疲惫感。

  如果你问用户,他们需不需要促销和回收的信息,大部分人都会说“需要”。但事实上是,Amazon 产品页面上的这些信息根本很少有人关注到。可能是他们出现在和用户使用场景不匹配的地方。比如说“卖二手货”的功能,不知道有多少用户会在买东西的过程中突然转去卖东西?这在某种程度上也中断了用户的购买行为。

  因为 Amazon 的用户群过于庞大,设计需要符合不同人群的需要。而且现有用户已经适应了现在的页面,每次小的改动都可能影响很大。不过在不改变 Amazon 现有视觉风格和交互体验上,我们可以做的是:

  根据用户情景,重新梳理各信息模块之间的关系,并排出优先级,减弱次要模块的信息比重。个人觉得产品页面看起来复杂,是因为很难判断出用户的使用线。太多的使用场景并排进行,让用户的行为很容易被打断并偏向其他地方。这就像立交桥(西直门为代表),一层一层很多口,看似简单,其实一不小心就跑偏。举个例子,用户评论的部分在网页中间,和最上方的产品基本信息隔得很远。用户需要掠过其他半页“纸”,才能看到找到其他用户的评论。而再看完评论后,需要重新滑动鼠标回到页面顶端,才能点击右侧的“一键购买”。而用户在反复滑动过程中很有可能在滑动中转向其他内容,或者停止购买行为。

  添加固定的信息分类菜单(sticky nav) 。Sticky nav 就是指会无论用户如何滑动,都会停留在页面上固定的菜单。因为 Amazon 产品信息的模块过多,不如将主要信息组列入固定菜单,如“信息”、“评论”、“推荐”,以及“购买”按键。如果用户点击“评论”,会把用户自动带到页面中间的评论区域,而不用用户自己滑动鼠标。而固定菜单里的“购买”按键,也可以使用户不论停留在页面的什么,都能直接购买。亚马逊中国在产品页面上方就有包含“加入购物车”的固定栏,而很有意思的是 Amazon 美国的大本营竟然没有这项功能。

  强化页面的“个性化” Amazon 其实用户个性化做的很好,系统会根据用户的浏览记录和购买历史向用户进行更有针对性的推荐。但是,相较于推荐内容的个性化,页面上的信息模块顺序以及页面本身并没有太大变化。如果用户是一个热衷于写评论的人,那么评论的部分应该出现在页面更靠前的;而如果用户经常购买系统推荐的产品,那么推荐产品则应该更重要。

  更视觉化的信息分层如何运用文字大小的组合、网格系统建立视觉的信息分层,这听起来是视觉设计师考虑的事情。但是恰恰相反,为了减少线框图过渡到视觉设计之间的信息流失,视觉信息分层是用户体验设计从一开始就应该着手考虑的重点之一。用户在使用产品的时候往往面对的是产品的视觉设计,而视觉的缺点则会影响用户在使用中的判断以及情绪,最后留下“不喜欢”或者“太复杂”的感性印象。对于一般的网页来说,由于电脑屏幕相对较宽,所以理想情况下文字栏最多为半个屏幕的长度(英文 100 符号之内)。如果产品页面的文字从左到右横跨整个屏幕,从某种程度上来说影响了用户的阅读。

  在写这篇文章结尾的时候,我发现了一个很有意思的事情:现在正在运行两种以上的页面设计,第一种就是被我在此“抛砖引玉”讨论的页面(如上图);而另一种页面设计则简洁很多,条例清晰,解决了不少上文中列出的问题;现在看到的第三种第二种基本相同,只是在价格和用户评论的部分和第二种不同。在 Amazon 工作的朋友猜测可能正在进行测试比较,如果用户对某一个版本反应积极,则会进行推广。

  看来 Amazon 仍然在改版的上,趁着还能找到旧版的例子,赶快和大家分享一下。让我们拭目以待。

  作者简介:本文作者为 36氪特约作者雁云,她是一位用户体验设计师,现居纽约,就职于某国际传媒集团。相信互联网改变了人们的生活,而设计提高了生活的质量,让一切更美好。

  Amazon 将于6月18日推出3D智能手机,其用户使用Amazon 的流视频及音乐服务时,不走手机套餐流量