如何為您的在線商店創建有效的導航
已發表: 2019-10-23一個好的導航系統可以幫助客戶快速有效地找到他們想要的東西，並提高您商店的整體成功率。 事實上，您的網站只有幾秒鐘的時間來吸引網站訪問者的注意力，因此您最好立即將他們引導到他們需要的信息！
即使主導航中的微小差異也會顯著影響客戶找到滿足其需求的產品的能力。 如果他們在到達您的網站時無法弄清楚該做什麼或去哪裡，他們會很快離開並在其他地方購物。
但是，您如何為您的在線商店創建有效的導航來增加銷售額並降低跳出率？
導航菜單最佳實踐
1.使用清晰而有意義的語言
當涉及到您的主要導航菜單時，通常位於您的網站標題中，請確保您的標籤清晰且有意義。 網站訪問者應該知道哪些產品屬於某個類別，或者通過閱讀標籤單擊下拉菜單時他們會找到哪些信息。 用你的措辭來獲得創意似乎很誘人，但這只會讓你的客戶感到困惑，而不是誘使他們點擊。
例如，fixjeiphone.nl 上的主導航菜單既清晰又有意義。 在單擊特定項目之前，您可以很好地了解每個頁面上的內容或產品。
導航菜單中的項目也直接關係到FixjeiPhone客戶的需求。 他們知道人們來到他們的網站是為了購買零件或配件、閱讀電話手冊或購買翻新設備。 每個菜單項都基於這些特定需求，因此網站訪問者立即知道在哪裡點擊。
2.使頂級項目可點擊
一些網站的頂級導航項只會觸發下拉菜單，而不是鏈接到新頁面。 但這可能會讓網站訪問者感到困惑，尤其是當他們因任何原因無法打開下拉菜單時。
如果您在菜單中列出產品類別，請考慮將頂級項目鏈接到您的主要類別頁面，並在下拉列表中包含子類別。 這也為用戶提供了更多選項來準確查找他們正在尋找的內容或瀏覽整個類別。
Absoluteantibody.com 在這方面做得很有效。 如果您在他們的主導航菜單中單擊“抗體資源”，您將被帶到他們關於抗體的所有信息。 或者，您可以單擊下拉菜單中突出顯示的更具體的資源。
3.添加下拉指標
Absolutelyantibody.com 和 fixjeiphone.nl 也在他們的導航菜單中實現了下拉指示器。
通常，下拉指示器會在每個導航標籤旁邊添加一個箭頭，以顯示菜單項已展開。 它們幫助網站訪問者了解有更多可用選項，而無需將鼠標懸停在每個單獨的項目上。
這通常是您主題設置中的一個選項，但您也可以使用菜單圖標之類的插件或編輯您的網站代碼。
4.堅持標準位置
通過您的網站設計獲得創意是從人群中脫穎而出的好方法。 但是，如果創造力導致混亂，您可能會失去客戶和銷售。
將您的導航放在人們期望找到它的地方是個好主意。 眼動追踪研究表明，網站訪問者首先會查看頁面的左上角。 因此，將您的主要導航保留在標題中，並將最重要的項目（如主頁）放在左側。
用戶還可以查看頁腳和側邊欄進行導航。 考慮鏈接到頁腳中的重要頁面，以及退貨政策和條款。 在您的產品和類別頁面上，您可能希望包含一個邊欄，其中包含指向相關產品、其他類別和常見問題的鏈接。
雖然“漢堡”菜單（當客戶點擊三行圖標時會展開）非常適合簡化移動菜單，但它們在台式電腦上可能會令人困惑。
由於圖標很小，而且通常藏在角落裡，網站訪問者很容易丟失或忽略它。 它也不會展示您最重要的菜單項，並且要求訪問者在找到他們正在尋找的內容之前再採取一步。
如何使用麵包屑以及為什麼要使用
麵包屑是輔助導航系統，顯示用戶在網站上的位置。 這個名字來自漢塞爾和格萊特的故事，他們丟下麵包屑尋找穿過森林的路。 如果您有很多頁面或產品，這種導航方法特別有用。
麵包屑菜單通常顯示在您的主導航下方，就在您的網站內容上方。 這使您的網站訪問者無需滾動即可輕鬆使用它們。
Craft Can Directory 網站使用麵包屑向客戶展示他們所在的頁面以及如何返回到他們的起點。 這允許他們只返回一頁，甚至跳過幾頁，而無需多次單擊瀏覽器的“返回”按鈕。
當購物者瀏覽產品或比較商品時，這也很有用。 如果他們想購買一箱啤酒，但不喜歡他們正在查看的類別中的選項，他們只需單擊返回混合案例類別即可查看其他選項。
為什麼麵包屑很重要
麵包屑可防止您的客戶在您的網站上迷路。 沒有它們，人們很難導航回以前的頁面或類別。 相反，客戶必須再次點擊您的主菜單、搜索頁面或使用“返回”按鈕。
谷歌也喜歡麵包屑，因為它們有助於勾勒出你網站的結構和層次結構。 麵包屑甚至可以包含在搜索引擎結果中，這增加了潛在客戶找到並點擊您的網站頁面的機會。
如何將麵包屑添加到您的網站：
在許多情況下，可以在主題設置中打開麵包屑。 例如，免費的 WooCommerce Storefront 主題為頁面、產品、類別等內置了此功能。
如果您的主題不包含麵包屑或者您想進一步自定義它們，有兩種方法可以將它們添加到您的網站：
1.使用插件：
您可以使用幾個插件通過單擊按鈕來打開麵包屑。 例如，Jetpack 允許您在網站頁面上使用麵包屑，但不能在產品或類別頁面上使用。
每個插件都允許不同級別的自定義，並且設置會有所不同。 有關選項的完整列表，請查看 WordPress 插件存儲庫。
2.使用自定義代碼添加麵包屑
要顯示 WooCommerce 麵包屑，您可以使用 <?php woocommerce_breadcrumb(); ?> 片段來控制麵包屑的輸出位置。
您還可以使用過濾器和參數來控制諸如麵包屑分隔符以及主頁文本和鏈接之類的內容。
此自定義參數將更改麵包屑分隔符以及顯示在麵包屑之前的 HTML：
/* Change breadcrumbs separator */ <?php $args = array( 'delimiter' => '/', 'before' => '<span class="breadcrumb-title">' . __( 'This is where you are:', 'woothemes' ) . '</span>' ); ?> <?php woocommerce_breadcrumb( $args ); ?>此過濾器會將默認主頁文本更改為您指定的任何內容：
/* Change Home Text in Breadcrumbs */ add_filter( 'woocommerce_breadcrumb_defaults', 'mm_change_breadcrumb_home_text',20); function mm_change_breadcrumb_home_text( $defaults ) { $defaults['home'] = 'Store'; return $defaults; }此過濾器將更改主頁 URL 鏈接：
/* Replace the home link URL */ add_filter( 'woocommerce_breadcrumb_home_url', 'woo_custom_breadrumb_home_url' ); function woo_custom_breadrumb_home_url() { return 'http://woocommerce.com'; }查看 WooCommerce 文檔中的所有自定義代碼片段，以幫助您進行更多自定義。
超級菜單怎麼樣？
大型菜單是在線商店的熱門選擇。 它們允許您在主菜單中為客戶提供很多選擇，甚至可以添加照片或視頻。
但是您對內容和產品進行分類的方式非常重要。 您應該以將相關產品組合在一起的方式利用父類別、子類別和層次結構。 這使潛在客戶更容易找到他們正在尋找的東西，並一目了然地看到不同的產品細分和選項。
例如，The Craft Can Directory 很好地利用了大型菜單，以幫助引導定制者找到他們想要查看的產品。
如果您將鼠標懸停在其主菜單中的“Craft Beer Shop”上，您會看到父類別以粗體突出顯示，而子類別以正文字體顯示，位於每個父類別下方。
如果沒有以這種方式對類別進行分組，那麼對於客戶來說，巨型菜單可能比標準導航菜單更加混亂。
對於 Storefront 主題的用戶，WooCommerce 提供了一個大型菜單擴展來簡化流程。
有效地使用頁腳導航
您的頁腳應該是您網站策略的一部分，而不是事後的想法。 由於它顯示在您網站上的每個頁面和產品上，因此它是展示您最重要頁面的寶貴場所。
您不應該創建包含數十個鏈接的巨大、壓倒性的頁腳，但充分利用可用空間很重要。 把你的頁腳想像成一個包羅萬象的東西。 如果網站訪問者閱讀頁面上的所有內容並滾動到底部，他們會發現哪些信息最有幫助？
在某些情況下，它可能類似於主菜單中的鏈接。 將這些選項添加到您的頁腳可以幫助人們找到他們正在尋找的內容，而無需滾動回頂部。
但不要忘記網站用戶希望在在線商店的頁腳中看到的頁面和內容。 例如：
- 運輸信息
- 退貨和退款政策
- 隱私政策
- 條款和條件
- 客戶服務詳情
- 常見問題
- 聯繫信息
- 一個搜索欄
- 社交媒體鏈接
Yubico.com 是有效頁腳的一個很好的例子。 與他們的主導航菜單類似，Yubico 將重要的鏈接和內容按類別組織起來，以方便其網站訪問者查找信息。
根據您在線商店的規模，您可能只需要其中一些選項。 這與鏈接的數量無關； 這是關於他們背後的戰略。
不要忘記您的導航
網站導航是在線商店最容易被忽視的方面之一，通常被認為是理所當然的。 創建有效導航的第一步是弄清楚哪些元素對您的客戶最重要。
如何讓他們輕鬆瀏覽您的內容、產品和產品？ 哪些信息對他們最有幫助？ 如果您有大量產品目錄，那麼大型菜單是否有意義？
請記住，如果潛在客戶無法快速找到他們正在尋找的東西，您可能會將他們輸給競爭對手。
您想測試不同版本的菜單嗎？ 了解如何 A/B 測試您的導航。