網站導航:7個最佳實踐、設計技巧和警示

編輯導語:我們在瀏覽網頁時,經常會用到網頁導航的功能,網頁導航欄內包含了各種分類和產品,極大的方便了用户,所以一個好的網站導航設計是非常重要的;本文作者分享了關於網站導航的七個最佳實踐、設計技巧等,我們一起來看一下。

網站導航:7個最佳實踐、設計技巧和警示

一些小的事物可以創造大的變化,網站導航欄就是一個很好的例子。

導航的結構和標籤可能會對結果產生巨大影響,原因如下:

  • 導航會影響流量:你的網站在搜索引擎中的排名高低會影響你從搜索中獲得的流量量的多少。
  • 導航會影響轉化:網站的易用性會影響訪問者轉化為潛在客户的百分比。
一、讓導航欄具有描述性

“我們做什麼”這五個字並沒有説明你具體到底做什麼,“產品”、“服務”、“解決方案”這些詞其實也沒有。

使用帶有關鍵詞的描述性導航更好,原因有二:

  • 導航中的描述性標籤更適合搜索引擎:導航欄是與搜索引擎相關性很大的關鍵位置;由於導航欄出現在每個頁面上,因此描述性標籤會向搜索引擎(如谷歌、百度)展示您的網頁內容確實關乎該主題。
  • 導航中的描述性標籤對訪問者有利:導航欄在視覺上突出顯示,因此它可以與訪問者進行即時互動;當導航欄列出i你的主要產品或服務時,訪問者一眼看就能知道你公司的主要業務,並確定他們在正確的網站中。

警告! 避免使用諸如“服務”之類的標籤。

沒有人會搜索“產品”或“服務”這樣的詞語,因此這些標籤對你的排名沒有幫助。

網站導航:7個最佳實踐、設計技巧和警示

此外,如果你把所有的業務列在同一個網頁裏,那它將永遠不會位於搜索結果的前列,這是因為它沒有專注於一個主題;其實你網站上的每個頁面都有機會在搜索結果中獲得高位次,只要它專注於某單一主題或關鍵短語。

這就是為什麼你的網站架構(而不只是導航)是SEO的關鍵所在,在經過搜索優化的網站上,每個服務、每個產品、每個主題都會擁有一個頁面;總之,請避免創建籠統的“服務”主題頁面,除非你將其鏈接到經過搜索優化的具體服務的頁面上。

二、避免以格式為標籤的導航欄

以“視頻”、“照片”、“白皮書”作為標籤的導航欄告訴訪問者內容的格式,卻沒有告訴訪問者主題;人們訪問網站的真正目的是尋找所需要的答案和信息,而不是單純的尋找“視頻”或“白皮書”。

指示格式的標籤不是描述性的,因此對訪問者不是很有幫助,這就是某大型用户體驗研究機構的Aurora Bedford建議避免導航欄以格式為標籤的原因。

“對特定主題感興趣的用户通常不在乎信息以何種格式傳遞給他們;他們只專注於找到可以解決他們所想到的問題的答案。”

——Aurora Bedford,某大型用户體驗研究機構用户體驗專家

三、避免使用下拉菜單

是的,下拉菜單很流行,但它不是一個好主意。避免使用下拉菜單有兩個好處:

  • 對搜索引擎有利:由於編程式的原因,搜索引擎是很難下拉菜單的,因為這可能會導致一些問題。
  • 對訪問者有利:可用性研究表明下拉菜單很煩人——因為訪問者移動眼睛的速度比移動鼠標的速度快得多,當他們將鼠標移到菜單項時,他們可能能已經決定單擊,然後你給他們提供了更多選項,這會導致訪問者思維上的卡頓。

更重要的是,下拉菜單會導致訪問者跳過重要頁面,如果你使用下拉菜單,那就很容易在分析結果中看到此問題。

網站導航:7個最佳實踐、設計技巧和警示

但是研究也表明,在可用性測試中,一種類型的下拉菜單表現良好——“大型下拉菜單”;此類下拉菜單提供了許多種選擇,使那一刻的思路阻力減弱。

網站導航:7個最佳實踐、設計技巧和警示

如果你的網站很大,頁面很多而且產品或服務種類繁多,那麼大型菜單可能是個好主意,雖然它們大大增加了首頁的鏈接數量。

四、將菜單項的數量限制在七個以內

一些網站的主頁上有數百個鏈接,這是非常糟糕的。

限制主導航中的鏈接數量是有好處的,原因有二,且這兩個原因與使用描述性標籤的兩個原因相同:

1. 導航欄中放較少的項目適合搜索引擎

你的首頁在搜索引擎中擁有最高的“權限”,因為鏈接到你的首頁的網站比鏈接到你的內部頁面的網站要多,通過導航欄,該權限可以深入到更深的頁面。

如果你的首頁具有大量鏈接,這可能會稀釋傳遞到內部頁面的權限,這樣會降低你的內部頁面在搜索結果中處於靠前位次的可能性。

導航越簡潔,就越會有更多權限流到每個內部頁面,從而使你的內部頁面在搜索結果中可能有更高排名。

2. 導航中較少的項目對訪問者有利

“短期記憶僅包含七個事物,上下浮動兩個。”摘自喬治·米勒(George Miller)在1956年發表的著名心理學論文。

最近的研究表明,儘管大腦使用“分塊”作為改善短期記憶的回想方法,但短期記憶的數量取決於類別,對數字來説可能是七個,但對單詞來講可能只有五個。

無論如何,導航中的項目越多,對於訪客來説,記住和處理信息的難度就越大;在視覺上,八個比七個多很多,如果數量過多,訪客的眼睛可能會忽略掉重要信息。

將導航欄儘量分成五到七個項目,如果你需要使用七個以上的項目,請考慮將它們分成幾個組。

警告!避免長列表。

小技巧!每次從頁面上刪減菜單項(或任何其他元素)時,剩下的所有內容在視覺上都變得更加突出,重要內容更有可能被訪客看到並作出考慮。

網站導航:7個最佳實踐、設計技巧和警示

做出艱難的決定需要一定的磨練,但相信你能行的,挑戰自己,將其減少到五個!

五、網站導航的順序很重要

不僅導航欄中的項目的數量很重要,這些項目的順序也很重要。

在網站導航中,就像任何列表一樣,開頭和結尾的項目最有效,因為這是關注度和保留度最高的地方。

上述現象叫序列位置效應,它與認知偏見結合在一起:

  • 優先效果:更容易記住列表開頭的項目。
  • 新近度效果:更容易記住列表末尾的項目(或剛剛發生的事情)。

因此,在導航開始或結束時放置的所有內容都會變得更加突出,我們應該將對我們的業務和訪客最重要的項目放在這些地方。

始終設法將最重要的東西放在視覺上最顯眼的地方,這符合網頁設計和內容營銷的核心原則:首先給訪問者他們想要的東西,然後他們就可能給你你想要的東西。

因此,你應當將最流行,重要的項目放在導航的開頭;如果不知道最重要的項目是什麼,只要查看你的數據分析結果就行了。

説到數據分析,我們繼續講後面的技巧。

六、如何優化網站的導航

設計導航是開始,而不是結束;創建導航幾周後,你可以使用數據進行回顧並進行一些評估。

有兩種報告可以向你顯示訪問者最常使用的導航項:一種是行為報告中的導航摘要或頁內視圖,另一種是行為流/用户流報告。

頁內分析功能在每個導航項旁邊顯示一個小的橙色框,指示從任何頁面訪問每個頁面的訪問者的百分比;由於某些原因,它不準確且具有誤導性。

如果此報告不適合你,則可以從主頁上查看導航摘要,頁面列表和頁面瀏覽量的百分比可以讓你很好地瞭解菜單上的內容。

網站導航:7個最佳實踐、設計技巧和警示

人們點擊的另一種視圖是在“行為>行為流”報告中,該報告與“受眾羣體>用户流”報告相同;除非你要跟蹤事件,否則,這兩種報告是相同的,事件跟蹤已添加到行為流報告數據中。

無論哪種情況,報告都將如下所示:

網站導航:7個最佳實踐、設計技巧和警示

通過這些報告,你可以瞭解訪問者正在使用哪些導航項以及哪些導航項未使用,從而進行導航欄優化。

以下是你可能根據這些報告中的分析做出的一些決策示例:

  • 如果不是很重要,請刪除很少被點擊的項目;
  • 如果某些很少被點擊的項目很重要,則對它們進行重命名或重新貼標籤;
  • 將經常被點擊的項目移到開頭。

警告!請記住,你的主頁可能不是許多訪問者的切入點,經過搜索優化的網站有許多入口點,許多(甚至大多數)訪問者都不會從首頁開始。

七、移動設備上的網站導航

響應式網頁設計帶來了移動端導航欄最佳實踐和標準,可以用兩個詞來概括——“漢堡圖標”。

“漢堡圖標”是由三個短的水平線組成的圖標,代表一個菜單,但是它看起來有點像三明治,所以人們稱其為漢堡包圖標;它顯示在移動網站的右上角,單擊它會顯示導航菜單。

以下是一些移動導航示例:

網站導航:7個最佳實踐、設計技巧和警示

在“漢堡圖標”旁添加“菜單”一詞可能會幫助訪問者找到這種隱藏導航;然而,尼爾森諾曼集團警告説,隱藏導航也可能會增加訪問者任務完成的時間。

專業技巧!對於移動訪問者,請確保電話號碼變成一個在點擊時會撥打電話的按鈕;在你網站上的移動版本電話號碼的href代碼中添加tel,這很簡單,代碼:(773)348.4581

八、結語

我希望這些技巧能為你的菜單提供新的思路和靈感,理想情況下,你可以在內容管理系統中快速實現你的想法;一個好的內容管理系統,可以讓你靈活地調整菜單的標籤和順序。

上述的每個規則都可能有例外,如果不確定是否應該進行更改,你可以請網絡策略專家一起評估分析結果。

如果你能讓導航既迎合“人類”訪客,也適合“機器人”搜索引擎,那麼你的數據分析團隊將非常感謝你!

本文由 @汪仔1558 原創發佈於人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基於 CC0 協議

版權聲明:本文源自 網絡, 於,由 楠木軒 整理發佈,共 3444 字。

轉載請註明: 網站導航:7個最佳實踐、設計技巧和警示 - 楠木軒