如何做出引人瞩目的设计

我总是对人脑的工作方式感到着迷。同时我也相信对于设计师来说,熟悉认知科学也是非常必要的技能。为了提高我的专业技能,或者帮助其他人学习一些新东西,所以我决定写一些我感兴趣的话题。

Photo by Andrew Neel on Unsplash

我们通过(视觉,触觉,听觉)感觉设计,然后迅速地被大脑处理。但作为设计师,我们必须了解如何创造与人类大脑相关的设计经验。作为设计师,我们必须明白如何创造体验,并且知道大脑如何处理这些信息的。作为一个设计师,你必须有这个能力在产品交互过程中控制人类的思想,甚至在用户结束与产品的交互后仍能控制。

在文章中,我把重点放在我们大脑的注意力如何工作上,并通过这个方法影响设计

注意力=工作记忆

任何我们看到的、听到的、触摸到的,闻到的都是通过我们的大脑处理、并形成印象。

这个印象的组成包括:

瞬间记忆
短期记忆
长期记忆

瞬间记忆包含那些我们注意力关注的(侧重)信息,由于我们的瞬间记忆容量非常小(研究表明对于不同的主题大概会记住5~7组信息),所以我们的注意力都是有选择性的。

我们的大脑是非常简单的没有能力在同一时间去处理发生在我们周围的所有事情。大脑会将信息的焦点放到最有意义/关联的部分,而这个关联性是由我们的目标决定的。

我们的大脑每秒都会接受到1100万的数据,但是我们每秒仅仅只能处理50个的数据

如果目标转移了,瞬间记忆的内容非常容易被遗忘。我们中的很多人一定遇到过这种状况:

在你数数的途中,如果有人突然打断你。之后你必须重新开始,因为你不记得你离开的确切位置了。 你走进一个房间,突然之间你发现你忘记进来这里的原因。

瞬间记忆与设计连接

模式

在设计中使用模式的概念有很多好处。它允许我们在切换上下文的时候,有更多的行为(方法)用更少的动作/权限。例如,在sketch里(一个设计软件),你发现自己在处于选择模式。这意味着,在拖动期间,你可以选择屏幕上的对象。如果你进入绘图模式,这意味着现在你拖动的同时,还能绘制一个长方形。

同时瞬间记忆是非常不稳定的,假设用户在没有任何反馈的时候,没办法记住自己在哪个模式下。所以当用户使用模式时,强调用户所在的当前的模式是非常重要的。Sketch通过为每种模式设置不同的光标来区分。

Rectangle mode, select mode, drag mode in Sketch.

搜索

在用户使用网页搜索功能的时候,用户输入关键词—>查看结果。注意力由输入转移到查看搜索结果。这意味着,用户会忘记他们最开始输入的内容。

具有搜索功能的站点,哪怕在展示搜索结果的时候,都应该显著的显示用户输入的关键词。

说明

假如用户需要通过5步以上的操作完成他的目标,就要保证他们有清晰的说明,告诉他们怎么做到这步的。毫无疑问,大部分的用户没有能力去记住每次增加的步骤。

应该给用户一个简单的回顾,让用户检查自己的路径

导航

如果你的设计需求是一个复杂多层的导航,那么它需要给用户反馈,他现在在哪里,以及如何到达的。去记住到达这个页面之前经过的所有步骤,对用户来说是一个挑战。

设计师应该尽最大的努力去避免让用户大脑过载,导致他们忘记最初的目的。这就是为什么面包屑(通常是一个箭头或者一个斜线代表页面的层级)在许多产品中流行的原因。

In Edookit teacher system you can clearly see where you currently are with the help of breadcrumbs as well as highlighted menu and submenu item.

视觉-眼凹(eye fovea)

我们的大脑主要通过眼睛来获取信息。我们的眼睛在感知设计中起到了重要的作用。人的眼睛结构十分复杂,但是我们最重要的发现是眼睛中间有个部分被称为“眼凹”。它是一个很小的圆圈(1.5mm宽)同时它也是大脑获取信息的重要部分。

这里有三个原因:

1,这小小的地方比其他地方有更大的分辨率。

2,在这个凹槽的视网膜细胞接近1:1的神经节神经(传递信息到大脑),这就是为什么他们在传输数据到大脑时不做任何的数据简化--用眼睛直接对不同信息做区分。

3,这种凹陷区域只占眼睛的百分之一,但是我们大脑的视觉皮层对此投入了50%的资源。

所有的这些导致人类的注意力非常狭隘。

image

另外一方面,我们的周边视力比较差。说实话,想想你现在读这篇文章的方式。你仅仅只是集中在确切的文字上,其他所有东西都被忽略了。这是整个设计中很小的一个部分。有趣的是,我们大脑通过我们的记忆和期望,试图帮助我们的眼睛填补周边视力丢失的细节。

眼球的凹陷对界面设计的影响

这些发现非常容易适用于界面设计。

用户没有能力一次性看到整个网站的架构。他们只能浏览页面。这意味着他们的眼睛非常迅速的从一个部分浏览到另外一个部分。最吸引人的通常是具有强烈对比性的和运动中元素

image

重要的,具有关联性的信息必须离得近一些,让用户能够感知这些元素。利用格式塔原则:

彼此接近的对象或者形状会成组

image

例如,错误提示必须在输入的附近。

一个用户集中在输入密码上,如果错误提示在页面的另外一个部分,用户则可能会漏掉错误提示。

另外一个例子(下图)是营销拷贝,这个页面中它应该说服用户去点击按钮。而标题和按钮的对比,让这部分变成用户最先注意到的焦点。

Marketing microcopy, email field and CTA button or closely together so the user doesn’t have to scan other parts of the page
The error message is shown directly underneath the input field. The user doesn't have to move his eyes far away.

注意力盲区

人的注意力是以目标为导向的。我们倾向于关注能够实现目标的事情上。其他的一切都不相关,除非它以某种方式引起我们的注意,否则就一直停留在边缘上。这个心理现象被称为视觉盲区。

查看视频,试着数数白衣服传球的次数。

我们的设计目标应该是与用户的大脑建立联系,例如使用格式塔原理。

如果不能,我们应该通过活动的元素和强烈的视觉对比来抓住用户的注意力。数据证明,只有遵守这些规则,用户才不会错过重要的设计细节。

这是我对人类注意力以及如何利用最近发现的认知科学来影响我们设计的一些随笔。在写这篇文章时,我深受Jeff Johnson写的《Designing with the Mind in Mind》的影响。

原文链接

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

推荐阅读更多精彩内容