视觉设计在产品中的价值

我们生活在一个信息爆炸的时代,每天所看到的信息都是有意识或无意识地被我们大脑所吸收,这些信息在我们决策和行为中有着很大的影响力。

受DNA的影响

第一个原因来自于我们的DNA,E.詹森在他的《基于脑的学习》一书中指出,40%的脑神经与视网膜相连,与所有其他感官的总和相比更多的神经元致力于视觉,大脑中所有东西,约有90%由视觉刺激触发的。此外,研究表明,约65%的人是视觉学习者,他们更喜欢学习和接触与视觉元素相关的信息。

我们的大脑只需13ms就可以捕捉到眼睛看到的图像,比眨眼快10倍,这意味着我们的大脑以惊人的速度吸收着视觉信息。


用户界面

因此人们通常认为,在用户界面上使用一些视觉元素,诸如:插画、图形、色彩、排版、图标等会给我们设计的产品带来比较好的视觉吸引力。



但是这些视觉元素有效吗?它们对我们有什么好处?他们的影响是什么?最后,是什么让我们相信它们在用户与产品的交互中起着重要的作用?

为了回答这些问题,我做了一次调研,采访了各类设计师,调查了一些关于用户行为的研究。因此,我总结了5个理由来解释:为什么视觉设计对于用户行为和整体产品体验如此重要:

1. 加速视觉感知

2. 加强长期记忆

3. 触发愉悦感

4. 引导注意力

5. 可访问性


一. 加速视觉感知

视觉感知是向大脑发送信息最有效、最快的方式之一。

根据《思考,快与慢》的作者丹尼尔·卡尼曼的说法,这是因为我们的大脑有两个系统,第一个系统称为:系统1(感性思维,依赖于情感、记忆和经验作出迅速的反应和判断),第二个系统为:系统2(理性思维,通过调动注意力来分析、思考、解决问题,并作出决定。)

关键是当我们使用插画、图形、色彩等视觉元素时,我们的大脑会立即运行系统1,因此我们所吸收信息的速度要快得多,比如当我们看到下图时,会立即触发系统1,只有在遇到问题时我们才会切换至系统2。


根据S.Thorpe 的一项研究表明,人类视觉系统中的处理速度非常快,大脑处理图像只需要150ms,而理解图像的意思仅需要100ms。

研究表明,我们大脑识别图像、颜色、插画等的速度比文本内容快6万倍,但仅使用这些视觉元素并不能完全代替文本或标签,通常将它们组合在一起,可以使界面的识别速度更快、更高效。

但是,并非所有用户群体的识别率都是一样的。研究表明,识别率随着年龄的增长而下降。

60岁以上的用户对图标含义的识别率为60%,而20-30岁的用户对图标含义的识别率高达90%。


此外,图标的复杂度影响视觉识别。如下图,数据显示:闹钟的识别率为100%,而日历的识别率只有40%。

二. 加强长期记忆

即使图片只展示一次,人类也具有令人惊艳的长期记忆的能力。这使得我们在产品设计中使用视觉元素成为用户体验的一种方式。

研究表明,当被要求在两个不同的测试中记住612张图片时,观众在6秒内命中率高达98%。与单词或短句记忆测验相比,这一比率下降到88%。


实验还表明,图片记忆始终优于语言记忆。第一,因为图像的记忆能力几乎是无限的。第二,因为图像比文本有更好的记忆率。而且,生动的图像比正常的图像能更好的保存在我们的大脑中。

视觉与听觉也是有差异的,在埃德加·戴尔的一项研究中表明,当人们听到信息时,3天后该信息被记住的可能性约为15%。但是当相同的信息用视觉元素去表达时,3天后该信息被记住的可能性将近55%。




三. 触发愉悦感

通过研究专家Piotr Winkielman与John T. Cacioppo的一项名为“头脑轻松,面带微笑”的研究中表明,当我们的大脑通过少量的认知就可以快速理解时,我们的身体就会做出积极的反应,从而触发一种愉悦感。



实验让参与者观察一系列图像,同时监控他们的表情。由于表情的变化过于微妙和短暂,观察者无法察觉,所以在脸颊、眉毛和眼睛周围放置了设备,以监测图像上情绪波动的迹象。


研究表明:当图像更容易识别时,人们会漏出轻微的笑容和额头放松。这似乎是系统1的一个特点,即认知舒适度与良好的感觉有关。

因此,由于视觉元素的使用首先驱动了系统1的快速和自动化识别,可以说这些视觉元素的使用也为用户在使用产品的过程中提供了愉悦感。

四. 引导注意力

视觉元素可以改善整个界面导航。字体、留白、CTA、排版和图像等都可以作为模块间的可视分隔符,使用户可以清楚地看到前面发生的事情。

尼尔森的一项研究表明,尽管文本内容占用了316%的屏幕空间,但用户看图片的时间比看文本的时间多10%。


我们来看下Uber是如何通过更改视觉元素来优化着落页的?



通过替换第一页的封面图片和排版,100%的测试人员可以看到标题,而在上一个版本中只有90%的测试人员看到,这意味着有10%的人没有注意到标题内容。



此外,新版标题被识别时间大约为1秒,旧版本中用户则需要1.5秒才看到标题。

为什么会有这些变化呢?

尽管进行了一些排版细微上的调整,比如将标题字号放大、加粗、优化文本等,但是对数据影响最大的是更改了封面图片。


五. 可访问性

最后,界面中的图标、色彩、插图以及其他类型的视觉元素可以使产品更容易访问,特别不同用户群在使用产品时。

因此,我们可以说图形化的运用提高了整体的理解力。此外,对于那些文本识别障碍(如阅读障碍、阅读困难或无法阅读)的用户来说,图形化也会打破他们的感知界限。

本文已获得作者正式授权(截图如下)


原文地址:https://uxdesign.cc/the-power-of-visual-in-product-design-e1308542698b

作者:Jonny Czar

译者:haselina



Welcome Follow me

欢 | 迎 | 关 | 注

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

推荐阅读更多精彩内容