傳統(tǒng)導(dǎo)航樣式承擔(dān)吃力 大型網(wǎng)站導(dǎo)航設(shè)計(jì)
來源:網(wǎng)站推廣 2013-06-16
原文作者:Paul Boag
簡介
對(duì)于大部分網(wǎng)站,導(dǎo)航并不算是個(gè)挑戰(zhàn)。一條主導(dǎo)航加條二級(jí)導(dǎo)航支撐,通常就足夠了。
對(duì)于大部分網(wǎng)站,導(dǎo)航并不算是個(gè)挑戰(zhàn)。一條主導(dǎo)航加條二級(jí)導(dǎo)航支撐,通常就足夠了。
典型的做法是,二級(jí)導(dǎo)航顯示出父、兄及當(dāng)前子菜單。常顯的主導(dǎo)航條顯示最頂層的菜單,允許用戶在菜單間切換。
然而,有一類網(wǎng)站讓這種傳統(tǒng)的導(dǎo)航樣式承擔(dān)有些吃力。這就是我要提的大型網(wǎng)站。
定義大型網(wǎng)站
一個(gè)大型網(wǎng)站由結(jié)合了綜合服務(wù)和產(chǎn)品的典型大型組織所有。這個(gè)組織通常也服務(wù)各色用戶。
擁有大型網(wǎng)站的組織,包括BBC這類機(jī)構(gòu)型的,類似微軟這種項(xiàng)目多樣化的公司型的,政府部門,高等教育類的以及運(yùn)作多種活動(dòng)的慈善組織類的,比如世界自然基金會(huì)。
這些網(wǎng)站:
龐大
層級(jí)多而深
由多個(gè)小網(wǎng)站和頻道組成
迎合受眾眾多
許多入口
這種規(guī)模級(jí)的復(fù)雜網(wǎng)站導(dǎo)航頗具挑戰(zhàn)。
在大型網(wǎng)站上的導(dǎo)航挑戰(zhàn)
在我們公司,我們花費(fèi)了大量工作在這類大型網(wǎng)站上,尤其當(dāng)我們想使用傳統(tǒng)的導(dǎo)航時(shí)特費(fèi)勁兒。
傳統(tǒng)的導(dǎo)航無法負(fù)擔(dān)深層級(jí)
傳統(tǒng)的導(dǎo)航隨著網(wǎng)站層級(jí)越深變得越難用。傳統(tǒng)導(dǎo)航很容易應(yīng)付三層;超過的話,問題就會(huì)暴露。即便拓展到頁面眾多的房產(chǎn)類網(wǎng)站導(dǎo)航,他們會(huì)更致力于導(dǎo)航多過內(nèi)容(大型網(wǎng)站里頁面太多讓問題變得更糟),或更頂層的頁面不再出現(xiàn)在導(dǎo)航中。
在后者中,如果用戶處于網(wǎng)站的深層級(jí)頁面,他們將搞不清上上下級(jí)關(guān)系,因?yàn)闊o法看見當(dāng)前頁面在整個(gè)網(wǎng)站中的所處位置。
雖然傳統(tǒng)的導(dǎo)航處理結(jié)合了面包屑,能夠拓展適應(yīng)綜合型網(wǎng)站,但當(dāng)在房產(chǎn)網(wǎng)站上如此做時(shí),成本卻不斷升高。
傳統(tǒng)導(dǎo)航無法承載多入口
如果用戶經(jīng)由小網(wǎng)站或網(wǎng)站某菜單頁的進(jìn)入,傳統(tǒng)方式的導(dǎo)航將讓用戶感到困惑。
以一個(gè)在考慮參加大學(xué)研究課題的學(xué)生舉例。這個(gè)人可能對(duì)院系詳情更感興趣相比整個(gè)學(xué)校。因而很容易進(jìn)入網(wǎng)站的院系層頁面,而不是學(xué)校的主頁。
另一個(gè)例子就是單身媽媽想了解寶寶福利。她們更像是要直達(dá)福利的次級(jí)頻道而不是政府主頁。在這種情況下,用戶的關(guān)注是在當(dāng)前內(nèi)容。(如:課題頁或兒童福利頁)。他們不是立即對(duì)這整一個(gè)網(wǎng)站感興趣。
不幸的是,不論用戶是否愿意,傳統(tǒng)的一級(jí)、二級(jí)導(dǎo)航都試圖讓用戶去了解整個(gè)網(wǎng)站環(huán)境。
在這個(gè)大學(xué)頁面上,這個(gè)“研究”菜單是指整個(gè)大學(xué)的研究呢還是僅是這個(gè)學(xué)院的研究。當(dāng)兩個(gè)同樣的菜單出現(xiàn),并指向不同的地方會(huì)怎么樣?
更糟的是,當(dāng)前上下文實(shí)際上能夠影響用戶對(duì)導(dǎo)航內(nèi)容的理解。比如,一個(gè)”關(guān)于我們“菜單的鏈接,這個(gè)學(xué)生會(huì)想這是關(guān)于學(xué)院的還是關(guān)于整個(gè)學(xué)校的?在某些極端的例子中,你甚至可以發(fā)現(xiàn)同樣名稱的導(dǎo)航同時(shí)用于當(dāng)前內(nèi)容和更廣泛的機(jī)構(gòu)中(就像這個(gè)”關(guān)于我們“)。
導(dǎo)航解決方案
如同所有的事物,這里也沒有完美的解決方案。但仍然有一些適合于小一點(diǎn)的網(wǎng)站的方案,算作向更完善導(dǎo)航邁出的一步。第一個(gè)方案是最激進(jìn)的。
徹底去掉導(dǎo)航
似乎是06年時(shí),我第一次在拉斯的關(guān)于破除傳統(tǒng)導(dǎo)航的演講中聽說這個(gè)方法。他拒絕給用戶宏偉磅礴的導(dǎo)航,取而代之讓用戶去通過網(wǎng)站找到自己的路徑。
要使用這種方式,得每個(gè)頁面成為獨(dú)立的文檔并且標(biāo)記適當(dāng)?shù)年P(guān)鍵詞數(shù)據(jù)。然后用戶就可以發(fā)現(xiàn)頁面間通過關(guān)聯(lián)檢索和標(biāo)簽來導(dǎo)航。 如果關(guān)鍵詞數(shù)據(jù)已與每個(gè)頁面關(guān)聯(lián) ,牽引鏈接來建立文檔關(guān)系也將可行。
這種做法有幾個(gè)好處:
支持無限大的網(wǎng)站;
非常適合從一個(gè)深鏈接到達(dá)的用戶;
它允許頁面間的關(guān)系更加靈活動(dòng)態(tài)并且能輕松容納頁面增刪變動(dòng);
當(dāng)然,這中方法也有自身的局限。網(wǎng)站的獨(dú)立頻道仍應(yīng)該有一個(gè)著陸頁(如:section.bbc.com),業(yè)務(wù)上也會(huì)困擾于沒有具體的站來運(yùn)營。更重要的是,這種方法很大程度上依賴于文檔標(biāo)簽完善以及強(qiáng)大的搜索功能,這兩者都將很難在大型網(wǎng)站中實(shí)現(xiàn)。
就是說,這只是一種選擇,不要太快拍磚。
把網(wǎng)站拆分成多個(gè)小站
另一個(gè)辦法是把這個(gè)大型網(wǎng)站拆分成多個(gè)更小的更容易管理的小站。這是BBC采用的辦法。
BBC沒有存整,而是打破,分散成多個(gè)次級(jí)站,如新聞、體育、電視、廣播等。每個(gè)網(wǎng)站都有獨(dú)立的導(dǎo)航,因而避免了大型網(wǎng)站的導(dǎo)航問題。
BBC在界面上采用頂部導(dǎo)航保持一致的辦法貫穿,避免用戶在各次級(jí)站點(diǎn)間切換時(shí)感覺脫節(jié)。
BBC拆成了多個(gè)小站,以避免網(wǎng)站成為臃腫站,同時(shí)導(dǎo)航和設(shè)計(jì)語言保持一致性。
雖然BBC的次級(jí)站外觀多樣,但他們用同樣的主導(dǎo)航,擁有一致的設(shè)計(jì)語言,比如排版、布局和模塊。這種語言與BBC全球體驗(yàn)語言定義足夠一致,確保穩(wěn)固的用戶體驗(yàn)時(shí)又夠彈性地適應(yīng)不同的受眾和主題。
這是個(gè)不錯(cuò)的路線。讓每個(gè)次級(jí)站太不一樣,用戶被UI的改變所迷惑。讓他們太相似,用戶又會(huì)放棄去發(fā)現(xiàn),原來網(wǎng)站上不是一個(gè)導(dǎo)航結(jié)構(gòu)。
面包屑導(dǎo)航
第三種是被Gov.uk采用的方案。他拋棄了導(dǎo)航的保留地,轉(zhuǎn)而用頁面的內(nèi)容去鏈接到子內(nèi)容。然后用面包屑去幫助用戶識(shí)別他們的導(dǎo)航層級(jí),以及需要時(shí)返回上級(jí)樹。
Gov.uk幾乎僅依賴面包屑來導(dǎo)航。
這樣做有許多好處。首先它最小化了導(dǎo)航的占地空間,與此同時(shí)給予子內(nèi)容更多的描述。這個(gè)層面說,這是最簡單、干凈、和容易理解的方式。
還能很好的遷移至移動(dòng)設(shè)備(占Gov.uk的流量的40%)。
突出的面包屑讓用戶對(duì)當(dāng)前所處位置更清楚,在頁面里面的到子頁面的導(dǎo)航讓下一步要干啥顯而易見。最重要的是,向我呈現(xiàn)出相比導(dǎo)航更強(qiáng)調(diào)內(nèi)容。
不過,這種方法也有自身的缺陷
完全依賴面包屑和頁面里的子頁面鏈接,用戶只有這點(diǎn)關(guān)于當(dāng)前位置的信息。他們會(huì)無法感知當(dāng)前頁面的同級(jí)和網(wǎng)站的全部模樣。(例如他們無法知曉頂層菜單內(nèi)容)
如果用戶只是想完成一個(gè)特定的任務(wù)這將不是問題,而且通過同一位置的全部內(nèi)容關(guān)聯(lián)起來,網(wǎng)站也滿足這個(gè)任務(wù)需要。然而,當(dāng)用戶在做一個(gè)綜合研究模型或當(dāng)任務(wù)有關(guān)的內(nèi)容已經(jīng)分散到多個(gè)頁面時(shí),這種方式就要讓人崩潰了。
崩潰是由于面包屑導(dǎo)航需要用戶菜單層級(jí)里上上下下所致。這里沒辦法在菜單間跳躍。
幸運(yùn)的是,還有一種混合方案,用面包屑導(dǎo)航做主導(dǎo)航工具,輔以傳統(tǒng)導(dǎo)航增強(qiáng)。
我更傾向的方案
方案靈感來自于GEL出臺(tái)前的BBC體育站。
BBC垂直折疊傳統(tǒng)的面包屑,而非水平鋪展。在每個(gè)面包屑列表尾部,當(dāng)前頁面的子頁面也被展示出來。當(dāng)你到達(dá)樹的底部時(shí),導(dǎo)航會(huì)繼續(xù)顯示當(dāng)前頁面的同級(jí)內(nèi)容而不是子內(nèi)容。
老的BBC體育站用垂直的面包屑作為主要的導(dǎo)航工具。當(dāng)用戶進(jìn)入足球或其他全部運(yùn)動(dòng)的菜單。Photo by:i.e. the siblings
這種方式把全部導(dǎo)航集中在一個(gè)位置,對(duì)于當(dāng)前位置,給予用戶清楚的感覺,減少導(dǎo)航的空間占用。但問題還是和Gov.uk一樣。
當(dāng)在布萊頓大學(xué)工作時(shí),我們提議了BBC運(yùn)動(dòng)站的方案,但附加一個(gè)重要的東西。我們建議常顯頂層導(dǎo)航條。雖然這增加了更多的導(dǎo)航給這個(gè)頁面,但給予用戶網(wǎng)站結(jié)構(gòu)的概覽。這讓需要多部分信息的用戶(比如,一個(gè)具有前瞻性的學(xué)生,既要研究課程又要了解住宿)能夠這些菜單間快速跳轉(zhuǎn)。
在許多的例子中,這足以建立夠簡單強(qiáng)大的用戶體驗(yàn)。然而,這也沒能解決需要看到同級(jí)頁面的需求。
用面包屑導(dǎo)航顯示同層級(jí)
到目前為止,對(duì)這個(gè)問題我考慮了兩種可行的解決方案。
一種運(yùn)行于同級(jí)互相通常有關(guān)聯(lián)的假設(shè);比如,他們是同個(gè)故事的部分。在這個(gè)基礎(chǔ)上,簡單附加“下一個(gè)”和“上一個(gè)”的按鈕(比如在許多博客上可以發(fā)現(xiàn))可能就足夠構(gòu)成個(gè)方案。用戶因而只需要一個(gè)點(diǎn)擊就能夠在同級(jí)內(nèi)容間切換。
另一個(gè)替代方案是讓每層面包屑導(dǎo)航飛出個(gè)菜單,從而露出那個(gè)選項(xiàng)的同級(jí)內(nèi)容。這將讓用戶能夠在網(wǎng)站的任何平層和跨層間跳轉(zhuǎn),還可能拋棄分離的單獨(dú)主導(dǎo)航條的需要。
通過給垂直面包屑導(dǎo)航增加飛出菜單,讓用戶能快速進(jìn)入網(wǎng)站任何層級(jí)。
不管你用的是垂直或傳統(tǒng)的橫向面包屑導(dǎo)航,這都能使。
我沒測試過這個(gè)方法,還得考慮下移動(dòng)設(shè)備。
你還可以給出更多點(diǎn)子
如你所見,綜合型網(wǎng)站導(dǎo)航問題很棘手,看起來也不像只有一個(gè)顯然的解決方案。一個(gè)讓我寫這篇文章的主要的原因是開放討論這個(gè)話題,并希望能拋磚引出更多替代方案。
正是因此,我真心感謝你能在評(píng)論中給出一些想法,或你發(fā)現(xiàn)的替代性的導(dǎo)航案例。
文章編輯: 365webcall免費(fèi)在線客服(www.365webcall.com)
我的評(píng)論
| 登錄賬號(hào)： | 密碼： | 快速注冊 | 找回密碼 |  |
