首頁?>?知識?資訊?>?大型網站建設導航設計方法。?>?正文

大型網站建設導航設計方法。

2013/4/11 0:00:00 · 稿源:傳誠信

對于大多數網站,導航是不是特別具有挑戰(zhàn)性。子導航的支持,是一個主要的導航欄上,往往不夠。

通常情況下,子導航顯示當前頁面的父母,兄弟姐妹和子女。持久性的主導航欄顯示頂級頁面,允許用戶將各部分之間。

然而,有一類的網站,這低于傳統形式的導航。這是我作為“大型現場”。

什么是一個大型網站?

兆網站通常擁有一個龐大的組織,涵蓋范圍廣泛的服務或產品。該組織還往往支持不同的用戶群。

大型網站包括組織機構,如英國廣播公司,公司多樣化的投資組合,如微軟,政府機構,高等教育機構和大型慈善機構運行的許多活動,如世界野生動物基金會。

這些網站:


  • 是非常大的,
  • 很多層次深,
  • 微眾多網站和子,
  • 迎合了不少觀眾,
  • 有多個入口點。


這種規(guī)模和復雜性的網站帶來了一些獨特的航海挑戰(zhàn)。

大型網站建設導航所帶來的挑戰(zhàn)

在我們公司,我們做了很多大型網站的工作,他們可以證明是特別具有挑戰(zhàn)性的,尤其是當試圖使用傳統的導航。

傳統導航儀無法支持深度

更深層次的網站,更多的傳統導航斗爭。導航可以輕松地容納三個級別,除此之外,發(fā)生兩件事情之一。無論是導航擴展到更多的屏幕房地產專用導航,而不是內容(問題變得更糟一個大型網站的頁面數量之多),或更高的頁面在信息架構不再出現在導航點。

在后一種情況下,如果用戶是在網站內深處,他們將會失去他們在哪里,因為他們沒有看到的網站的結構適合在當前頁面的上下文。


圖像顯示導航稱霸頁面房地產
雖然傳統的導航方法,結合面包屑,可擴展,以適應大型站點,他們這樣做的成本日益增加的房地產。較大的版本。


后者的問題,可以部分緩解實現的面包屑。然而,這是不是唯一的問題,與傳統的導航。

傳統導航儀無法支持多個入口點

傳統的導航可以混淆用戶進入網站的人通過一個微型網站或款。

考慮參加一所大學的研究生課程的學生。此人可能是在一個特定的學院或學系,比該機構作為一個整體更感興趣。因此,他們可以很好地進入網站在這一水平,而不是在大學的主頁。

另一個例子是一個單身母親,想知道關于兒童福利。他們更容易到達的好處子網站上比對政府的首頁。在這種情況下,用戶的工作重點是對他們目前的情況下(即研究生課程或兒童福利)。他們沒有興趣立即在更廣泛的大型網站。

不幸的是,傳統的小學和中學的導航公開用戶這一更廣泛的背景下,他們是否想要與否。


大型網站建設導航設計方法。
一段某大學的網頁上標有“研究”是否是指整個大學或學校正在查看?大概什么時候出現了兩次相同的標簽,但兩個不同的地方去嗎?更大的版本。


為了使事情變得更糟的是,在目前的情況下,其實可以改變用戶的感知的導航項目。例如,我們的研究生認為標有“關于我們”的鏈接是關于學校的問題,或對較大的機構。在一些極端的情況下,你甚至可以找到相同的導航標簽被用于當前上下文和更廣泛的機構(例如,有關大學和有關學校的信息都可能被貼上“關于我們”在同一頁上)。

那么,如何才能解決大型站點的導航問題?

導航解決方案

正如所有的東西,也沒有完美的解決方案。不過,也有解決方案,是向前邁進了一步,從導航更適合小網站。這些解決方案的第一個是最徹底。

完全擺脫導航

我第一次聽說這種方法的在談拉斯威克利在2006年做了與傳統的導航回 。它拒絕的想法施加導航后,用戶結構,而不是讓他們通過網站找到自己的路徑。

這是通過使每個網頁的一個獨立的文件和標記用適當的元數據。然后,用戶可以通過標簽的搜索和導航的組合找不到頁面。拉動相關文件的基礎上每個頁面的相關聯的元數據鏈接也將成為可能。

這種方法有以下幾個優(yōu)點:


  • 它支持無限大小的一個網站。
  • 它非常適用于從深層鏈接網站的用戶。
  • 它允許頁面之間的關系變得更加富有活力,輕松容納頁面中添加和刪除。


當然,它不是沒有挑戰(zhàn)。雖然個別路段的網站仍然可以有一個登陸頁面(例如,section.acme.com),業(yè)務可能奮斗的想法不具有特定的網站管理。更重要的是,這種方法在很大程度上依賴于標簽的文檔和強大的搜索功能,這兩者是很難實現的一個大型網站。

這就是說,它是一個選項,一個不應該被迅速駁回。

網站分割成更小的微型網站

另一種方法是打破大型現場成一些更小,更易于管理的微型網站。這是由英國廣播公司的做法。

在BBC不是治療其網站存在一個單一的實體,而是打破了下來成子網站,如新聞,體育,電視,電臺等。每個網站都有自己的導航,從而避免了與大型網站相關的問題。

英國廣播公司(BBC)避免脫節(jié)的經驗,為用戶之間移動微型網站的方式是在頂層導航和用戶界面,以確保一致性。


大型網站建設導航設計方法。
英國廣播公司(BBC)避免一個大型的網站導航和設計語言。較大的版本保持一致,而分裂成一些較小的網站其網站存在。


雖然BBC的微型網站在外觀上有所不同,他們使用相同的主導航,版式,布局和模塊之類的東西,也有一致的設計語言。這種語言,BBC的全球的體驗語言(GEL)網站定義是一致的,足以確保穩(wěn)定的用戶經驗,但具有足夠的靈活性,以滿足不同的受眾和題材。

這是一個很好的線條去散步。每個微型網站太不一樣了,用戶將在UI變化所迷惑。他們太相似,用戶將被揭去后,發(fā)現該網站并沒有一個單一的導航結構。

使用面包屑驅動的方法

第三個解決方案是一個通過Gov.uk。它摒棄了專用導航領域,而是使用頁面的內容鏈接到它的孩子。然后,它使用面包屑,以幫助用戶識別他們在哪里內航行層次,并搬回了樹,在需要的時候。


大型網站建設導航設計方法。2
Gov.uk幾乎完全依賴于面包屑導航。較大的版本。


該方法具有許多優(yōu)點。一開始,它專用于導航的空間最小化,而在同一時間允許更詳細的描述,每一個孩子。在這個意義上說,它是最簡單的,最清潔和最容易理解的方法。

這也意味著到移動設備,占45%的Gov.uk的Web流量。

突出的面包屑使用戶清楚他們的網站上,同時在頁面的導航子頁面,使下一步明顯。最重要的是,強調內容,而不是導航,吸引我之最。

不幸的是,它也有其缺點。

用戶通過完全依靠面包屑和頁面鏈接到兒童,不大的背景下,他們的當前位置。他們不知道當前頁面的網站(例如,他們不知道的頂層部分)整體造型的兄弟姐妹。

這不是一個問題,如果用戶試圖完成一個特定的任務和網站迎合了這一任務將在一個地方,它的所有相關內容。然而,當一個用戶是一般研究模式中,或當任務有關的內容分布在多個頁面中,這種方法可以證明是令人沮喪的。

無奈的是面包屑導航,需要用戶瀏覽網站的結構所造成的。有沒有辦法,使各部分之間的跳躍。

幸運的是,有一種混合的方法,它使用面包屑作為主要的導航工具,但與更傳統的導航增強。

我的首選解決方案

由BBC體育凝膠之前導航方法的靈感來自于我的首選解決方案。

BBC的水平運行,而是傳統的面包屑垂直翻轉。在每個面包屑列表的末尾,當前頁也顯示了它的孩子。當你到達樹的底部,導航將繼續(xù)顯示當前頁面的兄弟姐妹,而不是其子女。


大型網站建設導航設計方法。3
老BBC體育網站的主要導航工具,使用垂直面包屑。當用戶進入一個部分,如足球,其他所有的運動(即兄弟姐妹)將被刪除,用戶聚焦于被攝對象的手。較大的版本。


分組這種做法在一個地方所有的導航,給用戶一個清晰的感覺到自己的位置,并致力于導航的空間減少。然而,它仍然遭受從Gov.uk.的問題

在布萊頓大學工作時,我們提出了BBC體育“的做法,但增加了一個重要的事情。我們建議保持一致的頂級導航欄。雖然這增加了更多的導航到的頁面,它為用戶提供的網站結構,即時概述。這使得用戶需要從多個部分信息(比方說,一個前瞻性的研究課程,以及住宿的學生),在這些部分之間快速跳轉。

在許多情況下,這是足以創(chuàng)造一個簡單而強大的用戶體驗。然而,它并沒有解決需要能夠看到當前頁面的兄弟姐妹。

顯示兄弟姐妹雖然使用面包屑導航

到目前為止,我曾經考慮過這個問題的兩個可能的解決方案。

一個兄弟姐妹經常與對方有關系的假設,它們是同一個故事的一部分,如果你愿意。在此基礎上,除了簡單的“下一步”和“上一頁”按鈕(比如你發(fā)現許多博客)可能的一個解決方案是不夠的。然后,用戶可以移動兄弟姐妹之間的單一點擊一個按鈕。

另一種方法是使每個級別的面包屑導航彈出菜單,從而使該級別的兄弟姐妹。這將使用戶跳轉到網站的任何級別的任何兄弟和潛在需要一個單獨的主導航欄。


大型網站建設導航設計方法。5
通過添加彈出菜單,垂直的面包屑導航,給你的用戶快速訪問任何級別的任何兄弟的網站更大的版本。


這是否使用面包屑導航垂直或傳統橫面包屑。

這就是說,我沒有測試過這種方法,有的則要關注觸摸設備。

需要更多的想法

正如你可以看到,大型網站建設導航問題是一個棘手的,似乎并沒有明顯的解決方案是一個單一。寫這篇文章的主要原因之一是打開一個關于這個問題的討論,并希望鼓勵探索一些替代方法。

作為一個結果,我會很感激你的想法在評論部分的任何例子你已經找到替代導航方法a

  • 相關推薦
  • 大家在看
客戶服務
咨詢熱線

010-62199213

24小時咨詢熱線

139-1050-5354