網(wǎng)站導(dǎo)航：7個(gè)最佳實(shí)踐，設(shè)計(jì)技巧和警示

時(shí)間：2023-10-10 11:12:01 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-10 11:12:01 來源：網(wǎng)站運(yùn)營(yíng)

網(wǎng)站導(dǎo)航：7個(gè)最佳實(shí)踐，設(shè)計(jì)技巧和警示：




一些小的事物可以創(chuàng)造大的變化，網(wǎng)站導(dǎo)航欄就是一個(gè)很好的例子。導(dǎo)航的結(jié)構(gòu)和標(biāo)簽可能會(huì)對(duì)結(jié)果產(chǎn)生巨大影響，原因如下：

• 導(dǎo)航會(huì)影響流量：你的網(wǎng)站在搜索引擎中的排名高低會(huì)影響你從搜索中獲得的流量量的多少
• 導(dǎo)航會(huì)影響轉(zhuǎn)化：網(wǎng)站的易用性會(huì)影響訪問者轉(zhuǎn)化為潛在客戶的百分比

01

讓導(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)簽會(huì)向搜索引擎（如谷歌、百度）展示您的網(wǎng)頁內(nèi)容確實(shí)關(guān)乎該主題。
• 導(dǎo)航中的描述性標(biāo)簽對(duì)訪問者有利：導(dǎo)航欄在視覺上突出顯示，因此它可以與訪問者進(jìn)行即時(shí)互動(dòng)。當(dāng)導(dǎo)航欄列出i你的主要產(chǎn)品或服務(wù)時(shí)，訪問者一眼看就能知道你公司的主要業(yè)務(wù)，并確定他們?cè)谡_的網(wǎng)站中。

警告！ 避免使用諸如“服務(wù)”之類的標(biāo)簽。




沒有人會(huì)搜索“產(chǎn)品”或“服務(wù)”這樣的詞語，因此這些標(biāo)簽對(duì)你的排名沒有幫助。

此外，如果你把所有的業(yè)務(wù)列在同一個(gè)網(wǎng)頁里，那它將永遠(yuǎn)不會(huì)位于搜索結(jié)果的前列，這是因?yàn)樗鼪]有專注于一個(gè)主題。其實(shí)你網(wǎng)站上的每個(gè)頁面都有機(jī)會(huì)在搜索結(jié)果中獲得高位次，只要它專注于某單一主題或關(guān)鍵短語。




這就是為什么你的網(wǎng)站架構(gòu)（而不只是導(dǎo)航）是SEO的關(guān)鍵所在。在經(jīng)過搜索優(yōu)化的網(wǎng)站上，每個(gè)服務(wù)、每個(gè)產(chǎn)品、每個(gè)主題都會(huì)擁有一個(gè)頁面?？傊?，請(qǐng)避免創(chuàng)建籠統(tǒng)的“服務(wù)”主題頁面，除非你將其鏈接到經(jīng)過搜索優(yōu)化的具體服務(wù)的頁面上。

02

避免以格式為標(biāo)簽的導(dǎo)航欄

以“視頻”、“照片”、“白皮書”作為標(biāo)簽的導(dǎo)航欄告訴訪問者內(nèi)容的格式，卻沒有告訴訪問者主題。人們?cè)L問網(wǎng)站的真正目的是尋找所需要的答案和信息，而不是單純的尋找“視頻”或“白皮書”。




指示格式的標(biāo)簽不是描述性的，因此對(duì)訪問者不是很有幫助，這就是尼爾森諾曼集團(tuán)的Aurora Bedford建議避免導(dǎo)航欄以格式為標(biāo)簽的原因。

“對(duì)特定主題感興趣的用戶通常不在乎信息以何種格式傳遞給他們；他們只專注于找到可以解決他們所想到的問題的答案?！薄狝urora Bedford，尼爾森諾曼集團(tuán)用戶體驗(yàn)專家

03

避免使用下拉菜單

是的，下拉菜單很流行，但它不是一個(gè)好主意。避免使用下拉菜單有兩個(gè)好處：

• 對(duì)搜索引擎有利：由于編程式的原因，搜索引擎是很難下拉菜單的，因?yàn)檫@可能會(huì)導(dǎo)致一些問題。
• 對(duì)訪問者有利：可用性研究表明下拉菜單很煩人。原因如下：訪問者移動(dòng)眼睛的速度比移動(dòng)鼠標(biāo)的速度快得多。當(dāng)他們將鼠標(biāo)移到菜單項(xiàng)時(shí)，他們可能能已經(jīng)決定單擊，然后你給他們提供了更多選項(xiàng)，這會(huì)導(dǎo)致訪問者思維上的卡頓。

更重要的是，下拉菜單會(huì)導(dǎo)致訪問者跳過重要頁面，如果你使用下拉菜單，那就很容易在分析結(jié)果中看到此問題。







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







如果你的網(wǎng)站很大，頁面很多而且產(chǎn)品或服務(wù)種類繁多，那么大型菜單可能是個(gè)好主意，雖然它們大大增加了首頁的鏈接數(shù)量。

04

將菜單項(xiàng)的數(shù)量限制在七個(gè)以內(nèi)

一些網(wǎng)站的主頁上有數(shù)百個(gè)鏈接，這是非常糟糕的。限制主導(dǎo)航中的鏈接數(shù)量是有好處的，原因有二，且這兩個(gè)原因與使用描述性標(biāo)簽的兩個(gè)原因相同：

第一，導(dǎo)航欄中放較少的項(xiàng)目適合搜索引擎。

你的首頁在搜索引擎中擁有最高的“權(quán)限”，因?yàn)殒溄拥侥愕氖醉摰木W(wǎng)站比鏈接到你的內(nèi)部頁面的網(wǎng)站要多，通過導(dǎo)航欄，該權(quán)限可以深入到更深的頁面。




如果你的首頁具有大量鏈接，這可能會(huì)稀釋傳遞到內(nèi)部頁面的權(quán)限，這樣會(huì)降低你的內(nèi)部頁面在搜索結(jié)果中處于靠前位次的可能性。




導(dǎo)航越簡(jiǎn)潔，就越會(huì)有更多權(quán)限流到每個(gè)內(nèi)部頁面，從而使你的內(nèi)部頁面在搜索結(jié)果中可能有更高排名。

第二，導(dǎo)航中較少的項(xiàng)目對(duì)訪問者有利。

“短期記憶僅包含七個(gè)事物，上下浮動(dòng)兩個(gè)?！边@摘自喬治·米勒（George Miller）在1956年發(fā)表的著名心理學(xué)論文。




最近的研究表明，盡管大腦使用“分塊”作為改善短期記憶的回想方法，但短期記憶的數(shù)量取決于類別，對(duì)數(shù)字來說可能是七個(gè)，但對(duì)單詞來講可能只有五個(gè)。




無論如何，導(dǎo)航中的項(xiàng)目越多，對(duì)于訪客來說，記住和處理信息的難度就越大。在視覺上，八個(gè)比七個(gè)多很多，如果數(shù)量過多，訪客的眼睛可能會(huì)忽略掉重要信息。




將導(dǎo)航欄盡量分成五到七個(gè)項(xiàng)目，如果你需要使用七個(gè)以上的項(xiàng)目，請(qǐng)考慮將它們分成幾個(gè)組。




警告！避免長(zhǎng)列表。




小技巧！每次從頁面上刪減菜單項(xiàng)（或任何其他元素）時(shí)，剩下的所有內(nèi)容在視覺上都變得更加突出，重要內(nèi)容更有可能被訪客看到并作出考慮。







做出艱難的決定需要一定的磨練，但相信你能行的，挑戰(zhàn)自己，將其減少到五個(gè)！

05

網(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)容都會(huì)變得更加突出，我們應(yīng)該將對(duì)我們的業(yè)務(wù)和訪客最重要的項(xiàng)目放在這些地方。




始終設(shè)法將最重要的東西放在視覺上最顯眼的地方，這符合網(wǎng)頁設(shè)計(jì)和內(nèi)容營(yíng)銷的核心原則：首先給訪問者他們想要的東西，然后他們就可能給你你想要的東西。




因此，你應(yīng)當(dāng)將最流行，重要的項(xiàng)目放在導(dǎo)航的開頭。如果不知道最重要的項(xiàng)目是什么，只要查看你的數(shù)據(jù)分析結(jié)果就行了。說到數(shù)據(jù)分析，我們繼續(xù)講后面的技巧。

06

如何優(yōu)化網(wǎng)站的導(dǎo)航

設(shè)計(jì)導(dǎo)航是開始，而不是結(jié)束。創(chuàng)建導(dǎo)航幾周后，你可以使用數(shù)據(jù)進(jìn)行回顧并進(jìn)行一些評(píng)估。




有兩種報(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)告中的分析做出的一些決策示例：

• 如果不是很重要，請(qǐng)刪除很少被點(diǎn)擊的項(xiàng)目
• 如果某些很少被點(diǎn)擊的項(xiàng)目很重要，則對(duì)它們進(jìn)行重命名或重新貼標(biāo)簽
• 將經(jīng)常被點(diǎn)擊的項(xiàng)目移到開頭

警告！請(qǐng)記住，你的主頁可能不是許多訪問者的切入點(diǎn)，經(jīng)過搜索優(yōu)化的網(wǎng)站有許多入口點(diǎn)，許多（甚至大多數(shù)）訪問者都不會(huì)從首頁開始。

07

移動(dòng)設(shè)備上的網(wǎng)站導(dǎo)航

響應(yīng)式網(wǎng)頁設(shè)計(jì)帶來了移動(dòng)端導(dǎo)航欄最佳實(shí)踐和標(biāo)準(zhǔn)，可以用兩個(gè)詞來概括——“漢堡圖標(biāo)”。




“漢堡圖標(biāo)”是由三個(gè)短的水平線組成的圖標(biāo)，代表一個(gè)菜單。但是它看起來有點(diǎn)像三明治，所以人們稱其為漢堡包圖標(biāo)。它顯示在移動(dòng)網(wǎng)站的右上角，單擊它會(huì)顯示導(dǎo)航菜單。

以下是一些移動(dòng)導(dǎo)航示例：







在“漢堡圖標(biāo)”旁添加“菜單”一詞可能會(huì)幫助訪問者找到這種隱藏導(dǎo)航。然而，尼爾森諾曼集團(tuán)警告說，隱藏導(dǎo)航也可能會(huì)增加訪問者任務(wù)完成的時(shí)間。

專業(yè)技巧！對(duì)于移動(dòng)訪問者，請(qǐng)確保電話號(hào)碼變成一個(gè)在點(diǎn)擊時(shí)會(huì)撥打電話的按鈕。在你網(wǎng)站上的移動(dòng)版本電話號(hào)碼的href代碼中添加tel，這很簡(jiǎn)單，該代碼應(yīng)如下所示：




<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)行更改，你可以請(qǐng)網(wǎng)絡(luò)策略專家一起評(píng)估分析結(jié)果。




如果你能讓導(dǎo)航既迎合“人類”訪客，也適合“機(jī)器人”搜索引擎，那么你的數(shù)據(jù)分析團(tuán)隊(duì)將非常感謝你！




注：本系列分享均譯自 Andy Crestodina的《Website Navigation: 7 Best Practices, Design Tips and Warnings》，經(jīng)譯者龔柏芃翻譯、整理而成。




——————