通过对首页状态从上至下从左到右的扫描,我们可以发现以下体验问题:
- 温度的符号表示不标准,摄氏温度的标准写法是度(小圆圈)应显示在C临近的左上角,现在距离太远了;
- 天气信息和天气图标被不相关的WiFi信息隔开,不满足亲密性原则;
- wifi图标颜色很奇怪,和品牌色不一致;已经连接上wifi,wifi信息就不重要了,没有必要显示如此醒目,干扰视线。
- 已经成功连上wifi,但还有红点提示,不理解有什么需要提示的,红点显示有干扰;
- 搜索框内的搜索图标颜色不稳定,有时候显示较浅,有bug;
- 头条资讯的新消息提示显示位置太靠上,看起来和名站更亲,而根据亲疏关系,提示应该离名站远,离下方消息近;
- 两个提示中都有“点击刷新”但显示样式不一致;品牌色的文字,通常让人感觉是可操作的,但是“头条资讯”是没有操作预期的,此处又用品牌色来表示强调,品牌色到底是用来表示操作还是强调,容易让用户困惑混淆。
- 置顶是一种状态,用户可以更直观的看到,用品牌色标签强调会产生视觉干扰;
- 返回按钮显示太小,不容易注意到,而且太小,点起来也会有心理压力和操作负担;
3. 对比竞品
对比竞品,主要是为了参考行业的设计现状,看看我们在设计细节上是否有优化的空间。
还是以vivo浏览器首页为例,对比UC和QQ浏览器首页,我们可以发现以下几个明显的视觉差异:
- 在温度的处理上,UC和QQ都同时省略了C,在保证大家可理解的基础上,让信息更简洁,同时也避免了我们显示上的错误;
- UC和QQ的搜索框物理视觉尺寸和我们相似,但在整体感知上却比我们突出,主要是搜索框上方的信息降噪效果比较好。
- 我们的信息流标题文字,相比竞品,明显又大又粗,需要研究一下字体的设计,尽可能取得标题在醒目度和干扰度上的平衡。
采用远观近扫加对比的方法,我们可以完成所有重点页面的体验走查,虽然看起来有些繁琐,但对于一个产品来说,核心关键页面其实就那么几个,是非常有必要定期做这样细致的走查的。
都说魔鬼藏在细节里,细节决定体验,一个页面的细节繁多,由于工作记忆的限制,想依靠记忆找出所有的问题几乎是不可能的,所以非常建议设计师将所有页面横铺出来,反复扫描,对比观察,以期能穷尽所有问题。
通过上面的步骤循环,我们可以完成每个核心页面的体验走查。
之后,还有一步不要忘了,那就是将一个任务流程的核心关键页面都串起来对比分析一下。
以vivo浏览器的搜索流程为例,我们看一下用户进行搜索的核心关键流程:
通过整体流程的对比,我们至少可以发现三个比较明显的问题:
- 产品的icon和产品内部的品牌色完全不相关;
- 搜索框在三个关键页面中的显示样式和形式均不一致;
- 三个页面的核心字号看起来相似,但好像又有点差异,不符合字体字号的一致性原则。
到这里,一个任务流程本能层次的体验走查就结束了,它涵盖了表现层的感知设计,框架层的界面设计、导航设计和信息设计。
经过这样一轮走查,我们得到的除了具体的问题外,还有一份非常规范的走查文档,千万别小看了这份文档,它可以给我们带来三个好处。
- 换个时机,换种心情来走查,往往会有意想不到的新发现,而这份文档,可以让我们的隔天的走查更轻松。
- 阶段性的重新走查时,我们只需要替换所有的页面截图,即可开始新一轮的分析,可以省去重新组织分析思路的过程。
- 如果团队里有多个同学一起走查的话,提供对应的核心页面,可以让其他同学在你的劳动成果上,快速的完成不同视角的体验走查,以更全面的发现问题。
通过本能层次对页面细节的走查和优化,我们可以增加页面对用户的吸引度,进而触发用户展开下一步的行为。
四、行为层次走查的原则与策略本能层次的体验走查,关注的是静态页面的色彩、布局、主次和细节,而行为层次则是以核心任务流程为脉络,关注的是所有页面切换的动态过程。这个过程宜慢不宜快。行为层次走查第一个策略,我称之为“慢点”。
我们以打开vivo浏览器为例,看一下浏览器的打开过程。为了便于观察,我们可以将视频半速播放,这样可以给我们的大脑更多时间,去觉察更多细节。
App打开视频:https://v.youku.com/v_show/id_XNDUzMDg3MDgyMA==.html
在进行行为层次的交互之前,要求设计师要清空掉自己所有关于产品使用的认知和操作经验,本着操作前有预期,操作时有反馈,操作后可撤销的基本原则,逐步检验。
1. 操作前有预期
浏览器icon的图标和名称要充分符合用户的预期。
仔细观察一下整体桌面:在桌面上能否快速找到浏览器icon?浏览器的icon设计样式是怎样的?是否符合用户的典型认知?是否有文本辅助图标说明?
经过仔细观察,我们可以发现浏览器的图标设计其实是存在一些设计问题的:
首先从意向表达上来说,地球是否是最好的代表浏览器的元素?
其次,现有icon中的圆球是否能让所有用户都认知为是地球?
这两点都需要设计师再仔细斟酌。
最后,和桌面的其他自带App(相册、天气、电话等)的icon相比,浏览器的icon明显缺少层次和细节,和其他icon的一致性也比较差。
2. 操作时有反馈
浏览器icon的点击反馈要及时且合理。
找到浏览器icon后,点击icon。点击按下时,浏览器icon有明显的点击状态(icon变暗),反馈及时且合理。从手指松开(icon恢复为正常状态)到应用开始打开,中间有明显的延迟,首次打开效率有优化的空间。同时应用打开时,打开页面和icon的动效衔接不够流畅。
应用打开与退出视频:https://v.youku.com/v_show/id_XNDUzMDkzMTg2NA==.html
主要原因有两个:
1. 缺少icon和应用页面的形变衔接(对比iPhone,可以看出iPhone的形变衔接是非常流畅的)理想情况下,应该是应用页面从icon的样式和位置开始打开至全屏,退出时又缩回至应用icon的样式和位置处。目前我们打开时位置还有一点对应关系,退出时是完全没做对应。
2. 应用icon是圆角,最终的页面显示因为手机的造型,也是圆角的,但是中间的页面放大的过程却一直是非常硬的直角,圆尖圆的页面变化看起来会比较突兀。
再回到我们首次打开应用的过程,松手后应用并没有直接进入首页,而是进入了启动页。