文章從認(rèn)知心理學(xué)角度下手，分析了在交互設(shè)計(jì)過(guò)程中時(shí)常會(huì)犯得幾種錯(cuò)誤，一些平時(shí)稀松見(jiàn)慣的設(shè)計(jì)方式也都在這兒找到了比較理性的依據(jù)。設(shè)計(jì)是門(mén)科學(xué)，我們需要掌握一些方法論，以不變應(yīng)萬(wàn)變。

作者介紹了認(rèn)知超載和工作記憶這兩個(gè)心理學(xué)概念在交互設(shè)計(jì)中的重要作用，并列舉了在設(shè)計(jì)過(guò)程中因?yàn)楹鲆暳擞脩舻恼J(rèn)知特點(diǎn)可能會(huì)犯得錯(cuò)誤，并給出了相應(yīng)的解決方案。因?yàn)樵睦锓磸?fù)提到了上面兩個(gè)概念，所以我先簡(jiǎn)單解釋一下二者的含義，也方便大家更好的理解文章的內(nèi)容。

認(rèn)知超載：

認(rèn)知負(fù)荷指在工作記憶中腦力使用的總量。當(dāng)外界信息量超出大腦接收處理的閾值時(shí)，就會(huì)出現(xiàn)認(rèn)知超載的情況。通俗來(lái)說(shuō)，人腦跟電腦一樣，處理信息的能力是有極限的，如果超過(guò)了一定數(shù)量，就會(huì)變慢，最后死機(jī)，這就是認(rèn)知超載。

工作記憶：

工作記憶指的是一個(gè)容量有限的系統(tǒng)，運(yùn)用聽(tīng)覺(jué)、視覺(jué)系統(tǒng)來(lái)暫時(shí)保持和存儲(chǔ)外界信息，也叫短期記憶，是外界信息和長(zhǎng)期記憶之間的接口。簡(jiǎn)單來(lái)說(shuō)，工作記憶是長(zhǎng)期記憶的先遣小分隊(duì)。

搞清楚認(rèn)知超載和工作記憶的概念后就可以正式進(jìn)入正文了~~~

正文

所謂最好的用戶體驗(yàn)就是能讓用戶毫無(wú)察覺(jué)，在界面上的操作如行云流水般順暢。用戶們?cè)缴偃ニ伎冀缑娌季?，他們就?huì)越多得將關(guān)注點(diǎn)放在要完成的目標(biāo)上。而作為設(shè)計(jì)師，你的工作就是幫助用戶全神貫注的完成任務(wù)而不被多余的因素打擾。

復(fù)雜的界面會(huì)迫使用戶去解決那些無(wú)足輕重的問(wèn)題。用戶在填寫(xiě)選項(xiàng)、界面和導(dǎo)航等地方感覺(jué)到困惑時(shí)就會(huì)中斷他們思考的過(guò)程，將他們的注意力從網(wǎng)絡(luò)情境拖拽回現(xiàn)實(shí)情境。這種過(guò)度的思考就被稱為認(rèn)知超載。

認(rèn)知負(fù)荷的科學(xué)根源：

1980年，澳大利亞教育心理學(xué)家John Sweller將認(rèn)知負(fù)荷應(yīng)用到了教學(xué)設(shè)計(jì)中。他旨在尋找對(duì)于各類學(xué)生來(lái)說(shuō)最好的知識(shí)記憶方式。雖然這些理論最初是應(yīng)用在教育領(lǐng)域的，但它們也同樣適用于交互設(shè)計(jì)中。接下來(lái)我會(huì)解釋這個(gè)技術(shù)如何用來(lái)減少用戶的煩惱。

設(shè)計(jì)中的應(yīng)用：

著名作家Steve Krug就是將認(rèn)知負(fù)荷理論最廣泛的運(yùn)用到了網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中。他的書(shū)“Don’t Make Me Think”被許多設(shè)計(jì)師當(dāng)做業(yè)界圣經(jīng)。

在他書(shū)里提到的觀點(diǎn)中，以下我非常贊同的：

每一個(gè)頁(yè)面都要清晰明了，因?yàn)橛脩魪木W(wǎng)站其他頁(yè)面進(jìn)入網(wǎng)站的可能性和從首頁(yè)進(jìn)入網(wǎng)站的可能性一樣大。

用戶很有可能放棄——也就是說(shuō)，比起最好的解決方案，采取能夠最早解決問(wèn)題的方案。

當(dāng)一個(gè)具有一般互聯(lián)網(wǎng)經(jīng)驗(yàn)的用戶可以用這套系統(tǒng)來(lái)完成他們的目標(biāo)之時(shí)，系統(tǒng)達(dá)到可用性就可以了。

用戶通常會(huì)采用一個(gè)心態(tài)：“要么快要么就去死”。

即便從未使用過(guò)，屏幕上一個(gè)可以看見(jiàn)的home鍵將會(huì)給用戶帶來(lái)安慰。

綜合來(lái)講，每當(dāng)用戶瀏覽網(wǎng)站必須停下來(lái)進(jìn)行思考時(shí)，即使一瞬間，他們的工作記憶也是超負(fù)荷的。問(wèn)題類似于： “這個(gè)可以點(diǎn)么？” “Home鍵在哪兒” “我改怎么保存？”，這些都會(huì)毀了用戶的體驗(yàn)。

認(rèn)知過(guò)載的最主要的幾個(gè)原因

有很多設(shè)計(jì)元素都對(duì)用戶大腦施加了潛在的負(fù)荷，與此同時(shí)，外界環(huán)境中會(huì)有更多的因素超出設(shè)計(jì)師們的控制范圍。比方一個(gè)用戶瀏覽網(wǎng)站的同時(shí)會(huì)擔(dān)心第二天的工作報(bào)告，或者被窗戶外裝修的噪音所打擾——這些都會(huì)消耗他們的工作記憶。

同時(shí)，每個(gè)用戶因?yàn)閭€(gè)體差異，會(huì)有著不同的工作記憶能力。比起細(xì)心謹(jǐn)慎的用戶來(lái)說(shuō)，不拘小節(jié)的用戶會(huì)比較容易地將精力集中在你的網(wǎng)站上，而不經(jīng)常上網(wǎng)的用戶會(huì)比經(jīng)常上網(wǎng)的用戶思考的要多。即便我們不能量化認(rèn)知負(fù)荷，我們依舊可以歸納出那些經(jīng)常在設(shè)計(jì)中出現(xiàn)的錯(cuò)誤。下面，我將對(duì)最常見(jiàn)的幾種錯(cuò)誤分類說(shuō)明并給出解決方案。

1.多余的動(dòng)作

用戶所進(jìn)行的每一個(gè)步驟都會(huì)增加到他們的認(rèn)知負(fù)荷中。過(guò)多不必要的動(dòng)作會(huì)破壞用戶的思路，甚至有可能激怒他們。因?yàn)樗麄兊墓ぷ饔洃浂技性谕瓿商囟ǖ哪繕?biāo)上，多余的動(dòng)作會(huì)迫使他們投入更多的精力，這就會(huì)增加工作記憶的負(fù)擔(dān)。最終就會(huì)耗盡用戶的耐性，掀桌子走人。

為了使認(rèn)知負(fù)荷最小化，速度和步驟是需要注意的基本事項(xiàng)。用戶希望在一種輕快活潑且有目的性的節(jié)奏中完成他們的任務(wù)，所以撇開(kāi)一切拖后腿的廢物吧！

用戶希望知道在他們提交郵箱地址之前他們要進(jìn)入的是什么網(wǎng)站，但Touch of Modern不告訴用戶任何信息卻要求他們?cè)诘谝粫r(shí)間進(jìn)行注冊(cè)！這個(gè)強(qiáng)制且多余的動(dòng)作將會(huì)嚇跑許多潛在用戶。

解決方案：

這里有個(gè)找出多余步驟的方法：列出用戶必須要完成的每一步任務(wù)。舉個(gè)發(fā)郵件的栗子吧：

點(diǎn)擊“郵件”圖標(biāo)

點(diǎn)擊到“發(fā)送給”的輸入框

填寫(xiě)郵箱地址

點(diǎn)擊“主題”輸入框

等等吧啦吧啦吧…….

點(diǎn)擊“郵件”圖標(biāo) 點(diǎn)擊到“發(fā)送給”的輸入框 填寫(xiě)郵箱地址 點(diǎn)擊“主題”輸入框 等等吧啦吧啦吧…….現(xiàn)在，我們回頭來(lái)看這些步驟并找出多余的動(dòng)作。第二步完全可以刪除，因?yàn)槟憧梢宰尮鈽?biāo)自動(dòng)停在“發(fā)送給”這一欄而不用讓用戶自己動(dòng)手點(diǎn)擊。

這會(huì)為他們減去不必要的麻煩，雖然看起來(lái)微不足道，但你所刪減的每一步都是勝利。（這和最近非常流行的微交互設(shè)計(jì)概念有些不謀而合，微小而不引人注意，并為用戶提供平滑、自然的感覺(jué)。）

讓我們來(lái)看看谷歌的首頁(yè)。光標(biāo)一開(kāi)始就出現(xiàn)在搜索欄里面，所以用戶們需要做的就是打字。這些細(xì)小的交互行為可以為整體的體驗(yàn)加分，所以不要忘記它們。

2.過(guò)度的刺激

凌亂冗雜的界面會(huì)分散用戶注意力，增加工作記憶的負(fù)荷從而會(huì)妨礙他們?nèi)?shí)現(xiàn)目標(biāo)。就像當(dāng)很多人同時(shí)跟你講話時(shí)一樣，你會(huì)很難集中精力，當(dāng)網(wǎng)頁(yè)上充斥著許多照片，動(dòng)畫(huà)，圖標(biāo)，廣告，字體和刺眼的亮色時(shí)，你同樣也很難集中注意力。每一種多余的元素，特別是視覺(jué)上的搶眼，都會(huì)分散用戶的注意力。

要記住的是：在用戶實(shí)現(xiàn)目標(biāo)之前，工作記憶都需要將額外的刺激進(jìn)行歸類處理，注意力的每一次分散，都會(huì)占用用戶的一份工作記憶。

LINGsCARS就是個(gè)極端的例子，你可以看到對(duì)比強(qiáng)烈的顏色和動(dòng)效沖擊著人們的感官。在電腦屏幕上，即便處于兩個(gè)不同位置但卻同時(shí)進(jìn)行的動(dòng)效依舊會(huì)對(duì)用戶造成過(guò)度刺激，產(chǎn)生威脅。

解決方案：

首先，避免一切不必要的元素。我們僅需保留通常情況下必要的元素，來(lái)減少加載時(shí)間并簡(jiǎn)化交互體驗(yàn)。一項(xiàng)關(guān)于“美學(xué)是如何影響用戶對(duì)網(wǎng)站第一印象”的研究發(fā)現(xiàn)，比起視覺(jué)復(fù)雜的網(wǎng)站，用戶更傾向于視覺(jué)簡(jiǎn)易的網(wǎng)站。

同樣，你也可以進(jìn)行內(nèi)容區(qū)分從而達(dá)到平衡的效果。過(guò)多的同質(zhì)化內(nèi)容（只有照片或只有文本）會(huì)讓用戶感到煩躁。所以，將視覺(jué)信息加以綜合——圖片，視頻，信息圖表綜合到一起從而達(dá)到頁(yè)面的和諧，使它便于用戶理解。

影視網(wǎng)站IMDb本可以在很大程度上輕松地只依靠圖片進(jìn)行排版，但它反而運(yùn)用同量的文字內(nèi)容來(lái)平衡網(wǎng)站頁(yè)面。

當(dāng)你總結(jié)出一個(gè)頁(yè)面的必要元素，將這些元素以便于用戶快速理解的方式組織起來(lái)。運(yùn)用對(duì)稱式或非對(duì)稱式布局來(lái)展示信息以便于用戶更快速的理解，也就是說(shuō)，讓大腦少費(fèi)勁兒。對(duì)稱式布局或有趣的非對(duì)稱布局不僅能帶來(lái)視覺(jué)享受，而且它們的結(jié)構(gòu)可以使界面易于交互。

下面來(lái)看看Groupon是如何將它的垂直菜單（中間偏左）和描述凍酸奶的文字（中間偏右）進(jìn)行布局的吧。大圖居中被文字包圍著，這樣就打造了一個(gè)舒適自然的沙漏形狀。

對(duì)稱式并不僅僅是將相同的布局放在兩側(cè)，它是用來(lái)平衡視覺(jué)重量和視覺(jué)方向。從這點(diǎn)來(lái)講，非對(duì)稱性布局依舊可以表現(xiàn)的具有組織性，就像OTHR所做的那樣。

減少頁(yè)面多余的元素僅僅只勝利了一半，革命尚未成功，大家不要忘了，還要將這些元素以簡(jiǎn)潔明了的布局方式呈現(xiàn)出來(lái)。