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


?配圖

簡介

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

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


原則一:狀態(tài)可見原則

用戶在網(wǎng)頁上的任何操作宪赶,不論是單擊宗弯、滾動還是按下鍵盤,頁面應即時給出反饋搂妻∶杀#「即時」是指,頁面響應時間小于用戶能忍受的等待時間欲主。

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

?圖1


原則二:環(huán)境貼切原則

網(wǎng)頁的一切表現(xiàn)和表述伟桅,應該盡可能貼近用戶所在的環(huán)境(年齡敞掘、學歷、文化楣铁、時代背景)渐逃,而不要使用第二世界的語言。

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

圖2?


原則三:撤銷重做原則

為了避免用戶的誤用和誤擊,網(wǎng)頁應提供撤銷和重做的功能椿访。

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

圖3?


原則四:一致性原則

同一用語冗澈、功能、操作保持一致陋葡。同樣的語言亚亲,同樣的情景,操作應該出現(xiàn)同樣的結果腐缤。

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

?圖4


原則五:防錯原則

通過頁面的設計偿渡、重組或特別安排臼寄,防止用戶出錯。比出現(xiàn)錯誤信息提示更好的是更用心的設計防止這類問題發(fā)生溜宽。

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

?圖5


原則六:易取原則

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

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


原則七:靈活高效原則

中級用戶的數(shù)量遠高于初級和高級用戶數(shù)桶蝎。為大多數(shù)用戶設計驻仅,不要低估谅畅,也不可輕視登渣,保持靈活高效。

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


原則八:易掃原則

互聯(lián)網(wǎng)用戶瀏覽網(wǎng)頁的動作不是讀,不是看王财,而是掃卵迂。易掃,意味著突出重點绒净,弱化和剔除無關信息见咒。

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

?圖6


原則九:容錯原則

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

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

?圖7


原則十:人性化幫助原則

如果系統(tǒng)不使用文檔是最好的,但是有必要提供幫助和文檔跌造。任何信息應容易去搜索杆怕,專注于用戶的任務,列出具體的步驟來進行壳贪。幫助性提示最好的方式是:1陵珍、無需提示;2违施、一次性提示互纯;3、常駐提示磕蒲;4留潦;幫助文檔。

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

?圖8


總結

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


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

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市烈和,隨后出現(xiàn)的幾起案子爱只,更是在濱河造成了極大的恐慌,老刑警劉巖招刹,帶你破解...
    沈念sama閱讀 206,378評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件恬试,死亡現(xiàn)場離奇詭異窝趣,居然都是意外死亡,警方通過查閱死者的電腦和手機训柴,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評論 2 382
  • 文/潘曉璐 我一進店門哑舒,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人畦粮,你說我怎么就攤上這事散址」哉螅” “怎么了宣赔?”我有些...
    開封第一講書人閱讀 152,702評論 0 342
  • 文/不壞的土叔 我叫張陵,是天一觀的道長瞪浸。 經(jīng)常有香客問我儒将,道長,這世上最難降的妖魔是什么对蒲? 我笑而不...
    開封第一講書人閱讀 55,259評論 1 279
  • 正文 為了忘掉前任钩蚊,我火速辦了婚禮,結果婚禮上蹈矮,老公的妹妹穿的比我還像新娘砰逻。我一直安慰自己,他們只是感情好泛鸟,可當我...
    茶點故事閱讀 64,263評論 5 371
  • 文/花漫 我一把揭開白布蝠咆。 她就那樣靜靜地躺著,像睡著了一般北滥。 火紅的嫁衣襯著肌膚如雪刚操。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,036評論 1 285
  • 那天再芋,我揣著相機與錄音菊霜,去河邊找鬼。 笑死济赎,一個胖子當著我的面吹牛鉴逞,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播司训,決...
    沈念sama閱讀 38,349評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼构捡,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了豁遭?” 一聲冷哼從身側響起叭喜,我...
    開封第一講書人閱讀 36,979評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎蓖谢,沒想到半個月后捂蕴,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體譬涡,經(jīng)...
    沈念sama閱讀 43,469評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,938評論 2 323
  • 正文 我和宋清朗相戀三年啥辨,在試婚紗的時候發(fā)現(xiàn)自己被綠了涡匀。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,059評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡溉知,死狀恐怖陨瘩,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情级乍,我是刑警寧澤舌劳,帶...
    沈念sama閱讀 33,703評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站玫荣,受9級特大地震影響甚淡,放射性物質發(fā)生泄漏。R本人自食惡果不足惜捅厂,卻給世界環(huán)境...
    茶點故事閱讀 39,257評論 3 307
  • 文/蒙蒙 一贯卦、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧焙贷,春花似錦撵割、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至沸手,卻和暖如春外遇,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背契吉。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工跳仿, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人捐晶。 一個月前我還...
    沈念sama閱讀 45,501評論 2 354
  • 正文 我出身青樓菲语,卻偏偏與公主長得像,于是被迫代替她去往敵國和親惑灵。 傳聞我的和親對象是個殘疾皇子山上,可洞房花燭夜當晚...
    茶點故事閱讀 42,792評論 2 345

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,510評論 25 707
  • 專業(yè)人員用一套規(guī)范去評估產(chǎn)品。 原則:尼爾森10原則英支,尼爾森擴展原則佩憾,首頁可用性原則,八項黃金法則,hhs網(wǎng)頁設計...
    Asherdon閱讀 2,456評論 0 6
  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理妄帘,服務發(fā)現(xiàn)楞黄,斷路器,智...
    卡卡羅2017閱讀 134,599評論 18 139
  • 提出該理論的是Jakob Nielsen抡驼,畢業(yè)于哥本哈根的丹麥技術大學的人機交互博士 鬼廓, 他擁有79項美國專利,專...
    沈帕蒂閱讀 3,063評論 0 5
  • 嘿,你有幾個朋友致盟? 啊碎税,我有一大群。 唉馏锡,那知己少的和三毛頭發(fā)一樣多雷蹂。 因為怕受傷 所以會離開 因為會摩擦 所以會...
    叫我梅芳就好閱讀 243評論 0 2