译文：来自<电商可用性研究>
避免使用这5种电商网站图片
这是一系列关于产品发现的文章中的最后一篇，即利用我们最近的主页&产品列表的可用性报告和基准调查结果。
在电商网站上为了推销和主打的商品而使用站内图片，广告横幅和广告是相当常见的，而且可以链接到相关的目录，这对用户来说是极大的帮助。但是，在我们最近的电商可用性研究中发现，一大批测试对象因为不放置和设计站内广告而被引入歧途。在一些情况下，这甚至导致了（用户）放弃网站。
在测试19个主流的电商网站的过程中，我们发现下面5种类型的站内广告和横幅图片导致了这个糟糕的可用性和用户体验问题。
注意，在这篇文章中贯穿使用的‘ads’代表的是任何种类的广告横幅和图片。‘站内’ad我们提及的是任何这种广告横幅和图片是（用来）宣传网站的特色产品或产品的，而不是外部的第三方供给。
1)不要在产品列表上方放置Ads
当站内的广告放置在了产品列表上方，他们很可能引入范围混乱，并且让用户相信这些广告在一定程度上是和产品列表相关的。一些广告文案可能会被误解为是产品列表的标题，而按钮和链接可能会被错误理解是为了过滤和排序的选项，正如下面的列子所阐述的那样。
这里一个测试对象将陶器搜索结果列表上放置的广告横幅错误的理解为标题，因此认为搜素结果只包含家具装饰材料和沙发套。
许多测试对象错误的将放置在 Toys’R’Us 列表上的‘Top Pick’ 横幅广告理解为了当前产品列表的过滤工具－但是，一旦点击了‘Boys’链接，测试对象被送去了一个完全新的‘Top Picks for Boys’类别页面，而没有看到他们当前过滤过性别后经过年龄过滤的产品列表页面。
我们很容易就会发现仓促的用户会认不出这种广告横幅并以为和产品列表有关。因此建议全部避免把广告横幅放置在产品列表之上——不要放在搜索结果页面也不要放在产品列表页面。上面描述的站内广告和用户（所处）的情景十分相关所以它们在页面上的出现十分合理——不是说它们不应该出现在页面上，它们只是不应该被放置在产品列表上方。
2)避免Ads在产品列表里面
当广告被放置在产品列表里面，用户倾向于把它理解为是列表的尾部。在用户的角度，广告代表的是一个新页面元素的开始，因此广告同样也意味着是当前页面元素（如产品列表）的结束。这个问题仅仅在设备上会更加严重当使用渐变滚动条时，因为一个可见的线索表明大量页面上提供的额外目录通常被隐藏了。
‘All brands’图片和‘Contest on Pinterest’广告使测试对象以为除了第一列产品栏这个页面不再包含更多产品了，所以在这之后产品列表就停止了。实际上，在这个页面下面还有很多的产品，但是测试对象把广告当作一个标志：他已经到达了这个产品列表的尾部了。
用户通常把产品列表和目录理解为一个‘聚集地’，并且希望它会展示所有的东西。因此，如果通过站内广告和它们相交来将这样的列表分成小块，大量的用户会把它看成是一个列表和一个广告和一个列表，而不是一个被广告分开的单个列表。如暗示，这个问题不仅只和产品列表相关，也同样适用于顾客类别页面和帮助章节，导致用户错失了重要的导向性目录和至关重要的网站帮助。
3)避免产品列表下面有文本性Ads
此外我们还观察到当Ads被放在产品列表下面的时候，用户很有可能把广告里的一些文字链接错误的当成产品列表的子目录或是产品列表的过滤器。
在‘Newegg’，一个测试对象正在为他的联想笔记本找一个适配器。当测试对象到达产品列表底部的时候，他看到了一个蓝色的加下划线的文字链接并且把它们当成了和子目录相关的链接。就在点击其中一个链接之前，他注意到了‘谷歌广告’的广告横幅并且最终决定不点击它们。
用户看上去更有可能将放置在产品列表下面（或上面，之前已经描述过）的链接当成是过滤器和子目录。但是，放置在产品列表下面的图形式的广告不会遭受这个问题的困扰，但是反过来会被认为是那意味着产品列表的结束，就像之前描述的那样。
因此图形式的广告会被故意放在产品列表的下面来表示它们的结束－只要确认避免了文字链接，那么广告不会被误认为是子目录或是过滤器选项。换句话说就是，可以在产品列表下面放置广告只要它们被恰当的设计过。（比如本质上是图形式的）
当基准调查50个主流的电商网站的时候，我们发现它们之中的43%都违反了这里描述的原则，而且上面的章节，无论是把图形式的横幅广告放在产品列表上面或是里面，或是将文字广告定位在下面（看看所有的产品列表例子）。所以尤其要确保二次检查你们电商网站设计中的这三个陷阱。
4)在页面加载时不要展示覆盖的对话框
有一些测试的网站会有覆盖的对话框或是广告灯箱在页面加载页－经常包含调查问卷，竞赛活动，新闻，宣传，选择国家等。这个不仅发生在主页，同样也会出现在目录页面和产品列表页面。每次当它发生时，绝大多数的测试对象会条件反射式的关闭掉覆盖的对话框，甚至不会瞄一眼上面的文案。更多的是，测试对象会被网站给惹恼因为（网站）打扰了他们，即使他们－就像提到的那样－从来不会阅读那些打扰他们的东西。当提及覆盖的对话框比如垃圾邮件，一些测试对象会尽快离开，这就解释了为什么如此多的用户憎恨这些对话框，以及对使用它们的网站有多么贫乏的影响。
因此建议避免在加载页面使用这些对话框，尤其当这些内容和用户息息相关时（再一次，绝大多数用户会忽视它，并且会立即关掉这些对话框，从而错过了重要的内容）。但是，当然了，如果这个内容没有如此的重要，你真的应该用这个来打扰用户吗？
“我不知道那是什么，而且我不关心。”当他立即关掉一个突然出现的调查问卷对话框后，一个测试对象这么说到。
“我通常点击上面的X（叉叉关闭）按钮而不会真的阅读它们，当她关闭一个新闻对话框时一个测试对象如此解释到。”
我们用不着感觉奇怪，覆盖式对话框在用户中并不受欢迎。因为它们本质上是在页面上，相当于在19世纪和20世纪初时，许多让人讨厌的弹窗窗口在垃圾网站上很猖獗。调查问卷，新闻注册，竞赛活动，折扣信息，只要你想的到的－绝大多数用户会直接关闭覆盖式的对话框，甚至意识不到它们是关于什么的。
应该注意的是，覆盖式对话框会基于用户需求而被使用来展示内容－只要覆盖式对话框不出现在加载页面，那完全是可以的。所以使用所有的方式在覆盖式对话框上来展示内联帮助，购物车目录等，只要它是作为一个对于用户动作（比如点击）的反馈发生时，而不是在加载页面。
在基准调查的50个网站中，大量的43%的网站在用户面前闪现过覆盖式对话框，当他们访问主页页面或是产品目录页面时。不幸的是，用户们忘记了这个年轻的兄弟，90年代的弹出弹窗，只是条件反射的关闭掉它，尽管他们通常和内容完全相关。
5)要特别小心的设计主页Ads
“那个。。嗨，他们在这儿放了一些有倾略性的广告，”一个测试对象如此说道，因为一个药房网站主页上加载出了，“啊，他扰乱了我。”站内广告和横幅一般被测试对象负面地理解了，在我们的电商检测和移动电商研究中都证实了相似的观察数据。但是，这些新增的观察数据表明了对广告特别明显的厌恶，特别是在主页页面上的（广告）。
当一个广告被放在了主页页面上一个主要目录的位置－特别是在中间的栏目上，和尤其是在主页的上半部分－测试对象通常会对它有负面的评价。因为主页是许多用户进入的页面，因此这样的广告会树立一个关于网站的差的第一印象，可能自始至终贯穿了用户的整个购物体验。
在 Blue Nile网站上，一个对话框会出现在网站的左手边。尽管相对来说是在不显眼的位置上，这个对话框还是让用户产生了很大的失望，并且都立即关闭了对话框。
在Drugstore网站上，中间页面‘所有东西打折20%’的广告横幅同样也很难被大多数的用户接受，尽管它有积极的暗示。
换句话说主页页面上的广告可以给整个网站建立一个消极的基调 － 一个差的第一印象会弥漫贯穿用户接下来的浏览体验。这里狡猾的是，这个是被看成是一个广告，还是仅仅是一个用来展示产品，目录或是网站特色的极好的图片。用户分不出站内广告和站外广告在专业性上的区别，但是因为使用网站多年，所以习惯性的对横幅广告图片有一个本能的反应。所以内容是否切题或是恰当不是很重要－只要它看上去像个广告，它一般就会被当成一个广告。
我们发现用户更愿意将头部的图片看成是吹嘘整个站点的竞赛和折扣的广告，但是图片陈列的是某个具体的商品，目录内容和季节性活动，这些一般才会被认为是合情合理的内容。但是，还是有很多的列外，因此我们强烈建议设计师在设计他们的主页和图片时要非常小心，这样他们才不会被当做是广告。
BestBuy提供了一个关于小心设计广告的恰当的例子，尽管他视觉优势且位置突出，但是没有被测试对象消极的理解－实际上，三星的宣传被看成是有帮助的导向性的内容。
一般来说，广告的主标题不应该被过分夸耀。字体的选择和背景图片的选择会大大的影响它会不会被看成是一个广告。如果一个图片大量的采用网站的视觉特点，并且避免了可视边框和视觉盒子线框，它很少被看成是一个广告。注意上面BestBuy的例子中突出的智能手机报价是怎样采用了网站的普遍的视觉特点，因此比起页面下方一点的‘Deal of the Day’和‘Geek Squad Tech Support’框，看起来会更像是网站天生的一个部分。
不幸的是，基准调查过的40%的网站成为了诱惑的牺牲者，那就是在他们的主页的主要内容位置使用了高度图片式的广告模块。然而大量其他基准调查过的网站也在他们的主页上使用了图片式的模块，但是他们在设计时要更加小心，所以他们不太可能被当成是广告，而是被当成合情合理的有帮助的内容。
广告设计的做与不做
在致力于解决因为有许多不同的区域需要频繁的宣传物品和网站特色的逻辑性问题时，（我们）可以在站点各种各样的位置上轻易的切出有固定位置和大小的模块，然后把这些空间分配给站内广告和活动图片。这对每个人来说都很方便：设计图只需要在页面上切出一个模块，新产品不需要处理琐碎的网站升级，并且销售可以做频繁的网站升级和更新图片，只要他们愿意。
但是，站内广告像这样在整个网站上传播很有可能会导致一些问题，因为很难预见所有的前后文相关的问题。这些广告模块同样也可以反过来产生一些有误导性的设计线索。最终，如果高度图形化的广告吹嘘关于所插入的打折活动和竞争活动，页面可能会变得混乱和过度的销售化，这就有可能树立一个关于网站的差的第一印象。
因此，如果选择了这个策略，那么避免这整篇文章中所说的不能做的事就变的尤其重要。我们可以总结出以下这些关于站内广告所不能做的事情：
1.不要把站内广告（任何形式的）放在产品列表上面或里面，也不要把文字广告放在产品列表的下面。
2.不要在加载页面放覆盖式的对话框，不管内容有多重要。
3.不要把高度图形化的广告放在主页上主要的内容位置（在推销竞争活动和折扣活动时要尤其小心）。
幸运的是，当足够小心时，站内广告会执行的非常成功，而不会挑起负面的情绪和误导用户（事实上，就像我们看到的eBay的例子，小心地设计站内广告可以被认为是有帮助的内容）。
所以，什么是好的站内广告设计？就如已经提到的那样，小心的设计图形式的广告横幅来宣传明确的产品，产品目录和季节性活动是十分好的，即使是在主页上（实际上，大图展示产品是很容易被测试对象接受）。同样，图片样式的广告放置在产品列表下面是非常好的，而且可以帮助表明列表的结束。除了这个，我们观察到广告放在侧边栏不会导致任何问题。
在Tesco，一个在侧边栏上的‘Camera Finder’广告横幅帮助了一个测试对象，他把它看成了是产品向导的广告。侧边栏是少数几个可以在产品列表周围放置广告的安全位置。
在eBags，侧边栏上一个‘Laptop Bag Finder’的广告被测试对象当做了一个广告（这个是好的，尽管这导致了一些用户忽视了它，因为他们无视广告横幅）。
放置在侧边栏的广告无论放在哪一边，只会被认为是广告。换句话说，你可以自由的放置任何类型的广告在侧边栏，只要不把它们和过滤工具或是子目录混合在一起，而且只要它不是去重要的导航功能的唯一路径（考虑到无视广告横幅的风险）。
我们推荐要是立即将广告放置在产品目录或是过滤工具的上面或下面，就要多少保留广告的图片感（以此来帮助区分两者），但是在学习过程中测试对象一般就会擅长做出区分，只要广告是在侧边栏或是没有放置在产品列表的上面或下面。
因此，‘do’s of ad design’可以被总结为以下内容：
1.广告（任何类型的）可以被放在一个产品列表任意空白地方的侧边栏里。
2.图片式的广告可以被放在产品列表的下面。
3.在主页上，图片式的广告横幅一定要被小心的设计，以和主页剩下地方的设计的风格保持一致，避免视觉框，而且最好宣传明确的产品，目录列表和季节性活动。
（原文链接：http://baymard.com/blog/avoid-these-ecommerce-graphics 来自<电商可用性研究>）
网友评论