產品經理前端設計十大可用性原則

6 評論 19376 瀏覽 87 收藏 16 分鐘

編輯導語:尼爾森十大可用性原則是產品設計時設計師可參考的準則,結合這十大可用性原則,產品可以更好地與用戶進行交互,助力提升用戶的使用體驗。本篇文章里,作者就尼爾森十大可用性原則進行了解讀和相應的案例拆解,一起來看一下。

界面設計的流程在團隊分工明確、人力儲備充足的情況下,在開發一套全新的B端業務系統時,界面設計的流程一般如下:

  1. 產品經理繪制線框圖原型,表達軟件中每個頁面的設計需求。
  2. UE設計師協助產品經理完善交互體驗,并制作交互原型。
  3. UI設計師基于交互原型進行美工設計,生成切圖文件。
  4. 前端工程師拿到切圖文件,進行前端開發,包括實現交互、動效等。

產品經理在進行前端設計時,可參考尼爾森十大可用性原則,下面具體介紹該十大可用性原則。

尼爾森(Jakob Nielsen)是一位人機交互學博士,于1995年1月1日發表了「十大可用性原則」。尼爾森的十大可用性原則是尼爾森博士分析了兩百多個可用性問題而提煉出的十項通用型原則。它是產品設計與用戶體驗設計的重要參考標準,值得深入研究與運用。

這十大可用性設計原則分別是:

反饋原則、隱喻原則、回退原則、一致原則、防錯原則、記憶原則、靈活易用原則、簡約設計原則、容錯原則、幫助原則。

一、反饋原則(Visibility of system status)

系統應該在合理的時間、用正確的方式,向用戶提示或反饋目前系統在做什么、發生了什么。

人機交互的基本原則是,讓系統和用戶之間保持良好的溝通和信息傳遞。系統要告知用戶發生了什么,預期是什么,如果系統不能及時向用戶反饋合適的信息,用戶必然會感到失控和焦慮,不知道下一步要做什么。以下是遵循反饋原則的一些常見設計案例。

  • 安裝程序時顯示進度條,并預估還需要多久結束。
  • 上傳文件時顯示進度條,并提示預估剩余時間。
  • 提交表單時,如果校驗失敗,則在填寫有誤的內容旁邊提示錯誤原因。
  • 程序未響應時,系統會讓用戶選擇是關閉程序還是等待程序響應。

圖1 系統安裝圖

二、隱喻原則(Match between system and the real world)

系統要采用用戶熟悉的語句、短語、符號來表達意思。遵循真實世界的認知、習慣,讓信息的呈現更加自然,易于辨識和接受。

在人機交互設計中,程序的溝通和表達、功能的呈現,都要用最自然的、用戶容易理解的方式,避免采用計算機程序語言的表達方式。設計時要采用符合真實世界認知的方式,讓用戶通過聯想、類比等方法輕松地理解程序想表達的含義。

例如,某音樂播放器APP,功能按鈕設計如圖2所示,即便不做說明,用戶也很容易理解每個按鈕是做什么用的。

圖2 某音樂播放器App的功能按鈕圖

再例如,美團APP的類目icon的設計非常有趣,且非常容易理解和使用,讓人印象深刻,如圖3所示。

圖3 美團APP的類目icon

三、回退原則(User control and freedom)

用戶經常會不小心操作錯誤,需要有一個簡單的功能,讓程序迅速恢復到錯誤發生之前的狀態。

用戶誤操作的概率極高。對于誤操作,軟件系統應該盡量提供“撤銷”“重做”或“反悔”的功能,讓系統迅速返回錯誤發生之前的狀態。

當然,不是所有操作都是可以“反悔”的,比如,你可以撤銷一筆錯誤的訂單,但不能撤銷一筆成功的轉賬交易。以下是遵循回退原則的常見設計案例。

  • 編輯類軟件都提供撤銷功能,例如Word、美圖秀秀等。
  • 點擊刪除或關閉按鈕后,會讓用戶進行二次確認。
  • 電商平臺允許在一定的規則下取消訂單。

四、一致原則(Consistency and standards)

同樣的情景、環境下,用戶進行相同的操作,結果應該一致;系統或平臺的風格、體驗也應該保持一致。

軟件設計、產品設計中有很多約定俗成的規范,雖然沒有明文規定,但大家都在遵守,因為用戶已經習慣了這些規范。我們在進行設計時,應該遵循慣例,并且保持系統的一致感,不要盲目地標新立異。

例如,在APP底部的導航圖標中,“首頁”永遠排在第一個,個人中心(“我的”)永遠排在最后。并且對于類似“首頁”“購物車”“訂單”等常見按鈕,不同APP的設計樣式都非常相似。

圖3展示了美團、去哪兒、百度外賣三款APP底部導航欄的設計,可以看到上述特點。如果你特立獨行地把個人中心放在第一個位置,或者采用奇怪的圖標作為個人中心的icon,用戶使用時肯定會覺得別扭。

圖4 三款APP的導航欄設計

此外,在一個或多個系統中,要采用統一的設計風格。不論是圖標的選用,還是布局的規劃,要保持整齊的一致性,這樣用戶容易理解,并且容易習慣和適應。

例如,Office軟件中包含的各個產品,其界面布局和設計風格就保持了高度一致,如圖4所示是Word(上)和Power Point(下)的界面,可以看出,二者的“插入”一級菜單下所包含功能的排列順序、布局方式乃至圖標圖形,都是高度類似的。

圖5 Word和Power Point的設計風格很統一

五、防錯原則(Error prevention)

系統要避免錯誤發生,這好過出錯后再給提示。

進行設計時,首先要考慮如何避免錯誤發生,其次再考慮如何檢查、校驗異常。這樣做一方面可以讓問題更簡單,另一方面可以讓用戶避免或減少無謂操作。

例如,有些時候,為了防止用戶重復提交或重復點擊,第一次點擊按鈕后就將按鈕置灰,直到處理完成才恢復。有時還會通過調整按鈕順序,避免用戶誤點。比如,對于很重要的操作,為了防止用戶順手誤點,會將二次確認對話框中的“是”和“否”兩個按鈕對調位置,模擬效果如圖6所示。

因為常見的對話框都將“是”按鈕放在第一個位置,所以用戶在操作時,很容易產生條件反射,順手點擊第一個按鈕,然后才突然發現自己點錯了。

雖然看起來有些別扭,但是很有效,因為多點一次要好過誤刪文件。這種設計在軟件卸載、APP取消會員訂閱等操作中也非常常見,只不過后兩種情況下主要是為了做一些心理暗示和引導,避免用戶卸載或退訂。

圖6 通過調整按鈕順序避免用戶誤操作

六、記憶原則(Recognition rather than recall)

讓系統的相關信息在需要的時候顯示出來,減輕用戶的記憶負擔。

計算機應該減輕人們的記憶負擔,而不是相反。例如,當切換頁面時,不應該讓用戶記住不同頁面的內容,而應該在合適的地方積極地呈現或提示之前的信息。例如,幾乎所有的APP和PC端的搜索引擎都會記錄用戶的搜索歷史并呈現給用戶。

圖7是美團APP的搜索頁,可以看到上面的“搜索發現”是推薦類功能,下面的“最近搜索”則是保留的用戶最近使用過的搜索關鍵詞。

圖7 美團APP的搜索功能

再例如,在所有的電商購物流程中,在用戶提交訂單后,都會出現一個核對頁面,讓用戶再次核對填寫是否正確。這個設計非常有用,我就經常在下單時忘了修改默認地址,再次核對時才發現。

七、靈活易用原則(Flexibility and efficiency of use)

系統的用戶中,中級用戶往往最多,初級和高級用戶相對較少。系統應為大多數人設計,同時兼顧少數人的需求,做到靈活易用。

靈活易用原則不僅是一個交互設計原則,也代表了一種軟件產品設計理念:系統既要做得簡單、易用,讓所有中級用戶用起來得心應手;也要提供必要的幫助,讓剛入門的初級用戶順利上手;還需要支持靈活的個性化定制,讓高級用戶能夠以進階的方式使用系統,充分發揮其價值。

讓高級用戶靈活定制的最典型的例子是各類軟件和APP的配置功能,基本上所有軟件都會提供定制化功能,從快捷鍵設置,到頁面布局,再到自定義參數,軟件系統會盡量提供全面的個性化設置功能,來滿足不同用戶的使用訴求和習慣。

例如圖7所示是Word的自定義功能,提供了非常強大的配置能力,用戶可以對Word的UI實現顛覆性的重新設置。

圖8 Word提供了強大的自定義配置功能

八、簡約設計原則(Aesthetic and minimalist design)

對話中不應該包含無關的或沒必要的信息;增加或強化一些信息就意味著弱化另一些信息。

重點太多,相當于沒有重點。在視覺設計中,要掌握好“突出標記”的度,以及內容的呈現方式。例如,圖9所示是一份停機通知示例,左圖只突出了停機這件事和停機時間,右圖突出標記了更多內容,但是用戶反而無法一下子抓住真正的重點。

圖9 重點太多相當于沒有重點

九、容錯原則(Help users recognize, diagnose, and recover fromerrors)

錯誤信息應該用通俗易懂的語言說明,而不是只向用戶提示錯誤代碼;提示錯誤信息時要給出解決建議。

對于很多運行時錯誤或異常,計算機程序都會返回某個錯誤代碼,但是對于用戶來講,看到這些錯誤代碼并不明白發生了什么,所以一定要將錯誤代碼轉換成用戶能看懂的語句,并告訴用戶解決的建議。

訪問網站時,如果頁面不存在,服務器提供的標準錯誤提示是404錯誤(如圖10左圖所示),很多用戶并不理解404是什么意思。圖10右圖所示的頁面就對此做了處理,將錯誤提示轉換成用戶能理解的表述,而且給出了解決建議。

圖10 頁面不存在的不同提示頁面

十、幫助原則(Help and documentation)

對于一個設計良好的系統,用戶往往不需要經過培訓就能輕松上手使用,但是提供幫助文檔依然是很有必要的。幫助信息應該易于檢索,通過明確的步驟引導用戶解決問題,并且不能太復雜。

現在的軟件產品,尤其是C端產品普遍做了良好的交互設計,可以幫助用戶快速學習使用,而不用閱讀、理解復雜的說明文檔。然而,B端產品的復雜性比C端產品高很多,因為B端產品蘊含很多業務流程的規則,系統中的一個按鈕可能代表了一個復雜的業務處理規則,如果不了解整個業務場景和處理規則,是很難理解按鈕的操作含義的。

因此,對于B端產品,用戶進行自助服務、自助操作的難度高很多,B端產品的幫助文檔依然有存在的必要。產品設計人員要盡量在前端交互上做好引導提示,對于復雜的規則和邏輯,可以考慮通過幫助文檔來指導用戶。

 

本文由@張伯倫 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 感謝分享

    來自安徽 回復
  2. 收藏起來

    回復
  3. 這是抄的楊堃老師的決勝B端一書里的內容

    來自江蘇 回復
  4. 關于原則四,一致性原則不應等于同質化,我的頁面在首頁還是最后這個應當基于實際的用戶使用習慣來考慮,而不是一刀切的說我的頁面放到第一個就會導致用戶感到別扭。

    來自上海 回復
    1. 純提問:設計的同質化和用戶使用習慣之間有沒有關系?

      來自上海 回復
    2. 個人淺見,用戶習慣的是導航欄,而不是我的在最后一個。。

      來自上海 回復