在线购物页面如何吸引眼球？

人们在购物前都看些什么：教你如何利用吸引眼球的内容装饰你的在线购物页面

根据英国互动媒体零售集团和凯捷咨询公司的估计，在2008年的第四季度，英国的顾客在网上购物上花了131.6亿欧元。这比2007年的同期增长了15%。

另一方面，2007年9月市场调研和咨询顾问公司丘比特研究公司(Jupiter Research)的数据显示，在接受调查的1179名网购者中，42%在没有购买商品的情况下就退出了网站，因为他们对于商品的疑问得不到解答。

我们想做什么，为什么要这样做

我在cxpartners 网站上做了一系列关于什么内容能吸引顾客的研究，想看一下顾客在浏览购物网页时都喜欢看些什么，他们在选择商品时都考虑哪些因素。同时我也想找出对于顾客来说最好的购物网页设计：(1) 能使他们对将要购买的商品更感兴趣;(2) 能帮助他们更容易地找到自己所需要的商品。

在这个研究中被考虑的因素包括：页面的内容(商品的介绍说明，送货方式)，页面的设计(排版，字体，颜色)，特别栏目(推介，顾客评价)和版面布局(两行三栏式排列，注：原文为two versus three columns ，请高手指教这里的versus是什么意思)。

我们研究的是哪些购物网页?

我们选了2008年英国网上零售商排行前10位的其中6家网站作为研究对象：亚马逊(Amazon)，阿尔格斯(Argos )，特易购(Tesco Direct )，Play.com (译者找不到这个网站的官方中文译名)，玛莎百货(Marks & Spencer )和约翰路易斯(John Lewis )。所有参与调查的人都对这些网站十分熟悉，并且在其中至少3个网站上购买过商品。

我们是怎样调查的?

我们给每位试验者随机选取了3个网站(主页)，并且保证在所有试验者中这些网站分布平均(请教这里The order of the sites was counterbalanced over the group of participants. The order of the sites 是什么意思)。他们要在提供的网站上搜索他们决定购买，或者有意购买的商品。

这个博客的重点放在通过研究购物网页得出的发现上。我们听取了试验者们关于网上购物的意见，观察他们的动作，还有分析他们的眼部运动。

我们的发现：

指引1――购买指引（Call to action）一定要清晰

购物网页的购买指引就是加上一个连接到购物篮的链接。因此，它必须在视觉上引人注目，而且最好看起来像一个按钮。试验者表示，在特易购网站上，他们不清楚点击哪里才能购买商品，因为网站上的添加到购物篮并不是显眼的按钮。对于约翰路易斯网站上的灰色按钮，试验者们也有类似的评价。按钮的灰色与网站其它内容的颜色是一样的。

另一方面，试验者认为在玛莎百货的网站上很容易就能把商品添加进购物篮，按钮鲜艳的颜色令其更加吸引顾客的眼球(如下图所示)

指引2――善于利用项目符号提供有用的产品介绍

试验者们想要的是能够提供产品的有关信息，帮助他们作出决定的介绍。另外，他们希望看到好的词句来刺激他们购买，而不是像特易购网站上的那些枯燥冰冷的文字。

试验者们同时更偏爱利用项目符号排列的产品介绍，像阿尔格斯的网站一样，方便他们快速浏览。把产品介绍分段不仅会使页面凌乱，还会令顾客在寻找他们感兴趣的细节时非常费力。他们在评价特易购的网站时这样说：阅读起来吃力又无聊。

他们喜欢所有细节都在一个页面上显示(比如，像约翰路易斯和亚马逊那样)，而不喜欢过多的链接(像阿尔格斯和特易购那样)，需要点击才能看到所需的信息。

指引3――使用质量上乘的产品图片

通常来说，产品图片是试验者进入页面后首先看到的，不论它们处于页面的什么位置(参考下面的引人注意的图片)。多数网站都会把产品图片放在页面的左上角。阿尔格斯是例外，他把图片放在了右上角。

不同于在商店里购物，产品图片是顾客在决定某商品是否迎合他们的需求，是否适合他们的口味时考虑的唯一因素。这是展示你产品的强有力的方法。因此，提供简单生动且高质的产品图片十分重要，能起到吸引公众注意，提高产品知名度的作用。(这里译者猜的成分较多，原文是easy graphic manipulation functions for zooming, panning and rotations. 烦请高手指教)。

有许多文章都介绍了顶级的零售商是如何展示他们的产品图片的，比如Get Elastic上的文章。

另外，从多个角度展示产品同样行之有效，特别是最能体现产品重要性的那个角度。你必须清楚地了解顾客考虑的首要因素是什么，他们最希望了解产品哪一方面的信息――比如，对于登山训练者来说，他们只关心鞋子的抓地力是否好。同样，如果可能的话，尽量展示出产品的尺寸和相关用途(比如，一张装满啤酒罐的手袋的照片能帮助顾客估计该手袋的大小)。

指引4――使用简约的版面设计

试验者中的大部分人偏向在页面的左边浏览产品图片，在右边浏览产品介绍(像玛莎百货那样)。当产品的详细介绍都位于折行(原文：When product details are above the fold. fold在这里什么意思?)上方时，用户很可能会直接向下滚动页面。

约翰路易斯的版面十分美观，上面只有必需的信息。试验者们几乎浏览了页面上的全部信息，并没有受到他们所心仪的产品类型的限制;衣服，家居用品或者是数码产品。

我喜欢这样。简单，时尚，不显混乱。

然而，所有的试验者都忽略了约翰路易斯网页底部的你曾经浏览的商品这一部分。他们向下滚动页面，在看完产品内容后又重新向上滚动(参考下面的图片)。造成这种现象的原因是这部分与页面的其它内容完全隔绝开来，因此看起来就像是页面的尽头了。总的来说，垂直的版面会刺激顾客往下滚动页面。

指引5――不要冗长的页面

顾客从不，或者说很少，会把页面上的全部信息阅读完，特别是在页面上有许多内容的情况下。即使版面设计非常棒，冗长的页面也不会取得好的效果。顾客通常会忽略底部零碎的部分，或者只是草草浏览一遍，根本不会留意每个栏目。还有，就算他们向下滚动了页面，他们都不会认真地阅读，或者留意页面底部的所有内容。

即使我滚动到最底部，我也不会看它们一眼。[亚马逊]

Play.com 和亚马逊的页面都非常长(亚马逊网页的长度是特易购的8倍!)试验者们在形容这个页面时使用了太困难了这样的字眼。从下面引用的语句可看出，试验者们仅仅看了网页的2/3内容，而完全忽略了另外1/3的内容。

我直接把网页关掉了。(这里block them out是这个意思吗?)不知道从哪里开始，在哪里结束。需要集中精力去阅读。[Play.com]

我倾向于只看网页的顶部，因为我知道他们会随便把一些信息放在折行后，特别是在长网页中。所以我忽略了它们。 [Amazon]

指引6――只提供与产品相关的必需信息

不要令顾客感到无所适从。你只需提供待售商品的重要信息。

把所有东西都抛给顾客，让他们自己选择他们需要的相关产品的信息，这种做法并不可取。最好的做法是，了解清楚你的产品(比如说，它的独特性)，知道顾客可能会问哪些问题。

当一个产品网页上有太多的信息时，顾客就会很容易忽略掉一些对于他们来说非常重要的东西。在亚马逊的网站上，试验者没有去浏览顾客评价部分以下的内容。因此，他们没有看到顾客讨论，推荐商品和类似商品这些内容。

指引7――优先展示重要的内容（避免网络上的捉迷藏）

与在现实世界中购物不同，在网上，没有销售人员会告诉顾客他们想知道的关于产品的一切。顾客必须在充满各种各样信息的网页上找到答案。如果他们找不到，或者是在寻找的过程中失去耐性，他们就会闪电般地离开那个页面，再也不会看第二遍了。

比如说，与DVD相关的技术性细节，如年份，屏幕，语言，字幕和地区，都是顾客关心的信息。然而在Play.com 的网站上，试验者评价道，他们必须不断向下滚动页面，才能看到这些在顾客评价和相关产品之后的信息(例如，DVD，精巧设计，适合家庭娱乐 注：原文DVD, gadgets and games 是这个意思吗?)不要跟你的顾客玩捉迷藏的游戏!

指引8――如果产品相关信息都在一个纵栏里，就不要把重要的信息放在左右两边的纵栏里

当顾客浏览购物网页时，他们的主要任务就是了解一件商品，并且购买它。他们不喜欢因为一些无关重要的信息而分心。因此，所有试验者都完全忽略掉Play.com 网页上左右纵栏的信息，特别是在全部的产品介绍都集中在一个纵栏的情况下。但是，如果购物页面设计成3纵栏式的(其中2个纵栏都是产品的相关信息)，试验者会更加关注左边竖栏的信息(虽然这种倾向并不严重)。玛莎百货和约翰路易斯的页面就是这样设计的(参考下面的图片)。

所以，如果你把商品的主要信息都放在一个垂直的竖栏里，就要避免把重要的信息放在两边的栏目里(比如说，交互销售[cross-selling]的信息)。

指引9――提供足够的空间，避免过多的颜色

玛莎百货的网站把过多的信息都塞到页面右边的产品图片的旁边――商品名称，价格，商品代码，等级，评论，产品介绍和购买方式。而且，所有字体都是同样大小，文字之间也没有什么空白的位置。这样的布局显得拥挤不堪，试验者也会选择跳过这些部分，除非他们在其它页面找不到自己想要的信息。

网页上的颜色也会令试验者分心。特易购网站上有超过5种的不同颜色的字体――价格和积分卡(原文card point是什么意思?)是红色的，产品内容是黑色的，添加到购物篮按钮是绿色的，标签(tab label)是蓝色的，其它链接则是灰色的(参考下面的图片)。这样的设计会令试验者感到困惑，也引起视觉上的混乱。

指引10――让顾客自己阅读，避免过多的点击

试验者如果不知道链接的网页是什么，就不乐意点击这个链接或者按钮。例如，在特易购网站上点击一个链接，会打开一个新的窗口，出现可供选择的商品。试验者拒绝点击这个链接，他们担心点击后会离开原来的购物页面。

小结

尽可能快地向顾客提供他们所需的信息(例如，产品图片，简要的介绍，价格和送货方式)。为他们提供简洁而清晰(不是五颜六色或者冗长)的页面，避免令顾客混乱。展示质量良好的产品图片(如果你能同时展示商品的用途就最好不过了)，图片能透露出产品的许多信息。为你的顾客提供愉快的购物旅程，使他们买得高兴，这样他们就会再次回头光顾。