UI設計師非學不可的十大易用性原則

3 評論 58981 瀏覽 26 收藏 22 分鐘

身為 RD 的你受過太多 UI 的氣嗎?老是發現邏輯不通需要打掉重練被延誤時程嗎?常被 UI 嫌念理工的沒有美感都不懂嗎?報仇的時間到了。這篇文雖然說是「十大易用性原則」,也可以說得上是:「教你如何捅 UI 」。RD 最擅長講理,就來跟 UI 講理!從易用性下手找 UI 麻煩,沒有幾位 UI 不中刀的…

易用性(Usability)指的是使用者能夠使用某樣工具來達到某個特定目標的容易程度,常見的中文翻譯有優使性、使用性、易用度、易用性、好用 性、可用性等等,其中較常見的為優使性和可用性。優使性感覺上像是優越的使用、還是優化過的使用,在詞匯上模棱兩可有模糊地帶;可用性的說法則像是僅分成 可以用和不能用兩種狀況。Usability 翻譯成易用性,清楚指出「容易使用」的特點較為貼切。易用性畢竟是個較抽象的名詞,因此 Jakob Nielsen 提出十大易用性原則,詳細說明所謂「易用」需要符合易于學習、快速使用、相對無錯這三個部分。

一、系統狀態的能見度( Visibility of system status)

軟件應該保持相同的模式,透過適當的反應,在合理的時間內通知使用者,讓使用者了解正在發生的事情。

最常見的就是按鈕狀態。在計算機上瀏覽網頁時常常會發現某些地方在光標移過去時顏色會有所改變,提示你這里可以被點擊。在 iPhone 上沒有光標,所以會以更淺顯易懂的方式告訴你這里可以被操作,像是更立體的按鈕、或是仿真實體開關的圖象。(App:Money Book,選中的項目底色變成鮮艷的藍色。)

用戶點擊按鈕,會出現按鈕被按下去的凹陷感,提示你已經點擊到了。(App:Reach,擬真的開關設計與下方明顯凹陷可點擊的 TabBar。)

clip_image002[4]

另一種常見的系統狀態響應就是需要用戶等一下,現在正「讀取中」、「下載中」。在等待時如果沒有任何提示,就會產生「自從點了這個按鈕后畫面就不動了,我的操作到底有沒有被執行呢?不曉得要等多久…」的感受。

進度條就是為了降低使用者的不耐感、告訴用戶現在處理進度如何、大約還需要多少時間而存在。透過進度條,用戶可以知道他的操作正在執行中,現在完成 多少部份,再等多久就可以結束。(App:Evernote,同步時右上角的 icon 會轉動,在所有記事標題下方有目前進度百分比。)

clip_image003[4]

二、系統與真實世界的關聯性(Match between system and the real world)

系統應該要運用用戶的語言,使用他們熟悉的詞句、短語、概念,而不是專業術語。

因應該族群的習慣進行開發,像 iOS 用戶會覺得左上角的按鈕通常是「回前頁」一樣,若你將「回前頁」放到右上角,會增加他們操作錯誤的機會。 試著將 Android 手機給 iOS 慣用者操作,會發現他們不曉得怎么樣回到上一頁,也不知道回到主畫面的 Home 鍵在哪里,對于實體按鍵的功能一無所知。

舉個我家發生的真實的例子:女兒教父親怎么操作家庭計算機,當她說「請把鼠標移到開始」時,父親拿起手上的鼠標左右翻看了一下,便將整只鼠標對準屏 幕上的「開始」敲下去,屏幕被鼠標撞擊發出摳摳摳的聲音……女兒問父親,為什么會把鼠標拿起來敲屏幕,明明只要在桌上移動鼠標就可以操作,父親說:「妳叫 我把鼠標移到開始的??!」

女兒的認知里,拿鼠標敲屏幕無法完成任何操作,鼠標只是為了控制光標而存在,所以將鼠標移到開始同等于「操作鼠標以控制屏幕上的光標、并將光標移到 開始」。但對父親而言,因為不熟悉計算機操作,他尚未建立鼠標等于光標的概念,光標是光標、鼠標是鼠標,所以會發生拿鼠標敲屏幕的爆笑情況。

你覺得大家都應該要知道的事情,其實不一定都會曉得。雖說這種說詞對「父親」很失禮,但請把所有使用者都當成是「父親」那類型的人物。什么樣的用語 才能讓第一次接觸 App 的人沒有誤會的快速上手呢?(App:Weightbot,用于記錄每日體重,仿真現實生活中的體重計刻度。)

clip_image004[4]

三、使用者的操控自由(User control and freedom)

用戶時常以「嘗試錯誤」來選擇系統功能,他們需要一個明顯的「離開」來結束使用者不需要的狀態。并且支持復原步驟與重復步驟。

易于犯錯且修正錯誤代價高昂的高風險情形將導致使用者不愿意多研究這個軟件。良好的設計能讓使用者降低出錯率,在提供取消和重做的功能前先減少用戶出錯的機會。

Ctrl+z(復原)是最容易被記住的快捷鍵,也因為有復原的存在,使用者才會大膽去嘗試各種不熟悉的操作。他們心想:「反正做錯了重來一遍就好了 嘛!」如果一出錯就表示要從新開始,使用者會感到迷惘并且覺得壓力太大。(想看看 Diablo 的專家級模式,人物死亡不能重來。在這種模式下哪個玩家不是備感壓力戰戰兢兢小心翼翼的?)

用戶操作 App 是為了完成他預期的目標,根據八二法則,你的使用者有 80% 都是使用最初階的操作,只有 20% 人會想要更專業進階的功能。越輕松簡單無壓力越受大部份使用者青睞,不過是想透過 App 完成某項目的,用不著壓力這么大的挑戰自我極限吧?(App:Awesome Note 的設定頁面,許多進階功能都放在這里。)

clip_image005[4]

初學者和RD很容易在這個原則犯下錯誤,不是所有的功能全部攤到第一層就代表豐富好用。

所有的功能都很重要就代表沒有一個功能是重要的。就像期末考前把課本每個字句都劃上熒光筆強調,根本沒有重點,有劃跟沒劃一樣。凡事都有輕重緩急, 就像一位血流不止、骨折又長期咳嗽的病人在眼前,是要先止血、先處理骨折、還是先治療咳嗽一樣。最重要的事情需標明出來,可以暫緩不急的事之后再說。

功能的優先級也是如此,最重要、最常用的功能放在最顯眼易觸碰的位置,較次級非必備的功能就擺到下一層或是干脆挪到某個進階選單里去吧。(App:Gmail 的側邊欄,這種選單無論主要還是次要的功能,都能排序整理得很漂亮。)

clip_image006[4]

四、一致性和標準(Consistency and standards)

使用者不應該猜測不同的字匯、狀態、動作是不是代表同一件事。

考慮到瀏覽器的兼容性。App 必須采取用戶的語言、并運用他們熟悉的單詞、短語和概念,而不是程序語言或專有名詞。接口中的控制組件、命令、設定的功能應該清晰明確。操作軟件不應該需 要透過排除法進行演繹推理。也不要讓使用者所執行的操作和他們的目標沒有明顯的關連。(App:Priority List,下方各個 icon 的含意要稍微想一下才能理解,且實際操作和預期的有落差。)

clip_image007[4]

依現實生活常見的習慣,讓訊息在自然且有邏輯順序的情況下產生。為了達到這個目標,有時需開發一個詞典。這個詞典最好由團隊的技術編寫者來管理和實 施、監視文件檔案和軟件中出現的術語一致性。支持目標工作領域中的問題該如何解決,它應該最大限度地減少或消除用戶花費時間解決軟件技術層面中的問題需 求。

屬性、參數、設定、設置、資源?;蛘呤菍ふ?、搜尋、搜索、搜查、尋求…等等,這些詞指的都是同一個功能,對用戶來說他不會知道 App 上寫的「設定」和「屬性」其實是同一件事。如果將所有的字詞統一有困難,可以干脆直接使用圖示代表。(App:My Wonderful Goals,簡單易懂的 icon 設計,畫面干凈清爽。)

clip_image008[4]

五、預防錯誤(Error prevention)

比起提供用戶明確易懂的錯誤訊息,更重要的是如何防止使用者發生錯誤。

像是消除容易出錯的條件或是自動檢查確認選項?;蚴亲屖褂谜叽_認他們接下來要做的行動。越是讓使用者自行輸入的字段越容易出現錯誤,明明只能輸入數 字的地方就是有人會想打英文字母。擺明說了賬號只能使用英文或數字,還是會有人用上特殊符號。比起使用者填完所有字段按了送出后再告訴他哪些地方有誤,不 如在輸入錯誤時就擋住他、在輸入正確數據前無法進入下個步驟。如果能在字段旁邊實時反應驗證狀態是再好不過的。

在 iPhone 上最方便的就是內建數種鍵盤。在輸入電話號碼的字段時只跳出數字鍵盤、輸入日期時使用 Picker。(App:聯絡信息,輸入只有數字的字段時,就跳出數字鍵盤。)

clip_image009[4]

在小小的手機屏幕上打字是非常辛苦的一件事,按鈕小不好按、又容易出錯,最好也最貼心的作法是連輸入都簡化了,最好點點手指就解決。像是 Google 的實時搜尋,打入第一個字時就將熱門選項列出來供用戶選擇,但有可能不是使用者需要的?;蛳袷?Facebook,輸入一個關鍵詞就將所有包含這個關鍵詞的朋友列出。(App:App Store,在使用者邊輸入時實時搜尋有可能的關鍵詞。)

clip_image010[4]

六、辨識而非記憶(Recognition rather than recall)

盡量減少用戶需要記憶的事情、行動以及可見的選項。

使用者沒辦法記住太多步驟。App 如果有使用說明介紹,應該放在顯眼且可輕易使用的位置。如果軟件把數據當作訊息,把數據都丟給用戶,要用戶自己查看數據代表他們的注意力會被分散,產生錯 誤的機會就會增加。軟件應該將用戶的注意力集中到重要的數據上,并幫助用戶從中取得訊息,而不是未經過篩選要使用者花時間思考。

像是為了酷炫而特別設計的操作接口,與眾不同讓人眼睛一亮,但使用者在初次接觸后再度使用,要花多少時間才能找到上次操作過的功能?相信很多人都有 邊自言自語「我記得這個 App 有 xxx 功能啊,在哪里呢…」邊將某個 App 所有按鈕選單翻一遍的經驗。(App:Yoritsuki,非常漂亮精致的 App,下方選單與上方提示一目了然。)

clip_image011[4]

七、彈性與使用效率(Flexibility and efficiency of use)

功能與易用性之間通常存在一個平衡,對于軟件中的每個特性、功能、或能力,都必須提供一種途徑讓使用者調用或控制。如果用戶的目標是可預測而且常用的,使用者不應該為了實現這個目標而必須做很多工作。

做少量的工作、得到很多結果,才是使用者想要的。簡單來說就是要思考「有多少用戶」和「使用頻率如何」的問題。越頻繁使用的功能,需要點擊的次數應該要越少。越多用戶使用某功能,它就應該越明顯。且要為核心情況設計,不要為「邊緣」情況付出太多。

快捷鍵就是這個易用性準則的最佳代表,在 App 上沒有快捷鍵的設計,可以透過手勢來完成各式各樣的操作。例如瀏覽列表頁,已卷到最下方后想回到頂端不需要一直滑動手指、只需輕點一下 StatusBar,列表會自動卷回最頂端。(App:Day One,對撰寫日記來說,拍照和新增是最常用的功能。)

clip_image012[4]

八、美觀與簡化設計(Aesthetic and minimalist design)

為了防止用戶出錯,可以在軟件設計上就盡量減少用戶的記憶負擔。將功能、操作及選項設計得顯而易見。對于不相關或是很少需要的訊息或功能要隱藏起來,僅突出重點在軟件設計上非常重要。

像是注冊新會員,如果一開始就要使用者填寫一長串的個人資料,相信許多人在這個階段就打退堂鼓。簡化注冊流程就可以增加用戶成為會員的意愿,最好只 要一個按鈕就能完成注冊。有的 App 會串接 Facebook,使用者只要同意授權就完成注冊手續?;蛘呤侵蛔層脩籼顚懕貍涞臄祿缳~號密碼等,其他非必備資料如生日、所在城市等,使用者可以在登入 后去個人設定頁自行填寫。 (App:Pose,使用 Facebook 登入,或是輸入賬號密碼。)

clip_image013[4]

九、幫助使用者認識、偵錯并從錯誤中恢復(Help users recognize, diagnose, and recover from errors)

幫助使用者識別、診斷、并從錯誤中恢復,將損失降到最低。如果無法自動挽回,則提供詳盡的說明文字和指導方向,而非難以理解的代碼。最好能在告知使用者發生錯誤的同時一并提供解決方法。

使用者不會想知道「404」代表什么意思,直接說明「找不到網頁」比簡短的錯誤代號更能理解。比起找不到網頁的文字,如果能說明找不到網頁的原因、 并加上如何解決更能幫助使用者排除錯誤。就以網絡斷線這個例子來說,iOS 可以偵測用戶目前對于網絡的設定,是因為沒有開啟網絡功能、還是網絡聯機質量不佳所以無法開啟網頁。前者可以請使用者去設定將 Wifi 或 3G 功能開啟,后者能告知使用者換個聯機環境或是稍后再試。(App:書報攤,刪除數據時會提示將刪除所有數據。)

clip_image014[4]

十、幫助與說明文件(Help and documentation)

一個軟件在完美的情形下不需要任何說明文件使用者就能夠操作,但就算是最好的軟件也需要提供幫助與說明文件。

當用戶尋求幫助時,此類訊息應該容易被搜索查詢。完美的接口即使沒有任何說明提示下,使用者仍然能夠流暢操作。為了預防還是有少數使用者搞不清楚狀 況,常見的作法除了設制說明頁之外,初次開啟 App 直接進入說明教學,強迫使用者閱讀完畢后才可開始操作。(App:i Track My Time,永遠出現在首頁的操作方式說明。)

clip_image015[4]

以上文章是我根據 Jakob Nielsen 的十大易用性原則翻譯(不怎么精準)加上個人經驗所寫(其實寫完很久了,截圖有點舊。),有興趣的人建議去看原文。

這10條講起來很簡單,真要實行卻非常困難。iOS 和 Android 平臺特性不同,若很堅持要根據這10條原則將接口設計到好,Guideline 應該要熟到掰碎吃到肚子里的程度吧。像是第一條的「反應」,iOS 能透過 RD 設定按鈕按下去時顏色會變得較黑,所以按鈕切圖出 1 張未點擊時就好。Android 沒有內建這種功能只好乖乖出 2 張圖,諸如此類。偏偏 RD 對 Guideline 通常都比 UI 熟,科科。(理工生很習慣是字的厚磚書,念設計的有大半不喜歡看沒幾張圖又生硬難啃的文章。)這 10 條原則都是 UI 在規劃接口時應該考慮進去的部份,不只 UI 需要勞記,RD 多多少少心里有個底,如果看 UI 不順眼,在討論會議上慢條斯理把接口各個組件拆分出來一項項比對原則,捅死 UI 效果奇佳…

原文地址:blog.akanelee.me
作者:@Akane_Lee

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 原來就是尼爾森交互的十大原則 ?

    來自福建 回復
    1. Nielsen = 尼爾森 ,選擇性忽略了英文名

      來自福建 回復