记忆与设计

多图预警,4000 字长文。

在进入主题之前,让我们先来看看一道题目。

假设你是一名公共汽车司机。在第一站上来 6 个男人和 2 个女人,在第二站 2 个男人下车,1 个女人上车。在第三站 1 个男人下车,2 个女人上车。在第四站 3 个男人上车,3 个女人下车。在第五站,2 个男人下车,3 个男人上车,1 个女人下车,2 个女人上车。

.

.

.

.

.

.

.

.

.

.

.

.

.

问题来了:

公交车司机叫什么名字?

怎么回事

这道题体现了记忆过程的一些基本特征。

我将在接下来的内容中,简单的介绍一下人类记忆的过程与一些设计原理之间的关系。

0. 记忆的过程

人类的记忆过程可以划分为 3 个阶段:

  1. 编码(encoding)
  2. 存储(storage)
  3. 提取(retrieval)

其中,编码是通过各种感觉系统来接受信息,并进行初步加工的过程,总的来说就是关于人类如何感知这个世界的方法。百万年来,人类进化出了几种可以帮助我们更好地活下去的心理特征。

我们就从编码过程的三个基本特征开始。

1. 记忆过程的第一步:编码

这是我们公司洗手间的推广位,大家能快速看到哪些文字呢?

洗手间墙上的推广位

这是我们公司洗手间的推广位,大家看看有什么问题?

在这张推广图中,正文的文字被复杂的背景图所干扰,变得难以阅读。在这个场景这个时刻,每次看到都让我很纠结。

隔壁同学

上图这个界面呢,又有什么问题?

同样地,这个界面的主体应该是用户发布的内容,但也许是为了渲染气氛,加入了表意不明的背景图和花边纹理,抢夺了用户的大量注意力资源。

美妆嘉人

上图是进入某个 app 后,首屏都还没加载完,马上看到的空前绝后的新手引导。用户本来可以好好的浏览内容,逐步了解这个产品的价值,然而这个引导的字比首页的字还多……

通过上面的例子,我想告诉大家的是,人的注意力资源是非常有限的。上面的界面被人为地制造了大量干扰,耗费了过多注意力资源,让我们难以获取关键信息。

1.1 编码过程的基本特征:人类的注意力资源非常有限

有限到什么程度?请看图。

效果图

你以为用户看到的是上面的样子,其实是用户的清晰视野只有下面的区域。

真实的可视区域

怎样度量这个核心区域?你可以把手臂往前方伸直,然后朝上伸出拇指,你能看到的拇指指甲大小约等于人眼分辨率最高的区域,范围之外的分辨率成指数级下降,边缘区域甚至只有相当于屏幕上的几个像素。

既然注意力资源这么有限,我们在设计上应该怎么做呢?

我们在开始设计之前,要思考用户在每个界面的核心目标,不添加任何多余的元素,避免干扰用户。

iOS 验证密码

这是验证 Apple ID 的第一步,需要用户输入 iPhone 的解锁密码。由于输入密码是一个需要耗费大量注意力资源的行为,整个界面真正做到了毫无干扰。

macOS 桌面

既然注意力那么稀缺,为什么上图又不只显示一个窗口呢?因为当前这个场景,用户需要的是多窗口多任务联动,因此只能够通过其他方法来突出重点。这里使用了合理的视觉层级关系,让我们可以快速捕捉到上方的窗口就是当前的主体。

1.2 编码过程的基本特征:填补遗漏的倾向

我们再看下方的这一组图,能否识别出分别是什么东西?

格式塔的闭合与连续

我们的大脑其实是很「先进」的,可以自动填充那些没闭合的事物,也可以把不连续的东西连起来,把它们看做一个整体。上图中的熊猫,我们不会看成是一堆黑色色块,右边的两条相交的曲线,也不会成是一堆小点。

IMB logo;Dribbble 某图

我们可以利用人类这种自动「补漏」、自动「缝合」的心理特征,来减少界面上的部分元素。

涂手

上图是涂手的作品详情页,通过边缘的切割,和右侧、下侧的阴影处理,就可以让我们感知道是一个正方形的画布容器。

通过这个心理特征,还以用来拓展屏幕的有限空间。

App Store

只露出内容的一部分,就可以让用户感知到后续有更多的内容,突破了屏幕的限制,也节省了版面空间。

1.3 编码过程的基本特征:分组的倾向

我先说一个假的故事……

一个美女要我马上去跟她吃饭,我开心得要死,立刻去乘坐宇宙最快的交通工具——地铁。刚走到地铁门口,看到这样一个指引,马上一脸懵逼。

大家能快速辨识到哪边是进站,哪边是出站么?

好不容易来到了商场电梯,一看……

当我悄悄地按下了两个按钮之后,美女电话来了,她说你来这么晚,不吃了,直接来我房间吧,房间号是 114。美女就如救世主一样把我从电梯口拉了回来。

然后我兴冲冲的跑到一楼酒店入口,准备看看 114 号房在哪里……

为什么看到刚刚几张图,我们会觉得很别扭甚至无法理解呢?

因为人是有将事物分组的倾向,刚刚看到的都是分组不合理的例子。那应该怎么分组才合理呢?我们先来做个小实验。

不同颜色、大小的圆

在上图中,在进行数量计算之前,有的同学可能会根据颜色来把圆分组,有点同学可能会根据大小来分组。但是应该很少同学会直接一个一个数。

分好组的圆

如上图所示,经过一定方式的排列之后,我们会更容易计算圆的数量。这就反映了一个问题,为什么我们更容易感知有一定规律的事物?

百万年前,我们的祖先为了更好地理解事物,逐渐学会在复杂之中寻找规律,从而进化成为一种基本信息加工本能。这就是人类将事物分组的倾向。

我们倾向于把位置上靠近的物体看成一组,也倾向于把形状、颜色、运动方向相似的物体看成一组。

回头看看一些设计得很不错的案例,你会发现,把组分好也是一种技术活。

白云机场

把界面元素按照不同的特征来排列,可以帮助用户更快识别,节省了大量注意力资源。

燃兔

上面就是一些与记忆编码过程相关的特征。大家看看下图的界面应用了哪些特征和设计方法?

tribe 的短信验证界面

2. 记忆过程的第二步:储存

信息在经过识别加工后,就会进入到我们大脑的储存区域。按照时效来区分,记忆分为两种——短时记忆和长时记忆。

在继续下去之前,大家先回答两个问题。

  1. 人类记忆的编码过程,有哪几种认知倾向?
  2. 刚刚地铁站入口的图里面,地铁站的墙壁是什么颜色?

我相信有大部分同学回答不出来。上面的东西也不是很多,只有 3 个概念、1 种颜色,距离我介绍完也就相隔几分钟,为什么还是记不住全部东西?

有没有试过,接了个电话后,忘记接电话前在做啥;谈话过程中被打断,回头发现忘记谈到哪里;正在进行复杂的数字运算,被打断后需要重新计算。

被忘记的东西,是因为被储存到容量极小、极其不稳定、时效最短几秒最长仅有 2 分钟的短时记忆里面。

而应该有些同学能记住部分甚至全部概念,为什么呢?

因为他们之前有了解过这些相关概念,或者他们在听的时候有下意识地不断复述,在不断复述的过程中,这些短时记忆就会转变为长时记忆

短时记忆与长时记忆,及其转变

短时记忆是依靠不断复述来转变成长时记忆。

长时记忆也有自己的弱点:

  • 易出错,就像高压缩比的图像,解释度不高,提取之后很零散、模糊,例如「提笔忘字」;
  • 受情绪影响,伤心、生气等情绪激动的时候,短时记忆最容易变成长期记忆,特别是女性;
  • 追忆时可被改变,经常记错别人的事情发生在自己身上。

这里要注意的是,短时记忆是各种感官接收到的感觉,还有各种注意现象的集合,如果不转变成长时记忆,就会消失。短时记忆并不是从长期记忆里提取出来的缓存。

既然短时记忆那么不稳定,我们在设计上又可以做些什么呢?

2.1 清晰的流程与反馈

首先,还是得明确用户目标,特别是在包含多步操作的交互流程中,提供清晰的任务流程和反馈。

Town 的注册流程-1

Town 的注册流程-2

Town 的注册流程-3

2.2 记住用户的选择

其次,我们要记住用户的选择,减少用户的记忆负担。

喜马拉雅 FM 记住了我的上次登录方式

喜马拉雅 FM 记住了我的上次登录方式。

京东可实时同步购物车选中状态-1

京东的购物车,除了会提醒我商品降价之外,还会记住购物车的选中状态,而且多端实时同步。

京东可实时同步购物车选中状态-2

我自己经常遇到一个情况,就是在某些 apps 里面操作的时候被打断,回来之后就不知道在做什么了。我也会担心自己设计出这样的产品,因此我想到一个土办法,来验证自己的设计是否清晰高效。

在设计任务的关键页面的时候,假设此时收到一条重要的微信,然后你去微信,回复该消息后,再回来这个页面,还知道这个页面是干嘛的么?

假微信

当短时记忆转变为长时记忆之后,储存过程就结束了。在有需要的时候,外界的刺激或者我们自己都可以把长时记忆回忆出来,这就是我们记忆的提取阶段。

3. 记忆过程的第三步:提取

看到张学友,你们第一时间会想起什么?

有人会想起他的歌和演唱会,有人会想起他的广告,有人会想起他的电影,我只会想起他的表情包。为啥呢?这是因为每个人都有不同的心理模型。

心理模型:人们对世界的认知和处事的经验,受教育、家庭、社会环境等因素影响,不同的人,会有不同的心理模型。可以说是各种长时记忆的合集。

我们一直期望用户在使用我们产品的时候,把主要任务流程都烂熟于心,但除非是高频的需求,否则用户不可能经常使用我们的产品,因此他们对我们的产品的了解,也仅储存在短时记忆里面。

因此,在产品设计当中,需要思考如何帮助用户更好地理解和记住我们的功能与流程。

3.1 符合目标用户的心理模型

首先,我们要找出目标用户,然后所有的设计都要符合该用户群的心理模型,让该用户群更容易理解和记忆我们的产品功能或流程。

心理模型 - iOS 相册

上图是 iOS 相册查看大图的功能,我们可以通过很自然的拿捏手势来缩放图像,而且图片的展开和收起都在同一个位置上,哪里来哪里去,符合了全球人民的世界观和人生观,真正做到了普适设计。

iOS-dialog-出错摇晃提示

上图是 iOS 系统的登录框,在输错密码之后,他会用拟人的手法来模拟错误提示,就像在摇头一样。据我了解,全球好像只有一个种族的摇头不是表达否定的意思。

航班信息在 iOS 信息 app 中的呈现方式

上图是一个航班细节的信息,非常难以识别和提取。人类进化了上百万年,但文字的心理模型仅存在数千年,因此文字阅读并不是自然的,而是靠后天不断练习而成的心理模型。因此,纯文字的表述让用户难以储存和提取。

航班信息在飞猪中的呈现方式

通过优化排版布局后,会比纯文字更容易识别,但是也不太利于记忆的提取。

Hipmunk Travel 的航班选择

这个界面与前面的相比,更容易识别和提取,因为它通过各种图形化元素来表达关键信息,并且通过拖动操作来代替文字输入和点按选择。图形跟自然手势都是比较通用的心理模型。

3.2 符合逻辑

另外一方面,有很多新的新创意,用户都没有见过,所以没有任何可用的心理模型。那为了让用户更容易理解,这些创意必须符合逻辑。

逻辑-appstore

上图的界面跳转、多选操作在我们现在看来最平常不过,但是对于刚开始接触智能手机操作系统的人来说是全新的东西,页面从边缘滑入、多选的操作、状态的实时变化,在现实世界中不存在这样的模式。页面前进、返回的动效是相呼应的,操作和反馈是对得上的,这就符合了基本的逻辑,用户也容易理解和记忆。

3.3 稳定的最简路径

有一个经典的心理学案例,有一个人,上班的时候一直走了远路,后来另外一个人告诉他有一条捷径,但是他第二天还是走了远路,那个人就问他为什么,他回答说「我赶时间,所以我走了远路」。为了节省注意力资源,也为了减少犯错的机会,人类倾向于使用那些更省力的方法。

这就带给了我们一个启示,就是在设计任务流程的时候,要优先保证任务路径的稳定,然后把各个流程节点简单化。这里用的是「最简」而不是「最短」,是避免大家把很多东西放在同一个流程上,就觉得让用户走了捷径。

肌肉记忆

在我关闭朋友圈之后的一段时间,我还是习惯性的会去打开朋友圈。然后,我点错了入口。

稳定的最简路径,在不断重复后,可直接转化为肌肉记忆。我觉得做产品做设计的终极目标,就是要让关键功能都变成肌肉记忆。

总结

以上就是记忆过程与设计之间的一些关系。

其实很多原理大家都知道,我只是用心理学上的一些特征,来告诉大家这些设计原理背后的原因,加深大家的理解。

许可君.Suer wechat
本文同步更新至我的公众号与知乎专栏