design for 404 error pages
TRANSCRIPT
【別讓你的 404 錯誤頁面繼續 NG 下去了！】
Prepare by : WIS 社群編輯室 Neal Liou
Date: 2015 / 05 / 21
前言
曾經瀏覽網站時出現「找不到網頁」的窘境嗎？當網站出現錯誤
提示時，不僅會降低網友的好感度與信任度，更容易讓網友產生
不好的使用者經驗 (User Experience)，我們可以利用網頁設計的方
式，將 404 錯誤頁面 (404 error pages) 搭景成不同風貌，就能預防
網友狠心跳出。因此我們特別整理幾種不同 404 錯誤頁面的設計
風格以及實際網站給大家參考，希望大家都能從中獲得設計靈感。
Design Style # 1
使網友會心一笑
Emotion Style
這種設計方式雖然老梗，但藉由流行文化的圖文搭配與網友產生情感連結，可以使
網友會心一笑。
1 Magnt
利用數學交集概念分享產生 404 錯誤頁面的因果關係。
2 Worrydream
以煙斗的方式，運用 Pop 流行文化與 404 錯誤頁面結合。
點擊圖片能夠瀏覽範例網站！
Design Style # 2
搶眼視覺效果 分散網友注意力
Visualization Style
發揮藝術天分將 404 錯誤頁面加入多元素材，使 404 錯誤頁面看起來獨樹一格。有時候這種些微的改變，就可能改變網友的想法。
1 Huwshimi 2 Worrydream
利用詼諧的元素取悅網友。 忍者表示： 「網頁是我偷的！」
加入色彩繪畫的元素，讓 404 錯誤頁面可以更生動有趣。
點擊圖片能夠瀏覽範例網站！
Design Style # 3
以互動的方式 提升網友停留時間
Interaction Style
透過遊戲的方式與網友互動，消磨網友等待時間為企業網站爭取更多時間，協助網友指
向正確頁面。
長時間的互動，使網友消氣與殺時間
1 Blue Fountain Media
小時候的回憶，小精靈遊戲居然出現在 404 錯誤頁面！
2 Hot Dot
點擊 404 就能破壞字體，讓進入 404 錯誤頁面的網友能夠消消氣。
點擊圖片能夠瀏覽範例網站！
短暫互動後，網站將重新指向正確頁面
1 GitHub
移動滑鼠能與使網頁物件跟著移動，有別於其他 404 錯誤頁面。
2 Hakim EI Hattab
網頁陸續出現眼睛，並跟著滑鼠移動方向而變化。
點擊圖片能夠瀏覽範例網站！
Design Style # 4
危機反而是轉機
Branding Style
404 錯誤頁面也能增加品牌傳播的機會，只要在 404 錯誤頁面中置入一個或更多其他元
素，與網友產生情感連結。
1 LEGO
在 404 錯誤頁面加入品牌元素，並告知網友此網頁無法使用。
2 Worrydream
交友網站的 404 錯誤頁面利用修補愛情關係的圖片來加增強品牌傳遞價值。
點擊圖片能夠瀏覽範例網站！
Design Style # 5
另類的設計風格
Humor Style
另類的設計風格，往往出乎網友的意料之外，而這種設計風格顛覆以往對 404 錯誤頁面的
印象，加深網友對網站的印象。
這款 404 錯誤頁面最厲害...（笑）
Nouveller
404 錯誤頁面會出現 DOS 畫面，等網友輸入之後，將以特定的圖片以及語言與網友互動。
點擊圖片能夠瀏覽範例網站！
參考以下建議，讓 404 錯誤頁面更完整！
1 連結至有趣的貼文： 建議網站人員將 404 錯誤頁面重新導向到網站最受歡迎的內容。
2 加入搜尋欄： 讓網友直接搜尋想獲得的相關資訊。
3 新增意見欄或聯絡信箱： 網友回饋、建議最直接，迴響的名單也是企業必須追蹤的重點之一。
添加回報功能： 協助網友可以即時回報錯誤，持續 提升使用者經驗。
6
4
解釋 404 錯誤頁面的原因： 讓 404 錯誤頁面扮演公關發言人，透 過與網友分享網站遭遇的問題，降低 網友的疑慮，成功解決公關危機。
5 提供 Sitemap 的功能：
指引網友能夠在網站中找尋正確的網頁。
圖片及參考資料
The art of error: 12 clever 404 pages http://wis.tw/1AhZYsC
圖片來源
http://wis.tw/1HrVCyI http://wis.tw/1Fus83Y http://wis.tw/1JZocrH http://wis.tw/1Lk54pg
About Us
WIS 社群編輯室由匯智資訊股份有限公司不同服務部門的夥伴共筆經營，我們閱讀的主題廣泛，洞察網路行銷發展趨勢與現狀，希望與大家分享關於網站營運、社群行銷、數位廣告之多元觀點。
歡迎您透過下列社交平台與我們腦力激盪！