拉里先森

2019-04-26 12:04

被滥用的网站首页轮播 - 用户体验专辑01

不在米课圈发表文章差不多已经过去两年了，但是其实一直都没有离开过，不管是米问还是叫米课圈，都时常回来逛逛。晒单的帖子我从来不看，因为我不跑业务。做SEO，营销等每月动不动就100 , 200 的帖子不看，因为我知道那些方法放在我们的100个项目里面可能都行不通，人力，资金，项目环境，产品完全不一样，这种方法怎么搬。哈哈，在线等一呼百应的方法。

不敢做标题党，心里有掂量，所以我不讲WordPress建站，不讲什么营销结果（不想把文章写成鸡血），坚持写写网站用户体验专辑，对大家有用的就拿去用，给自己基本至少一周两更，目标是写成一篇Guideline。我讲的东西一定是被认证或者被国外讲了很久但是国内很多人都还是不注意的问题，每篇都有很多现在其他好的用户体验网站的截图，可供参考。

直接开始把，第一篇如文章标题，今天主要说的是被滥用的外贸网站的首页轮播，先送大家一句话：

如果不是特别有必要，能不用就尽量不用网站首页轮播。

我们在浏览某个外贸网站的首页时，最先看到的基本就是一个滚动的Banner，有时候甚至可以感受到各种很炫酷的滚动效果。很多人在设计网站的时候经常盲目去模仿，感觉这个能给网站的用户带来很强的视觉冲击，用户能够在短时间内获取更多信息，但是与之带来的是更高的交互成本。

轮播的主要缺点：

点击轮播的机会少之又少（一项研究表明，网站首页轮播中点击量有84%产生在第一幅内容上，其余内容所吸引的关注及访问少得可怜。）
自动轮播比预想中的效果会差很多——用户不会浪费时间等待切换。
首页的轮播会极大影响网站的加载速度，特别是使用轮播插件的WordPress网站，这个我们已经在几十个外贸站点中得到验证。你可能都想象不到，一个4秒打开的网站和一个3秒内打开的网站的PPC对网站转化的影响有多大。

空口无凭，你可以看看下面的这个数据研究结果，被很多用户体验权威网站引用：

https://erikrunyon.com/2013/07/carousel-interaction-stats/

还有人为了研究这个做了一个有趣的网站（Should I Use a Carousel）：

http://shouldiuseacarousel.com/

如何正确使用轮播？

如果你一定要使用轮播，你想做一个用户体验好的轮播，那下面的这几点可供你参考：

内容优先

内容为王，这个词你可能从那些做SEO和营销人口听过一千遍了。如果轮播的内容和网站用户的搜索意图不相关，用户体验就会很糟糕，不管你的轮播的交互做得有多方便。这里有几个重要的规则需要注意一下：

1、如果内容对访问者来说不有趣或没有用，不要使用轮播（例如，他们不关心的促销信息）。大多数时候，这样的轮播滚动只会分散人们的注意力，而不是引导他们发出一个明确的行动呼吁，你的Call to action也会变得没有作用。

2、轮播中的内容不应该看起来像广告（或者风格，类型与广告相同）。如果内容看起来像广告，大多数用户会简单地忽略它。这就是为什么选择与网站其他部分使用的字体和图片相匹配是很重要的，所以幻灯片轮播需要看起来是网站内容的一部分，而不是一个咄咄逼人的广告或者是一个炫酷的口号。

不可取的做法：Drugstore的网站一开始做的就是类似广告的轮播

2011年3月24日，Drugstore.com被Walgreens以4.09亿美元收购了.

值得推荐的做法：Walgreens首页Banner就非常的吸引人和标语铿锵有力。

3、轮播的内容具有一定逻辑性的数据内容。请记住，最初的幻灯片内容比后来的幻灯片曝光率要高得多。因此，第一张幻灯片应该总是显示最重要的内容，并且必须将下一张幻灯片卖给用户。所以需要考虑你的轮播内容具有一定逻辑性的数据内容，比如时间顺序、产品演示、流程解读等等；

4、轮播幻灯片绝不应该是访问站点特性和内容的唯一方式。将任何出现在轮播中的重要信息也放在页面的其他位置是一个好主意，这样与站点交互的访问者就有更多的机会看到它。比如我以前在讲怎么设计网站页脚的时候讲过，网页底部中可以包含站点地图来显示不在主导航显示的次级分类的链接。

5、如果需要用户一下子查看某个模块的所有内容，不要使用轮播。即使你的轮播是有效的，记住大多数访客不会看到每一张幻灯片。比如说如果网站同时有很多活动，你把所有活动都放在一个轮播里，用户看的基本就是第一个活动。

限制轮播的数量

在轮播中包含5张或更少的幻灯片，因为用户不太可能接触到比这更多的幻灯片。限制数量还有助于用户发现内容。

提供进度指标

显示有多少幻灯片，以及用户在轮播中的哪个位置。“这有助于让用户感到自己在掌控之中。

点或类似的东西，显示总共有多少张幻灯片，以及访问者现在在幻灯片组中的位置.

以前我做程序员的时候经常会去用其他第三方的代码库，这个代码库一出现什么问题Bug，我们都会说一句：Out Of Control 来表示深深的无奈，因为如果这个库很复杂，我们基本都不能修复它的bug，只能等待这个库的主人来更新这个bug，你说扎心不扎心。

确保幻灯片内容在手机上清晰易读

关于移动端流量的增加，对于手机幻灯片内容的阅读这个可能需要大家关注一下。移动端幻灯片的内容文本和图像越清晰，用户就越有可能参与并理解所要表达的观点。这就是为什么确保幻灯片中的任何文本在手机屏幕上清晰可见很重要。如果将桌面站点上的站点用于移动站点，则一定要检查文本的可读性。

不可取的做法：幻灯片的文字大小图片都乱78糟

设计适当的导航控制

在轮播的导航控件中，目标是为了帮助人们识别轮播选项。

1、确保导航控件是存在的，并出现在轮播内，而不是位于其下方或由折叠分隔。这避免了在大屏幕和小屏幕上出现问题，这个时候你就要小心考虑轮播图片的在不同屏幕中最合适的高度。下面有Dell在PC端网站改版前后的例子：

改版前：Dell网站的Banner只有和图片分离的dots，而且很小，不容易被客户察觉

改版后：Dell的网站Banner有了下面4栏明显的Banner内容

如果我个人觉得，Dell这次改版还是做得不好，这4栏颜色和下面的模块有重复，让客户不容易发现这4栏的横条和Banner有关，可以在每栏的上方做一个小三角箭头，让4个栏目和幻灯片形成一个更好的整体的视觉效果。

可取的做法：苹果的主页提供了可见的、易于识别的next / previous控制选项

2、使链接和按钮清晰可辨，并稍微大点，让用户能够更好的点击。如果按钮（next / previous和slide selector）很小，而且靠得很近，或者位于颜色鲜艳杂乱的背景之上，是不容易被看到或点击。

不可不可取的做法：在Tissot网站上，轮播幻灯片左右两侧的箭头出现在背景较亮的幻灯片上时很

容易看到并点击，但在背景较暗的幻灯片上几乎看不见。

关于自动轮播幻灯片的几点提示

以前在做外贸网站的时候，很多客户都让我把轮播改成自动滚动幻灯片形式。我知道大多数的人是想通过自动滚动来引导人们浏览不同幻灯片的信息。但要想让自动滚动正常工作，需要仔细实现以下三个细节:

1、不要在移动站点上使用自动滚动。如果在用户点击屏幕时自动旋转，用户可能会不小心打开错误的幻灯片。

2、确保幻灯片不要滚动太快。有时轮播内容滚动得太快，用户就无法阅读信息，这有会让他们感觉很沮丧。当然，自动滚动太慢的话会有相反的问题——用户会对幻灯片感到厌烦。您应该测试正确的时间，或者至少估计一般用户阅读文本和处理图像所需要的时间。如果你不确定你能得到正确的时间–不要选择自动轮播的幻灯片，反正我是计算不出来。

3、不要停在最后一张幻灯片上。继续循环播放幻灯片并显示当前选择的幻灯片。

轮播幻灯片的最佳替代品

主页轮播的一个常见问题是缺乏上下文：用户通常不知道下一张幻灯片会显示什么，也不知道他们为什么要关注。因此，他们不太可能想要浏览你的幻灯片。为了解决这个问题，您可以考虑使用Hero Image而不是轮播幻灯片。Hero Image有以下优点：

1、用户可以专注于一张图片，而不是将注意力分散在几张图片上。静态的Hero Image可能比滚动的元素更不容易分散用户的注意力。

2、如果设计师知道他们只能选择一张图片，他们可能会选择更能代表服务或产品的图片。

3、你可以有效地对内容进行优先级排序，放弃轮播图，并在轮播幻灯片所在的位置放置一个有效且有用的Hero Image和Call to action。例如，下面的截图显示了New Balance的主页，设计师在主页上使用Hero Image来突出显示顶级产品分类和产品。如果你外贸经常把多个大类做成多张幻灯片，你也可以学学它的做法。