導航是Web網站重要的元素:置頂菜單的設計研究

來源:互聯網
上載者:User

文章描述:導航是Web網站中最重要的元素.

SirsiDynix公司UX/UI設計師Hyrum Denney在Smashing Magazine上發表了一篇文章《Sticky Menus Are Quicker To Navigate》,分享了自己對“置頂菜單”進行的可用性研究成果,及實現技術和相關挑戰。CSDN對該文進行了編譯,內容如下:

導航是Web網站中最重要的元素之一,大部分設計師都同意這一點。儘管如此,現在的導航並不總是容易使用。通常,使用者必須滾動到網站的頂部才能訪問導覽功能表。最近,我在研究“置頂菜單”是否可以加速網站的導航。對此我進行了可用性研究。下面將展示本次研究的成果,以及一些實現的技術及相關的挑戰。

圖1

置頂導航的定義

置頂(或固定)導航是被鎖定在網站某位置的菜單,當使用者滾動頁面時,該導航並不會消失,換句話說,使用者可以在網站的任何地方訪問該導航,而不用滾動頁面。雖然置頂導航可以應用到任何菜單中,比如頁尾、社交媒體按鈕,但一般主要用於網站的導航上。圖2展示了行動裝置上標準導航與置頂導航的不同之處。

圖2

可用性研究

研究背景

為了本次研究,我專門建立了兩個幾乎完全一樣的測試網站。唯一的不同點是一個具有標準導航,另一個是置頂導航。在第一個網站中,要求四十個參與者限時完成5個任務。然後再到另一個網站上去完成另外不同的5個任務。這兩個網站均在案頭電腦上進行測試,直到最後才會告訴使用者兩網站之間的不同。在測試完全結束後,通過對資料的分析,我得出兩個有趣的結論。

1.置頂菜單可使導航快22%

研究資料顯示,參與者不必將頁面滾動到頂部,就可以快速地找到他們所需要的內容。22%看起來可能並不是一個大資料,但對訪問者卻有很大的影響。根據該資料,置頂導航可以協助訪問者每5分鐘節約36秒。當然,如果你正增強使用者體驗,讓使用者在頁面中停留更長的時間只是其中的一個好處。應該讓使用者深入探索該網站,不受任何限制地找到所需要的東西。

2.100%的參與者更喜歡置頂菜單,但不知道喜歡的原因

在測試的最後階段,我都會問使用者是否注意到兩個網站的不同之下。但沒人能說得出。變化很微小,沒人注意到它,因為他們都在專註於完成彼此的任務。當詢問參與者感覺哪個網站更容易使用。40位參與者均認為有置頂導航的網站更容易使用(使用更快速)。很多人評論說:“我不知道這兩個網站有什麼不同之處,但我感覺通過點擊置頂導航可以節省更多的時間。”如此評論顯示出使用者對置頂導航的絕對支援。

案頭軟體的置頂導航

想象一下,你正在Word中輸入一個文檔,每當你想加粗一個單詞,或加寬頁面邊界,都必須滾動到第一頁進行設定。是不是一想起來,就讓人沮喪啊。無論你正在做什麼,大部分案頭軟體都會時刻提供一個完整的導覽功能表供你訪問。Web瀏覽器也應該這樣,如果我們必須滾動到網站的頂部才能訪問瀏覽器的地址欄,那就太可笑了。

優秀案例分享

最近,Facebook和Google+也採用了置頂導航。在美國訪問量最高的25家網站中,現在只有16%採用了置頂導航。下面列舉出一些在這方面做得很棒的網站。

Fizzy Software

這是水平置頂導航中一個很好的例子,位於頂部。當使用該網站時,使用者會感覺很舒服。

圖3

Web Appers

該網站的導航是垂直的,位於左側,與Google+的導航有點相似。它唯一的缺點是,如果螢幕的高度低於560像素,那麼菜單下面的部分就無法訪問了,我在迷你筆記型電腦上測試該網站時發現了這個問題。

圖4

MakeBetterApps

MakeBetterApps這是另一個精彩的例子。導航略微透明,它下面的內容依稀可見,這是一個很不錯的嘗試。

圖5

Rodolphe Celestin

Rodolphe Celestin該網站的置頂導航橫跨網站的頂部,但當你向下滾動頁面時,導航的設計就會發生細微變化。只要保持好一致性,如此簡化該設計是一個很好的技巧。同時,該網站的設計者還採用了當下正流行的設計方法:整個網站只有一個頁面,導航上的連結是一個個錨點,點擊後可以跳到頁面的相應位置。這些都使該網站使用起來很舒服。

圖6

註:相關網站建設技巧閱讀請移步到建站教程頻道。

[1] [2]  下一頁



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。