如何為您的電子商務商店設計完美的 404 頁面

已發表: 2021-09-07

404,這個 3 位數字可以對您的商店產生重大影響。 與電子商務商店的任何其他頁面一樣,您不應忽視 404 錯誤頁面。 沒有人想遇到這個頁面,沒有人喜歡它,但你甚至無法避免它。 因此,最好特別關注此頁面並建立更牢固的客戶關係。

作為電子商務商店的所有者,我們總是希望在我們的網站上看到持續的流量湧入。 它表明訪問者喜歡並點擊搜索結果中的各個頁面。 但是,如果新訪問者遇到“找不到頁面”消息,他們的體驗會變得很糟糕。 這些錯誤頁面可能會使您的所有努力都付之東流。

訪客接下來會做什麼?

如果您沒有正確設置 404 錯誤頁面(狀態代碼),訪問者在單擊後退按鈕時不會眨眼。 您剛剛使用自定義錯誤頁面破壞了您的第一印象。

什麼是 404 錯誤頁面?

通常稱為“找不到頁面”,404 錯誤頁面是您在瀏覽時可能遇到的最常見錯誤。 當您單擊損壞的鏈接或在功能性網站的地址欄中鍵入不正確的 URL 時,就會出現此錯誤。 這些斷開的鏈接可能會對您的網站在 SEO 和用戶體驗方面產生重大影響。 因此,最好刪除這些頁面或用相關鏈接替換它們。 儘管如此,如果您的商店中沒有斷開的鏈接,則可能會出現 404 錯誤頁面,以防客戶輸入錯誤。 這是您展示創造力和提高銷售額的終極機會。

為什麼會出現404?

404 錯誤是標準的 HTTP 錯誤代碼,表示在服務器上找不到您嘗試訪問的網頁。 網頁被刪除或移動,而 URL 未相應更改,或者用戶輸入了錯誤的 URL。
斷開的鏈接是 404 錯誤頁面的主要原因。

移動的頁面

雖然這看起來很簡單,但大多數 404 頁面出現在網站所有者通常重命名網頁或移動時。 舊 URL 應該使用 301 重定向重定向到新站點,但沒有必要發生。

網絡目錄

Web 目錄中的更改會迫使用戶更改 URL,或者在未更新的情況下移動/刪除 URL。

未在目錄中更新的內部鏈接可能會導致 404 錯誤頁面。 但在所有這些問題之後,網站僅佔訪問者遇到的 404 問題的17% 。 因此,無論您對網站爬行以糾正錯誤或設置重定向多麼勤奮。 用戶仍然會重定向到 404 頁面,而不是你的錯:

一般來說,出現 404 錯誤頁面的主要原因是:

  • 直接、錯字、電子郵件、書籤 – 45.87%
  • 推薦和社交網絡 – 30.26%
  • 您網站上的鏈接斷開17.58%
  • 搜索引擎——6.3%

404 錯誤的隱藏成本

訪問者遇到您網站頁面的斷開鏈接可能會對您的整體銷售額、轉化率、網站知名度以及品牌形象和用戶體驗產生重大影響。

直接顯示此問題的三個重要統計數據是

  • 只有23%的訪問者在遇到 404 頁面後會再次嘗試查找丟失的頁面。
  • 79%對網站性能不滿意的訪問者表示他們不會再次從同一網站購買。
  • 平均而言,獲得新客戶的成本是保留現有客戶的五倍。

但是,您失去了一個登陸 404 錯誤頁面的客戶是100%強制性的。 自定義的 404 錯誤頁面可以幫助您將用戶導航到您商店的正確網頁。 讓我們知道創建自定義 404 錯誤頁面的重要性。

為什麼需要創建自定義 404 頁面?

創建自定義 404 頁面

你必須付出大量的努力和技術技能來創建一個有吸引力的定制 404 頁面。 您將需要編輯 .htaccss 文件並在服務器上運行一些命令。

你必須聘請一個可以為你做這件事的程序員。 我們在這里為您服務,因此無需擔心。 但是為什麼要創建自定義的 404 頁面呢? 以下是主要原因:

一種。 增加您網站在搜索引擎中的索引頁數:

隨著網站頁面數量的增加,死鏈接也會增加。 您可以增加通過 404 頁面索引的網站頁面。 您只需要將 404 錯誤頁面鏈接到您網站的隨機內部頁面。

建立一致的品牌形象

我們人類更喜歡一致性。 熟悉一家商店後,我們會下意識地開始信任它。 主要關注的是表面。 通用的 404 頁面會給用戶帶來糟糕的體驗。 您無法消除 HTTP 狀態代碼,但您可以通過自定義錯誤頁面識別問題並改進 UX。

獲取日誌文件並捕獲問題信息和響應代碼以進行適當的處理。 如果用戶訪問了您商店的死鏈接,則必須展示您的氣味。 設計不應該讓用戶覺得他們在不同的網站上。

簡而言之,404​​ 錯誤頁面必須具有相似的字體樣式、顏色代碼、徽標、導航、頁眉和頁腳。

C。 重新吸引和不滿意的訪客

考慮一個用戶登陸您的商店尋找有關特定產品的信息。 但是,在從搜索引擎結果中單擊網頁後,它不會登陸任何可回答的頁面,而是顯示“找不到頁面”頁面。 這會讓用戶感覺很糟糕。
但是,如果您向用戶提供指向您網站頁面的鏈接,則您可以重新吸引用戶。 這樣,您就可以保持他們的注意力。

d. 展示您的品牌個性

你不能展示自己是一家公司。 你的品牌應該給人一種人情味。 通過展示您的個性,您可以更好地與目標受眾建立聯繫。 用戶與您網站的互動應該讓他們感覺良好。 人類的決定是在幾分之一秒內做出的。

因此,您應該以 404 錯誤頁面為媒介來表達自己,讓您的訪問者感覺良好,並加強您與觀眾的關係。 承認您的客戶感到沮喪,接受出現問題的情況。 這將創建個人交互。

e. 提高轉化率

通過創建 404 錯誤頁面,您可以接受錯誤並確保用戶在您的商店中度過愉快的時光。

404 錯誤頁面的自定義響應可能會從用戶的大腦中抹去您網站斷開鏈接的不良記憶。 它增加了他們給你第二次機會的機會。 這更像是一種假設。

但是,您實際上可以通過在 404 頁面上提供折扣來提高轉化率。 是的,使用自定義錯誤頁面進行轉換。 以這種方式的 HTTP 狀態代碼將錯誤轉化為收益。

僱用電子商務開發人員

404 錯誤頁面的組成部分

有用的 404 錯誤頁面中有 4 個重要組件。 這些是導航、語氣、搜索引擎優化和創造力。 讓我們詳細了解每個元素:

1. 導航

用戶登陸 404 錯誤頁面的第一個需求是導航。 您應該將用戶重定向到他們想去的頁面。 指向主頁或任何其他相關頁面的鏈接效果最佳。 您提供的菜單欄導航(也存在於其他網站頁面上)也很好。 如果可能,您還可以使用聊天機器人邀請丟失的訪客。

2. 語氣

正如我們上面提到的,404 錯誤頁面也應該反映您的品牌個性。 您不希望登陸您的 404 頁面的用戶感覺他們登陸了一個完全不同的網站。 主題和風格要一致。

3. 搜索引擎優化

我們都知道 404 錯誤頁面是不可避免的。 斷開的鏈接會導致 404 頁面,這是不可避免的。 但是 404 頁面,如果適當地定制,可以減少損害,甚至將負面體驗轉化為積極體驗。

4. 創造力

404 頁面為您提供展示創意技能的最佳機會。 您可以開個玩笑,提供互動性,並展示一些互動、輕鬆或有趣的元素。

404 錯誤頁面的最佳示例

這裡有一些來自不同行業的404錯誤頁面的最佳示例,您可以參考。

1.亞馬遜

亞馬遜404頁面

你會驚訝地發現,超過7,000隻狗已經合法註冊在亞馬遜總部工作。 亞馬遜對寵物友好的性質廣為傳播,該公司甚至自豪地分享其對狗友好的文化。 它的 404 錯誤頁面也展示了它。

儘管每個人都欽佩狗並認為它們很可愛,但亞馬遜通過展示他們帶去工作的亞馬遜狗的形象將其提升到一個新的水平。 此外,在 404 頁面上,有一個指向該家庭的鏈接和一篇關於他們擁有的其他狗的文章。 登陸亞馬遜404錯誤頁面的用戶也可以使用搜索欄來探索想要的產品。

2.易趣人物運動

易趣404頁面

eBayimportanthighly 很受歡迎,是世界上最古老的電子商務商店之一。 該公司為 404 錯誤頁面採用了一種輕鬆而微妙的設計,但它仍然是用戶友好的。 用戶可以在頁面上找到趨勢交易,這將吸引他們在網站上繼續前進併購買產品。 除此之外,還有一個搜索欄和一個指向主頁的鏈接。
您可以參考 eBay 404 頁面,因為它具有很高的轉化率並且是一個很好的例子。

3.宜家

宜家 404 頁面

宜家是一個在全球擁有大量家具店的時尚家具品牌,提供種類繁多的家具產品。 該公司在通過移動應用程序、網站甚至 404 頁面提供更好的購物體驗方面具有高度創新性。
他們在 404 錯誤頁面上展示了出色的創造力。 部署的元素強調公司的工作和品牌。 它已與直接消息和主頁鏈接配對。 頁面上沒有其他元素可以避免任何干擾,重點很明確——將流失的客戶重定向到網站的主頁。

4. 明特拉

Myntra 404 頁面

Myntra 是印度時尚電子商務行業的流行名稱。 在這個時尚電子商務網站上,您可以找到各種適合各個年齡段和性別的可穿戴設備。 店舖的404頁面也很漂亮。 它們向用戶表明導航丟失的想法,同時,還有一個搜索欄,用戶可以在其中搜索產品、類別等。
Myntra 的 404 頁麵包含客戶可能需要的所有內容,例如心願單、購物車頁面鏈接、個人資料鏈接和搜索框。

5. GitHub

Github 404 頁面

Github 在其 404 錯誤頁面上使用了幽默和流行文化參考,並提供了一個有趣的信息,可以消除登陸錯誤頁面時的尷尬。 有簡單的導航選項不會造成任何混淆。 有一個搜索欄和支持鏈接,以及一個狀態頁面。

然而,妙招是微妙的視差效果,它使圖像與用戶的光標產生有趣的反應。 這個動畫表明 GitHub 的設計者非常了解觀眾。

6. BigCommerce

BigCommerce 404 頁面

BigCommerce 是一流的電子商務開發平台。 數以千計的電子商務商店已經建立在這個平台上。 在它的 404 個頁面上,用戶可以很容易地理解他們已經迷失在網絡空間中。 除了主頁之外,他們還列出了他們想要吸引用戶的某些頁面。

還有預訂演示或從 404 錯誤頁面聯繫他們的功能。

7.頂空

頂空404頁面

在在線冥想服務中,Headspace 獲得了相當大的聲譽。 他們的團隊了解人類大腦的工作原理,因此,其 404 錯誤頁面僅顯示其目的。 它專注於產品並演示它可以做什麼,即讓用戶從壓力中平靜下來。 角色緩慢而有節奏的運動,迷路的訪客可以看到一段時間並獲得一些頂空。 它告訴用戶沒有壓力,吸氣和呼氣。

8. 捲曲

Volusion 404 頁面

Volusion 是一種基於雲的電子商務軟件,可以在其上開發電子商務商店。 商家可以添加產品、創建類別、添加付款詳細信息並開始銷售。 404錯誤頁面上有彩球,對用戶極具吸引力。
為彰顯品牌形象,設計師在Volusion標誌的球體中使用了顏色組合,球體落下後的整潔頁面顯示了主頁鏈接。

9. Squarespace

Squarespace 404 頁面

作為著名的網站建設者,Squarespace 允許商家建立和託管網站。 用戶可以使用具有拖放功能的預構建模板來創建 CMS 和網頁。 在404錯誤頁面上,有一個字母遊戲,用戶可以盡情享受。 用戶可以使用光標移動字母。 如果用戶不想玩遊戲,他們可以簡單地重定向到提供的鏈接。

10. Le SINGE

Le SINGE 404頁面

最後但並非最不重要的是,Le SINGE 帶有 404 頁的奇妙概念。 它立即以他們所做的事情出售他們。 404 被描繪成黑暗,當用戶的光標移動時,聚光燈會投射到屏幕的那部分。
用戶可以使用直接鏈接或可以發起與支持團隊的聊天。

包起來

在本文中,我們了解了 404 頁面的所有不同方面、它出現的原因、它的組成部分、價值、示例等等。 聘請最好的電子商務開發公司,該公司擁有在創建此類自定義、有吸引力且有用的 404 錯誤頁面方面具有專業知識的設計師。