译文 | 为注意力而设计

本期翻译的文章来自 Martin Jancik,他从认知心理学以及大脑的工作方式的角度出发,分析如何做出更加符合人们注意力的设计。

我曾经常为人类的大脑如何工作而着迷,同时,我认为熟悉认知科学是每一个设计师的关键技能之一。 为了使自己更加专业,同时让其他人学到一些新知识,我决定写下这篇自己感兴趣的,关于认知的专题文章。

虽然设计是通过我们的感觉,比如视觉,触觉,听觉等被感知的,但是这些感觉却是被大脑直接控制的。作为设计师,我们必须了解如何创造经验,大脑如何评估经验。同时,作为设计师,我们必须有能力通过我们的设计,在与用户的交互中控制人们的思维。

在本文中,我将重点关注注意力如何工作,以及如何影响界面设计。

注意力 = 工作记忆

我们的视觉,听觉,触觉以及嗅觉都受到大脑的控制,同时影响记忆系统。记忆系统可以分为以下几种:

工作记忆

短时记忆

长期记忆

工作记忆包含了我们聚焦注意力的信息。由于我们工作记忆的能力相当差(研究显示可以容纳在5-7个不相关的概念),我们的注意力是有选择性的。我们的大脑根本无法立即处理我们周围发生的一切。相反,它将重点放在最相关的信息上,而相关性取决于我们自己的目标。

我们的大脑每秒接收大约1100万比特的数据,但我们每秒只能处理大约50比特的数据。

如果焦点发生变化,工作记忆中的信息很容易丢失。我们中的许多人可能发生过这样的情况:

你再数数的过程中有人打断了你,之后你不得不重新开始数,因为你根本不记得自己数到了哪里。

你走进一间屋子,突然忘记了你来这里的原因。

界面设计中的工作记忆

模式

在设计中使用“模式”有很多优点,它允许我们在转换情景的时候,使用更少的手势或控件。比如,在sketch中,你会发现在通常情况下是处于选择状态的,这意味着在拖动鼠标的时候,你可以选择屏幕上的目标。但是,如果你进入矩形模式,拖动鼠标的时候,你就会画出一个矩形来。

工作记忆太易变了,因此不能假设用户可以不通过任何反馈来记住自己处于何种模式之下。在使用模式的时候,最重要的是要表明目前所激活的是那种模式。sketch通过不同的光标来展示不同的模式。

sketch中的矩形模式,选择模式,抓手模式  

搜索

当使用一个网站的搜索功能时,用户进入搜索条目,然后浏览搜索结果,注意力会从输入框转移到结果上。这就意味着用户会经常忘记自己刚刚输入了什么。因此在设计搜索功能的时候,应该在显示出搜索结果的同时,将用户的输入字段展示出来。

步骤说明

如果用户需要通过最少5步才能达到自己的目标,确保有清晰的说明来告诉他们如何去做。用户通常也不可能记住所有的步骤,因此在他们操作的时候也要尽可能容易的回到之前的步骤。

导航

如果你设计的系统需要一个复杂的导航层级,应该给用户一个清晰的反馈,告诉他们处于何处,可以去哪里。让用户记住到达目的页之前所有的页面是非常具有挑战性的,设计师应该进自己最大的努力,去避免用户的大脑负载太多,避免用户忘记自己最终的目的是什么。这正是面包屑导航在今天被很多产品使用的原因。

在 Edookit 教师系统中,通过面包屑导航和高亮的菜单,子菜单,你可以清晰的知道自己所处的位置


视力-眼球中心凹

如今,大脑获取的大多数信息都是通过视觉。我们的双眼在如何感知设计中非常重要。人眼的结构非常复杂,但是最重要的发现是,在眼睛中央区域发现的一个叫做“眼球中心凹”的部分。它是非常小的一个圆圈(1.5毫米宽),我们大脑获取的大多数信息都是通过它。这里有3个原因:

眼睛的这个小部分比其他部分的解析度要明显的高一些。

中央凹中的细胞也以1:1连接到神经节神经,从而将信息传递到大脑,与眼睛的其他部分比起来,它没有任何数据压缩。

中央凹仅占整个眼睛大小的1%,但我们大脑的视觉皮层将50%的资源投入其中。

所有的这些最终导致了人类的视角非常狭窄。

另一方面,我们的周围视力非常差。真的,思考一下你此刻读这篇文章的方式,你只能注意到这些精确的文字,其他的所有东西都是无关紧要的。这只是整体设计中很小的一部分。然而,有趣的是,我们的大脑试图帮助眼睛,并根据我们的期望和记忆填补我们周边的缺失数据。这让我们误以为我们实际上看到了一切。

尽管周边视觉质量很差,但它确实在我们的生活中有着其他作用。它引导中央凹将焦点集中在低分辨率的数据上。它也非常擅长检测运动,这是我们从居住在荒野中的祖先那里继承的能力。

眼球中央凹对界面设计的影响

这些发现很容易运用到设计中。用户无法立即看到整个网站,他们只能扫描页面。这意味着他们的眼睛从一个部分跳到另一个部分非常快,因此网站最吸引人的部分通常是具有高对比的部分,或者包含动效的部分。

这个着陆页在右上角放置了一个黄色的按钮,它立刻吸引了我们的注意  


重要的是,相互关联的信息必须以紧凑的方式显示,以便用户可以一起感知这些元素。使用格式塔的接近性原则这样表述:

接近的对象或形状通常被看做是一组

格式塔的接近性原则,接近的圆看上去是一组


举个栗子,错误提示应该出现在密码输入区的旁边。如果错误信息出现在页面的不同部分,专心输入密码的用户很可能会看不见它。另外一个例子,如下图,一个好的营销网站应该说服用户去点击按钮,标题和按钮的高对比度意味着这是用户首先注意到的地方。

电子邮件区域和按钮放在一起,用户不用再去页面的其他地方去找


错误信息直接在输入框底下出现,用户不用移动视角就能看见


无意识失明

人的注意力是以目标为导向的。我们倾向于关注与目标相关的事情。其他一切都不那么重要,除非它以某种方式触发我们的注意力,否则,它将处于注意力之外。这在心理学中被称为知觉或无意识失明。

有一个经典的实验,让观察者去看一段视频,视频里有白色衣服的队员和黑色衣服的队员,他们各自传球,让观察者去数白色衣服的队员传球次数。这期间,有一个穿着黑色衣服的戴着面具的熊从屏幕中穿过,但是人们都在注意白色队员的传球,几乎没有人看见这只熊。(视频贴不了,只好把这段写出来-_-||)

我们应该在设计时考虑到相互关联性,例如采用格式塔接近原则。如果无法采用的话,我们应该通过改变运动或对比度来吸引用户。除非我们遵守这些原则,否则有数据显示用户极有可能错过重要的体验细节。

这是我关注人类注意力的最终结论,以及认知科学中最近的研究结果如何影响我们的设计方式。在撰写这篇文章时,我受到了Jeff Johnson的《Designing with the Mind in Mind》一书的启发。如果你很好奇如何为人类的注意力而设计并想深入挖掘,我强烈建议你阅读这本书。

原文链接:https://uxplanet.org/designing-for-human-attention-ac0abe3d657d

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念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

推荐阅读更多精彩内容

  • 周末,天气晴朗,带着孩子们去蹬人力船。 阳光穿过枝叶照在水上,很平常。 水面把阳光反射到河边的围墙上,就显现出了炫...
    6db8b93047b7阅读 632评论 2 1
  • 吃酸菜米线就想店里的鸡杂米线? 每到店里都会想吃一口,喔喔还记得大早上吃米线,特别烫,我把米线挑起挑的老高了,边吹...
    砥砺_b109阅读 196评论 0 1
  • 2018年2月6日 星期二 晴 欢欢喜喜过大年,这是大部分人的心愿。掐指一算,距离过年还有半个月的时间了...
    显山露水阅读 278评论 11 20