保護性設計(Defensive Design)-亂搞也不出糗的設計品質!

所謂的保護性設計(Defensive Design)，指的就是當你所設計的產品因為某些非預期的使用 (如：使用者的誤用、系統或其他外部因素…等) 而造成錯誤時，你的產品也能有效的提供設計回饋，讓內心纖細敏感的使用者不會突然受到太多驚嚇。

莫非定律說：凡事有可能會出事的，它就一定會出事。是的，只要是人為設計的產物，都有出事的機率，有天它心血來潮就會在客戶面前挫屎給你看。所以我想，無論你是設計師(Designer)或是開發者(Developer)，應該多少都要把莫非定律放在心中，儘量想著怎麼樣讓你的產品在出事的時候，也能有帥氣的姿態。

要針對出事的情形進行設計不是件簡單的事，首先你要發揮柯南的精神，找到出事的情況。對軟體開發或測試有些經驗的朋友，大概都聽過「Monkey Test」，顧名思義就是找一隻猴子來玩弄你的設計…(誤)。

Monkey Test 不是找猴子，但意義很像，一般是設計一個小程式，在你的軟體畫面上摸擬瘋狂失控的操作行為(亂點、亂移、亂x…)，接著看你的軟體能不能承受這種極端的操作，若不能順利透過，也可以取得引起失敗的歷程資料進行分析，進而改善。

今天在Smashing Magzine網站看到一篇 Getting Started with Defensive Web Design，列出了一些網頁設計的保護性設計議題，在此節錄一些出來聊聊：

1. 輔助說明(Contextual Help)

有別於像Monkey Test這種活動能找到的問題，還有比較像是心理認知層面的問題，例如你現在看著這篇文章，心中想著「你到底在寫什麼鬼呀？ 我要怎麼離開這個頁面去找一些技術文章來看？」或者「怎麼我點了這個連結，不是到我所想的頁面呢？又要回上一頁嗎…」…等，這類問題也許就需要適時的一些輔助說明來幫忙。

2. 針對緩慢的連線狀況進行設計

你的使用者有時也許連線速度太慢 (或使用文字瀏覽器)，圖片也許都無法讀取了，這時候你的網站會不會因此產生了大量的「留白」，讓使用者無法使用網站的服務呢？如果一個網站缺少圖片，就無法取得任何有意義的資訊，其實是很可惜的。這是可以避免的情況，所以何不放進你的設計守則裡？

3. 提供站內搜尋

如果你的網站規模只在五、六頁，那你也許不太需要擔心這個；相反的，規模大於五、六頁，做一個站內搜尋的功能則是基本常識。如果是更大規模的網站，那可能需要更進階的站內搜尋引擎，像是有子分類搜尋、針對拼錯字重新建議關鍵字、找不到東西時指引其他方向…等。甚至還有更絕的，讓使用者編輯搜尋結果，藉此改善該組關鍵字的搜尋品質。

4. 表單驗證及錯誤處理

關於設計表單驗證的基本原則是：不要相信任何使用者輸入的資料，你可以在心中把使用者想成是猴子，也可以想成是惡魔。錯誤處理則是想像使用者的手殘機率破表，或者想像他是調皮的小朋友，不按牌理出牌。

就因為是猴子、惡魔、手殘、任性小孩，所以你要好好防御，像是要設定極端的輸入範圍(有上限、有下限、有字元限制、有數字限制、不能空白、不可以是HTML!)，而且你要有人性一點，語氣尊重還要奉上溫柔提醒~ 像是：「您真的想要不存檔就離開嗎？」、「您真的要刪除嗎？」、「提醒您，有紅色星星一定要填完才能送出哦~~」。

5. 404頁面錯誤(找不到)

預設的404頁面錯誤很容易嚇到一般的使用者，或者傷害到他的自尊(我弄壞了，我怎麼這麼笨…XD)。關於404頁面的客製化，很容易就能找到很多設計範例，像是這裡有50個例子，有創意當然很好，但個人覺得要跟原本的網站有一致性，不要跳Tone跳太大。

另外，使用者找不到東西，除了看到404訊息外，最好還能猜猜他真正要的是什麼，或者至少提示下一步要點擊哪個連結比較好。

6. 500伺服器錯誤

500伺服器錯誤的頁面設計比較少，但也是有例子可看 。這樣的伺服器錯誤，通常表示網站整個掛點了，所以也沒辦法再提供一些後續的站內資訊，除非有備用站可以導向，或者留下連絡用的E-mail連結，讓真的有事找你的人不會斷了連絡。

7. 偵測保護性設計的漏洞

現在有很多幫助網站維護人員分析網站狀態的工具，而且免費的就很專業了，像是Google Analitics、Google 網站管理員工具或一些付費服務。利用這些工具可以分析使用者使用網站的情形：能找出失聯的連結(Broken Links)，讓你可以快點修復；能觀察使用者的跳出率、停留時間…等。

一般來說，要把保護性設計做到一百分很難，但要提升網站的使用品質，這些都是應該注意的項目。

標籤：網站設計

分類：介面設計, 網站設計

本文作者是Audi Lu