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


作者: | 2011/05/28 16:27:07 | 留言


所謂的保護性設計(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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

*

*

*

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料