“怎樣才能改善用戶體驗設計？這是關于用戶體驗研究恒久不變的話題。今天給大家推送的是關于運用認知心理學中的相關理論來提升用戶體驗的研究。希望對大家有幫助。 文章過長，分成上下兩篇，上篇可查閱《通過減少認知超載，提升用戶體驗（上）》。

3. 太多選項（Hick’s定律）

這里有一個矛盾點：用戶想要盡量多的選擇，但過多的選擇卻會讓他們的大腦負荷超載。

Hick定律（或決策癱瘓）講述了這樣一個現(xiàn)象：用戶的選擇越多，他們做出決定就會花費越多的時間。William Hick和Ray Hyman在上世紀50年代首次驗證了他們的理論，而在過去的十年里，他們的研究結果已經為了數(shù)字設計被重新定義。

不僅有“行為研究”（ “behavioral studies” PDF）證實了Hick定律，而且就在最近，這種理論對大腦的影響已經在2015 的MRI研究中被明確記錄。

作為一個設計師理解Hick定律，把每個選項想象成一個閃光點。就像上文論述中提到的一樣，太多明亮的閃光點會過度刺激用戶。

圖片來源：Rakuten

即使是熱門網站的設計者，如樂天，因為他們沒有正確地理解這個原理而犯下了類似的錯誤。這也是給用戶“他們想要的東西”和給用戶“他們以為自己想要的東西”之間的區(qū)別。

解決方法

如果你已經擺脫了不必要的和多余的選項，那你可以使用傘類結構來組織你的多個選項。你可以看到，這在百貨公司的網站上運用的非常多，因為這類網站有最寬泛的產品選擇。

關于太多不必要的選項，僅僅是指一次性給出的太多選項。如果你可以將一些選項隱藏到隱式菜單、側滑菜單和拖拽菜單中，你將得到兩個完全不同的世界。這些巨型菜單仍然給用戶提供了許多選擇，但都是用戶可消化的劑量，而不會讓他們負擔過多。

圖片來源：amazon

然而，隱藏導航菜單必然會降低菜單的可見性，所以在諸如電子商務、新聞行業(yè)的設計師必須特別小心。當然，你可以在頁面中補充一個不起眼的鏈接，通過這個鏈接將頁面引導到其它商品頁面，從而最小化隱藏菜單的缺陷（如亞馬遜的“相關購買”類目）。又或者你可以通過深入歸納一級目錄，將它們組合在一個單獨的導航菜單中（如蘋果和CNN的做法），以此來消除需要隱藏的菜單項。

在你在將一個網站的導航組織成一個整體時，你也要非常小心。Hick定律可以通過管理信息架構（IA）來解決很多這樣的問題，這些我們將在下面的“難以發(fā)現(xiàn)的網頁和功能”部分中加以討論。

4. 過多內容

就像過度刺激和過多選項的問題一樣，提供太多的內容會將用戶的工作記憶拉進許多不同的分支。

很顯然，你只是想把必不可少的內容展示出來，但對于一些格外龐大的網站來說，一切都是必不可少的。所以當你有太多的內容需要展示時，你必須學會如何組織它們，以避免讓你的用戶緊張。

圖片來源：Arngren

Arngren的問題不是它提供了很多產品，而是它一次性提供了太多的產品。多一些結構化和組織模式都會為網站的外觀創(chuàng)造奇跡。

解決方法

綜上所述，想用一種可控的方法呈現(xiàn)大量的內容時，George Miller的分塊顯示策略是非常有效的。即利用數(shù)據分組技術使信息更容易被記住，如一個電話號碼被分解為國家代碼，區(qū)域代碼，一組三個數(shù)字，和一組四個數(shù)字–而一個11位或更多位的數(shù)字串卻是很難被記住的。

你想在你的網上商店的主頁中突顯大量的產品圖片嗎？那你就不能簡單的將它們羅列在分開的行和列中，而要將它們根據種類不同劃分為組去展示它們。Etsy就是通過在其主頁上根據賣家需求將產品分塊，從而顯示更多的產品。

每塊文本包含簡短的文字說明、扼要的標題和副標題與充足的留白。

在冗長的表單字段中所有的數(shù)據可能都是必不可少的。但長表單會引起用戶的恐慌，有時甚至會直接放棄網站。在這種情況下，就可以嘗試一下多步表單。將表單的信息分解成幾個獨立的頁面，或者至少分開成幾塊，讓表單看起來不那么壯觀。需要注意的一點是：必須要有一個步驟標記，讓用戶隨時可以知道還有多少步結束。

圖片來源：virgin atlantic

購買飛機票通常需要填寫一大堆資料，其中沒有一個是可有可無的。?VirginAtlantic通過將信息劃分成幾個環(huán)節(jié)分別放入獨立的頁面中：選擇航班，填寫乘客信息，進入支付細節(jié)等。把所有的數(shù)據放在一個單一的長頁面中會讓一些用戶直接抓狂，導致用戶跳失人數(shù)的增加。

5. 模糊的界面

造成認知超載最大的罪魁禍首是混亂的用戶界面。用戶并不想花很長時間去弄明白他們應該如何完成任務，也不想浪費腦力去破譯一個圖標。

圖片來源:?SpeedCrunch

并不是所有的用戶都技術嫻熟到能理解speedcrunch的模糊圖標。即使他們對計算機足夠熟悉到識別Windows和Mac OS頂部的X符號的含義，但若將這兩個圖標放在右下角，即便是Alan Turing也會花上一些時間理解吧。

解決方法

不要重新發(fā)明“輪子”：盡量使用用戶在其他網站已經約定俗成的視覺引導。用戶都是依賴于以往熟識的通用提示和符號去學習操作，即使他們從來沒有上過這個網站。

如果你覺得這樣太沒有新意了，那你可以用你品牌的特性給熟悉的樣式一個獨特的變身。Home Depot（家得寶）采用了最常見的圖標，但賦予了它們的品牌標志色–橙色。

圖片來源:?Home Depot

這同樣適用于微復制。按鍵上使用常規(guī)標簽例如：“聯(lián)系方式”和“提交”比非常規(guī)的標簽如“地址”或“去”要更容易識別。通常，已知的標簽可以提升用戶的瀏覽體驗，而不常見的標簽則會讓用戶不得不停下來思考按鈕的功能是什么。不要為了個性而犧牲其確定性。

另一方面，當你設計一個以前從未有過的功能時該怎么辦呢？一般情況下，會借鑒現(xiàn)實生活中有代表性的物體設計圖標，讓它可以自我解釋。擬物化，像它的名字一樣，在現(xiàn)實和數(shù)字化之間搭建一個橋梁來彌補實物與網絡之間的差距，讓它們產生一定的關聯(lián)性。例如，早期的互聯(lián)網先驅們選擇了一個信封來代表電子郵件，因為信封是郵件系統(tǒng)的一個明顯標志。

此外，避免含糊不清的標志，尤其是他們可能被誤認為是別的東西或引發(fā)其它的疑惑?？聪聢D，Issuu的一些圖標是大家很熟悉的，但另一些就比較陌生了。如果用戶必須通過點擊一個圖標來發(fā)現(xiàn)它的功能，那它們就是失敗的設計。

圖片來源:?Issuu

找一些非專業(yè)的人來測試使用你的設計，以確保你沒有犯一些很明顯的錯誤。

關于圖標設計不能犯的錯的詳細內容，DenisKortunov列舉了10種常見的錯誤-比如，圖標太相似或過于復雜的個性化設計。

任何功能操作不明顯的頁面應該在登錄時引導用戶如何進行頁面操作。簡單的網站可以用一個單獨的窗口解決問題，尤其是用一個令人難忘的圖形去解釋功能。當然，新的而且獨一無二的界面需要一個更實用的教程。例如，Slack提供了一個完整的視頻游覽，詳細解釋了究竟該如何操作。

圖片來源: Slack

6. 很難找到的網頁和功能

有些網頁或功能，即使用戶用盡所有的辦法，依然找不到它們。這類頁面或功能就可以直接放棄了。放棄的緣由就是：用戶完全是在浪費腦力找出“我要做什么”。

作為每個網站都不可替代的組成部分，導航的存在應該讓用戶感到輕松、無壓力。網站導航最重要的特性就是直觀，能讓用戶自信地隨意瀏覽，而不必擔心迷路。要達到這個目標，不僅需要在信息架構上花費更多的努力，還需要合理的組織運用，才能讓它們看起來比實際上更簡單。

圖片來源:?Mojo Yogurt

在上圖中，如果你覺得漢堡包的圖標不好，那么，需要你的鼠標懸浮在右上角“Mojo酸奶LOGO”上時顯示導航菜單的交互設計就更加讓人無語了。

圖片來源:?Mojo Yogurt

但至少有一點值得稱贊，有一個環(huán)繞Logo運動的小動畫暗示了“導航”的存在?？墒窃谄聊簧线@么多的顏色和動畫中，這樣一個模糊的提示是遠遠不夠的。

解決方法

首先，根據用戶的喜好整理出你的信息架構。但通常情況下，你的目標用戶群不會像你一樣思考，所以要對他們進行充分的了解，按照他們的思考方式組織網站?？ㄆ诸悳y試通?？梢越沂境瞿愕挠脩魧⑷绾螌μ囟撁婧椭黝}進行分類。而一個樹測試則可以評估出你目前的或計劃推出的結構是不是可以很好的被真正的用戶所理解。

圖片來源:?Rosenfeld Media

在關于信息架構（IA）的一個速成課程中，我閱讀了DanBrown’s “信息架構的八項原則”(“EightPrinciples of Information Architecture” PDF)。在短短的五頁中，他充分解釋了任何一個設計師都應該知道的關于IA的八個硬性原則。例如，多重分類原則（即：使用幾種不同的分類方法以適應用戶不同的思維模式）和披露原則（即：顯示正好夠的信息讓用戶知道該做什么）。

你也可以通過整合頁面或菜單項來擺脫冗余。例如，你完全不需要單獨用一個頁面顯示總經理的簡歷，而另一頁顯示其它團隊成員的簡歷—-他們可以顯示在同一頁上。

設計工作室waaark將其工作室介紹、團隊成員簡歷和聯(lián)系信息由三頁合并到一頁，完美地精簡了導航。

圖片來源:?Waaark

如果某些功能或特征相比之下更重要，那么可以通過視覺效果讓它們與眾不同。放大尺寸，添加動畫，再使用一個華麗麗的或對比性很強的顏色就足以吸引用戶的眼球。用這樣一種新穎的方式顯示信息，再特別搭配一個相應的圖形，那就足以確保，它是絕對能被重視的。

圖片來源: Paypal

PayPal重視老用戶勝過新用戶，所以為了迎合老用戶，它們用引人注目的白色塊做背景，設計了一個單獨的登錄按鈕。

7. 內部不一致

讓我們舉個例子，一個網站的主頁使用標準的藍色加下劃線的文本來表示一個鏈接，但在另一個頁面中只使用藍色文本而沒有加下劃線。即使用戶沒有觸發(fā)第一個鏈接，但他們仍然會在第二頁上停下來思考，“即使它沒有下劃線，但這依然是一個鏈接嗎？”用戶可能根本不在乎這個鏈接，但那一瞬肯定會被這種不一致的設計打斷思緒，而這造成的困擾將會直接影響整體用戶體驗。

拼寫和語法錯誤的影響是一樣的。記住：最好的用戶體驗是看不見的，但這樣的錯誤會經常被注意到。

一個元素是否與網站的其余元素不一致，或與其它網站（除去它本身與用戶交互模式不一致的情況）或與用戶語言和語法的知識不一致可能對網站不會產生太大影響。但將所有的情況集中在一起，用戶必然要花一定時間去思考和處理，工作記憶就是這樣被用光的。

圖片來源:?SIPhawaii

SIPhawaii所有的列表項都運用大寫字母，同號字體且內含價格。你甚至不用知道當你點擊漢堡包圖標時會發(fā)生什么-而這就足夠了，它肯定與其他網站的漢堡包圖標不一致。

解決方法

在網站上保持一致的版式。這是一個說起來容易做起來難的事情，因為這類性質的錯誤通常是無意中造成的。

設計規(guī)范能創(chuàng)造一致性這個奇跡。它收集了全球所有的設計決策，放在了一個容易訪問的地方，當設計師需要它們時可以快速訪問那個地址。一些小細節(jié)如：背景顏色的代碼值、圖像的尺寸抑或標題的字體都會輕易地被忘掉，所以讓規(guī)范隨時可用是非常有好處的。

圖片來源: ?Lonely Planet

有關建立設計規(guī)范的更多內容，請閱讀我們更深入的描述以及創(chuàng)建設計規(guī)范的實際案例。

至于拼寫錯誤和語法錯誤，不要只依賴于拼寫檢查。在正式發(fā)布之前一定要做最后一次檢查，免費的應用程序Grammarly可以幫你發(fā)現(xiàn)那些很難看見的錯誤。

視覺和功能一致性很好的例子是Pinterest。無論你提供的圖片風格是什么樣子的，它顯示的樣式都一樣。

圖片來源：Pinterest

在每個卡片的相同位置，作者、標題、描述、網站、裝飾和活動都用相同的文字大小和字體顯示。這樣的一致性讓Pinterest的行更加的錯落有致，更加的具有視覺吸引力，而沒有讓用戶覺得凌亂。而且只要你能看懂一張卡片，那你就能看懂所有的卡片。

總結

Steve Krug著名的言論，“不要讓我思考”這或多或少道出了很多用戶關于用戶體驗的心聲。

熟練的UX設計是很機動的。任何方式的碰撞-如過度的認知負荷-都將拖累整個用戶體驗。設計師應該在他們可以得到的任何時機去滿足用戶的需要，從而讓用戶不再思考那些不必要的東西。

是不是一次給了太多的信息？讓我們再梳理一下重點，也讓你的思維可以不超載。

• 認知負荷是信息向工作記憶征收的稅。當過多信息阻礙決策和超出日常經驗時，認知負荷就會發(fā)生。
• 將一系列的內容類型和結構化的頁面組合在一起，可以避免視覺上的混亂。
• 隱藏菜單幫助用戶管理在同一時間內可用的選項數(shù)量，但要注意發(fā)現(xiàn)成本的增加。
• 類似組塊和分步表單這樣的策略可以有效防止認知超載。
• 可識別的UI元素和符合用戶已有認知經驗的擬物化設計，讓他們不用思考的太困難。新的和獨特的功能可以通過線上解釋。
• 按照用戶的實際思考模式，建立你的信息架構（IA）。可用性測試，如卡片排序和樹測試可以為你的目標用戶群找出最合適的導航策略。
• 不一致的視覺與功能，以及拼寫和語法錯誤，會讓用戶從它的首要任務上分散注意力。
• 去除你能去除的所有冗余。此外，要保持警覺以盡量減少用戶采取的必要步驟數(shù)量或他們必須花費的努力。

補充一下，對獅身人面像的謎語的答案是：“人”：當人還是是嬰兒時四腳著地爬行，長大后用雙腳行走，成為老人時會使用拐杖。

原文地址

相關閱讀

通過減少認知超載，提升用戶體驗（上）

譯者：唐唐

來源：微信公眾號【INUX】

本文由 @INUX?授權發(fā)布于人人都是產品經理，未經作者許可，禁止轉載。