網(wǎng)站導(dǎo)航的設(shè)計(jì)技巧和警示

發(fā)表日期：2021/9/28 14:38:47 文章編輯：龔柏芃瀏覽次數(shù)：4026

一些小的事物可以創(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ì)影響訪問(wèn)者轉(zhuǎn)化為潛在客戶的百分比

01 讓導(dǎo)航欄具有描述性

“我們做什么”這五個(gè)字并沒(méi)有說(shuō)明你具體到底做什么，“產(chǎn)品”、“服務(wù)”、“解決方案”這些詞其實(shí)也沒(méi)有。使用帶有關(guān)鍵詞的描述性導(dǎo)航更好，原因有二：

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

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

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

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

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

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

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

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

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

03 避免使用下拉菜單

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

小技巧！每次從頁(yè)面上刪減菜單項(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)頁(yè)設(shè)計(jì)和內(nèi)容營(yíng)銷的核心原則：首先給訪問(wèn)者他們想要的東西，然后他們就可能給你你想要的東西。

因此，你應(yīng)當(dāng)將最流行，重要的項(xiàng)目放在導(dǎo)航的開頭。如果不知道最重要的項(xiàng)目是什么，只要查看你的數(shù)據(jù)分析結(jié)果就行了。說(shuō)到數(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)告可以向你顯示訪問(wèn)者最常使用的導(dǎo)航項(xiàng)。一種是行為報(bào)告中的導(dǎo)航摘要或頁(yè)內(nèi)視圖，另一種是行為流/用戶流報(bào)告。

頁(yè)內(nèi)分析功能在每個(gè)導(dǎo)航項(xiàng)旁邊顯示一個(gè)小的橙色框，指示從任何頁(yè)面訪問(wèn)每個(gè)頁(yè)面的訪問(wèn)者的百分比。由于某些原因，它不準(zhǔn)確且具有誤導(dǎo)性。

如果此報(bào)告不適合你，則可以從主頁(yè)上查看導(dǎo)航摘要。頁(yè)面列表和頁(yè)面瀏覽量的百分比可以讓你很好地了解菜單上的內(nèi)容。

人們點(diǎn)擊的另一種視圖是在“行為>行為流”報(bào)告中。該報(bào)告與“受眾群體>用戶流”報(bào)告相同。除非你要跟蹤事件，否則，這兩種報(bào)告是相同的。事件跟蹤已添加到行為流報(bào)告數(shù)據(jù)中。

無(wú)論哪種情況，報(bào)告都將如下所示：

通過(guò)這些報(bào)告，你可以了解訪問(wèn)者正在使用哪些導(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)記住，你的主頁(yè)可能不是許多訪問(wèn)者的切入點(diǎn)，經(jīng)過(guò)搜索優(yōu)化的網(wǎng)站有許多入口點(diǎn)，許多（甚至大多數(shù)）訪問(wèn)者都不會(huì)從首頁(yè)開始。

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

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

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

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

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

專業(yè)技巧！對(duì)于移動(dòng)訪問(wèn)者，請(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é)語(yǔ)

我們希望這些技巧能為你的菜單提供新的思路和靈感。理想情況下，你可以在內(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)譯者龔柏芃翻譯、整理而成。

標(biāo)簽：網(wǎng)站設(shè)計(jì) 導(dǎo)航

將文章分享到..