任宏:网页设计的认知心理要素分析论文

任宏:网页设计的认知心理要素分析论文

摘 要:人对事物的认知经由感知、大脑信息加工、记忆信息匹配,再做出行为反馈。网页作为计算机界面的子类和信息传递的载体,在设计上除了要考虑人的视觉特征和行为机能,还要使页面内容呈现符合人的心理认知。本文将从感受器、信息加工和记忆系统三方面的逐一分析,根据分析结果结合案例总结出的对应的设计方法。

关键词:认知心理;网页设计;交互设计

如今互联网产业的飞速发展和显示设备的流行使人们越来越认识到界面设计的重要性,简洁清晰的用户界面不仅给使用者带来使用效率的提升,也成了各大企业提高产品竞争力和赢得用户口碑的优势所在。随着移动互联网的发展,原本存在于PC端的网页有了更丰富的形式,比如基于H5技术的移动端网页、小程序、hybrid App、以及最新chrome范式的PWA应用等。不断变化的交互方式难用旧有模式理解,因此提高网页的可用性和用户满意度就需要将设计建立在人的认知规律之上。

1 认知心理学的发展

认知心理学是现代心理学研究中最为重要的研究取向,而不仅是单纯的心理学分支[2]。从上世纪50年代发展至今,主要以信息加工理论为依据研究人行为背后的心智处理过程,包括了思维、决定、推理、动机和情感程度的研究。其中符号系统假设解释了符号和符号组织可以指代某种事物,同时人的情感和情绪个性等因素独立于人的认知并影响认知,因此诺曼等学者进一步提出考虑人情绪调节的认知模型。可见基于信息加工为核心的研究方法已经成为当代研究人心理活动和社会行为的主流思路[2]。

2 界面认知模型分析

2.1 用户的视觉感知分析

大脑对周围环境的感知八成以上来自视觉。在界面浏览过程中,眼睛寻找和分辨页面内容的方式分为扫视和凝视两种。通常用户对一个页面进行反复扫视和凝视,说明该页面的信息使用户感到困惑或者页面不符合用户的预期,引起了用户的误解。具有明确的信息导航和视觉元素的界面是不会让用户产生多次扫视和凝视的。

表1

规律 说明 举例大小刺激 面积较大的区域更易吸引人 整版比半版广告有效对比刺激 对比越强烈越引人注意 黑白对比,互补色对比活动刺激 动态比静态内容更引人注意 短视频或动态网页颜色刺激 色相是色彩的首要特征,色彩具有表现力 单色与黑色的广告比黑白更引人注意;四色广告比黑白广告的注意度高出54%[4]新奇刺激 人的感官具有适应性,出乎意料的事物能转移人的注意力 警告标志、变色、或突然的响动

图1 记忆加工三级模型[2]

2.2 用户注意特征分析

知觉是海量的但注意力有限,根据信息通道容量的限制,人不能同时并行处理大量知觉信息,只有专注的那部分信息才会被识别。同时人的注意持续时间也有限度,注意时间越久越容易造成注意力分散。这两种限制决定了人们对外界的注意具有选择性。注意的选择性包括两个方面:一是目标指向选择,二是刺激驱动捕获。

目标指向的注意是自上而下的(概念驱动加工),该类型的注意是通过期望、信念等因素触发需要动机,最终对目标进行注意的过程,这是一种主动的识别模式。因此,当用户在网页搜索特定产品时,是一种目的性的搜索过程,明确提供用户目标路径并加以劝导能促进交易的达成。

我们经常将阿西洛马会议与华盛顿峰会相提并论,主要原因是这两次会议都是在技术发展之初寻求科学共同体内部甚至更大范围内对技术发展的共识的努力。首先,我们通过表1将这两次会议的主要内容、目标、结果、争议进行对比。

由于眼球的中央视觉优秀,其他区域模糊,所以人的视觉采集能力有限。在页面浏览时,目的指向型用户会首先确认当前位置是否正确,所以导航信息很重要。全局导航栏一般放在顶部或者左侧,这主要取决于页面是否包含二级菜单,因为二级菜单使用标签卡(Tab栏)而不是MenuList,会让人产生卡片之间是否互斥的疑虑。其次,合理利用动效和闪烁在网页中能够取得良好的效果:当页面拉取一份较大数据时,应配合进度条或加载动画告知用户状态而不是让用户误认为页面未响应或操作不成功。

一般意义上的可视性指视觉的通达性,是将产品的功能或重要的操作方式清晰明确地展示在用户眼前。另一层面,可视性还包括“为用户提供清楚的操作线索”,目的是使产品符合用户的思考与行动习惯,避免不必要的操作误区。[5]

2.3 用户记忆特征分析

图2 Radio组件考虑到新手用户认知(自绘)

人脑对记忆信息加工模型称作“记忆信息加工三级模型”(图1),它的加工模式如下:外界刺激被感知后,进入感觉记忆(也叫瞬时记忆),其生命周期大约只有0.2~2秒,而且通常具有鲜明的形象性。感觉记忆被感知才会进入短时记忆,短时记忆通过复述进入长期记忆。

根据前文介绍的记忆三级模型,由于前两种记忆都具有低容量和高度不稳定性,因此不要要求用户记住他当前在哪里以及前面做过什么。如果用户的视线被打断,就应该给予必要的提示让人们专注于当前任务。一个好的范例是从淘宝搜索结果页进入详情页购买,该页面最可能让买家作出购买决策的信息是价格,所以标题加粗,价格信息标红加粗加大。用户确认后下一步是要做购买决策,所以整个页面上“立即购买”和“加入购物车”按钮的色彩是最突出的,同时放在最显眼的位置上。

复杂功能的页面使用户面对的操作可能性包罗万象。帮助用户整理页面逻辑并对内容分级处理可提高页面的可视性。功能分级包括两个步骤,一是确定信息层级,将相同功能进行归类并保留关键入口,方便用户能辨识、选择、记忆。二是对分组之后的入口进行优先级排序,使功能具备可达性。百度学术将高级搜索隐藏在主要按钮旁边,当有需要时通过点击显示附加选项,这种足够简单和主次分明的设计便于用户归纳记忆页面的功能。

3 网页设计的认知心理要素分析

3.1 必要的提示与引导

短时记忆非常容易受到外界干扰而消失,而且留存的信息元素通常不超过1分钟。因此要想转变为长期记忆,需要对短期记忆不断重复;长时记忆的特性是较为稳定,形成条件是必须经过充分的信息加工,但部分长时记忆如果很少回忆也会渐渐丢失或者很难回忆。

在网页表单设计中,同样也需要引导和提示信息,因为表单本质上是对话,对话需要提出问题和回答问题同时也需提供必要的解释。例如Radio组件表示三个互斥的选项时,考虑到初级用户和避免发生歧义的场景,应提供详情浮层(图2)。其次表单项的验证一定要采用异步模式,这样无论正确与否都能马上给出结果。不应在最后告诉用户哪些项目填写错误,这会增加不必要的回视与回忆。

3.2 重视可视性

清查表中每项数据中都需要填写联系电话,按规定固定电话在区号和号码之间使用连字符“-”,手机号码位11位数字,数据量很大,常出现漏区号、位数错、非数字的情况,在这些列的后面增加一列并填上公式“=LEN(SUBSTITUTE(M2,“-”,“”))”,如图 1,同时为此整列设置条件格式,可以明显判断左侧的电话号码是否有输入错误。

3.2.2 听觉的可视性设计

另一种被动的注意的方式是通过刺激驱动的,当刺激量达到一定阈值就会被人感知,所以外界输入的信息越强、越不确定、越难控制则越吸引人的注意。心理学通过对比刺激信号强度证明了一些规律可引起信息量的变化,见表1。

3.2.1 视觉的可视性设计

通过声音实现人机交互是产品设计的常见手段,声音能配合其他感官进行辅助认知。提示音和错误警报能在加深记忆的同时减少认知负荷,甚至能营造带入感。当然,声音的使用在网页设计中要结合场景慎重选择,过量或不必要的提示会分散用户注意力降低效率。

3.2.3 功能分级的可视性设计[5]

1.3 统计学分析 采用EpiData 3.1软件录入数据,应用SPSS 19.0软件进行统计分析。计量资料以(±s)表示,两组间比较分析采用t检验,多组间比较采用方差分析,组间两两比较采用LSD法。以P<0.05为差异有统计学意义。

从现有研究成果来看,保护性耕作措施对于增加土壤中有机质含量有显著效果,相比于常规耕作方法,能够增加土壤表层生物活性,促进有机碳含量的提升,从而增加土壤团聚体的稳定性和水稳定性。比如,已经有学者对秸秆覆盖影响土壤容重和孔隙度等方面的机制展开研究,证明秸秆覆盖能够抑制地表水分流失,改善土壤通透性,优化肥力条件。土壤是碳和其他营养元素的主要存储空间和交换空间,有机碳含量仅次于海洋。但目前的研究主要集中于土壤有机碳和活性有机碳测定等方面,在农业生产过程中能够借鉴的经验较少,需要结合实际农业生产环境,研究耕种措施对土壤有机碳和活性有机碳的影响,从而为实际生产活动提供更多有价值的参考[2]。

最后很重要的一点是限制用户的行为以获得注意。例如表单中不生效的选项常常置灰;弹窗和遮罩将操作限制在特定区域内等。限制用户行为的方式赢得注意是一种高风险高收益的方法,使用时要考虑两方面:一是吸引注意时间不要太长,当用户感觉不受控制时会放弃继续使用。二是内容应简洁易懂,非必要选择时要预留“逃离”按钮保证任务流畅进行。

3.3 符合用户习惯

长时记忆的特点是容易产生错误、受情绪影响或者经过暗示被篡改。所以保持新页面与旧有页面操作习惯相一致有助于用户减少学习成本。频繁变动或者要求记忆太多内容会导致界面难以使用,更可能使用户在记忆和获取记忆时丢失关键特征,增加遗失或错误操作的可能性。

推荐理由:这是一个充满不确定性的时代,人类社会面临着前所未有的挑战。数据所有权该如何界定?当基因技术将人的寿命显著延长,我们该如何规划人生?什么样的教育模式才能适应未来?本书以一种全新的历史研究视角与叙事方式,对人类的过往历史、现实状况与未来趋势给予了重新梳理、深刻思考与大胆展望,贯穿其中的是对人类共同命运的深切关怀与严肃思考。

另一方面用户通常很懒,这和人的3个大脑有关,研究发现人的旧脑、中脑和新脑分别控制不同行为:旧脑能分辨食物和识别危险;中脑负责情绪控制;新脑负责制定计划。保持原有思路是无意识的,只需要消耗很少资源进行认知,所以用户在熟悉的事物面前感到轻松,而调用新脑进行学习则比较困难,这就是为什么人对学习不熟悉的知识有本能的排斥。例如我们日常使用的QWERT键盘虽然并不是最科学的键盘,但更符合人使用的DSK或MALT键盘始终没有取代前者的地位。这种现象在页面中也很常见,当用户习惯了某种页面布局和模式,之后的变动和改版往往被前一版界面带着走。这时的优化策略是尽量降低用户的学习成本。

结语

随着学科的发展,认知心理学作为先进的学科将越来越加深与电子设备,信息技术,工业设计挂钩,实体设备和器械的更新迭代要考虑到使用者的各种限制和思考模式,虚拟界面交互方式的变化使用户难以用旧有的模式来感知和理解,大量信息表达方式和新符号的运用层出不穷,这些变化不断在挑战人对新事物的处理能力。而这些原本不存在的问题也为认知心理学提供了更多研究方向。

“尉曰:‘今将军尚不得夜行,何乃故也!’”原文用“曰”字,并没有用表示霸陵尉态度的明显词语,而在英文翻译中却有“the watchman retorted”,“retorted”有反驳、回嘴之意,带有抵抗意味。汉语原文中有很多都是直接“某某曰”,没有表示人物情感态度的词语,在英译过程中加入表示情感态度变化的词语,有助于读者体会人物的心境。

参考文献:

[1]戴力农.设计心理学[M].北京:中国林业出版社,2014.3.

[2]胡骏.基于认知心理学的医疗设备界面体验设计研究[D].浙江大学,2018.

[3]周丽娟.认知心理学在导航设计上的应用[D].北京邮电大学,2011.

[4]柳沙.设计心理学(升级版)[M].上海:上海人民美术出版社,2016.

[5]张丽,吕雪瑶.可视性对产品设计的影响[J].设计,2017.

中图分类号:G434

文献标识码:A

文章编号:1671-1602(2019)01-0046-02

第一作者简介:任宏(1967~),女,辽宁人,副教授,研究方向:人机交互设计、UI设计、文化创意产品设计。

标签:;  ;  ;  ;  ;  ;  ;  ;  ;  ;  ;  

任宏:网页设计的认知心理要素分析论文
下载Doc文档

猜你喜欢