24 個最佳網站導覽列設計
設計趨勢2011.08.03

24 個最佳網站導覽列設計

「網站導覽列」這個名詞英文稱作User Experience Optimization (使用者經驗優化)。是指藉由導覽系統使用網站的內容與服務,說得更白話一點,當您瀏覽一個新的網站的時候,您可以直覺並清楚地知道,要如何瀏覽網頁內容。是不是第一層的導覽在網頁的上方、左側、還是右側比較好? 比如說,較為傳統的網頁設計風格,網頁的首頁一定包括 “關於我們”、”公司簡介”、”公司遠景”、”專業團隊介紹”、”最新消息”、”聯絡我們”…等等。大多數這些導覽列都是橫列在首頁的上方。

 

根據awoo SEO網路行銷誌在2010年四月14日所發表的文章中提到:

“依照 “three-click rule”,如果使用者按了三次滑鼠按鈕、連續點選了三個不同階層的導覽超連結,卻還是找不到需要的資訊,他/她通常會失去耐心一走了之。所以,導覽系統最好不超過三層。但這三個階層應該一起在網頁的上方、左側、右側,還是分散在不同位置?

美國的研究人員邀請16位參與者到電子商務網站購物,調查8種不同架構的三階層導覽系統,如何影響使用者的工作表現和偏好。

一、易用性測試的結果發現,讓使用者更快找到所需資訊的三種導覽架構分別是:
1,從左側導覽列開始選擇
2,次要導覽也在左側
3,無論第一層導覽在網頁上方或左側,要和第二層、第三層的導覽選項分開

二、使用者主觀偏好的三種情況如下:
1,從左側導覽列開始選擇
2,第一層和第二層導覽選項兩者都在網頁左側或上方
3,第二層和第三層兩者都在同一處,或三層同在一處

三、因此,大多數網站使用者偏好以下兩種架構:
1,上-左-左 (TLL): 第一層的導覽在網頁上方,次要導覽和第三層在左側
2,左-左-左 (LLL): 第一層導覽、次要導覽、第三層導覽依序從左側連結

四、導覽列在網頁右側的架構也列入研究範圍。比較使用者的表現與偏好,結果顯示:
1,導覽在上方、右側比較,第一層導覽在左側的網站使用者表現得最好、導覽耗時最短
2,使用者也偏好三個階層的選項出現在同一導覽區塊 

五、導覽在左側時,使用者的表現比在右側時更好

 

研究人員推論這和使用者由左而右的網頁閱讀習慣大有關係。但無論導覽在左還是右,使用者的表現和接受度都不錯,因此導覽列安排在網頁右側確實可行。

六、研究人員也發現以下三種導覽架構會讓使用者事倍功半、觀感不佳,最好避免採用:
1,上-上-左 (TTL): 第一層、第二層的導覽在網頁上方,第三層在左側
2,上-左-上 (TLT): 第一層的導覽在網頁上方,第二層在左側,第三層又跳到網頁上方
3,右-上-右 (RTR): 第一層的導覽在網頁右側,第二層在上方,第三層又跳到網頁右側”

以上為awoo SEO網路行銷誌的觀點。而根據2011年美國最新網頁設計趨勢中,對於導覽列的設計,卻有了另類的走向。導覽列的設計顛覆以往的傳統,卻又不會讓人覺得凌亂無序,為網頁設計的視覺效果帶來不同的使用者經驗感受。以下為您介紹的是24個最佳網站導覽列設計,讓您對於傳統的導覽列設計可以有些新的想法:

1. About the Jolly Duck Bunting 

2. Artsybury's Profolio

3. Bear Grylls Live on Stage

4. Betsy Smith Worldwide - Copywriting and Consulting for the creative class.

5. Buty

6. Culture Solution UK

7. Eppla

8. Fronted Lab - Freelance web designer

9. Gregory Sujkowski - web designer

10.  Guy Vernes

11. Inservio - Web solutions

12. Jeugdraad

13. Jorge Rigabert

14. Le Tpi

15. LEGWORK studio

16. Minne's Diner

 17. Pointless Corp

18. Por Las Duda

19. Racket

20. Ready to WEB?

21. Ricore

22. Spunqi

23. STAYA STAYA SKA

24. Welcome to Grandpeople

 

資料來源:

  1. awoo SEO 網路行銷誌 http://blog.awoo.com.tw/2010/04/ueo-navigation/
  2. The Design Blog: http://www.land-of-web.com/inspiration/web-design/amazing-website-navigation-24-examples.html

上一篇文章

暫無資料。

下一篇文章

暫無資料。