有圖有對比！125個提升網(wǎng)頁可用性的優(yōu)化小技巧（五）

編者按：這個系列的教程有125個實用的網(wǎng)頁優(yōu)化技巧，每一個技巧都有案例闡述，保證簡單易懂。今天@企業(yè)官網(wǎng)設(shè)計精選?翻譯了第四部分 —— 當用戶操作錯誤時，如何在不影響用戶體驗的情況下快速處理好。一起來收

在很多界面中，錯誤的產(chǎn)生不可避免。一旦發(fā)生錯誤，要幫助用戶快速輕松地處理好。

往期回顧：

1. 《有圖有案例！125個提升網(wǎng)頁可用性的優(yōu)化小技巧（一）》
2. 《有圖有對比！125個提升網(wǎng)頁可用性的優(yōu)化小技巧（二）》
3. 《有圖有案例！125個提升網(wǎng)頁可用性的優(yōu)化小技巧（三）》
4. 《有圖有案例！125個提升網(wǎng)頁可用性的優(yōu)化小技巧（四）》

防止錯誤產(chǎn)生

設(shè)計界面時，不要急著出方案，要盡力設(shè)計“無錯可犯”的界面。

△ 按鈕在用戶點擊后進行去除、禁用或替換處理

別跟用戶說只能提交一次。可以多次點擊的，用戶就可能點多次。用戶點擊后禁用按鈕，才能真正避免多次提交。

△ 只提供可以接受的輸入選項

△ 在表單元素中使用勾選啟用、勾選可見的設(shè)計方式

△ 文本輸入框結(jié)構(gòu)跟輸入格式要求保持一致

監(jiān)控典型錯誤信號

界面上有哪些常見錯誤產(chǎn)生？找出這些錯誤的信號，做好這些信號的監(jiān)控。

△ 搜尋與用戶意圖矛盾的用詞

△ 若用戶已購買過該產(chǎn)品，提醒他們

對功能強大的按鈕要區(qū)分開以避免誤操作

用戶會走神，這無法避免。設(shè)計時要從視覺上明顯區(qū)分開那些功能強大的按鈕，盡量減少誤操作的可能性。

△ 通過間隔和顏色區(qū)分強大功能按鈕

△ 為重大且不可逆的操作添加約束條件

提供便利的方法恢復或退出操作

總是給用戶提供選擇返回上一步操作或安全/可識別的區(qū)域

△ 使用恢復操作而不是確認操作

△ 為各頁面或功能提供“逃生艙”（退出操作）

例如上圖，某些下拉菜單沒有退出選項，當用戶點了一個選項，就無法取消選擇了。

△ 為彈出窗口或模態(tài)窗口提供關(guān)閉按鈕

盡量減少用戶離開一個系列操作步驟的負面影響

允許用戶以原來的數(shù)據(jù)返回到相應(yīng)步驟頁面

△ 保存用戶提交的數(shù)據(jù)

△ 讓用戶回到原來的操作步驟頁面（別讓用戶又從頭開始）

加大可移動路徑或可點擊區(qū)域

用戶并非完人，他們會誤操作，因此要提供有彈性或包容性的設(shè)計。

△ 為小按鈕添加一個透明邊框（加大按鈕的點擊區(qū)域）

△ 為彈框或下拉菜單添加一點小小的延遲

△ 給整個菜單選項容器添加超鏈接（不要僅限文字區(qū)域）

△ 給主菜單、列表項和輔助圖標都加上超鏈接

用戶經(jīng)常點到不能點擊的地方。不要試圖矯正這些錯誤，相反地，為這些常見區(qū)域添加點擊功能。

提供有用和支持性的出錯提示

不要給出“發(fā)生錯誤”這種提示。解釋出錯原因，最好能給出解決方案。

△ 解釋驗證出錯的原因

△ 對于復雜出錯提示要提供相關(guān)文檔或幫助鏈接

△ 避免在出錯信息中寫“你”

記錄用戶的最近幾次操作

在界面上提醒用戶最近幾次操作

△ 顯示用戶最近幾次搜索

△ 已訪問鏈接用不同的顏色區(qū)分

△ 指出哪些項目用戶已經(jīng)看過

分析用戶行為找出界面存在的問題

持續(xù)迭代改進界面設(shè)計，可以從下面這些小技巧開始

△ 在適當位置收集客戶的反饋信息

△ 添加404錯誤次數(shù)上升的預警設(shè)置

△ 找出那些用戶反復訪問的頁面

如果一個頁面瀏覽數(shù)太多（而獨立客戶數(shù)少），就需要仔細檢查頁面是否有問題導致用戶反復訪問。

友情宣傳下，阿里UED 新開了個公眾號，已經(jīng)發(fā)了不少干貨，歡迎關(guān)注喲：

「技多不壓身的設(shè)計師才有高薪資！」

1. 平面設(shè)計：《超贊！設(shè)計師完全自學指南》
2. 交互設(shè)計：《交互設(shè)計師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計師》
3. UI設(shè)計：《超實用新手指南！零基礎(chǔ)如何自學UI設(shè)計？》
4. 前端開發(fā)：《天貓高手來教你！零基礎(chǔ)如何系統(tǒng)地學習前端開發(fā)？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識學起來！為設(shè)計師量身打造的DPI指南》
8. 交互設(shè)計自學路徑圖：《零基礎(chǔ)入門！給非科班生的自學路徑圖之交互設(shè)計篇》

原文地址：nickkolenda