原文網址:十大易用性原則 | 嫁給RD的 UI Designer
最近在 Carpo 共乘 團隊裡,擔任 Android App 開發者的角色。
在新創團隊最好玩的就是可以直接發表自己的意見,跟 UI/UX 討論想法,從而學習到很多有趣的事。
不免俗地要來瞭解一下 usability 囉

因為理論上,人類的短期記憶是magic number:7±2 ,我的記憶力也不是太好XP 所以就整理了一下,大概可以分為以下 4 類精髓:

1. 簡單直覺 - 7, 8

  • 簡單、乾淨的設計。
  • 最常用的功能顯眼一點,把進階的功能收在別的地方;減少使用者 reach 的行動次數
  • 讓操作變得更直覺 (讓使用者不必思考「然後勒?接下來我該怎麼做?」)
  • 例子
    • 越常用的功能,佔的空間越大 / 擺的位置越高
    • 結合社群網站登入,簡化使用者註冊流程

2. 顯示狀態 - 1, 6

  • 讓使用者瞭解他現在的處境 (正在哪個模式/狀態;是否必須等待;)
  • 不需要進一步思考、操作即可得知
  • 例子
    • 讀取進度對話框(已完成 ..%)
    • 已選擇的頁籤,標示不同的顏色
    • onClick 時,凸顯按鈕的凹陷感

3. 符合預期 - 2, 4

  • 符合使用者原本的預期,包括看到的內容、點擊/操作某一元件之後的動作/feedback
  • 例子
    • 按下車輪的icon 應該要進入設定頁面
    • 直接畫出手電筒的把手開關 on / off

4. 錯誤的預防與治療 - 3, 5, 9, 10

  • 允許 Trial & Error 的同時,也提供良好的文件
  • 預防的例子
    • 編輯欄位的 hint ,跳出適當的鍵盤
    • 輸入的自動完成
    • 在刪除前,顯示確認對話框
  • 治療的例子
    • "上一步"、返回鍵、離開鍵
    • 顯示 "找不到網頁",而非 404

要達成以上 4 點的要求,有非常多種方法。以上僅列舉一些最常見的經典例子,也歡迎你分享你的想法與作法唷!
以下將原站的十大原則一併附上:

1. 系統狀態的能見度 Visibility of system status
- 軟體應該保持相同的模式,透過適當的反應,在合理的時間內通知使用者,讓使用者了解正在發生的事情。

2. 系統與真實世界的關聯性 Match between system and the real world
- 系統應該要運用使用者的語言,使用他們熟悉的詞句、短語、概念,而不是專業術語。

3. 使用者的操控自由 User control and freedom
- 使用者時常以「嘗試錯誤」來選擇系統功能,他們需要一個明顯的「離開」來結束使用者不需要的狀態。並且支援復原步驟與重複步驟。

4. 一致性和標準 Consistency and standards
- 使用者不應該猜測同一種動作是否使用不同的字彙、狀態或動作。

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

6. 辨識而非記憶 Recognition rather than recall
- 盡量減少使用者需要記憶的事情、行動以及可見的選項。

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

8. 美觀與簡化設計 Aesthetic and minimalist design
- 為了防止使用者出錯,可以在軟體設計上就盡量減少使用者的記憶負擔。將功能、操作及選項設計得顯而易見。對於不相關或是很少需要的訊息或功能要隱藏起來,僅突出重點在軟體設計上非常重要。

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

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

Comments

comments powered by Disqus
Copyright © 2013 Andro Chen
Powered by Logdown and Greyshade
Favicon from The Noun Project