#1系統狀態的可見性 ( Visibility of System Status )
設計應始終透過在合理的時間內提供適當的回饋,讓使用者了解正在發生的事情。
當使用者知道當前的系統狀態時,他們會了解先前互動的結果並確定後續步驟。可預測的互動可以建立對產品和品牌的信任。
Tips:
向使用者清楚傳達系統的狀態
#2:連結真實世界 ( Match between system and the real world )
設計應該遵守使用者的語言。使用使用者熟悉的單字、短語和概念,而不是內部術語。
遵循現實世界的慣例,使資訊以自然且符合邏輯的順序出現。
Tips:
善用icon 來表示功能
#3. 讓使用者有控制權及自由度 ( User control and freedom )
使用者經常會錯誤地執行操作。他們需要一個明確標記的「回到上一頁或是跳出服務」來離開不需要的行動,而不必經歷漫長的過程。
允許使用者對系統的控制,避免陷入困境和感到沮喪。
例如:
1. Airbnb 在挑選房間時,可以透過切換地圖模式或列表模式來瀏覽房型,提供兩種不同的篩選方式來找尋理想的房型。
2. 選機票或是飯店時,可以挑選不同的日期跟航班(https://www.booking.com/)
#4. 一致性與標準 ( Consistency and Standards )
人們大部分時間都花在使用您的產品之外的數位產品上。
使用者對其他產品的體驗決定了他們的期望。未能保持一致性可能會 迫使使用者學習新東西,從而增加使用者的認知負擔。
Tips
確保設計中使用元素和操作方式相同。
Design Guildline
#5. 預防錯誤 ( Error Prevention )
良好的錯誤訊息很重要,但最好的設計首先會仔細防止問題的發生。消除容易出錯的情況,要么檢查它們並在用戶承諾操作之前向用戶提供確認選項。
錯誤有兩種類型:一種是失誤,一種是錯誤
失誤是由於注意力不集中而導致的無意識錯誤。錯誤是基於使用者心理模型與設計之間不匹配的有意識的錯誤。
Tips
1. 先防止高成本的錯誤
2. 設定預設值來防止錯誤
3. 警告用戶來防止重大錯誤的產生
#6. 用認知方式而非記憶 ( Recognition rather than recall )
透過使元素、操作和選項可見來最小化使用者的記憶體負載。
使用者是認知不是記憶住元素,增加認知的介面減少了使用者所需的認知負荷。
Tips
1. 讓人們識別介面中的信息,而不是強迫他們記住
2.減少用戶必須記住的資訊。
Netflix 開啟時,每個影片或影集看過的時間進度都會自動紀錄,因此使用者無需記得上次看到第幾集,能夠更省力得繼續看下去。
使用資料夾的圖象化,方便我們找資料
購物車
#7. 具備使用靈活性和效率 ( Flexibility and efficiency of use )
靈活的流程可以透過不同的方式進行,以便人們可以選擇適合自己的方法。
Tips
1.提供鍵盤快速鍵和觸控手勢等加速器。
2.透過為個人用戶客製化內容和功能來提供個人化。
3.允許定制,因此用戶可以選擇他們希望產品如何運作。
#8. 設計美觀與極簡 ( Aesthetic and Minimalist Design )
避免提供不必要的元素和信息,以免分散使用者注意力。確保介面的視覺元素只能關注使用者的主要目標。
Tips
1.讓 UI 的內容和視覺設計集中在重點上。
2.不要讓不必要的元素分散使用者對他們真正需要的資訊的注意力。
3.優先考慮支援主要目標的內容和功能。
#9. 易於使用的錯誤處理和回饋 ( User-friendly Error Handling and Feedback )
錯誤訊息應該用簡單的語言(沒有錯誤代碼)表達,準確地指出問題,並建設性地提出解決方案。
Tips
1.使用傳統的錯誤訊息視覺效果,例如粗體、紅色文字。
2.用他們能理解的語言告訴使用者出了什麼問題—避免使用技術術語。
3. 為用戶提供一個解決方案,就像一個可以立即解決錯誤的捷徑。
#10. 教學指示與幫助 (Help and Documentation)
介面提供簡易教學,讓新的使用者迅速上手使用
最好係統不需要任何額外的解釋。但是,可能有必要提供文件來幫助使用者了解如何完成其任務。
Tips
1.確保幫助文件易於搜尋。
2.只要有可能,就在使用者需要時在上下文中呈現文件。
3,列出要執行的具體步驟。
參考文章
https://www.nngroup.com/articles/ten-usability-heuristics/
https://www.nngroup.com/articles/usability-heuristics-virtual-reality/
https://uxdesign.cc/10-usability-heuristics-every-designer-should-know-129b9779ac53
十大易用性海報下載