萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 置頂菜單可用性研究 可使網站導航快22%

置頂菜單可用性研究 可使網站導航快22%

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

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

置頂菜單可用性研究 可使網站導航快22% 三聯教程

圖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

Ryan Scherf

Ryan Scherf該網站的導航是垂直的,上面只有圖標。該創新令人印象深刻。

圖7

Web Designer Wall

Web Designer Wall該網站的垂直置頂導航效果很好,因為菜單只在4個菜單項。它很適用於博客。

圖8

雖然置頂菜單並不是最流行的導航形式,但越來越多的網站正在使用。

現在就開始設計

避免使用iFrame

iFrame似乎是實現置頂導航的直接方法,但要避免使用它。因為iFrame會導致很多問題,尤其是跨浏覽器兼容性問題、安全問題、搜索引擎優化問題。iFrame有它的用武之地,但不應成為HTML布局中的主要部分。

CSS

用CSS來實現置頂導航是一個不錯的方法。它也是最直接、最輕量、最快速的方法。有三點需要注意: position、margin-top和z-index。將菜單的position設置為“fixed”,菜單將無法跟隨頁面的其他部分滾動。如果導航 是水平方向的,可以不用設置margin屬性。最後,在水平導航上,利用z-index屬性保證導航始終居於其他元素的上面。當你滾動頁面時,其他內容將 在導航下滑動。

想了解更多內容請見W3C網站。

JQuery和JavaScript

圖9:這個簡單且精巧的置頂導航條由JavaScrpt實現

如果你更喜歡jQuery、JavaScript,你可以試試下面的方法:

● jScroll

● Simple Smart Sticky Navigation Bar

● jQuery Waypoints

● Sticky MenuBar

置頂導航的缺點

圖10

設計局限性

采用置頂導航可能需要放棄一些設計選擇,而這些可能是團隊不願放棄的。例如,水平置頂導航位於頁面的頂部,其他元素的上面。雖然它很容易實現,但不一定是用戶所需要的。

容易分心,受到打擾

一不小心,垂直導航就會讓用戶分心。在用戶滾動頁面時,一些置頂元素可能會出現延遲;其他元素可能太高(或太寬),而影響對內容的訪問。導航應該容易訪問,同時不應搶奪內容的注意力。

對移動設備的兼容性

上文提到的CSS和JavaScript實現方法,在某些移動設備浏覽器上並不提供支持。Luke Wroblewski的文章《Organizing Mobile》分享了在移動設備上創建導航需要重點注意的多項原則。響應式設計技術也為基於屏幕尺寸調整導航提供了一些解決方案。

要了解各個設備對它的支持情況。提前了解這些兼容性問題,可以節約更多時間。《When Can I Use?》文章中介紹了桌面和移動浏覽器對CSS屬性“position:fixed”的支持情況。Brad Frost也對此做了測試和分析,在他的視頻中也提供了精彩的觀點。

結論

作為設計者、開發者,我們為什麼要不斷

copyright © 萬盛學電腦網 all rights reserved