各種設(shè)計法則都可以靈活運用于各大場景,可以是交互設(shè)計,也可以是界面設(shè)計等,通過設(shè)計法則進行應(yīng)用,提高用戶體驗,作者總結(jié)了尼爾森十大可用性原則的后五條,并結(jié)合實戰(zhàn)經(jīng)驗,探討如何應(yīng)用,希望對你有所啟發(fā)。
推薦一個比較實用的設(shè)計法則,上一篇我們聊了前面5條,今天我們來聊聊后面的5條。
可以說現(xiàn)在的任何互聯(lián)網(wǎng)產(chǎn)品都能看到這些理論的實踐,本次主要想以比較多的案例進行實戰(zhàn)分析。
尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個可用性問題的基礎(chǔ)上,提煉出的十項交互設(shè)計原則。被廣泛運用于網(wǎng)頁、APP以及各種人機交互領(lǐng)域。
要注意的是,這10項原則是啟發(fā)式(heuristics)的、廣泛的經(jīng)驗法則,可以指導(dǎo)我們更具價值的思考界面設(shè)計。
各種設(shè)計原則都可靈活運用于各個地方,可以是交互設(shè)計,也可以是界面設(shè)計,深入了解各種設(shè)計原則,讓設(shè)計師在做設(shè)計的時候可以找到更好的解決方案,提高用戶的使用體驗。
理論介紹:
雅各布·尼爾森(Jakob Nielsen)是畢業(yè)于哥本哈根的丹麥技術(shù)大學(xué)的人機交互博士,被譽為可用性測試的鼻祖,2006年4月,并被納入美國計算機學(xué)會人機交互學(xué)院,被賦予人機交互實踐的終身成就獎。
尼爾森于1995年1月1日發(fā)表了「十大可用性原則」,該原則被廣大設(shè)計師奉為教科書般的存在。雖然20多年過去了,但是對于現(xiàn)今的產(chǎn)品體驗設(shè)計仍然具有很大的參考意義。
易取原則的根本目標是提升用戶在界面上的操作效率,系統(tǒng)應(yīng)直觀地協(xié)助用戶完成任務(wù)。
系統(tǒng)應(yīng)協(xié)助用戶進行記憶,通過使元素、操作和選項可見,減少用戶的記憶負荷,在適合的時機給用戶需要獲取的信息。
識別比回憶要好,對于路徑較長的操作,我們更應(yīng)該協(xié)助用戶記憶。比如在淘寶下單的操作路徑,每一個頁面頂部導(dǎo)航欄會盡可能的提醒用戶操作到哪里,用戶所有的操作信息都是可見、易獲取的,減少用戶對操作目標的記憶負擔(dān)。
該原則在設(shè)計中的體現(xiàn):
用戶心理學(xué)研究發(fā)現(xiàn),互聯(lián)網(wǎng)用戶瀏覽網(wǎng)頁的動作不是讀,不是看,而是“掃”。這是互聯(lián)網(wǎng)用戶瀏覽的主要方式。所以我們在設(shè)計的時候,需要清晰的視覺層次結(jié)構(gòu),突出重點,弱化和剔除無關(guān)信息,降低頁面干擾,來減輕用戶閱讀成本。
比起讓用戶輸入,讓用戶選擇更能降低用戶的記憶成本,更好地輔助用戶做決策。
如果,有很多的信息或者選項是用戶高頻率會選擇的,設(shè)計師不妨給用戶提前做好選擇,提供默認選項,如下圖。
通過智能讀取用戶之前填寫過的信息,或者智能識別等形式,減少用戶記憶負擔(dān)與操作負擔(dān)。
常見的是寄快遞-新增地址,將用戶復(fù)制的文本字符類型進行識別并匹配,將有用的信息內(nèi)容提取出來,對體驗而言顯得高效又智能。
或者淘寶購物確認訂單時,系統(tǒng)會自動為你帶入之前的商品信息,包括選擇的商品規(guī)則、數(shù)量、價格、默認記錄顯示常用的地址等。這些信息雖然之前都選擇過,但是需要用戶在購買前二次確認,由于信息比較多,用戶很難記憶,所以確認訂單再展示出來更加合理。
比如:
用手機登錄時,收到的驗證碼直接展示在軟鍵盤上,用戶無需記憶也無需輸入,直接點選即可登錄;
美團APP中,當(dāng)用戶選擇商品時,系統(tǒng)會自動計算商品價格和滿減后的價格,還會幫用戶記錄選擇了哪些商品以及份數(shù),不需要用戶自己花時間去計算還差多少才能滿減等,減少用戶記憶負擔(dān),同時節(jié)省用戶點外賣的時間,這也用到了易取原則。
訂單頁面若某信息需要用戶從一個頁面復(fù)制到另一個頁面完成查詢或編輯輸入,那就有必要為該信息提供快捷復(fù)制功能,如訂單號緊跟著一個復(fù)制按鈕。
如果,我們在搜索一個歌名的時候,記不住完整的歌曲名,我們只要輸入關(guān)鍵的幾個詞,系統(tǒng)就是幫助我們記憶,出現(xiàn)相關(guān)的搜索。
作為用戶,你不記得的操作,系統(tǒng)可以幫你記錄。為用戶提供歷史記錄,文本創(chuàng)作的過程中自動保存草稿,讓用戶方便查詢自己的進程,這就是信息易取原則的設(shè)計。
保留歷史,最為常見的就是為用戶保留歷史搜索和歷史瀏覽、儲存賬號和密碼。視頻APP會詳細記錄用戶的觀看記錄,當(dāng)用戶沒有看完某部電影時,下次進入直接從斷點續(xù)播上次播放的位置,無需用戶記憶上次看到哪里了;
不只是觀看記錄,視頻軟件還會幫你記錄同一賬號在不同設(shè)備上的登錄記錄,觀看記錄也會在不同設(shè)備之間進行同步。
將選擇的對象,動作,選項可視化,讓用戶一看就懂。注意圖標符號化能讓人理解,避免引起誤解。
抽象圖形+文字,提供了更多的信息,更加豐富了記憶效果,避免了用戶需要記憶才能想起圖形代表的含義。我們常用的app導(dǎo)航欄都是以這種icon和文字相結(jié)合的形式,這就是很符合易取原則的例子。
在用戶使用產(chǎn)品的過程中,會有一些需要用戶記憶的內(nèi)容、或者操作路徑,在設(shè)計的時候我們要避免用戶記憶,把信息直接提取出來,送到用戶手里。同時每個頁面?zhèn)鬟f的信息量盡量少,減少用戶的閱讀壓力。
常見的例子是各類優(yōu)惠券,設(shè)計的時候會有明確的位置說明限制時間,類別等等,同時還會有清晰的入口引導(dǎo)去使用或者規(guī)則的入口。
這一點其實也非常好理解,一個簡單的動作,比打字要輕松得多,常見的就是在設(shè)備解鎖的時候,用手勢解鎖替代密碼解鎖。
隨著技術(shù)發(fā)展,有了更多的行為代替輸入的方式,比如指紋識別和面部識別,用簡單的操作,就可以達到進入系統(tǒng)的目的,這就避免了用戶需要較多的操作和密碼的記憶。
靈活易用原則不僅是一個交互設(shè)計原則,也代表了一種軟件產(chǎn)品設(shè)計理念:系統(tǒng)既要做得簡單、易用,讓所有用戶用起來得心應(yīng)手;
靈活易用原則的根本目標是保持系統(tǒng)的靈活性,以滿足不同用戶的不同需求。
既要提供必要的幫助,讓剛?cè)腴T的初級用戶順利上手,還需要支持靈活的個性化定制,讓高級用戶能夠快捷高效使用高頻功能,充分發(fā)揮其價值。
該原則在設(shè)計中的體現(xiàn):
讓用戶靈活定制的最典型的例子是各類軟件和App的配置功能,基本上所有軟件都會提供定制化功能,從快捷鍵設(shè)置,到頁面布局,再到自定義參數(shù),軟件系統(tǒng)會盡量提供全面的個性化設(shè)置功能,來滿足不同用戶的使用訴求和習(xí)慣,提升用戶的使用效率和體驗。
例如支付寶首頁,用戶可以自定義首頁的應(yīng)用。對于使用頻率比較高的老用戶來說,這是一個非常方便的功能。
還有一種是系統(tǒng)更具用戶常用自動整理歸納,以提升使用效率,減少用戶多余操作。
比如:微信的聊天表情,由于可以選擇的表情很多,正常情況下用戶很難快速找到自己想用的表情。而用戶的使用習(xí)慣往往是循環(huán)使用其中的某幾個,所以把最近使用的表情展現(xiàn)出來,會極大的提升用戶的尋找效率。
除了從新老用戶的角度對用戶做區(qū)分,還可以從其他維度區(qū)分用戶,針對不同用戶做不同的功能。
比如:微信為了讓中老年用戶使用方便,推出了關(guān)懷模式。在關(guān)懷模式下(下圖)文字更大、色彩更強、按鈕更大,還可以使用“聽文字消息”的功能。這些功能充分考慮了“中老年用戶”的需求和痛點,讓產(chǎn)品更加靈活易用。
靈活高效原則在交互設(shè)計中使用會提高用戶使用效率,例如微信聊天頁面中,當(dāng)用戶輸入某個字詞之后,系統(tǒng)會自動幫你匹配相應(yīng)的表情包;
當(dāng)你輸入某個詞之后,輸入法會幫你自動聯(lián)想接下來你可能會輸入的詞;
截圖后進入微信聊天頁面后,系統(tǒng)會將你剛截的圖前置,它會自動判斷你可能想發(fā)送該截圖。如下圖:
通過用戶快捷跳過的入口,比如常見的:引導(dǎo)頁、操作手冊、還是開屏廣告,有“跳過”或者”立即進入“按鈕真的很貼心。
對于用戶頻繁使用的部分,提供快捷的重復(fù)使用操作,比如:外賣app,用戶可以快捷地再來一單,同時保存上一次操作記錄。
在設(shè)計功能時,最好能考慮到不同層次用戶的需求,以此來讓用戶「各取所需」(需要平臺有多類型用戶);比如常見的Word、Photoshop等,有一個“二八定律”,就是說80%的功能是給20%的用戶使用的。
設(shè)計這類產(chǎn)品時,最常用的20%的功能一定擺在最顯著的位置上,方便所有用戶使用,而80%的高端功能,要適度隱藏,使得整個產(chǎn)品看起來盡量簡潔、美觀。比如Sketch的工具欄和快捷鍵就是給新手或資深用戶準備的。
淘寶的首頁每個人推薦的商品都不相同,淘寶后臺根據(jù)用戶的瀏覽習(xí)慣,購買/收藏記錄等大數(shù)據(jù)智能判斷用戶的喜好,對商品進行千人千面的分發(fā)。
但是切記不要太過依賴大數(shù)據(jù)算法的判斷,因為一旦形成這種模式,會給用戶造成回音壁效應(yīng),你越喜歡的東西系統(tǒng)就越給你推薦,其他的商品就像回音壁一樣被吸收過濾,用戶永遠沒有辦法發(fā)現(xiàn)新的東西,讓用戶的選擇永遠都在一個死循環(huán),所以做千人千面設(shè)計時一定要適度。
優(yōu)美而簡約原則的根本目標是讓用戶快速找到界面的重要信息,引導(dǎo)用戶的視線及操作行為。
UI設(shè)計應(yīng)該是符合大眾審美的,不需要多么酷炫,而是需要我們注重信息獲取效率,更加聚焦內(nèi)容,刪除多余的視覺表達元素,讓界面保持美觀簡約。
“快掃”是互聯(lián)網(wǎng)用戶瀏覽的主要方式。我們熟知的產(chǎn)品設(shè)計的四大基本原則:親密性、對齊、重復(fù)、對比,就是使頁面優(yōu)美而簡約的方法。
該原則在設(shè)計中的體現(xiàn):
建立清晰的視覺層級,越重要的內(nèi)容越突出,能夠方便用戶無障礙地瀏覽信息,提高用戶操作與信息獲取效率,各模塊間采用卡片或者間距區(qū)分開,加強頁面層級區(qū)分。
我們通過顏色、大小、字體的字重、對比度、元素的間距、特殊造型、動效等來表現(xiàn)。
避免界面呈現(xiàn)過多元素,包括動效、配圖、icon、按鈕等等,降低用戶的視覺干擾。保留產(chǎn)品最主要的信息,如果不是優(yōu)先級最高,要盡一切可能避免去影響產(chǎn)品的簡潔和美觀,可采用大留白增加頁面呼吸感,聚焦內(nèi)容。
用戶注意力資源有限,應(yīng)該保持信息精煉,突出重要信息,弱化次要信息。
上面兩個案例通過加粗放大、標記顏色,從而讓頁面簡潔,且突出重要信息。
容錯原則的根本目標是讓那個用戶在操作出錯后還能挽回錯誤的余地,從而給用戶一致產(chǎn)品很安全貼心的感覺。
系統(tǒng)需幫助用戶識別、診斷、并為用戶從錯誤中恢復(fù)提出建設(shè)性的解決方案。通過提示性文字或者插圖讓用戶意識到出錯了,比如404頁面的情感化插圖、彈窗提示用戶出錯等。
該原則在設(shè)計中的體現(xiàn):
當(dāng)發(fā)生錯誤時,提示信息一定要直觀,視覺上能夠引起用戶注意,可視化處理,文案要簡單概要,并給出解決方案。
例如刪除訂單時,會提示二次確認,避免用戶誤操作。
在出錯界面給出解決方案,可以是文字提醒或者按鈕跳轉(zhuǎn)等形式,幫助用戶解決問題。比如缺省頁的設(shè)計除了配置插圖還會有提示文案與操作按鈕,引導(dǎo)用戶去操作,去進一步解決問題。
系統(tǒng)能幫助用戶自動甄別錯誤,并及時進行糾正時,將會給用戶帶來極大的便利,撤銷或者找回功能,都是幫用戶把損失降到最低的有效方法。
比如微信信息的消息撤回重新編輯,相冊的最近刪除、回收站等等功能。
人性化幫助原則的根本目標是用戶在使用產(chǎn)品的過程中有所依循,因為產(chǎn)品已經(jīng)貼心地為他們準備好了幫助方式,或者即時提示和反饋,或者客服。
人性化幫助用戶最好的方式分別為:
最好的就是沒有提示,用戶就能看懂與應(yīng)用產(chǎn)品;其次是一次性提示,提示一次用戶就懂如何使用,比如第一次進入app或新功能上線的引導(dǎo)設(shè)計、通常為氣泡形式。常駐提示需要一直固定在某個位置實時幫助用戶。
最后就是幫助文檔了,一般用于解釋規(guī)則或者熱點問題,通常以超鏈接的形式存在于頁面中,或者以集合形式位于設(shè)置頁中,此時需要注意要易于檢索。
該原則在設(shè)計中的體現(xiàn):
幫助文檔的入口容易找到,幫助信息方便用戶查找。常見的方式有:鼠標劃過懸浮文字說明,幫助用戶更好地理解。
用戶通過查看幫助文檔來學(xué)習(xí)新功能,相對比較麻煩。如果能將教程和功能放在一起,用戶可以“邊學(xué)邊練”,就更容易讓用戶理解。
提示語避免使用專業(yè)術(shù)語,盡量使用圖片或者圖形,同時處理文字外還可以使用示意圖,操作步驟等,方便用戶應(yīng)用。
在操作時的幫助信息,比如幫助懸浮按鈕:一直出現(xiàn)在頁面固定位置,方便用戶遇到問題尋求幫助。
搜索時,預(yù)搜索詞直觀地顯示出來,可以讓用戶更快地做出搜索判斷。
微信轉(zhuǎn)賬頁面,當(dāng)用戶輸入金額較大時,會在第一位數(shù)字下方提示轉(zhuǎn)賬金額的人民幣單位,目的是為了避免用戶輸入錯誤金額導(dǎo)致資金損失;
復(fù)雜的流程可以通過分步驟來引導(dǎo)用戶逐步完成,而不是一次完成所有任務(wù)。個性化的提示一次就夠了,用戶用過一次就知道其用法。
現(xiàn)在很多C端產(chǎn)品普遍已經(jīng)做了良好的交互設(shè)計,可以幫助用戶快速學(xué)習(xí)使用,而不用閱讀、理解復(fù)雜的說明文檔。
然而,B端產(chǎn)品的復(fù)雜性比C端產(chǎn)品高很多,因為B端產(chǎn)品蘊含很多業(yè)務(wù)流程的規(guī)則,系統(tǒng)中的一個按鈕可能代表了一個復(fù)雜的業(yè)務(wù)處理規(guī)則,如果不了解整個業(yè)務(wù)場景和處理規(guī)則,是很難理解按鈕的操作含義的。
因此,對于B端產(chǎn)品,用戶進行自助服務(wù)、自助操作的難度高很多,B端產(chǎn)品的幫助文檔依然有存在的必要。產(chǎn)品設(shè)計人員要盡量在前端交互上做好引導(dǎo)提示,對于復(fù)雜的規(guī)則和邏輯,可以考慮通過幫助文檔來指導(dǎo)用戶。
尼爾森十大可用性原則可靈活運用于各個地方,可以是交互設(shè)計,也可以是界面設(shè)計,深入了解該設(shè)計原則,可以找到更好的解決方案,提高用戶的使用體驗。
要注意的是,這10項原則是啟發(fā)式(heuristics)的、廣泛的經(jīng)驗法則,而不是具體的規(guī)定。
題圖來自Unsplash ,基于 CC0 協(xié)議
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
聯(lián)系客服