2019-11-10 ui設計分享達人
好的用戶體驗是不會讓用戶注意到并毫無察覺的一種體驗。表面上看似非常簡單,但實際上設計師已經做出了非常多的設計思考。用戶越少的去思考界面,用戶就越能專注他們要完成的目標。在瀏覽頁面時,用戶的注意力不應該停留在界面和設計上,他們更應該關注的是如何達成他們的目的。所以作為設計師的首要工作就是通過事先清除障礙,為用戶提供直達目標的途徑。
“通常,飛速行駛的貨車不可能輕松地停下來。因為運用更多的動能去改變運動狀態是非常困難的。與其強迫人們從他們的主任務上轉移注意力,不如直接帶他們去他們想去的地方?!?
——Luke Wroblewski,谷歌產品總監
換個思路來看。復雜和混亂的界面會迫使用戶去尋找解決問題的方法,而通常情況下,這些方法并不是一目了然的。用戶會因為過多的選項、界面、導航等感到困惑,用戶可能會在思考過程中感到不知所措。即便是很短暫的停頓,也足以讓用戶離開。
這種過度的思考就被稱為認知過載,在這篇文章里,我們將為你解釋如何避免認知過載。首先,我們需要明白我們大腦中存在過載風險的原因。
認知超負荷的科學根源
認知過載是指工作記憶中腦力處理的信息總量過多。當你的工作記憶接收到的信息超出其可以輕松處理的信息時,就會發生認知過載,從而產生挫敗感。
但這究竟意味著什么?工作記憶到底是什么?針對這些我們又應該怎樣進行設計呢?那就讓我們先來了解一下認知負荷理論的起源吧。
JOHN SWELLER和認知負荷理論
雖然對認知的研究可以追溯到幾個世紀,但直到20世紀80年代,澳大利亞教育心理學家約翰·瑞勒才將這項研究應用于教學設計當中。Sweller試圖為每一種類型的學習者找出最適合他們的學習方法,讓他們可以記住他們學到的所有知識。換句話說,怎樣的課程設計才是最佳的呢?
Sweller在1988年出版了“ 認知負荷理論,學習難度和教學設計 ”,這使他的研究工作達到新的高峰,于1994年重新修改并重新發表。他的研究中運用了數據組織結構中的圖表數據庫,講述了有效和無效的教學方法,而他對于工作記憶負荷極限的研究結果才是設計師們找到的最有用內容。
Sweller的研究在許多方面擴展了George Miller的信息加工理論。George Miller是一位認知心理學家和語言學家,他在20世紀50年代測試出短期記憶的極限。Miller的研究在于數字化設計,尤其是分塊技術方面,這將在后面討論。另外,Miller還創作了論文“ The Magical Number Seven, Plus orMinus Two“,這個理論促使許多設計師將菜單項的數量限制在5和9之間。
雖然這些理論最初是針對教育領域的,但它們同樣適用于用戶體驗(UX)設計。
工作記憶
如果你每次打開冰箱,都必須回答一個像謎語一樣的問題,“什么東西小的時候四只腳走路,長大了以后兩只腳,而老了以后有三只腳?”這是一個老段子。但是,根據認知負荷理論,使用這種讓人無奈的用戶體驗設計會讓用戶產生挫敗感。
要理解認知負荷理論,你必須要了解什么是工作記憶,大腦在短時間內用于完成任務的過程便是工作記憶。工作記憶必須借助外部刺激和短期記憶,并在需要時從長期記憶中抽取。通俗一點說,工作記憶相當于計算機內存,而長期記憶則相當于硬盤驅動器。
工作記憶和短期記憶通常可以互換使用,但它們略有不同。工作記憶是處理信息的過程,而短期記憶更像是一個信息的便簽本,它雖然重要,但卻沒有長期記憶重要。
讓我們看看這篇文章是如何解釋這些差異的。在你閱讀的時候,你可能會遇到一個用藍色字體書寫的陌生概念。你的工作記憶需要知道藍色文本是什么意思,才能夠理解文章更深層的含義。你的長期記憶知道藍色文本表示鏈接,因此你的工作記憶知道點擊該鏈可以獲得更多信息。與此同時,你的短期記憶會記住你在文章中的位置,這樣當你從外部頁面返回時你不會迷失,但到了第二天早上,該位置就會被遺忘掉。
設計中的應用
Steve Krug(史蒂夫·克魯格)是一位很有影響力的作家,他在網頁設計中極力推崇認知負荷理論。他的書《Don’t make me think》被許多設計師認為是有巨大影響力的著作。
書中記錄了許多寶貴的經驗,下面就列舉一些的:
1、每一個頁面都要清晰明了。
2、用戶傾向于“滿意” - 也就是說,采取一個最簡單的解決方案來解決他們的問題,而不是最好的解決方案。此外,作為習慣的生物,用戶將一遍又一遍地使用相同的方法解決問題,而不會刻意尋找一個更好的選擇。
3、當新用戶可以熟練使用該系統來實現他們的目標時,系統的可用性就足夠了。
4、用戶使用網絡的絕大部分是想要節省時間。因此,用戶的行為通常會像鯊魚一樣“保持移動,否則就會死亡”。
5、后退按鈕是Web瀏覽器最常用的功能。
6、屏幕上顯示的主頁按鈕即使從來不被用戶使用,但也能讓用戶感到放心。
總之,用戶在瀏覽網站過程中哪怕是一瞬間的思考,也會對他們的工作記憶造成負擔。例如 “這個可以點擊嗎?“首頁按鈕在哪兒?”和“我怎么保存?”等等問題,都會不同程度破壞用戶體驗。
認知超負荷最常見的原因
許多設計元素都有可能對用戶的大腦造成超負荷,外界環境中會有更多的因素它們超出了設計師的控制范圍。例如:一個用戶瀏覽網站的同時會擔心第二天的工作報告,或者被窗戶外裝修的噪音所打擾,此時,無論你的網站設計多么簡單,這些都會耗盡他們的工作記憶。
我們要知道每個用戶的工作記憶能力都不同。隨性的用戶比那些對每一件小事都無比關注的用戶更能專注于你的網站。不經常上網的用戶往往比經驗豐富的網絡用戶思考的更多。
雖然我們無法量化所有的認知過載,但我們可以盡量的去避免他的產生,下面,我們對網頁設計中最常見的類型以及避免它們的最佳方法進行了分類說明。
1.不必要的操作
用戶的每一步操作都會增加他們的認知負擔。過多不必要的操作會打斷用戶的思路或者會讓用戶抓狂。因為用戶的工作記憶都集中在完成特定的目標上,所以多余的操作將迫使用戶投入更多的精力,這樣就需要更多的工作記憶才能完成任務,所以,那些不必要的操作步驟很考驗用戶的耐心。
速度和節奏是讓認知負荷最小化的基本因素。用戶希望以輕快,目的性很強的步驟來完成任務,所以應該提前消除一切延遲。
用戶希望在他們提交郵箱地址之前就知道他們將要進入什么網站,但Touch of Modern卻要求用戶在使用之前必須進行注冊!這個強制而又多余的行為將會嚇跑很多的潛在用戶。
解決方案
下面這個方法,可以幫助我們找到不必要的操作有哪些:列出用戶要完成任務必須要去做的步驟。例如發送電子郵件:
1、點擊電子郵件圖標。
2、點擊“發送到”輸入框。
3、輸入電子郵件地址。
4、點擊“主題”輸入框。
5、等等....
現在,重新審視列表并且找出可刪減的操作步驟,想到什么了嗎?你可以通過將光標一開始就自動定位在“發送到”字段就可以刪除步驟2.這將減少用戶的操作,雖然很微小,但你消除的每一步對于用戶來說都是友好的。
我們來看看谷歌的主頁。光標一開始就在搜索輸入框當中,因此用戶所要做的就是開始輸入文字。這些微小的交互提升了整體的用戶體驗,所以不要忽視它們。
2.過度刺激
雜亂無章的頁面會分散用戶的注意力,使用戶無法專注他們想要完成的目標。就像有好幾個人同時與你交談時你會很難集中注意力,當頁面上太多的圖片、動畫、圖標、廣告、文本類型和鮮艷的顏色奪取你的注意時,就會很難集中注意力。
記住,每個人的工作記憶在完成目標的過程中,會因為外界的刺激對每一步工作重新排序。每一次分心,尤其是視覺上的強烈刺激,都需要消耗用戶的一部分注意力。
LINGsCARS就是個極端的例子,你可以看到有強烈對比的顏色和絢麗的動效沖擊著人們的感官。在屏幕上,即便在兩個不同位置同時進行的動效依然會對用戶造成過度刺激。
解決方法
首先,減少一切不必要的元素。僅保留必要的內容通常是最佳的選擇,減少加載時間并簡化體驗。用戶更喜歡視覺簡單的網站,而不是視覺上復雜的網站。
你還可以進行內容區分以達到平衡的效果。太多相同的內容(比如文字或圖像)會讓用戶感到厭煩。所以,視覺內容要進行合理的組合,圖像、視頻、信息圖表等,能夠使頁面和諧,并便于用戶理解。
影視網站IMDb本可以在很大程度上輕松地只依靠圖片進行排版,但它反而運用同量的文字內容來平衡網站頁面。
在抽取出一個頁面上必須要展示的元素之后,你應該采用一種讓用戶立即能夠理解的方式組織這些元素。對稱或者不對稱的信息布局顯示都可以很快的被用戶所理解,也就是說,用一種方式,盡可能的減少大腦的工作。這樣不僅對稱和不對稱都能讓眼睛感覺很舒適,而這樣的結構也能讓界面交互更容易。
下面來看一下Groupon是如何布置頁面的吧。左中是文本類的垂直菜單,右中是一個有特色的凍酸奶交易文本描述,插在文本中間的照片和色塊的使用,分分鐘創造出一個讓人喜愛的沙漏結構。
下面來看看Groupon是如何將它的垂直菜單(中間偏左)和描述凍酸奶的文字(中間偏右)進行布局的吧。大圖居中被文字包圍著,這樣就打造了一個舒適自然的沙漏形狀。
對稱不僅僅是在屏幕的兩側應用相同的布局,它是視覺重心和視覺方向的平衡。通過這種方式,非對稱頁面也能看起來很有組織性,如下圖的OTHR所示。
將你的頁面內容精減到只包含簡單的和非競爭性的元素,這只是完成了預防過度刺激工作的一半。。不要忘記要以簡單的布局呈現這些元素。
3、太多選項(希克定律)
這有點自相矛盾:用戶需要更多的選擇,但是往往太多的選擇會使他們的大腦超負荷。
席克定律(選擇困難癥)為我們揭示出了一種現象:用戶擁有的選擇越多,他們做出決定的時間就越長。
作為設計師要去理解庫克定律,可以把每個選項看作是明亮的閃光燈,如下所示,太多的閃光燈會過度刺激用戶。
甚至像Rakuten這樣的知名網站也會犯類似的錯誤,因為他們沒有真正的理解這個設計原則。給用戶需要的而不是給他們認為他們需要的。
解決方案
假如你已經解決了不必要的和多余的選項,你可以將他們分別放入不同的組進行分類,你可以在百貨商店的網站上看到很多例子,這些網站擁有廣泛的產品選擇。
它不一定是太多的選擇, 只是一次有太多的選擇。如果你可以用隱藏菜單,抽屜和拉出其中的一種方式隱藏一些選項,那么你將獲得兩全其美的效果,這些超級菜單雖然為用戶提供了許多選項,但一定程度上不會給用戶帶來很大的負擔。
但是,隱藏式的導航欄不利于發現,因此電子商務和新聞等行業的設計人員應該注意。你可以通過放置其他類似產品的鏈接使缺點最小化(比方說亞馬遜的“相關購買”)從而最大限度地減少隱藏菜單的缺點。或者你可以歸納導航菜單的類別,將它們精簡為單行導航(如Apple和CNN那樣)。
你還需要注意應該如何組織整個網站的導航。許多與庫克定律有關的問題可以通過管理信息架構(IA)來處理,我們將在下面的“難以查找的頁面和功能”部分中討論。
4.太多內容
就像過度刺激和選項過多的問題一樣,提供過多的內容會將用戶的工作記憶拉向不同的方向。
顯然,你希望展現的只是重要的內容,但對于一些網站來說,一切都是重要的,如果你的網站也有非常多的內容,為了避免讓用戶產生困惑,應該對內容信息進行和里的組織規劃。
Arngren的問題并不是它展示了很多的產品,而是它同時展示了太多的產品。在組織結構上的調整將會給網站帶來更好的體驗。
解決方案
如上所述,George Miller的解決策略是“分塊”,將需要展示的大量內容以可管理的方式組合起來,以便于記憶,電話號碼分為國家代碼,區號,一組三位數和兩組四位數字便于記憶,而一連串的11個數字會很難被記住。
你想在商店主頁上放大量產品的圖片嗎?比起將它們全部羅列出來,不如通過他們的類型將他們分組羅列。Etsy通過根據不同的店鋪將產品進行分組展示。
還有文本組塊,文本組塊包括簡短的自然段,合理利用標題和副標題以及足夠的留白。
對于需要大量數據的長表單字段,可以嘗試采用多步驟表單。長表單可能會令人生畏,有時會導致用戶流失。你可以將表單的信息分在不同的頁面里,減少信息過量給用戶帶來的影響。記得一定要有一個進度標記來讓用戶知道還剩下多少頁。(可以總結為復雜的頁面簡單化)
購買機票總是涉及填寫大量的信息,其中沒有一項是多余的。Virgin Atlantic通過將其分解在多個單頁面上填寫來改善其繁瑣的體驗:選擇航班,填寫乘客信息,輸入付款詳細信息等。將所有這些信息放在一個長頁面上會對用戶造成負擔,也有可能會放棄購買。
5.模棱兩可的界面
認知超負荷的罪魁禍首先就是用戶界面混亂。永遠不要讓用戶花費大量的時間來弄清楚他們如何才能完成想要的目標,以及花費時間來弄清楚圖標的含義是什么。
并非所有用戶都是經驗豐富的,從而可以理解SpeedCrunch這種含義模糊的圖標。即使他們能夠識別代表Windows系統和Mac OS X系統的符號,那么位于右下角的那兩個圖標也會讓用戶迷茫。
解決方案
使用用戶已經熟知的視覺提示。用戶通常會用他所熟悉的符號來進行操作,即便是在以前從未使用過的網站上也是這樣。如果你覺得沒有新意,可以融合品牌特征巧妙的結合成為用戶所熟悉的形式。Home Depot雖然運用了較為普遍的圖標,但同時也賦予了他們品牌獨有的橙色。
標準標簽(如“聯系人”和“提交”)的按鈕比非傳統標簽(如“地址”或“開始”)更容易識別。通常已知的標簽可以提高用戶的瀏覽體驗,而不常見的標簽會讓用戶暫停以了解按鈕的功能。不要為了個性化而喪失了識別性。
另外,你如果真的需要一個從未見過的圖標該怎么辦呢?如果這樣,可以運用現實生活中的場景展示來讓圖標進行自我解釋,這種做法是連接現實和虛擬的橋梁。例如:早期的互聯網先驅選擇了一個信封來代表電子郵件,因為信封是郵件系統的明顯標志。
此外,要避免含義模糊的圖標,特別是可能還會被誤認為是其他含義的圖標,就像下列Issuu的圖標,有些是被人熟知的,但有一些卻不是。如果用戶必須通過點擊這個圖標來發現它的功能,這就會中斷他們的操作進程。
任何一個表意不清的圖標都應該附帶說明,告訴用戶怎樣操作。新的并且不常見的用戶界面,就需要更多的分步教程。例如,Slack就給出了一個完整的視頻引導來說明界面的操作流程。
6.難以查找的頁面和功能
即使用戶已經擁有他們所需要的一切,但他們可能還是不知道如何去尋找它。這樣就會讓用戶費盡腦力去尋找他們所需要的。作為用戶體驗中不可或缺的元素,導航應該放在明顯的地方,給用戶信心去任意瀏覽網站而不會迷失。
如果你覺得漢堡包圖標不好,那可以在看看Mojo Yogurt,它會要求你將鼠標懸停在左上角的徽標上以顯示導航菜單。
雖然圍繞著Logo有個小的動效,但對于整個屏幕的顏色和動效來說,它并不夠明顯。
解決方案
根據用戶的偏好理順你的信息架構。你的目標用戶群可能并不認可你的做法。因此,要想他們學習如何組織網站,卡片分類試驗會告訴你你的用戶將會如何對頁面和話題進行分類。
如果你還希望通過組合頁面和菜單項來消除多余的頁面。設計工作室Waaark通過將其工作室的簡介,團隊成員簡介和聯系信息這三個頁面合并到一個頁面來簡化他們的導航。
如果某些功能或特征比其他功能或特征更重要,可以運用視覺手段來吸引他們的注意,增加大小,添加動畫以及使用對比色以此來吸引用戶的眼球。
PayPal期望有更多的老用戶而不是新用戶,并通過設置登錄按鈕與吸引注意力的白色塊背景來迎合前者。
7.內部不一致
假設網站的主頁使用標準的藍色和帶下劃線的文本來表示鏈接,但另一個頁面僅使用藍色而沒有下劃線。當用戶瀏覽其他頁面時就會停下來去想,“它沒有下劃線,這還是個鏈接么?”他們甚至可能不會再去關心鏈接,而會被其他頁面的不統一分散注意力從而影響整體的用戶體驗。
要記住,最好的用戶體驗是不會被用戶所察覺的,而像上面這樣通常都會被注意到。
總結
1、認知過載是影響工作記憶的因素。當過多的信息阻礙決策和整體經驗時,就會發生認知過載。
2、使用不同的內容類型和結構化頁面組合,可以避免視覺混亂。
3、隱藏式菜單可以幫助用戶一次管理可用選項的數量,但降低了可發現性。
4、“分塊”和“步驟”等的方式可以防止認知過載。
5、UI元素和圖標應該基于用戶現有的認知上,這樣他們就不需要過多的思考,新的獨特的功能要加上解釋說明。
6、圍繞用戶的實際思考方式構建你的信息架構??ㄆ诸惖瓤捎眯詼y試可以為你的目標群體揭示最直觀的導航方案。
7、視覺和功能的不一致,以及打字錯誤和語法錯誤,都會分散用戶的注意力。
8、盡可能減少冗余。另外,請留意如何最大限度地減少用戶操作步驟量和他們必須花費的精力。
文章來源:UI中國
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。