製作 404錯誤頁面 的小撇步

當伺服器無法找到使用者所收尋的頁面,會主動傳遞 404 這個錯誤代碼。而你的網站呈現 404 這個錯誤代碼的設計,會影響使用者心理是充滿挫折,或因驚喜而原諒錯誤。最糟的情況是,因設計不理想而失去用戶;反之,則可能得到忠誠的用戶。

聽起來好像很嚴重,但不要緊張,404 錯誤頁面相較於網站設置相對容易。只要團隊有優良的制訂內容策略的專家、設計師與開發者,就可以輕易的產出具策略謀劃、驚豔設計與部屬的 404 錯誤頁面了。

對網站內容的經營面來說,花精力來設計 404 錯誤頁面 ,絕對是好的策略。

通常 404 錯誤頁面的出現,代表可能是使用者輸入錯的網址,或者是您搬移或刪除了這個頁面的內容。對您來說,絕對不會希望使用者已經如此接近您而且想跟您互動,卻因為無法給予正確的導引 (至正常的網頁) 而放棄吧!?提供資訊給予使用者 (404頁面)

這個網站的做法是,在右側提供訪客有用的資訊內容

 

然而,好的 404 錯誤頁面 設計可以幫助使用者找到令他們滿意的資訊內容。以下有三點設計的方向可以參考:

  1. 提供網站上最受歡迎的內容之連結
  2. 提供訪客搜尋欄位來找出他們想要的內容
  3. 可以直接讓用戶回到首頁

其實不需要因為 404 頁面的出現而傷透腦筋,最重要的是怎麼幫助使用者回到正常的網頁上,而好的設計可以幫助您做到。

 

設計好的 404 錯誤頁面

替網站設計個好的 404 錯誤頁面,不但可以吸引人,也可以直接的傳達使用者錯誤的訊息,並降低挫折感。以下有三項要素可讓 404 錯誤頁面設計得更好:

 

幽默

使用者若是看到毫無內容的頁面,肯定會因為與期待不同而感到挫折,這時候利用些有趣的事情來減輕負面心情是個好主意。

404錯誤頁面 範例
404錯誤頁面 範例

 

品牌行銷

404 錯誤頁面提供了一個機會讓您來行銷品牌,您可以將logo放置於頁面上,也可以將品牌的視覺、概念、故事或產品等帶入。請把握所有可能的曝光時機,讓這個錯誤變成轉機。

404錯誤頁面 範例
404錯誤頁面 範例

 

用易懂的視覺化方式來解釋為什麼會發生這樣的情形

雖然網路技術已經相當的普及,但還是無法保證所有使用者都明白造成 404 錯誤的原因與意思。試圖簡單的解釋為甚麼,可以讓您有機會得到用戶的信任。

404錯誤頁面 範例

 

這些數字碼的意義

伺服器利用不同的編碼來表示不同的情況,例如 200 表示伺服器成功的找到使用者找尋的頁面;301 或 302 為直接或暫時轉址(搬家);500 表示內部伺服器錯誤;404 代表伺服器根本無法找到用戶想開的頁面。

 

何時 404 錯誤頁面會產生?

舉個例子,當我們想要訪問這個網址時 www.mightybytes.com/blog/this-is-a-fake-page,伺服器首先會找尋路徑下 (/blog/this-is-a-fake) 的頁面是否存在。如果存在,就會在用戶的瀏覽器上完整的呈現 (200);如果不存在,伺服器會再確認是否設定轉址;如果有,它會將用戶導向直接或間接轉址頁面 (301 或 302 的頁面)。若沒有轉址的設定,伺服器就會寄發 404 錯誤頁面給用戶。

 

設置 404 錯誤頁面的小技巧

可以考慮利用 404 錯誤頁面來收集使用者的資訊。透過分析這些資訊,也許可以找出使用者想要訪問哪些頁面、用什麼瀏覽器或是他們的操作系統等,其中勢必以發現有價值的訊息!另外,也許也可以放置表單,讓使用者可以回應他們的問題。

另外可以參考這篇:網頁錯誤別生氣!很好玩的 17 款 404錯誤頁面,裡面有更多有趣的案例!

本篇翻譯於 Elements of a Great 404 Page by Mightybytes

 

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

訂閱設計大舌頭

隨時關注第一手 UX、UI、科技、設計新知

Facebook
LinkedIn
Telegram
Twitter