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

作者介紹了認知超載和工作記憶這兩個(gè)心理學(xué)概念在交互設計中的重要作用，并列舉了在設計過(guò)程中因為忽視了用戶(hù)的認知特點(diǎn)可能會(huì )犯得錯誤，并給出了相應的解決方案。因為原文里反復提到了上面兩個(gè)概念，所以我先簡(jiǎn)單解釋一下二者的含義，也方便大家更好的理解文章的內容。

認知超載：

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

工作記憶：

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

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

正文

所謂最好的用戶(hù)體驗就是能讓用戶(hù)毫無(wú)察覺(jué)，在界面上的操作如行云流水般順暢。用戶(hù)們越少去思考界面布局，他們就會(huì )越多得將關(guān)注點(diǎn)放在要完成的目標上。而作為設計師，你的工作就是幫助用戶(hù)全神貫注的完成任務(wù)而不被多余的因素打擾。

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

認知負荷的科學(xué)根源：

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

設計中的應用：

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

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

每一個(gè)頁(yè)面都要清晰明了，因為用戶(hù)從網(wǎng)站其他頁(yè)面進(jìn)入網(wǎng)站的可能性和從首頁(yè)進(jìn)入網(wǎng)站的可能性一樣大。

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

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

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

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

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

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

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

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

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

用戶(hù)所進(jìn)行的每一個(gè)步驟都會(huì )增加到他們的認知負荷中。過(guò)多不必要的動(dòng)作會(huì )破壞用戶(hù)的思路，甚至有可能激怒他們。因為他們的工作記憶都集中在完成特定的目標上，多余的動(dòng)作會(huì )迫使他們投入更多的精力，這就會(huì )增加工作記憶的負擔。最終就會(huì )耗盡用戶(hù)的耐性，掀桌子走人。

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

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

解決方案：

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

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

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

填寫(xiě)郵箱地址

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

等等吧啦吧啦吧…….

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

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

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

2.過(guò)度的刺激

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

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

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

解決方案：

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

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

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

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

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

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

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