寬容性 UI 設計

不論你的用戶界面 (User Interface) 設計多麼好,用戶 (User) 始終都會犯錯誤的。不過,你不是無能為力的,你可以想辦法允許用戶從錯誤中恢復起來 (Error Recovery) ,或者甚至更好的就是防止用戶出錯 (Error Prevention) 。其中一個方法就是寬容性 (Forgiveness) 設計 。讓我們更詳細地解釋,而且看一些鼓舞人心的例子。

反饋和錯誤校正

寬容性設計其中最重要的方面就是良好的反饋 (Feedback) 。用戶應該得到通知有什麼(潛在的)錯誤,以及那些錯誤會怎樣影響他們的工作。良好的反饋不單只很好地解釋錯誤的詳情,它還包括了一些用戶能夠執行的行動,以便從錯誤中恢復起來。

但是,不是所有錯誤用戶都能夠撤消到 (Undo) ,有些錯誤是完全不可能逆轉的。這種情況會令用戶變得沮喪,所以提供一些解決方法是非常重要的,以助糾正問題。

防止出錯

反饋是必要的,不單只在發生錯誤之後,它而且是防止用戶出錯重要的角色。用戶應該被警告他們的行動可能會產生的後果。一個很好的例子是,當用戶要離開一個修改過的網頁表單而沒有存儲,一個確認對話框 (Confirmation Dialog) 就能防止資料丟失。

在用戶界面上減少限制條件 (Constraint) 也可以防止用戶出錯。例如,讓一個輸入字段 (Input Field) 能夠接受到各種不同輸入格式,然後讓系統處理它。

有幾個很好的例子

你不必搜索太多就能夠找到一些很好的例子,因為你每一天都使用他們。Google 真的充分利用了寬容性。讓我們來看看他們是怎樣做到這一點。

撤消

撤消功能是寬容性的最常見和最有用的方法之一。如果你刪除郵件從 Gmail 收件箱中,你能夠立刻撤銷你的行動。此外,已刪除的郵件可以從垃圾箱刪除後30日內回收。

Gmail 撤消功能

你的意思是……?

如果你寫錯了你想搜索的字,它就會建議一個糾正了的字給你,讓你能夠點擊那個鏈接來嘗試一個不同的搜索字。此外,前兩名從糾正過的查詢得到的結果會在原來的結果上面顯示出來,這是很容易從這個錯誤中恢復。

Google 你的意思是......

自動儲存

當處理大量的資料時(例如文本文檔),最有效的方法之一來防止出錯和資料丟失就是自動儲存 (Auto-Save)。經常儲存用戶的工作能夠大大減少資料丟失的潛在危機。即使未儲存的工作出了事,你可以恢復到上一次的儲存。這通常用在文字處理軟 件中的,但它可以用在幾乎任何地方裡。

Google Doc 自動儲存

你肯定嗎?

用 Google Docs 作為例子,如果你輸入一些東西並嘗試關閉一個打開了標籤或窗口,系統會顯示一個確認對話框。

Google Doc 你肯定嗎?

寬容性格式

有方法能夠可以令用戶界面像確認對話框和警告一樣那麼寬容而不會那麼礙眼。它可以接受各種用戶的輸入,然後讓系統來處理它們。這種 UI 模式是稱為寬容格式 (Forgiving Format)。在 Google Maps 搜索字段中,你可以任意組合這些搜索項目:國家、城市、地址、郵編及其他地方。

Google Map 寬容性格式

需要時啟用/禁用操作

另一種很好的方法來防止用戶出錯就是當用戶能夠執行那個行動時才啟用那個操作。 如果你想在 Google Mail 的電子郵件中加個鏈接,你就可以這樣做如果你真的輸入了它在輸入字段裡。這個簡單的方式有時會防止到嚴重的損壞。

Google Mail 需要時啟用/禁用操作

結論

有很多的方法令界面有寬容性。良好的反饋與建議從錯誤中恢復的方法,甚至防止用戶出錯,都能夠大大影響整體的用戶體驗。但是你要小心,因為是很容易過度使用不同的寬容性措施。例如,如果動作可以撤消,那就沒有必要使用確認對話框和警告。

【原文】
http://www.jankoatwarpspeed.com/post/2009/11/17/Forgiveness-UI-design.aspx

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s