摧毀一個好網站的最好手段是什麼?訪問它。起碼給人的感覺常常是這樣的。你夜以繼日千辛萬苦搭建好的界面，到頭來卻壯志未酬身先死，絕大多數的訪客，在這些界面所支撐的過程進行到一半的時候就放棄了。大多數情況下，訪問者離開是因為碰到了障礙：遇到了讓他們無法繼續下去的問題。比如說敲錯了信用卡號或點擊錯了鏈接，又或者是敲錯了網址。這不是他們的錯。
防護性設計的確切含義是什麼?Richard Winchell供圖
好設計假設人會犯錯。糟糕設計則讓敲錯一個字母的訪客困進死胡同。最好的職業人士靠聰明的防護性設計策略來對此負責(亦被稱為權變設計)。
防護性設計意味著…
我是個簡單的傢伙。在《web的防護性設計》一書中，37Signals是這樣定義防護性設計的：“為出錯時刻而設計” 。
說到點子上了，是不是?防護性設計對用戶錯誤和網站錯誤均有預期。那麼，它會試圖去阻止那些錯誤，並為引導用戶回到正軌提供幫助。 Web的防護性設計通常關注最常見的失效點：表單、搜索、地址欄以及服務器問題。
防護性設計：
◆ 在錯誤挫傷用戶之前先進行驗證，
◆ 根據用戶隱含的意圖擴展已有的選項，
◆ 通過提示性信息保護網站訪問者免受服務器錯誤及損壞的鏈接影響，並
◆ 在錯誤發生前輔助用戶。
防護性設計：業務感知
無論你是希望發展自己的在線業務或只是改進一下自己的博客，防護性設計都是最好的升級手段之一——防護性設計不是為了贏得受眾，相反，它通過幫助你更好地服務於已有的受眾。後者比前者要容易得很多很多。
不言自明。 What consumes me供圖
想想看： 你可以在營銷、搜索引擎優化、社區建設、廣告顯示以及內容策略還有吸引1000名新的訪問者上面下功夫。如果你的在線商店有5%的訪問者決定購買東西，那麼那1000個新的訪問者就意味著50項新的訂單。或者，你也可以實踐防護性設計。這意味著把你當前的轉化率從3%提升到3.5%，同樣也能增加50個新訂單。
學習防護性設計的最好方式?通過例子。以下我們快速瀏覽一下這些最佳實踐，此外還提供一些自己動手的提示。
嵌入式和上下文幫助
最好的權變設計可防止錯誤的產生。有時候簡單的一條提示或解釋就能避免錯誤和訪客受挫。不要讓客戶去到獨立的幫助區，相反，可嘗試著以聯機或上下文指令來輔助他們。
嵌入式幫助提供了指向頁面特定項目的指針。 37Signals在應用中提供了嵌入式幫助。比如說，我不用離開頁面就能發現30天的BaseCamp試用期需要什麼：
37Signals的嵌入式幫助聲明了免費試用的條件。
當我把鼠標停在“30天免費試用”的時候嵌入式幫助文本框就會出現。它容易閱讀、位置得當，跟免費試用也是清晰相關。語言也是十分清楚。這很重要。防護性設計就是根據情況需要提供必要的信息。
上下文幫助提供了與當前頁面或流程相關的指南。因此，“上下文跟嵌入式幫助不一樣，上下文幫助通常與整個頁面有關，它的出現無需經過點擊或滾動。
WordPress在應用的管理區提供上下文幫助。 “獲取儀錶盤幫助”消息在你首次打開儀錶盤的時候會出現。消息也許有一點長，但是這是有幫助的，對於給定的上下文來說也是適當的。注意其簡潔的語言，再加上通過跳轉到整份文檔或支持論壇來進行深度挖掘的選項：
WordPress上下文幫助提醒我注意有用的指令。
HootSuite通過簡單的嵌入式幫助框把它的每一項應用特性和服務包都解釋清楚。此框不需要讓用戶離開非常重要的登錄頁面，讓你一眼看過去就能能清楚基本問題的答案：
HootSuite利用嵌入式幫助解釋各種特性。
這些網站均對用戶可能錯過某些特定功能和需求有所預期。然後他們會在上下文背景下對這些功能按照清晰的方向進行展示。不做假設! 對你來說充滿意義的一個字段、按鈕或功能，也許對於普通訪客來說沒什麼作用。就是提供幫助。
低速連接
防護性設計的另一種精妙形式負責處理低速的Web連接。移動連接的下載有時候會慢得像蝸牛。發生這種情況的時候，訪問者可能會被迫在你的網站上尋找沒有圖像或Flash元素的指南路徑。
37Signals確保你能夠在沒有圖像的情況下瀏覽其所有內容，包括交互元素。為了做到這一點，它更多地依靠CSS和文本而非圖像。即便在背景和圖片未被加載的情況下，關鍵的導航、喚起行動以及翻轉元素(rollover elements)仍舊起效：
即便沒有圖像，用戶也能訪問37Signals的網站。
沒有圖像的A List Apart看起來有點小，但是從文章到導航一切都在呢。用戶可輕易找到並閱讀自己想讀的文章：
即便沒有圖片，分隔列表(A List Apart)的佈局依舊保持的很好。
CNN的主頁沒圖像也能保持交互。訪問者可在相同位置看到所有的鏈接、搜索工具、導航及內容，就彷佛圖片顯示在那裡一樣：
CNN的網站在沒圖像的情況下仍保持90%的完整性和可導航性。
對於類型和佈局有些設計者仍然想要100%的控制，他們希望自由使用圖片、Flash和其他加載很慢的元素來實現這一點。但是越來越多的用戶是通過無線連接來訪問Web的，這種方式雖然越來越快但可靠性仍不足。要先做好計劃，這樣帶寬不足的時候網站仍然能工作。
站內搜索
站內搜索很不錯，如果訪問者實際上能找到想找的東西的話。如果你的網站包含有大量的產品、概念或服務的拼寫錯誤，那麼你的搜索工具將會是大家恨得咬牙切齒的試驗場。對拼寫和排印錯誤做好預期，把站內搜索變成有用的工具。
亞馬遜的站內搜索工具自動推薦相近的匹配項。它提供了跟谷歌的“你是指?”消息同一類的東西，此外還顯示正確拼寫的查詢結果：
亞馬遜修改搜索結果來顯示匹配拼寫正確的產品。
跟其他網站一樣，CNN也提供了最貼切的拼寫修正。然後它還提供兩組其他選項：最接近匹配項的頭條新聞以及本週該網站的最熱門搜索。修正和各種結果讓訪問者重歸正軌，不必執行第二次搜索。
CNN返回拼寫最接近的的匹配結果，此外還有頭條新聞。
這些例子對拼寫和排印錯誤都做出了預期，儘管有時候訪問者會提交不常見的查詢：比如說，“java”而不是“咖啡(coffee)”，或者“頻段(band)”而非“鈴聲(ring)”。
通過讓其搜索結果透明化，Zappos提供了一種優雅的解決方案。該網站會檢查你的查詢，並顯示搜索所映射的目錄和概念。此外，用戶可以選擇將任何目錄從搜索結果中移除：
Zappos闡述了自己是如何發布結果並讓你修正它們的。
因此，如果提交了一項錯誤的查詢，Zappos可能也會展示錯誤的結果給我，但它也會向我表明為什麼結果是錯誤的，並幫助我指出更好的搜索。
如果你只是在業餘時間折騰一個小規模的網站，這些自動化的搜索建議及映射工具也許看起來是遙不可及的。但實際上並非如此。像谷歌的客戶化搜索那樣的工具可讓你起步。如果你是個技術狂，像Lucene那樣的解決方案帶有整套的庫，可讓你進行“你是說”那樣的匹配工作，還能讓你對匹配進行客戶化。或者你還可以寫自己的腳本來識別常見的拼寫錯誤並按自己想要的方式來進行處理。你想要什麼樣的東西完全取決於你。
表單校驗及錯誤處理
表單是引發客戶切齒之恨的第一大誘因。填寫表單需要進行大量的工作—它迫使你要執行最艱難的組合動作：點擊—敲字—點擊，通常還要你掏出錢包去尋找信用卡等其他信息。排印錯誤、字段丟失或者格式不正確的電話號碼都會令訪客陷入重新輸入—提交—再重新輸入的惡性循環，每一次都只能改正一個錯誤。聰明的防護性設計則從一開始就方向明確(參見前面的嵌入式幫助)。
但是錯誤不可避免。因此，防禦性表單設計會做以下事情：
保留訪客數據
給用戶返回表單去補充漏填數據的時候，網站應當保留已填數據域的數據。訪客應該無需重輸整個表單就可以修正錯誤。
以清晰的圖形和文字高亮顯示錯誤
修正和完成數據項應該是明顯和容易的。
別讓訪客感覺自己像個罪犯
用全部是大寫的消息告訴用戶“你沒有正確完成該表單”一點兒也不討人喜歡。
Wufoo高亮顯示錯誤，並把用戶做錯了什麼解釋清楚，網頁刷新時還會保留數據，這些讓修改變得很容易。該設計唯一的問題是“創建你的賬號遇到了一個問題” 這句話，因為它沒有告訴我任何有用的信息。更具描述性的消息會更好些。
Wufoo把錯誤高亮顯示，但是更清晰的文字會幫上大忙。
FreshBooks做得既漂亮又簡潔。更妙的是，它沒有讓用戶產生考試沒過的感覺：
FreshBooks的表單信息簡潔友好。
複雜和簡單的表單佈局都可以提供很棒的反饋，並能讓用戶回到正軌，正如下述SEOmoz和MailChimp的截屏所顯示的那樣。
當兩個字段不匹配的時候SEOmoz的表格會告訴你
MailChimp利用JavaScript進行嵌入式校驗，這樣你在提交表格之前就能改正錯誤：
MailChimp在你點擊“提交”前進行驗證，更節省時間。
當用戶試圖將其訂閱清單從賬號中刪除的時候，Mailchimp還展現了Web表格防護性設計的另一種有趣技術。該工具要求用戶手工輸入“DELETE”來確認此項操作。確保清單不被以外刪除的絕佳例子。乍一看該技術也許看起來有點令人生厭，但是對於錯誤地刪除掉敏感數據的用戶來說，這無疑把出錯的機率降到最低。
Mailchimp的“輸入‘刪除’”模式。可解決用戶某些頭痛的問題。
好的權變設計永遠不會礙事。在所有這裡的例子裡，每一個錯誤都會被高亮顯示。此外，錯誤描述的位置就在出錯地方的附近，因此訪客很容易找到並改正錯誤。這樣可以保持表格緊湊，維持視線流動，並讓訪客繼續任務，不受干擾。
“頁面找不到”錯誤
在互聯網上，失效鏈接如汗牛充犢。網站管理員可能移動了頁面或敲錯了鏈接中的URL，或者訪客可能忽略了地址中的一道斜杠。無論原因如何，用戶希望看到的最後一件事是下面這個含糊其辭、不甚友善的消息：
一個不好的404頁面。有點令人沮喪，是吧?
好的網站會客戶化自己的“該頁面找不到”區，它們會提供選項，解釋所發生的事情，或者甚至添加一點幽默進去，否則的話這可能會成為一段沮喪的經歷。
ThinkGeek將整個導航條都放進其404頁面上。它還提供了一個搜索表格，因此如果我知道自己想找什麼但不知道網址，我就可以提交一項查詢來找到它(假設鬼把戲不起作用……)
ThinkGeek試圖弄個鬼把戲，但並不僅靠此手段。
Climate Wisconsin做法簡潔，它的404頁面有兩個選項。很容易快速消化，訪客可馬上對下一行動做出決定：
Climate Wisconsin'的404出錯頁面雖簡潔但一針見血。不過，加上搜索功能對用戶來說也許更有用。
你沒有必要把404頁面弄成藝術作品。只需確保繞道行駛是否必要即可，像下面這麼做：
通過給頁面打上你們的品牌標籤，告訴用戶我還在，打消其疑慮。
最起碼，鏈接回主頁。
最好能提供具體選項好讓用戶回歸正軌。
服務器錯誤
有時候你就是會遭遇kerploiee。這是一個技術用語，當服務器厭倦了這種日復一日單調乏味的生活的時候，它不再推出頁面，給你來了個背朝天，發出的咯咯叫聲令人毛骨悚然，然後徹底地無法傳送內容、數據、信息等任何東西。
通常而言，用戶收到的消息是這樣的：
標準的500服務器錯誤。來自最好時光的恐慌。
想像一下你是一名訪問者。這個頁面告訴你什麼東西? 天下即將大亂?還是你不得不找某個稱為“服務器錯誤日誌”的東西?這個東西幾乎可以意味著大難臨頭了。無論哪種方式，你都會要把這個網站從列表中刪掉了。
好的權變設計要對一切東西負責，包括服務器失效在內。
這個是Carsonified的頁面。他它解釋了發生了什麼事情，並讓你發消息給其開發人員Elliott Kember：
Carsonified做得滴水不漏，還介紹了一點導致這一錯誤的人的知識。
Food Network沒那麼具有娛樂性，但無疑它確保了用戶知道自己還在運行。跟任何好的404頁一樣，它給用戶提供了若干回歸正軌的方式：
即便Web服務器死掉，用戶依然知道Food Network永生。
Brushfire Digital解釋錯誤，提供導航和聯絡信息並再次確保你知道它還在：
Brushfire確保你了解責任不在你，而在於他們。
你依然不需要創作一件藝術作品。只需確保訪客了解到錯誤也許並非他們的過失且你正在處理即可。
在你的防禦中檢測漏洞
某些防護性設計問題很容易指出：糟糕的表格，錯誤的消息以及嵌入式幫助是顯而易見的。但是你可以利用某些基本的web分析來指出微妙的問題及其解決方案。
結賬漏斗
通過讓更多已有受眾購買，你可以立即增加銷售。這比獲得更多訪問者要容易得多。因此，檢查一下你的結賬漏斗看看是否有什麼地方令許多新客戶放棄購物籃。在這個例子裡，超過70%那東西放進購物籃的訪客放棄了結賬流程。總的銷售轉化率為1.7%：
斷裂的結賬漏斗。第一步就失去了70%的潛在客戶。
順便說一句，這是一個真實的故事。問題非常清楚：客戶在初始結賬頁面的時候就放棄了。我們認為其原因可能是頁面的佈局問題。它給訪問者造成的強烈印像是他們必須註冊才能結賬。因此，我們調整頁面，增加嵌入式幫助，修改佈局，讓客戶的結賬選項更加清晰。第一個頁面的購物籃放棄行為急劇下降，總體銷售轉化率改善至3%(我本想將結果數據和頁面展現出來，但是客戶的機密性不允許我這樣做)。
失效鏈接(頁面)
有時候，著名的第三方網站會鏈接到你這裡。而有時候它們鏈接到你這裡會不正確。儘管一個好的404頁面會有所幫助，你仍然會失去大量訪問者——他們點擊的鏈接可是來自於一個他們所信任的網站的啊。一旦目標網站顯示出一個“頁面找不到”的錯誤，訪客很可能會點擊“返回”按鈕。在完美世界裡，你會將一個客戶化的頁面放到鏈接的URL上，然後用它溫和地引導用到正確的地方。或者，你可以設置一個301重定向，從失效URL重定向到正確的頁面。但是你該如何找到這些鏈接呢?如果你使用像谷歌分析這樣的主機分析解決方案，它不會讓404錯誤報告跑出來的。
快速瀏覽一下谷歌網管員工具(Google Webmaster Tools)或對web服務器日誌略加分析，都能有助於你找出這些問題。尋找那些重複顯示404錯誤的頁面。在下面的這個例子裡，谷歌網管員工具顯示出某個鏈接的404錯誤出現在29個不同的地方。這是一個失效鏈接，正祈求對其進行重定向或網頁轉換：
谷歌網管員工具中的失效鏈接。 29個頁面?這條鏈接需要重定向了。
此類分析和訂正甚至在你並沒有導致問題發生的時候使能了防護性設計。再一次地，他可以讓你在無需獲得新的訪問者的情況下贏得用戶，拿下訂單，獲得領先。因為你改善了當前客戶的體驗。
避免常見錯誤
穿上訪問者的鞋走上一里路，你很容易就能夠避免最常見的一些防護性設計錯誤。
錯誤假設
永遠都不要假設訪問者會把它給“指出來”。也不要假定他們對你的網站很熟悉。你的拜訪者選擇很多——網絡是個大地方。要迎合他們的口味，準備應對每一個想像得到的錯誤。你做出的假設越少，你的設計就會越牢靠。
假冒404
在設置404錯誤頁面的時候，一定要確保服務器提交一個404錯誤代碼，如果某個頁面不存在的話。有的開發人員和Web主機不把用戶定向到404出錯頁，相反，卻重定向到臨時或永久的重定向頁面。
失敗的蝸牛。 Todd Bernard供圖。
此類重定向提交的是302或301代碼，通常這會告訴搜索引擎將你的錯誤頁跟許多不同的URL一起索引起來。那些規範化的痛苦細節以及為什麼這樣做是糟糕的我都不想贅述了。請記住我的話：弄個404錯誤代碼出來一定是有緣由的。請利用好它。
局限的登陸頁
訪問者會通過鏈接、搜索結果或別的什麼途徑來到你的網站。因此這會使得每一個頁面都成為潛在的登陸頁。所以，所有這些頁面都要好好地踐行防護性設計。
糟糕的版本
仔細地撰寫和編輯你自己版本的嵌入式幫助、出錯消息等其他意外事件。你的造訪者的耐性已經很有限了。解決好問題吧，這是你的機會，也許甚至還可以開始跟他們建立好關係呢。讓每一個字都發揮效力。
瀏覽器兼容性受限
每一種權變都應當在所有的瀏覽器中起作用。如果訪客需要最新的瀏覽器才能看到嵌入式幫助，那麼這種幫助並不十分有用，對吧?利用漸進增強確保每個人都能從頁面的每一個元素身上受益。
有利於品牌，有利於業務
幾乎任何品牌均能從好的客戶服務中受益。防護性設計在客戶最需要的時候讓你毫不費力地提供很好的服務。它促進了銷售，讓客戶喜歡上你。因此，請抱最好的希望，做最壞打算。
為用戶的錯誤和漏洞做好打算是物有所值的。如果你曾經管理過網站的話，你就會知道這一路上免不了會遇上些磕磕碰碰。儘管把這一切防護性設計措施部署到位需要額外的工作，與此同時這也意味著更滿意的訪問者。而這一點則意味著業務可以從你手頭的受眾身上獲得增長。
來源：http://article.yeeyan.org/view/%E5%8D%9A%E8%B4%A4/197966
特別注意：本站所有轉載文章言論不代表本站觀點，本站所提供的攝影照片，插畫，設計作品，如需使用，請與原作者聯繫，文章轉自alibuybuy