導(dǎo)航設(shè)計是網(wǎng)站的基石。它確定了至關(guān)重要的指標(biāo),例如轉(zhuǎn)化率和跳出率,頁面停留時間,點(diǎn)擊量,并且通常是決定您的訪問者擁有良好體驗并以比您所說的“用戶流量”更快退出網(wǎng)站的決定性因素。
但是,好的設(shè)計是什么樣的呢?一旦安裝到位,如何改進(jìn)它?本文AAA教育的武老師對什么是網(wǎng)站導(dǎo)航設(shè)計深入了解,以及優(yōu)化它的最佳技巧:
網(wǎng)站導(dǎo)航設(shè)計是所有導(dǎo)航元素的架構(gòu),它是用戶訪問您的網(wǎng)站時如何找到所需內(nèi)容的方式。
要了解其重要性,讓我們用一個比喻:想象一下有兩家服裝店。第一個完全混亂。女鞋旁邊是男褲,男領(lǐng)帶旁邊是兒童泳衣。最糟糕的是,似乎沒有任何跡象或店員可以幫助您找到所需的東西。
另一方面,第二家商店非常簡單。所有服裝均按性別和尺寸進(jìn)行組織,有很多標(biāo)牌指導(dǎo)顧客,店員隨時待命以回答任何問題。確定要花時間陪伴一個人是一個容易的選擇,對嗎?
良好的導(dǎo)航是雜亂無章的服裝商店與雜亂無章的服裝商店之間的區(qū)別。為了使您的網(wǎng)站更接近后者,請牢記以下一些最佳做法:
良好網(wǎng)站導(dǎo)航設(shè)計的5個最佳做法
網(wǎng)站導(dǎo)航就是幫助您的用戶找到所需的內(nèi)容。當(dāng)您解決此問題時,其他好處如SEO排名和可發(fā)現(xiàn)性也會隨之而來。在進(jìn)行網(wǎng)站導(dǎo)航設(shè)計時,請牢記以下五件事:
提示1:規(guī)劃網(wǎng)站導(dǎo)航設(shè)計
規(guī)劃是必不可少的。實(shí)際上,這可能是此過程中最重要的部分。您不只是想隨意創(chuàng)建導(dǎo)航按鈕。
因此,請謹(jǐn)慎對待該過程。這意味著坐下來,繪制出網(wǎng)站的所有內(nèi)容資產(chǎn),并確定如何鏈接到它們。
卡分類:
進(jìn)行此操作的最佳方法之一是查看網(wǎng)站的信息體系結(jié)構(gòu)-或網(wǎng)站上所有內(nèi)容的排列和結(jié)構(gòu)方式。您可以通過卡片分類練習(xí)來完成此操作。為此,請將您所有的內(nèi)容元素都寫到卡片上,然后將其分配給目標(biāo)用戶,然后讓用戶將卡片分類為有意義的組。
您可能要使用兩種類型的卡片分類:
開放式卡片分類:創(chuàng)建卡片,將其提供給研究參與者,然后要求他們對卡片進(jìn)行分組。然后,他們標(biāo)記組。
開放式卡片分類會話的示例視力封閉式卡片排序:創(chuàng)建卡片并將其與創(chuàng)建的組列表一起提供給研究參與者。然后,您要求參與者將卡片分組。
封閉式卡片分類會話的示例視力切記:與目標(biāo)用戶實(shí)際合作進(jìn)行卡片分類很重要。畢竟,在網(wǎng)站導(dǎo)航方面您可能會有偏見。
[閱讀更多:用于網(wǎng)站重新設(shè)計的四種研究技術(shù)
提示2:規(guī)劃您的用戶流
在決定如何安排網(wǎng)站導(dǎo)航之前,重要的是要準(zhǔn)確地確定需要在布局中包括哪些元素。為了弄清楚這一點(diǎn),您需要了解您的用戶將如何與之交互并最終接收您的網(wǎng)站。這是 用戶流程發(fā)揮作用的地方。
用戶流程是在網(wǎng)站上完成任務(wù)的步驟。可以將其視為傳統(tǒng)流程圖,箭頭從一個決定指向另一個決定,直到最終到達(dá)目的地。它們通常用于繪制用戶使用數(shù)字產(chǎn)品所獲得的預(yù)期結(jié)果。
視覺花一些時間,然后規(guī)劃您的流程,以確保對您的用戶有意義。這使您可以設(shè)計一個“幸福的道路”(或沒有錯誤或異常的完成任務(wù)的最佳方法),以實(shí)現(xiàn)您站點(diǎn)上最常見的目標(biāo)。
總體而言,用戶流程旨在作為您的設(shè)計決策的北極星。有了它之后,您就可以開始專注于最能滿足用戶需求的內(nèi)容,而忽略其余所有內(nèi)容。
查看Freehand,滿足您的所有集思廣益需求。
開始創(chuàng)作
提示3:使用用戶友好的文字
您的所有導(dǎo)航副本都必須對用戶清晰易懂,這意味著避免使用含糊不清或過于簡單的單詞。清晰度不僅可以幫助讀者瀏覽您的網(wǎng)站,還可以幫助您的SEO。
例如,假設(shè)您有一個有關(guān)dog狗業(yè)務(wù)的網(wǎng)站。您不希望導(dǎo)航按鈕讀取“服務(wù)”之類的內(nèi)容,因為這不是人們在尋找您的服務(wù)時搜索的術(shù)語。取而代之的是,他們搜索“ pet狗”,“坐寵物”甚至“狗的護(hù)理率”??吹讲煌?在第一個示例模糊不清的地方,其他示例則清晰明確。
提示4 :盡量少用漢堡包
也許沒有比漢堡菜單更具爭議性的導(dǎo)航元素了。UI設(shè)計要注意細(xì)節(jié)感。
盡管它對于輔助導(dǎo)航元素很有用,但是您不想完全依賴它,因為它阻礙了可發(fā)現(xiàn)性,從而影響了您的內(nèi)容。
考慮一下:這是用戶與漢堡菜單進(jìn)行交互的過程:
尋找所需的導(dǎo)航元素
意識到它不是立即可用
注意這里有一個菜單
確定這是一個漢堡菜單并且可以單擊
點(diǎn)擊那個漢堡
掃描其他菜單項的列表
找到他們要尋找的那個
點(diǎn)擊它
您的用戶要做的很多(整整八個步驟)。在設(shè)計世界中,簡約為王。
現(xiàn)在,這并不是說應(yīng)該漢堡包菜單從來沒有被使用。相反,當(dāng)您要包含的元素不能直接用于網(wǎng)站的主要目標(biāo)時,請有意使用它。
讓我們來看一個應(yīng)用程序。這是來自優(yōu)步的一個很棒的人:
知道他們的用戶在進(jìn)入應(yīng)用程序時只想訂購汽車。他們沒有將“過去的訂單”或“法律”之類的內(nèi)容加給用戶,而是將所有這些次要元素放在漢堡菜單中。
提示5:遵循網(wǎng)站導(dǎo)航欄的最佳做法
以下是一些最常見的網(wǎng)站導(dǎo)航布局:
水平布局
一種經(jīng)過實(shí)踐檢驗的布局,可與許多不同的屏幕配合使用。如果您要鏈接的網(wǎng)頁數(shù)量較少,則這特別好-盡管如果您擁有大型網(wǎng)站(如上述《紐約時報》),也可以很好地使用它,對所有頁面進(jìn)行排序。
當(dāng)與下拉菜單選項結(jié)合使用時,例如,當(dāng)您有不同主題的小節(jié)時,水平站點(diǎn)導(dǎo)航布局也可以很好地工作。在The Verge中查看一個很好的例子。
垂直布局是一種出色的移動友好替代方案。當(dāng)網(wǎng)站包含許多導(dǎo)航元素時,它們非常有用。
漢堡布局
我們在最后一個技巧中介紹了這一點(diǎn),但在這里值得再次提及。漢堡菜單是一種導(dǎo)航布局,適用于您擁有屏幕上不適合使用的輔助導(dǎo)航元素的情況。
獨(dú)立報固定導(dǎo)航具有在用戶向下滾動頁面時跟隨用戶的元素。這是保持用戶導(dǎo)向同時使網(wǎng)站其他部分始終可訪問的好方法。但請注意:固定導(dǎo)航可能會吞噬網(wǎng)站的大量資源。當(dāng)您只有幾個導(dǎo)航元素時使用它,以免分散您其他內(nèi)容的注意力。這篇文章的內(nèi)容你學(xué)到了嗎,更多資訊請持續(xù)關(guān)注AAA教育~
填寫下面表單即可預(yù)約申請免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc