无主之地2老虎机欢迎您!
全国服务热线:158-6646-1895

通过设计和交互细节使首页轮播图更好用

 

  简单来说,作者想说的是:使用轮播图对于在有限空间来提升用户阅读效率是很有用的,但现有大部分情况轮播图设计得并不好用。

  遵守本文中提到的10个轮播图设计原则可以提使用高轮播图时的用户体验,如果在做设计时不能很好地注意这10个体验方面的细节原则,那么最好少用轮播图设计。

  在这篇文章中,作者首先会通过实例来过一遍10个轮播图设计原则,然后说明为什么以及怎样区别对待桌面端和移动端的轮播图,以及在文章最后列举出一种相比于轮播图更好更易用的展示方式。

  在美国一份针对50家顶级零售电商网站的统计中发现轮播图被广泛运用于电商网站:PC端52%的电商网站使用轮播图,而与此同时移动端56%的电商网站使用轮播图。(以下图表是译者个人为方便大家理解制作的)

  这篇文章的重点旨在讲如何通过设计和交互细节使首页轮播图更加user-friendly,而不是关注于轮播图本身应该放那些内容。此时,我们轮播图的内容应该注意以下几点:

  如果轮播图的内容与网站本身不相关,且没有经过精心设计和使用高质量的图片,那么用户体验会很糟糕 —

  如果轮播图的内容看起来太像广告,那么用户会直接忽视它,即使轮播图的内容与用户所需相关 —

  轮播图的一个主要优势就是可以放专门设计过的和大文件的图片 — 大文件和那些经过设计的图片会降低首页的退出率并且会对网站和品牌产生积极效果,因为那些经过设计的高清大图能在首页给用户留下一个好印象 — 在用户快速决定停留或者离开之前增加用户在首页的驻足时间 —

  那么,怎样在实际运用中做好轮播图设计呢,作者将10原则分成了四个部分来进行阐述:

  大部分用户不会看完所有的首页轮播图,即使是一个自动切换的轮播图。他们常常会在所有轮播图内容循环一遍以前就早早的跳到另一个页面或者向下滑动页面,换句话说就是没有人可以预测用户下一步到底会看哪一帧轮播图。

  因此,只要轮播图不是展示网站特点和展示网站产品的唯一方式,那么用户即使不看完所有轮播图问题也不大。

  我们之前做的轮播图可用性研究(仔细安排每一帧的展示内容和顺序),发现大部分用户会在轮播图自动轮播完一个轮回前就跳到另一个页面了,而在手动轮播图网站里轮播图只会停留在第一帧,除非用户主动去找不然他们不会注意到那些有用的信息。所以,即使完善轮播图的细节设计是一个很好的想法,但这并不能成为用户获取网站信息的唯一方式。

  自动轮播形式能够保证轮播图的每一帧都有一定的曝光量,并且实际上自动轮播的点击率(8%~10%)要比手动轮播的点击率高(1%~2%),这是因为:像动态图片一样,自动轮播图很容易把用户的注意力从页面的其他静态图片上吸引过来,因此轮播图的内容和设计质量都需要很高的要求才能保证用户产生有效的阅读,此时要注意三个极其重要的自动轮播图设计原则:

  如果轮播得太快那么用户就没有足够的时间看完感兴趣的轮播图内容;如果轮播的太快那么用户就会因为不感兴趣的轮播内容而被骚扰。

  轮播图的展示时间应该根据轮播图的文案内容来决定 — 尼尔森诺曼集团推荐自动轮播图的单帧时长按照1秒展示3个文案来播放,这就意味着每个轮播图的展示时长都是独立的。

  当用户主动点击轮播图按钮来看前一帧或者下一帧内容时,这种行为是有意进行的并且 (当前轮播内容)不应该被改变,即使用户决定去查看主页的其他内容。

  点击行为是用户的主动响应行为,它是反应用户意图和兴趣的一个强烈的信号。因此,当用户主动对轮播图进行交互时(轮播图)应该停止自动轮播,因为用户极有可能是有意要查看某一帧的内容。

  比较常用的设计是在一张五彩斑斓的图片上设置一组小点,但这通常会很难识别,把这些点放置在图片外面会好一点。

  这是使用箭头是比较好的方法,然而我们发现由于底图与箭头的对比不够以及箭头本身大小有限,会导致用户容易忽视这些控件,那怎样避免进行前后切换的箭头被用户忽视呢:

  除了传统的设计样式像是用来感知位置的小点和前后切换的箭头,“table of contents”这种设计样式同样也能起到一样的效果 。

  触屏设备上的轮播图与PC端有着很大的不同 — 之前列举的PC端上的交互逻辑在移动设备上是无效的并且有很多新的规则:

  hover状态是用户对某一特定帧内容感兴趣并有可能在阅读完文案后产生点击的一种信号,这意味着如果没有hover状态来激活自动轮播暂停,那么自动轮播在移动设备上的使用就不那么合适了 — 自动轮播会使图片在用户要点击轮播图几毫秒之前就突然切换,这会使用户跳转到错误的页面。

  本文由 @ vanhelsinglhj 翻译发布于人人都是产品经理。未经许可,禁止转载。

  可是移动端的轮播图基本上都是自动化吧?不管是电商平台的京东,还是人人都是产品经理

  听到很多言论说在中国程序员是吃青春饭的,那么产品经理呢,也吃青春饭吗?

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、社群为一体,全方位服务产品人和运营人,成立9年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。