【笔记】认知与设计

近期读完了《认知与设计:理解UI设计准则》,从人类认知的角度阐述了很多界面设计准则的深层原理,进一步说明了界面设计并不是没有标准,人人都可以的,好的设计一定是考虑了诸多因素之后所采取一种平衡。

第1章:感知

我们对世界的感知不是对其真实的描述,很大程度上是我们“期望”感知到的。

经验影响感知

用户经常不认真看屏幕就点击按钮或链接,他们更多是靠以往的经验来引导他们对界面的感知。

因此要保持一致性,因为用户是根据期望的特征去寻找的,不一致他就可能找不到

环境影响感知

人们经常根据周围的情景去理解事物,视觉感知也是一样的,上下文会影响我们对某一个词的理解

目标影响感知

我们的目标会过滤感知,与目标无关的东西都会被提前过滤掉,而不会进入到意识层面

对设计有什么影响?

设计时要避免有歧义的信息,并通过测试确认所有用户对信息的理解是一致的

保持一致。在一致的位置摆放信息和控件,一致性能够让用户很快的找到并识别它们

理解用户目标,知道它们强烈的要感知什么,从而确保提供必要的信息清晰的对应用户的感知

第2章:格式塔

人类视觉是整体的,我们的视觉系统自动对视觉输入构建结构,并且在神经系统层面上感知形状,图像和物体,这些理论叫做视觉感知的格式塔原理

接近性

物体之间相对距离会影响我们感知它们是否以及如何组织在一起。相互靠近的物体看起来属于一组,而那些距离较远的就不是。

设计上的应用

通过拉近某些对象之间的距离,拉开与其他对象的距离,使他们在视觉上成为一组,而不需要分组框或者分割线,这样可以使界面更加简洁

相反,如果空间摆放不当,相关空间之间的距离太远,人们就很难感知到它们是相关的,软件就会变得难以学习和记忆

相似性

如果其它因素相同,那么相似的物体看起来归属一组

连续性

我们的视觉倾向于感知连续的形式而不是离散的碎片

滑动条控件是使用了连续性原理的控件在滑动条的范围内,我们看到的是一个整体,而不是被滑块分隔成的两段

封闭性

我们的视觉系统自动尝试将敞开的图形关闭起来,从而将其感知为完整的物体而不是分散的碎片。

对称性

我们倾向于分解复杂的场景来降低复杂度,视觉区域中的信息不止有一个可能的解析,但我们的视觉会自动组织并解析数据,从而简化这些数据并赋予它们对称性

比如我们的视觉系统会将复杂的二维图像解析成三维场景

主体/背景

大脑将视觉区域分为主体和背景,主体包括一个场景中占据我们注意力的所有元素,其余则是背景

常用来做弹窗,作为用户注意力焦点的内容临时成为了弹窗的背景,弹窗则会短暂成为新的主体

共同命运

一起运动的物体被感知为一组或是彼此相关的

在设计一个界面之后,使用每一个格式塔原理,来考量各个元素之间的关系是否符合设计初衷

第3章:我们寻找和使用视觉结构

信息呈现方式越是结构化和精炼,人们越能够更快和更容易地扫描和理解

少量的信息也能通过结构化来使其更容易被浏览,电话号码和银行卡号就是两个例子,分段显示

数据专用控件也是同样的道理,输入日期的时候可以用日期控件,方便用户的输入

视觉层次

将信息分段,大块整段分割为小段

显著标记每个信息段和子段,以便清晰地确认各自的内容

以一个层次结构来展示各段及其子段,使得上层的段能够比下层更重点地被展示

第4章:阅读不是自然的

我们的大脑没有天生的阅读能力,阅读其实是一种人造的,通过系统的指导和训练获得的能力

阅读设计识别特征和模式,模式识别可以是从上而下,特征驱动的过程,也可以是从下而上,上下文驱动的过程,阅读也是如此

糟糕的显示会将熟练阅读者无意识的无语境阅读降低为有意识的基于语境的阅读,增加记忆负担,从而降低阅读速度和理解能力。对于非熟练的阅读者,糟糕的文字显示可能会完全阻碍于都

常见阅读障碍

使用用户不熟悉的词汇

难以辨别的字体

过小的字号

嘈杂背景上的文字

信息被重复的内容淹没

居中对齐的文字

背景和文字的反差度太大或太小

如何提供良好的阅读支持

保证文字允许基于无意识的有效处理,可以通过避免上边描述的缺陷

使用有限的,高度一致的词汇,说人话

将文字格式设计出视觉层次

除了常见的阅读障碍,很多界面显示的文字都太多了,用户没有必要去阅读。要尽量的减少文字描述,精炼语言

第5章:色觉是有限的

人类色彩感知的限制

视觉是为检测反差(边缘)优化的,而不是绝对亮度

辨别颜色的能力依赖于颜色是如何呈现的

有些人是色盲

用户的屏幕和观看条件会影响对颜色的感知

遵循以下5条准则,保证用户能够获取信息

用饱和度,亮度,以及色相来区分颜色

使用独特的颜色

避免使用色盲无法区分的颜色做对比

在颜色之外使用其他提示,不要完全依赖

将强烈的对比色分开

第6章:我们的边界视力很糟糕

边界视力的存在主要是为了提供低分辨率的线索,引导眼球运动,使得中央凹能够看见视野里所有有趣和重要的东西

另外一个优势,他能很好的察觉运动

让信息可见的常用方法

放在用户所看的位置上

标记出错误

使用错误符号

保留红色以呈现错误

还有一种方法更有效,就是弹窗,但是有明显的负面效果,会打断用户,应谨慎使用

或者使用动效来引起注意,比如短暂的晃动或闪烁,但是要注意时间,不能太长,否则也会变成有意识的打扰

第7章:我们的注意力有限,记忆力也不完美

记忆分为长期记忆和短期记忆,短期记忆不是存储,他是一种意识,等于注意的焦点,即任何时刻我们意识中专注的任何事物

短期记忆

特点是低容量和高度不稳定

容量接近于3到5个

将注意转移到新事物上就得将其在之前关注的事物上移开

对设计的影响

模式——容量有限和不稳定是为什么界面设计准则常说的要么避免模式要么提供足够模式反馈的原因

搜索结果——人们在搜索完成之后注意力会从输入转移到结果上,因此会经常忘记自己的搜索词

多步操作——允许人们在完成所有操作的过程中随时查阅使用说明

长期记忆

特点:易出错,印象派,异质,可回溯修改,也容易被记忆或者获取时的很多因素影响

对界面设计的影响

用户界面的一致性有助于学习和长期保留,不同功能的操作越一致,或者不同类型对象的操作越一致,用户要学的就越少。

第8章:对注意力,形状,思考以及行动的限制

建立在短期记忆和有限注意力之上的几个模式

模式一:我们专注于目标而很少注意使用的工具

    设计不应该唤起用户对网站本身的注意,它们应该隐藏在背景中,让用户专注于自己的目标

模式二:我们使用外部帮助来记录正在做的事

    交互系统应该分别标识出哪些是用户已经完成的,哪些是用户没有完成的

模式三:我们跟着信息“气味”靠近目标

    设计应该要理解用户每次在做决定时所对应的目标是什么,并保证软件为用户的每个重要目标提供选项,清晰地标识出各个目标所对应的选项

模式四:我们偏好熟悉的路径

    我们一定学会了用某种方法去执行某个任务,可能就会继续这样做,不会再去找更有效的方法。对应交互设计来说,这意味着:有时不动脑子胜过按键,引导用户到最佳路径,帮助有经验的用户提高效率

模式五:我们的思考周期:目标,执行,评估

    目标:为用户所涉及的目标要有清晰路径,包括起始步骤

    执行:软件中的动作和对象应该基于任务而不是如何实现

    评估:向用户提供进度反馈和状态信息

模式六:完成任务的主要目标之后,我们经常忘记做收尾工作

    设计要考虑,用户可能在完成任务后会忘记那些收尾工作,如果有,那么应该帮助用户记住,或者根本不需要用户记住

第9章:识别容易,回忆很难

看到和选择比回忆和输入更容易

尽可能使用图像来表达功能

使用缩略图来紧凑地描绘全尺寸的图像

越多人使用的功能,应该越可见

使用视觉提示让用户知道他们所处的位置

让认证信息(用户密码,域名)容易回忆

第10章:从经验中学习与学后付诸实践容易,解决问题和计算很难

人们善于从具体的经验和观察中概括并得出结论,生活中我们就在不断地概括总结

从自己生活中或者亲人好友们那里获得的经验要比那些读到或者听到的经验更有影响力

人们犯错之后,总不能学到正确的教训

操作已经学会的动作是容易的

    容易进入无意识的状态,交互设计应该讲任务设计的能够很快进入无意识,这样会更快,更容易,更少出错

解决问题和计算是困难的

    人们通常使用外部记忆作为辅助,例如记下中间的计算结果,画草图等

交互设计应该辅助用户去记忆,降低计算难度:

显著地标识系统状态和用户当前进度

引导用户完成他们的目标

不要让用户诊断系统问题

尽可能减小设置的数量和复杂度

让用户使用感觉而不是计算

让系统令人感到熟悉

让电脑去做计算

第11章:许多因素影响学习

当操作专注于任务、简单和一致时,我们学得更快

设计师必须彻底的了解用户目标,和工具所要支持的任务,要了解这些,必须做到以下三步:

做一个任务分析

设计一个专注于任务的概念模型,其中主要包含对象-操作分析

严格按照任务分析和概念模型设计用户界面

对象-操作矩阵:列表式操作,行表式对象,矩阵越大,意味着越多的概念需要学习,长矩阵表明有很多对象需要理解,宽矩阵表明有许多操作需要掌握。小而紧凑地矩阵表明对应的设计是容易学习的

当词汇专注于任务,熟悉和一致时,我们学的更快

词汇应该是专注于任务的

词汇应该是熟悉的

专业词汇应该保持一致

风险低时我们学的更快

为了促进学习,交互系统应该提供风险低的环境,使用户不怕探索,这要求在设计上:

尽可能防止出错

停用不合理的命令

向用户清晰地展示他们做了什么,这样错误就容易被发现

让用户能够轻松的撤销,反转或者修正错误

都12章:我们有时间要求

为了让用户觉得响应度高,交互系统应遵循下面这些准则:

立刻告知收到用户的动作,及时回应用户需要时间,保持用户对因果关系的感知

让用户知道软件是否在忙

在等待一个功能完成的同时允许用户做别的事情

动画要做到平滑和清晰

让用户能够终止(取消)他们不想要的长时间的操作

让用户知道长时间的操作需要多久时间

让可能让用户来自己掌控工作节奏

大脑的时间常量

1ms——可以检测到音频中无声间断的最短时间

10ms——潜意识的感知,很少在交互系统中使用

0.1s——如果反馈超过0.1s,因果关系的感知就被打破了。因此按钮必须在0.1s内显示它们被按下了

1s——对话中可以有的最长间隔,又因为交互系统的操作时一个对话的形式,所以交互系统应该避免自己的长时间间隔。系统有1s的时间去执行用户要求做的或者标识出操作需要多少时间,要不然,用户会失去耐心

10s——通常是人们计划安排和大块任务进行分解的时间单位,如:在一个文本编辑器应用中完成一个单一的编辑,在银行账户程序中输入一个交易。软件应该支持对任务做10s 一块的分解

10s——差不多是用户原因花费在“重量级”操作上的时间,例如文件交换和搜索,如果超过了,用户就开始失去耐心。如果系统提供了进度反馈,操作时间可以更长一些

100s——支持快速关键决策的交互系统应做如下设计:所有需要信息都显示在决策者眼前,或者以通过最小量的浏览和搜索,容易地获得。

其他可以使系统达到高响应的一些指导原则:

使用忙碌或载入的图标,比如 Mac OS上的选择色轮,loading的图标等,显示系统正在工作中

使用进度条。进度条比忙碌表示更好,他可以让用户看见还剩下多少时间。它也有几个指导原则

    显示剩下多少工作,不是完成了多少

    显示总进度,而不是当前步骤的进度,比如5步中的第3步

    从1%开始,而不是0

    操作结束是,只要非常短暂的显示100%

    进度的显示应该是平缓的,线性的而不是不稳定爆发式的

    使用人们认知的精度,而不是电脑的精度,比如4分钟左右而不是240秒

单位任务内的延迟比单位任务之间的延迟麻烦,比如保存一个文档,对这种延迟人们较不敏感,而打字时出现的延迟,人们就比较敏感。

先显示重要的信息,再显示详情和辅助信息,可以使系统看起来更快一些。载入图片的时候,先载入低分辨率的,再加载高分辨率。

在手眼协调的任务中伪装重量级计算。比如阅读文档,调整窗口大小等,如果系统无法足够快的更新显示来达到这个手眼协调的时限,就可以先提供一个轻量级的模拟反馈

提前处理。尽可能赶在用户之前做处理,提前预知用户的下一步操作,并做处理。

根据用户输入的优先级而不是输入的顺序来处理,比如用户在点击后退之后,点击停止按钮,应该马上停止载入界面,而不是等加载完了再执行停止

监控时间承诺,降低工作质量来保证不落后。交互系统在发现存在错过期限的时候,要采用更简单,更快的方法,通常是以降低输入质量为解决方法,来保证系统反应过慢

提供及时反馈,即使是在网页上。比如减少图片的质量,显示缩略图等。

附录:著名的用户界面设计准则

Nielsen & Molich(1995)

一致性和标准

系统状态的可见性

系统与真实世界的匹配

用户的控制与自由

错误预防

识别而不是回忆

使用应灵活高效

具有美感和极简主义的设计

帮助用户识别、诊断错误,并从错误中恢复

提供在线文档和帮助

Stone et al. (2005)

可见性——朝向目标的第一步应该清晰

自解释——控件本身能够提示使用方法

反馈——对已经发生了或者正在发生的情况提供清晰的说明

简单化——尽可能简单并能专注具体任务

结构——内容组织应有条理

一致性——相似从而可预期

容错性——避免错误,能够从错误中恢复

可访问性——即使有故障,访问设备或者环境条件存在制约,也要使所有目标用户都能够使用

JJohnson (2007)

原则1:专注于用户和他们的任务,而不是技术

了解用户

了解执行的任务

考虑软件运行环境

原则2:先考虑功能,再考虑展示

开发一个概念模型

原则3:与用户看任务的角度一致

要争取尽可能自然

使用用户所用的词汇,而不是自己创造的

封装,不暴露程序的内部运作

找到功能与复杂度的平衡点

原则4:为常见的情况而设计

保证常见的结果容易实现

两类常见:很多人 和 很经常

为核心情况而设计,不要纠结于边缘情况

原则5:不要把用户的任务复杂化

不给用户额外的问题

清除哪些用户经过琢磨推导才会用的东西

原则6:方便学习

从外向内而不是从内向外思考

一致,一致,还是一致

提供一个低风险学习环境

原则7:传递信息,而不是数据

仔细设计显示,争取专业的帮助

屏幕是用户的

保持显示的惯性

原则8:为响应度而设计

即刻确认用户的操作

让用户知道软件是否在忙

在等待时允许用户做别的事情

动画要做到平滑和清晰

让用户能够终止长时间的操作

让用户能够预计操作所需的时间

尽可能让用户来掌控自己的工作节奏

原则9:让用户试用后再修改

测试结果会让设计者感到惊讶

安排时间纠正测试发现的问题

测试有两个目的:信息目的和社会目的

每一个阶段和每一个目标都要有测试

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,905评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,140评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,791评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,483评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,476评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,516评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,905评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,560评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,778评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,557评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,635评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,338评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,925评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,898评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,142评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,818评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,347评论 2 342

推荐阅读更多精彩内容