主页 > 建站知识 > 建站指南 > 策划方案 >

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

作者/整理:07fly 来源:人人都是产品经理 2018-06-27 Tag:


前言

“Are home page carousels actually helpful to users? ……(此处省略一万字)The short answer is that home page carousels can work, but in practice the vast majority of implementations perform poorly with end users……(此处省略一万字)But saying that home page carousels should never be used doesn’t fully align with our seven years of large-scale usability testing — at least in an e-commerce context.”

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

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

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

一、实际运用中的轮播图

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

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

二、轮播图设计十原则

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

1. 滑动(轮播)顺序和点击后的落地页

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

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

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

两条原则:

2. PC端自动轮播逻辑

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

原则1:自动轮播不要太快——

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

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

其实也可以学学苹果将轮播时间外显来让用户有一个心理预期。

原则2:用户hover内容时应该暂停自动轮播——

Web information seeking and interaction 指出用户鼠标的位置与他们在当前页面关注的内容有内在联系 :

原则3:用户有任何主动交互行为时应该停止自动轮播——

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

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

3. 轮播图控件应该具备两项功能

原则1:轮播图控件提示当前图片所在帧数位置——

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


上一篇:我们观察到,2018年网页文本字体的设计趋势有这7种

下一篇:电商支付流程的「返回」逻辑

相关新闻

2008-2020 © 成都零起飞科技有限公司 网站建设 开源CRM 建站系统 旅行社ERP系统 虚拟主机