令用戶費腦的認知設計,該如何規避?
今天和大家聊聊“認知負荷”。最近看了一些文章深受啟發,我們在我們日常設計中如何去避免一些讓用戶費腦而抓狂的設計,本文我將會集合我們日常生活中的產品和大家聊聊。
認知負荷理論?
認知負荷理論(cognitive load theory)是Sweller等人在20世紀80年代的,主要從認知資源分配的角度考察學習和問題解決。Sweller等人認為,問題解決和學習過程中的各種認知加工活動均需消耗認知資源,若所有活動所需的資源總量超過個體擁有的資源總量,就會引起資源的分配不足,從而影響個體學習或問題解決的效率,這種情況被稱為認知超載。(內容來自百科)
是什么造成了認知負荷
想要避免用戶的認知負荷,那么我們就要了解界面設計中那些因數會影響用戶的認知,認知負荷分內在和外在的,內在的當然與用戶的文化因素有關,這里我們不做討論,我們來說下外在影響因素:
- 視覺層次結構混亂
- 導航結構不清晰
- 無規則的視覺流
- 需要大量思考
下面我將集合實例和大家探討下:
1. 視覺層次結構混亂
下面截圖是愛奇app,這里我將討論愛奇藝一些糟糕的設計點。
- Navgation bar:使用頻率不高的元素過多;消息,播放歷史,添加
- Label:標簽視覺樣式樣式多
- Color:顏色過多,是造成用戶無法形成視覺流的關鍵因素
- Gird layout:網格布局混亂,縱向對齊線過多,且無規律
- Focus:圖2焦點元素過多,造成用戶選擇困難
那怎么解決?
- 強化主要信息,弱化次要信息(比如圖2,更多資訊,換一批等是否可以弱化,去掉顏色?)
- 去掉過多不必要的元素(分割欄上的圖標是否可以去掉,滿屏的標簽是否可以統一弱化)
- 使用網格布局(圖片和文字遵循網格排版)。
堅持一個原則,一個頁面完成一個用戶目標。
好的布局是怎么樣的?
結構簡單,用戶目標清晰,卡片流布局,大家留意到沒,youtube在導航上通過“更多”icon把不常使用的元素收起來,這就減少導航上擺放過多低頻率使用的操作,這樣來減少了視覺上的混亂。
2. 導航結構不清晰
首先我們先了解下Navgation design pattern,界面設計中一般使用2-3種導航,分別一級導航和二級導航模式(一級導航一般只有一種,如業務比較多的,一般都使用組合導航,比如頂部與底部標簽導航,標簽與漢堡組合等等),我們必須在設計上區分它們,不能一級導航和二級導航樣式相同,這樣無規律的設計會讓用戶難以抉擇。
圖1:愛奇藝app產品內容比較多,所以采用了頂部和底部雙標簽導航來組織內容圖2,3,4:藍色框部分搜索結果頁和視屏播放頁還有用戶信息頁,應該要使用二級導航區分,但是目前奇藝依然使用一級導航設計模式來區分它們(目前國內好多app都這樣沒去區分),這樣就會導致信息結構混亂,信息層級不清晰。
ios使用Segmented Controller來區分的,google的materials好像在這方面沒有明確的說明,所以這就導致大量的導航混亂,不過好像大多數用戶已經習慣了?(二級導航一般無特殊情況是不會允許在一級界面)
清晰的導航架構是怎樣的?
一級導航和二級導航區分明顯,清晰的信息架構,用戶能知道優先級。
這里說下Nike+的導航系統,在頂部使用了標簽式作為一級大內容區分,二級導航采用類似分段內容導航來區分單個模塊下的內容。
為何要區分一級和二級導航?
一級導航一般都是大功能模塊之間的區分,二級導航一般用于單個功能模塊里面的內容作為層級區分,請謹記。目前國內app設計質量不齊,導航規則混亂,沒有一個完整的Design system來指導整個企業的產品規則,所以我們可以從自己產品做起,在產品設計中把信息架構搭建好。
無規則的視覺流
要做好視覺引導我們就要懂一些設計心理學,我們要了解人是如何閱讀,如何觀察,如何記憶,如何思考,如何集中注意力,如何快速進入流的狀態等等。
最常用的閱讀模式是F pattern和Z pattern。
一個頁面一屏出現了這么多耀眼入口,我該如何選擇?沒有主次,看起來所有都很重要?
前面認知負荷原理講到人在處于工作記憶的時候一次只能處理兩到三條信息,那么這么多入口在這里,用戶就需要花費腦力去抉擇,就導致負荷增加。
清晰視覺流是怎樣的?
目標清晰,視覺流符合用戶閱讀習慣,不需要再去思考,減少認知負荷。
需要大量思考
如何才能減少用戶使用產品過程中的費腦力的思考?設計的時候避免使用難以閱讀的UI patterns,要遵循常用用戶界面模式,不需要重新發明輪子bottom navtation patterns。
圖1是開眼視頻的首頁,底部tabbar上面4個icon。如果不加文字說明,用戶很難去閱讀理解,增加記憶負荷圖2 是instagram,底部tabbar即使不加文字,我們都能90%以上看懂要表達的意思,因為這些圖形用戶已經熟悉,不需要再去思考記憶。
騰訊視頻?在section divide header,采用了用戶熟悉的設計模式,點擊動漫精選更多酒進入對應的欄目頁面,如何用戶心理模型愛奇藝在section divide header,采用雙入口(標題上和欄當前欄目底部),且與用戶使用目標不一致,當第一次點擊進去后,用戶發現和預想的不一樣,然后很懊惱退出,找其他入口?這種新模范用戶需要重新去記憶,重新去思考,增加負荷。
設計原則:盡量使用用戶熟悉的圖標樣式,可以在常用圖標樣式去做微創新,集合自己品牌,提取關鍵因數,植入圖標里面。
常用入口不要輕易改變它已有的屬性,保持原來用戶習慣的模式。
總結
上面通過日常生活中所見的產品和大家聊了造成認知負荷的原因,及在設計中如何去避免,有以下幾點:
- 視覺層次必須清晰易懂;
- 導航架構必須清晰,且層級分;
- 去掉不不要的視覺元素;
- 使用UI-patterns,避免重新發明輪子。
希望這篇文章能幫到您!
作者:Tony,微信公眾號:洞見設計,人人都是產品經理專欄作家。百度設計師。很樂意幫助年輕設計師成長,簡歷指導,每周分享最有價值的設計經驗,擅長產品體驗設計,關注【洞見設計】后臺回復“彩蛋”領取設計資料。
本文由 @TONY 原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自 Pexels,基于 CC0 協議
坐密圈的車過來的~學習!
市場需要和產品設計需要的矛盾,愛奇藝更多的是向市場妥協罷了,從設計角度來說,作者說得很對。
airbnb和uber是很好的將市場與產品集合的非常棒的一個產品,設計 體驗,都非常贊。
剛要說文章里存在很多問題,但是一看作者是UI設計師,如果從UI的層面考慮的話,可以說大部分認同~ 但是還是不得不糾正一個很大的錯誤,就是歷史紀錄并不是一個低頻入口。
有點疏忽,播放歷史確實還算高頻。我這里就是想表達對導航欄精簡優化,比如添加和消息是否可以放在更多里面,外面就顯示一個播放歷史和更多icon,,然后搜索條是否也可以有其它設計方式?愛奇藝app過于臃腫,好多功能堆砌,facebook的功能過多,都把massages單獨拆離出來,作為一個獨立app。
所以愛奇藝還是需要有很多可優化空間
不過感謝你的提醒,非常棒,多多交流…
少了一張圖, 最后無規則視覺流那里,還差一張騰訊視頻的視覺流圖片,真是對不住大家了,這個好像五分編輯, ??
贊啊,學習了!謝謝作者
很高興能幫到你
愛奇藝確實需要更改一下
嗯嗯,后面準備寫一篇視覺分析
點擊動漫精選更多酒進入對應的欄目頁面,有個錯別字 ??
嗯嗯,看到了,回頭改一下