電子商務網站找不到網頁 (HTTP 404) 頁面設計比較

HTTP 404 或 Page Not Found 是 HTTP 協定的錯誤訊息，當使用者瀏覽網站嘗試取得網頁或其他檔案，但是檔案不存在時會觸發的錯誤。原因可能是輸入錯誤的網址或者是原本存在的檔案移動或者被刪除也會造成。

本文比較 Amazon, momo 購物網、PChome 線上購物電子商務網站如何處理 404 錯誤頁面以及搜尋不到產品的網頁設計。除了錯誤訊息文字，也提供使用者後續行動與關鍵字修改建議、以及其他產品展示機會。

(1) 找不到網頁 (HTTP 404) 頁面設計：在首頁網址的後面加上 404 故意觸發找不到網頁的錯誤

(2) 搜尋不到產品的頁面設計：在搜尋框輸入不存在的產品名稱，例如：「檸檬月餅」或者加上雙引號「"檸檬月餅"」嘗試精準搜尋。

(1) 找不到網頁 (連結)：

頁面除了錯誤訊息外、隨機的可愛動物圖，還提供搜尋框輸入其他關鍵字或回到首頁的建議。

(2) 搜尋不到產品 (連結)：

輸入「檸檬月餅」顯示結果是轉換成「lemon mooncake」的關鍵字搜尋結果。從結果可以看到是將關鍵字拆解，回傳產品名稱包含「檸檬」或「月餅」的產品。頁面左方提供更多產品篩選條件：類別雜貨美食、客戶評價星等、價格、卡路里等。

Amazon 找不到網頁

Amazon 搜尋不到產品頁面

(1) 找不到網頁 (連結)：

頁面除了錯誤訊息外，提供回到首頁的連結。

(2) 搜尋不到產品：

輸入「檸檬月餅」顯示結果 (連結) 只有 1 筆，是包含檸檬口味的彌月蛋糕。跟顯示名稱包含「檸檬」或「月餅」的一堆產品的不同處，推測網站嘗試提供最相關的產品，避免使用者選擇障礙。

輸入「"檸檬月餅"」顯示結果 (連結) 沒有找到相關產品，除了「大家都在找」的關鍵字，在「您可能會喜歡」區塊，列出其他品項。雖然「大家都在找」的關鍵字建議，跟使用者輸入的關鍵字沒有任何關連，但沒有放棄推銷其他產品機會。

momo 找不到網頁

momo 搜尋不到產品頁面，輸入「檸檬月餅」

momo 搜尋不到產品頁面，輸入「"檸檬月餅"」

(1) 找不到網頁 (連結)：

頁面沒有停留在錯誤訊息頁面，直接跳轉到首頁。

(2) 搜尋不到產品：

輸入「檸檬月餅」顯示結果 (連結) 是名稱包含「檸檬」或「月餅」的產品。左方可以進一步篩選產品類別，縮小搜尋範圍。而輸入「"檸檬月餅"」跟輸入「檸檬月餅」的結果是一樣的，網站自動忽略雙引號。

PChome 找不到網頁

PChome 搜尋不到產品頁面

與只有 Not Found 的伺服器預設頁面比較，三個案例的電商網站都有額外自訂 404 錯誤頁面，清楚的錯誤訊息之外，也提供使用者下一步該怎麼做或連結。而搜尋不到產品的頁面設計，除了單純說「我們沒有賣這項產品」也積極地展示與推銷其他可能相關的產品，讓客戶可以繼續瀏覽與選購。

搜尋結果的關鍵字建議，除了「大家都在找」的關鍵字，還可以進一步使用自然語言分析技術，拆解關鍵字與擷取使用者的購物意圖 (intention)，增加點擊機率。

某電商網站的找不到頁面

東森購物網的搜尋關鍵字建議

Err