01 信息层级
02 信息结构
03 阅读路径
04 信息密度
05 文案表述
本文将从信息层级、信息结构、阅读顺序、信息密度、文案表述五个层面来探讨如何降低用户认知负荷。
格式塔心理学的封闭性原理告诉我们,人们在认知某个东西的时候首先看到的会是整体、而不是单独的部分。如图所示,你首先看到的是一个蓝色的字母U和深褐色的人头侧脸,其次才是构成这个形状的各种细节。
从人类视觉系统成像原理来说,人类天生对于颜色对比非常敏感(彩色视觉是因为视网膜中3种视锥细胞分别感知特定颜色所致,当用户同时看到多种不同的颜色时,不同视锥细胞就会被激活眼睛感受到强烈的对比)。
因此,在设计界面时通常会通过大面积的色块对比来凸出层级更高的信息。
总结来说,我们在平时的设计中常用形状大小差异和颜色对比差异来拉开信息层级。
此外,由于人眼视度(舒适的垂直视场角度为-30°~25°)和用户使用不同设备时的阅读角度问题,人眼对于屏幕上不同区域的关注度有着天然的差异。
因此,我们在设计时若想拉开信息层级,除了使用面积和颜色对比外,也可以通过位置对比来实现,即将层级较高的信息置于舒适阅读区内。如图所示,移动端设备位于屏幕中央偏上的信息在阅读舒适度上会优于屏幕下方的信息。
我们知道了如何通过设计手段来区分信息层级,那在信息层级区分上是不是越多越好呢?
显然不是,信息层级过多也会增加人脑的认知负荷(整个页面显得很花哨);而信息层级过少,则页面的内容展示会比较平均、不一定能突出所有重点信息。一般来说,我们可以将信息划分为重要信息、次重要信息、一般信息和和辅助信息,也就是信息层级控制在4个以内比较合适。
如图所示,我们把聚划算的页面做高斯模糊后,里面的信息层级就一目了然了。
2.1 信息单元=信息本体+信息容器
2.3 信息容器结构——三角、宫格、列表
我们前面提到过信息单元=信息本体+信息容器(容器为具有明显视觉区隔的信息承载物),而信息容器的排布也有其内在的规律。
笔者体验过大量产品后,大致总结了3种较为常见的容器排布结构,即三角结构、宫格结构和列表结构,每种结构容器的排列规则会遵循一定的主次关系并根据其特点有不同的适用场景。
三角结构▼
宫格结构▼
列表结构▼
表单设计领域的专家Adam Silver通过实际项目发现:将较长表单按照关联性拆解为若干部分,能有效提升用户满意度以及完成率。除此之外,Adam还总结了这种设计理念的16个优点,我们认为其中比较有价值的是这3个点:
3.2 视觉引导提升信息阅读率
信息密度不宜过高或过低
这里的信息密度指的是在单位容器内(卡片、页面)所呈现的信息量,比如在1个页面中如果信息密度大,则相对屏效较高,但却容易增加用户的认知负荷;反之,1个页面中信息密度低则相对屏效较低,用户的认知负荷也相对较低。
我们来看1个关于信息密度对于阅读体验影响的案例:在美国开车,人们常常因为看不懂街边的停车牌而违停被罚款,我们可以看到左图中的停车牌上密密麻麻全是字,想要阅读根本无从下手。
Nikki Sylianteng是一个华裔的设计师,当她初来乍到美国时也因此遇到了很多不便,针对这个问题她简化用户的需求,即
▶ 当前这个地方我能不能停车
▶ 能(免费)停多久
在广告场景下,当用户被图片吸引视觉焦点后,文案表述就显得尤其重要了。这时候我们要搞清楚3个问题:
在回答完以上3个问题后还需要注意,我们的文案描述目标受众是否能够理解,因为人群不一样,其受教育程度和理解能力也会不一样。
5.2 文案上避免歧义
在设计动作文案时,我们时常会受到惯性思维(常态场景下的通用做法)的影响而忽略了动作本身的意涵。
比如下图的二次确认弹窗用户取消上传和取消订单是一个对当前行为的否定,但我们习惯于用“确定”和“取消”来让用户回应是否进行某个行为(我们也可以从另一个角度理解,否定的否定就是肯定,点击「取消」按钮即继续用户当前行为,但这种理解很绕),这个时候就会带来理解上的歧义,当出现这种情况时,最好的做法就是将动作本身简单明了地描述出来避免产生歧义。
认知负荷wiki百科:
https://en.wikipedia.org/wiki/Cognitive_load视觉系统wiki百科: https://g.126.fm/02jAa3G 利用视觉设计引导用户“注意力”: https://www.woshipm.com/pd/4486131.html 识别与回忆原文: https://www.nngroup.com/articles/recognition-and-recall/
识别与回忆译文: https://www.zcool.com.cn/article/ZNjIxODA4.html 人眼视觉能力: https://g.126.fm/01TbsXG 移动端长表单设计注意事项: https://www.uisdc.com/long-form-design-2
Form design patterns: https://g.126.fm/01wCm7y
4 clever psychology rules for making better UX decisions: https://g.126.fm/02TcOSM 8 pwerful takeaways from eye tracking studies: https://www.quicksprout.com/eye-tracking-studies/ Parking sign redesign: https://nikkisylianteng.com/parking.html 设计师如何写出有营销力的文案: https://www.woshipm.com/copy/2335042.html