起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識網(wǎng)站導(dǎo)航：7個(gè)最佳實(shí)踐、設(shè)計(jì)技巧和警示
編輯導(dǎo)語：我們在瀏覽網(wǎng)頁時(shí)，經(jīng)常會用到網(wǎng)頁導(dǎo)航的功能，網(wǎng)頁導(dǎo)航欄內(nèi)包含了各種分類和產(chǎn)品，極大的方便了用戶，所以一個(gè)好的網(wǎng)站導(dǎo)航設(shè)計(jì)是非常重要的；本文作者分享了關(guān)于網(wǎng)站導(dǎo)航的七個(gè)最佳實(shí)踐、設(shè)計(jì)技巧等，我們一起來看一下。
一些小的事物可以創(chuàng)造大的變化，網(wǎng)站導(dǎo)航欄就是一個(gè)很好的例子。
導(dǎo)航的結(jié)構(gòu)和標(biāo)簽可能會對結(jié)果產(chǎn)生巨大影響，原因如下：
- 導(dǎo)航會影響流量：你的網(wǎng)站在搜索引擎中的排名高低會影響你從搜索中獲得的流量量的多少。
- 導(dǎo)航會影響轉(zhuǎn)化：網(wǎng)站的易用性會影響訪問者轉(zhuǎn)化為潛在客戶的百分比。
一、讓導(dǎo)航欄具有描述性
“我們做什么”這五個(gè)字并沒有說明你具體到底做什么，“產(chǎn)品”、“服務(wù)”、“解決方案”這些詞其實(shí)也沒有。
使用帶有關(guān)鍵詞的描述性導(dǎo)航更好，原因有二：
- 導(dǎo)航中的描述性標(biāo)簽更適合搜索引擎：導(dǎo)航欄是與搜索引擎相關(guān)性很大的關(guān)鍵位置；由于導(dǎo)航欄出現(xiàn)在每個(gè)頁面上，因此描述性標(biāo)簽會向搜索引擎（如谷歌、百度）展示您的網(wǎng)頁內(nèi)容確實(shí)關(guān)乎該主題。
- 導(dǎo)航中的描述性標(biāo)簽對訪問者有利：導(dǎo)航欄在視覺上突出顯示，因此它可以與訪問者進(jìn)行即時(shí)互動；當(dāng)導(dǎo)航欄列出i你的主要產(chǎn)品或服務(wù)時(shí)，訪問者一眼看就能知道你公司的主要業(yè)務(wù)，并確定他們在正確的網(wǎng)站中。
警告！?避免使用諸如“服務(wù)”之類的標(biāo)簽。
沒有人會搜索“產(chǎn)品”或“服務(wù)”這樣的詞語，因此這些標(biāo)簽對你的排名沒有幫助。
此外，如果你把所有的業(yè)務(wù)列在同一個(gè)網(wǎng)頁里，那它將永遠(yuǎn)不會位于搜索結(jié)果的前列，這是因?yàn)樗鼪]有專注于一個(gè)主題；其實(shí)你網(wǎng)站上的每個(gè)頁面都有機(jī)會在搜索結(jié)果中獲得高位次，只要它專注于某單一主題或關(guān)鍵短語。
這就是為什么你的網(wǎng)站架構(gòu)（而不只是導(dǎo)航）是SEO的關(guān)鍵所在，在經(jīng)過搜索優(yōu)化的網(wǎng)站上，每個(gè)服務(wù)、每個(gè)產(chǎn)品、每個(gè)主題都會擁有一個(gè)頁面；總之，請避免創(chuàng)建籠統(tǒng)的“服務(wù)”主題頁面，除非你將其鏈接到經(jīng)過搜索優(yōu)化的具體服務(wù)的頁面上。
二、避免以格式為標(biāo)簽的導(dǎo)航欄
以“視頻”、“照片”、“白皮書”作為標(biāo)簽的導(dǎo)航欄告訴訪問者內(nèi)容的格式，卻沒有告訴訪問者主題；人們訪問網(wǎng)站的真正目的是尋找所需要的答案和信息，而不是單純的尋找“視頻”或“白皮書”。
指示格式的標(biāo)簽不是描述性的，因此對訪問者不是很有幫助，這就是某大型用戶體驗(yàn)研究機(jī)構(gòu)的Aurora Bedford建議避免導(dǎo)航欄以格式為標(biāo)簽的原因。
“對特定主題感興趣的用戶通常不在乎信息以何種格式傳遞給他們；他們只專注于找到可以解決他們所想到的問題的答案?！?/p>
——Aurora Bedford，某大型用戶體驗(yàn)研究機(jī)構(gòu)用戶體驗(yàn)專家
三、避免使用下拉菜單
是的，下拉菜單很流行，但它不是一個(gè)好主意。避免使用下拉菜單有兩個(gè)好處：
- 對搜索引擎有利：由于編程式的原因，搜索引擎是很難下拉菜單的，因?yàn)檫@可能會導(dǎo)致一些問題。
- 對訪問者有利：可用性研究表明下拉菜單很煩人——因?yàn)樵L問者移動眼睛的速度比移動鼠標(biāo)的速度快得多，當(dāng)他們將鼠標(biāo)移到菜單項(xiàng)時(shí)，他們可能能已經(jīng)決定單擊，然后你給他們提供了更多選項(xiàng)，這會導(dǎo)致訪問者思維上的卡頓。
更重要的是，下拉菜單會導(dǎo)致訪問者跳過重要頁面，如果你使用下拉菜單，那就很容易在分析結(jié)果中看到此問題。
但是研究也表明，在可用性測試中，一種類型的下拉菜單表現(xiàn)良好——“大型下拉菜單”；此類下拉菜單提供了許多種選擇，使那一刻的思路阻力減弱。
如果你的網(wǎng)站很大，頁面很多而且產(chǎn)品或服務(wù)種類繁多，那么大型菜單可能是個(gè)好主意，雖然它們大大增加了首頁的鏈接數(shù)量。
四、將菜單項(xiàng)的數(shù)量限制在七個(gè)以內(nèi)
一些網(wǎng)站的主頁上有數(shù)百個(gè)鏈接，這是非常糟糕的。
限制主導(dǎo)航中的鏈接數(shù)量是有好處的，原因有二，且這兩個(gè)原因與使用描述性標(biāo)簽的兩個(gè)原因相同：
1. 導(dǎo)航欄中放較少的項(xiàng)目適合搜索引擎
你的首頁在搜索引擎中擁有最高的“權(quán)限”，因?yàn)殒溄拥侥愕氖醉摰木W(wǎng)站比鏈接到你的內(nèi)部頁面的網(wǎng)站要多，通過導(dǎo)航欄，該權(quán)限可以深入到更深的頁面。
如果你的首頁具有大量鏈接，這可能會稀釋傳遞到內(nèi)部頁面的權(quán)限，這樣會降低你的內(nèi)部頁面在搜索結(jié)果中處于靠前位次的可能性。
導(dǎo)航越簡潔，就越會有更多權(quán)限流到每個(gè)內(nèi)部頁面，從而使你的內(nèi)部頁面在搜索結(jié)果中可能有更高排名。
2. 導(dǎo)航中較少的項(xiàng)目對訪問者有利
“短期記憶僅包含七個(gè)事物，上下浮動兩個(gè)?！闭詥讨巍っ桌眨℅eorge Miller）在1956年發(fā)表的著名心理學(xué)論文。
最近的研究表明，盡管大腦使用“分塊”作為改善短期記憶的回想方法，但短期記憶的數(shù)量取決于類別，對數(shù)字來說可能是七個(gè)，但對單詞來講可能只有五個(gè)。
無論如何，導(dǎo)航中的項(xiàng)目越多，對于訪客來說，記住和處理信息的難度就越大；在視覺上，八個(gè)比七個(gè)多很多，如果數(shù)量過多，訪客的眼睛可能會忽略掉重要信息。
將導(dǎo)航欄盡量分成五到七個(gè)項(xiàng)目，如果你需要使用七個(gè)以上的項(xiàng)目，請考慮將它們分成幾個(gè)組。
警告！避免長列表。
小技巧！每次從頁面上刪減菜單項(xiàng)（或任何其他元素）時(shí)，剩下的所有內(nèi)容在視覺上都變得更加突出，重要內(nèi)容更有可能被訪客看到并作出考慮。
做出艱難的決定需要一定的磨練，但相信你能行的，挑戰(zhàn)自己，將其減少到五個(gè)！
五、網(wǎng)站導(dǎo)航的順序很重要
不僅導(dǎo)航欄中的項(xiàng)目的數(shù)量很重要，這些項(xiàng)目的順序也很重要。
在網(wǎng)站導(dǎo)航中，就像任何列表一樣，開頭和結(jié)尾的項(xiàng)目最有效，因?yàn)檫@是關(guān)注度和保留度最高的地方。
上述現(xiàn)象叫序列位置效應(yīng)，它與認(rèn)知偏見結(jié)合在一起：
- 優(yōu)先效果：更容易記住列表開頭的項(xiàng)目。
- 新近度效果：更容易記住列表末尾的項(xiàng)目（或剛剛發(fā)生的事情）。
因此，在導(dǎo)航開始或結(jié)束時(shí)放置的所有內(nèi)容都會變得更加突出，我們應(yīng)該將對我們的業(yè)務(wù)和訪客最重要的項(xiàng)目放在這些地方。
始終設(shè)法將最重要的東西放在視覺上最顯眼的地方，這符合網(wǎng)頁設(shè)計(jì)和內(nèi)容營銷的核心原則：首先給訪問者他們想要的東西，然后他們就可能給你你想要的東西。
因此，你應(yīng)當(dāng)將最流行，重要的項(xiàng)目放在導(dǎo)航的開頭；如果不知道最重要的項(xiàng)目是什么，只要查看你的數(shù)據(jù)分析結(jié)果就行了。
說到數(shù)據(jù)分析，我們繼續(xù)講后面的技巧。
六、如何優(yōu)化網(wǎng)站的導(dǎo)航
設(shè)計(jì)導(dǎo)航是開始，而不是結(jié)束；創(chuàng)建導(dǎo)航幾周后，你可以使用數(shù)據(jù)進(jìn)行回顧并進(jìn)行一些評估。
有兩種報(bào)告可以向你顯示訪問者最常使用的導(dǎo)航項(xiàng)：一種是行為報(bào)告中的導(dǎo)航摘要或頁內(nèi)視圖，另一種是行為流/用戶流報(bào)告。
頁內(nèi)分析功能在每個(gè)導(dǎo)航項(xiàng)旁邊顯示一個(gè)小的橙色框，指示從任何頁面訪問每個(gè)頁面的訪問者的百分比；由于某些原因，它不準(zhǔn)確且具有誤導(dǎo)性。
如果此報(bào)告不適合你，則可以從主頁上查看導(dǎo)航摘要，頁面列表和頁面瀏覽量的百分比可以讓你很好地了解菜單上的內(nèi)容。
人們點(diǎn)擊的另一種視圖是在“行為>行為流”報(bào)告中，該報(bào)告與“受眾群體>用戶流”報(bào)告相同；除非你要跟蹤事件，否則，這兩種報(bào)告是相同的，事件跟蹤已添加到行為流報(bào)告數(shù)據(jù)中。
無論哪種情況，報(bào)告都將如下所示：
通過這些報(bào)告，你可以了解訪問者正在使用哪些導(dǎo)航項(xiàng)以及哪些導(dǎo)航項(xiàng)未使用，從而進(jìn)行導(dǎo)航欄優(yōu)化。
以下是你可能根據(jù)這些報(bào)告中的分析做出的一些決策示例：
- 如果不是很重要，請刪除很少被點(diǎn)擊的項(xiàng)目；
- 如果某些很少被點(diǎn)擊的項(xiàng)目很重要，則對它們進(jìn)行重命名或重新貼標(biāo)簽；
- 將經(jīng)常被點(diǎn)擊的項(xiàng)目移到開頭。
警告！請記住，你的主頁可能不是許多訪問者的切入點(diǎn)，經(jīng)過搜索優(yōu)化的網(wǎng)站有許多入口點(diǎn)，許多（甚至大多數(shù)）訪問者都不會從首頁開始。
七、移動設(shè)備上的網(wǎng)站導(dǎo)航
響應(yīng)式網(wǎng)頁設(shè)計(jì)帶來了移動端導(dǎo)航欄最佳實(shí)踐和標(biāo)準(zhǔn)，可以用兩個(gè)詞來概括——“漢堡圖標(biāo)”。
“漢堡圖標(biāo)”是由三個(gè)短的水平線組成的圖標(biāo)，代表一個(gè)菜單，但是它看起來有點(diǎn)像三明治，所以人們稱其為漢堡包圖標(biāo)；它顯示在移動網(wǎng)站的右上角，單擊它會顯示導(dǎo)航菜單。
以下是一些移動導(dǎo)航示例：
在“漢堡圖標(biāo)”旁添加“菜單”一詞可能會幫助訪問者找到這種隱藏導(dǎo)航；然而，尼爾森諾曼集團(tuán)警告說，隱藏導(dǎo)航也可能會增加訪問者任務(wù)完成的時(shí)間。
專業(yè)技巧！對于移動訪問者，請確保電話號碼變成一個(gè)在點(diǎn)擊時(shí)會撥打電話的按鈕；在你網(wǎng)站上的移動版本電話號碼的href代碼中添加tel，這很簡單，代碼：<ahref=”tel:773-348-4581″>(773)348.4581</a>
八、結(jié)語
我希望這些技巧能為你的菜單提供新的思路和靈感，理想情況下，你可以在內(nèi)容管理系統(tǒng)中快速實(shí)現(xiàn)你的想法；一個(gè)好的內(nèi)容管理系統(tǒng)，可以讓你靈活地調(diào)整菜單的標(biāo)簽和順序。
上述的每個(gè)規(guī)則都可能有例外，如果不確定是否應(yīng)該進(jìn)行更改，你可以請網(wǎng)絡(luò)策略專家一起評估分析結(jié)果。
如果你能讓導(dǎo)航既迎合“人類”訪客，也適合“機(jī)器人”搜索引擎，那么你的數(shù)據(jù)分析團(tuán)隊(duì)將非常感謝你！
本文由 @汪仔1558 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自?Unsplash，基于 CC0 協(xié)議
是英文直譯的嗎……