以簡書為案例講述「尼爾森十大可用性原則」


?配圖

簡介

尼爾森(Jakob Nielsen)是一位人機交互學博士,于1995年1月1日發表了「十大可用性原則」。

1995年以來,他通過自己的 Alertbox 郵件列表以及 useit.com 網站,向成千上萬的 Web 設計師傳授 Web 易用性方面的知識,盡管他的一些觀點可能帶來爭議,至少在 Web 設計師眼中,他是 Web 易用性領域的頂尖領袖。


原則一:狀態可見原則

用戶在網頁上的任何操作,不論是單擊、滾動還是按下鍵盤,頁面應即時給出反饋。「即時」是指,頁面響應時間小于用戶能忍受的等待時間。

案例:簡書上每篇文章的底部都會有一個「喜歡」按鈕,當把鼠標懸浮上去時,按鈕就會由原來的透明狀態變成淡粉的填充色,這一過程是瞬間的,這就運用了狀態可見原則,反饋給用戶的信息是:是的,您的操作是對的,鼠標點擊下去吧!(如下圖1)

?圖1


原則二:環境貼切原則

網頁的一切表現和表述,應該盡可能貼近用戶所在的環境(年齡、學歷、文化、時代背景),而不要使用第二世界的語言。

案例:簡書在給文章的集合命名時并沒有使用「目錄」字樣,而是使用了「文集」的說法。第一,這種說法很有情感化的東西在里面,不像直接說「目錄」這么生硬;第二,這里也含有隱喻的設計,它會讓你聯想到一篇一篇文章集合成的小冊子的感覺,很有意境之美。「專題」的說法也是一樣的道理。(如下圖2)

圖2?


原則三:撤銷重做原則

為了避免用戶的誤用和誤擊,網頁應提供撤銷和重做的功能。

案例:這個我暫時還沒在簡書網站上找到案例,這里以Android版的Chrome瀏覽器為例說明。當通過手勢關閉一個標簽頁時,瀏覽器的底部就會出現Toast,顯示有「撤銷」按鈕,如果你是誤操作導致的頁面刪除,這時就可以點擊它恢復原先的頁面——非常友好的體驗。(如下圖3)

圖3?


原則四:一致性原則

同一用語、功能、操作保持一致。同樣的語言,同樣的情景,操作應該出現同樣的結果。

案例:用戶頁面的右上角有一個頭像,點擊后出現菜單列表。其中的「我喜歡的」前面是一個愛心圖標,「我的書簽」前面是一個書簽圖標,這都是符合用戶認知的,如果把文字所對應的圖標互換(「我的書簽」用愛心圖標),那就有點奇怪了,會引起用戶的困惑。(如下圖4)

?圖4


原則五:防錯原則

通過頁面的設計、重組或特別安排,防止用戶出錯。比出現錯誤信息提示更好的是更用心的設計防止這類問題發生。

案例:在寫文章的列表頁面,點擊「刪除文章」后,會彈出一個對話框,讓你確認是否刪除文章,官方在設計的時候有意把「確定」按鈕放在了右邊,「取消」按鈕放在了左邊,因為從操作流這個角度來看,若把「確認」按鈕放在左邊,則很容易誤操作,而這個操作又是不可逆的。而且,官方在設計時給「確認」按鈕填充了醒目的藍色,多重防止誤操作。(如下圖5)

?圖5


原則六:易取原則

盡量減少用戶對操作目標的記憶負荷,動作和選項都應該是可見的,即把需要記憶的內容擺上臺面。

案例:案例五中的圖5也可以說明這個原則,確認對話框出現就很好地減少了用戶前后的記憶。


原則七:靈活高效原則

中級用戶的數量遠高于初級和高級用戶數。為大多數用戶設計,不要低估,也不可輕視,保持靈活高效。

案例:在簡書的 Markdown 編輯器模式下寫作時,一般用戶只要熟記 Markdown 語法就可以寫作,那高端一點的用戶可能想用 XHTML 語言來寫文章,簡書也是開放了一些 XHTML 代碼的,但不是全部,不然就不能叫做「Markdown編輯器」了。當然如果你不太熟練Markdown編輯器,簡書也提供了「富文本編輯器」,滿足了低層次用戶的需求。這就是一種非常靈活高效的設計(如果簡書只有單純的 Markdown 編輯器,那么用戶會流失很多很多)。


原則八:易掃原則

互聯網用戶瀏覽網頁的動作不是讀,不是看,而是掃。易掃,意味著突出重點,弱化和剔除無關信息。

案例:當想把已經添加在文章下方「拓展閱讀」處的鏈接刪除,那么點擊「刪除」后,在瀏覽器的頂部就會出現了提示框,提示「拓展閱讀刪除成功」。因為這樣一個操作誤刪除的可能性非常小,由于「刪除」的操作域非常小,一般點擊都是自己明確地把鼠標移上去的,而且刪除拓展閱讀中的鏈接并不是一件非常嚴重的事情。其實我想說的是,這種情況下就不需要彈出對話框再進行確認了,的確,簡書也是這么設計的——把無關緊要的信息弱化,提示3秒即消失。(如下圖6)

?圖6


原則九:容錯原則

錯誤信息應該用語言表達(不要用代碼),較準確地反應問題所在,并且提出一個建設性的解決方案。

案例:在簡書上,點擊一個鏈接,偶爾會出現下圖的情形,即頁面找不到。簡書提供了詳盡的說明文字和指導方向,而非直接使用404代碼。(如下圖7)

?圖7


原則十:人性化幫助原則

如果系統不使用文檔是最好的,但是有必要提供幫助和文檔。任何信息應容易去搜索,專注于用戶的任務,列出具體的步驟來進行。幫助性提示最好的方式是:1、無需提示;2、一次性提示;3、常駐提示;4;幫助文檔。

案例:對于初次使用的用戶來說,看到設置中的「選擇常用的編輯器」,會搞不懂「富文本」和「Markdown」的區別是什么,而且對于長期使用簡書的用戶來說,如果有一天他想在兩個編輯器之間切換使用,可能就會對自己不常用的那個編輯器不了解或是遺忘,那么這個時候其實就像簡書這樣的設計就非常好——直接通過問號圖標跳轉到具體的幫助文檔頁面,詳細教你該如何使用編輯器。(如下圖8)

?圖8


總結

這些可用性原則(Usability)在產品經理的實際工作中都有很大的參考價值,應該熟練掌握。


要轉載我的文章,請帶上作者名稱,原文地址的超鏈接,不允許修改我的標題,如果你無法全部滿足上面3個要求,請不要轉載,歡迎大家舉報。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,837評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,196評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,688評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,654評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,456評論 6 406
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,955評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,044評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,195評論 0 287
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,725評論 1 333
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,608評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,802評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,318評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,048評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,422評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,673評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,424評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,762評論 2 372

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,605評論 25 708
  • 專業人員用一套規范去評估產品。 原則:尼爾森10原則,尼爾森擴展原則,首頁可用性原則,八項黃金法則,hhs網頁設計...
    Asherdon閱讀 2,665評論 0 6
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,781評論 18 139
  • 提出該理論的是Jakob Nielsen,畢業于哥本哈根的丹麥技術大學的人機交互博士 , 他擁有79項美國專利,專...
    沈帕蒂閱讀 3,095評論 0 5
  • 嘿,你有幾個朋友? 啊,我有一大群。 唉,那知己少的和三毛頭發一樣多。 因為怕受傷 所以會離開 因為會摩擦 所以會...
    叫我梅芳就好閱讀 252評論 0 2