置頂菜單可用性研究 可使網(wǎng)站導(dǎo)航快22%
來(lái)源:網(wǎng)站推廣 2012-10-11
摘要:導(dǎo)航是Web網(wǎng)站中的最重要元素之一,但其在設(shè)計(jì)上存在不易使用的問題。“置頂導(dǎo)航”可加速網(wǎng)站的導(dǎo)航速度,提速約22%�？赏ㄟ^CSS和JavaScript(或JQuery)技術(shù)來(lái)實(shí)現(xiàn)。但其也存在一定缺點(diǎn),比如對(duì)移動(dòng)設(shè)備的兼容性,設(shè)計(jì)的局限性等。
SirsiDynix公司UX/UI設(shè)計(jì)師Hyrum Denney在Smashing Magazine上發(fā)表了一篇文章《Sticky Menus Are Quicker To Navigate》,分享了自己對(duì)“置頂菜單”進(jìn)行的可用性研究成果,及實(shí)現(xiàn)技術(shù)和相關(guān)挑戰(zhàn)。CSDN對(duì)該文進(jìn)行了編譯,內(nèi)容如下:
導(dǎo)航是Web網(wǎng)站中最重要的元素之一,大部分設(shè)計(jì)師都同意這一點(diǎn)。盡管如此,現(xiàn)在的導(dǎo)航并不總是容易使用。通常,用戶必須滾動(dòng)到網(wǎng)站的頂部才能訪問導(dǎo)航菜單。最近,我在研究“置頂菜單”是否可以加速網(wǎng)站的導(dǎo)航。對(duì)此我進(jìn)行了可用性研究。下面將展示本次研究的成果,以及一些實(shí)現(xiàn)的技術(shù)及相關(guān)的挑戰(zhàn)。
圖1
置頂導(dǎo)航的定義
置頂(或固定)導(dǎo)航是被鎖定在網(wǎng)站某位置的菜單,當(dāng)用戶滾動(dòng)頁(yè)面時(shí),該導(dǎo)航并不會(huì)消失,換句話說(shuō),用戶可以在網(wǎng)站的任何地方訪問該導(dǎo)航,而不用滾動(dòng)頁(yè)面。雖然置頂導(dǎo)航可以應(yīng)用到任何菜單中,比如頁(yè)腳、社交媒體按鈕,但一般主要用于網(wǎng)站的導(dǎo)航上。圖2展示了移動(dòng)設(shè)備上標(biāo)準(zhǔn)導(dǎo)航與置頂導(dǎo)航的不同之處。
圖2
可用性研究
研究背景
為了本次研究,我專門創(chuàng)建了兩個(gè)幾乎完全一樣的測(cè)試網(wǎng)站。唯一的不同點(diǎn)是一個(gè)具有標(biāo)準(zhǔn)導(dǎo)航,另一個(gè)是置頂導(dǎo)航。在第一個(gè)網(wǎng)站中,要求四十個(gè)參與者限時(shí)完成5個(gè)任務(wù)。然后再到另一個(gè)網(wǎng)站上去完成另外不同的5個(gè)任務(wù)。這兩個(gè)網(wǎng)站均在桌面電腦上進(jìn)行測(cè)試,直到最后才會(huì)告訴用戶兩網(wǎng)站之間的不同。在測(cè)試完全結(jié)束后,通過對(duì)數(shù)據(jù)的分析,我得出兩個(gè)有趣的結(jié)論。
1.置頂菜單可使導(dǎo)航快22%
研究數(shù)據(jù)顯示,參與者不必將頁(yè)面滾動(dòng)到頂部,就可以快速地找到他們所需要的內(nèi)容。22%看起來(lái)可能并不是一個(gè)大數(shù)據(jù),但對(duì)訪問者卻有很大的影響。根據(jù)該數(shù)據(jù),置頂導(dǎo)航可以幫助訪問者每5分鐘節(jié)約36秒。當(dāng)然,如果你正增強(qiáng)用戶體驗(yàn),讓用戶在頁(yè)面中停留更長(zhǎng)的時(shí)間只是其中的一個(gè)好處。應(yīng)該讓用戶深入探索該網(wǎng)站,不受任何限制地找到所需要的東西。
2.100%的參與者更喜歡置頂菜單,但不知道喜歡的原因
在測(cè)試的最后階段,我都會(huì)問用戶是否注意到兩個(gè)網(wǎng)站的不同之下。但沒人能說(shuō)得出。變化很微小,沒人注意到它,因?yàn)樗麄兌荚趯Ｗ⒂谕瓿杀舜说娜蝿?wù)。當(dāng)詢問參與者感覺哪個(gè)網(wǎng)站更容易使用。40位參與者均認(rèn)為有置頂導(dǎo)航的網(wǎng)站更容易使用(使用更快速)。很多人評(píng)論說(shuō):“我不知道這兩個(gè)網(wǎng)站有什么不同之處,但我感覺通過點(diǎn)擊置頂導(dǎo)航可以節(jié)省更多的時(shí)間。”如此評(píng)論顯示出用戶對(duì)置頂導(dǎo)航的絕對(duì)支持。
桌面軟件的置頂導(dǎo)航
想象一下,你正在Word中輸入一個(gè)文檔,每當(dāng)你想加粗一個(gè)單詞,或加寬頁(yè)邊距,都必須滾動(dòng)到第一頁(yè)進(jìn)行設(shè)置。是不是一想起來(lái),就讓人沮喪啊。無(wú)論你正在做什么,大部分桌面軟件都會(huì)時(shí)刻提供一個(gè)完整的導(dǎo)航菜單供你訪問。Web瀏覽器也應(yīng)該這樣,如果我們必須滾動(dòng)到網(wǎng)站的頂部才能訪問瀏覽器的地址欄,那就太可笑了。
優(yōu)秀案例分享
最近,Facebook和Google+也采用了置頂導(dǎo)航。在美國(guó)訪問量最高的25家網(wǎng)站中,現(xiàn)在只有16%采用了置頂導(dǎo)航。下面列舉出一些在這方面做得很棒的網(wǎng)站。
Fizzy Software
這是水平置頂導(dǎo)航中一個(gè)很好的例子,位于頂部。當(dāng)使用該網(wǎng)站時(shí),用戶會(huì)感覺很舒服。
圖3
Web Appers
該網(wǎng)站的導(dǎo)航是垂直的,位于左側(cè),與Google+的導(dǎo)航有點(diǎn)相似。它唯一的缺點(diǎn)是,如果屏幕的高度低于560像素,那么菜單下面的部分就無(wú)法訪問了,我在上網(wǎng)本上測(cè)試該網(wǎng)站時(shí)發(fā)現(xiàn)了這個(gè)問題。
圖4
MakeBetterApps
MakeBetterApps這是另一個(gè)精彩的例子。導(dǎo)航略微透明,它下面的內(nèi)容依稀可見,這是一個(gè)很不錯(cuò)的嘗試。
圖5
Rodolphe Celestin
Rodolphe Celestin該網(wǎng)站的置頂導(dǎo)航橫跨網(wǎng)站的頂部,但當(dāng)你向下滾動(dòng)頁(yè)面時(shí),導(dǎo)航的設(shè)計(jì)就會(huì)發(fā)生細(xì)微變化。只要保持好一致性,如此簡(jiǎn)化該設(shè)計(jì)是一個(gè)很好的技巧。同時(shí),該網(wǎng)站的設(shè)計(jì)者還采用了當(dāng)下正流行的設(shè)計(jì)方法:整個(gè)網(wǎng)站只有一個(gè)頁(yè)面,導(dǎo)航上的鏈接是一個(gè)個(gè)錨點(diǎn),點(diǎn)擊后可以跳到頁(yè)面的相應(yīng)位置。這些都使該網(wǎng)站使用起來(lái)很舒服。
圖6
Ryan Scherf
Ryan Scherf該網(wǎng)站的導(dǎo)航是垂直的,上面只有圖標(biāo)。該創(chuàng)新令人印象深刻。
圖7
Web Designer Wall
Web Designer Wall該網(wǎng)站的垂直置頂導(dǎo)航效果很好,因?yàn)椴藛沃辉?個(gè)菜單項(xiàng)。它很適用于博客。
圖8
雖然置頂菜單并不是最流行的導(dǎo)航形式,但越來(lái)越多的網(wǎng)站正在使用。
現(xiàn)在就開始設(shè)計(jì)
避免使用iFrame
iFrame似乎是實(shí)現(xiàn)置頂導(dǎo)航的直接方法,但要避免使用它。因?yàn)閕Frame會(huì)導(dǎo)致很多問題,尤其是跨瀏覽器兼容性問題、安全問題、搜索引擎優(yōu)化問題。iFrame有它的用武之地,但不應(yīng)成為HTML布局中的主要部分。
CSS
用CSS來(lái)實(shí)現(xiàn)置頂導(dǎo)航是一個(gè)不錯(cuò)的方法。它也是最直接、最輕量、最快速的方法。有三點(diǎn)需要注意: position、margin-top和z-index。將菜單的position設(shè)置為“fixed”,菜單將無(wú)法跟隨頁(yè)面的其他部分滾動(dòng)。如果導(dǎo)航是水平方向的,可以不用設(shè)置margin屬性。最后,在水平導(dǎo)航上,利用z-index屬性保證導(dǎo)航始終居于其他元素的上面。當(dāng)你滾動(dòng)頁(yè)面時(shí),其他內(nèi)容將在導(dǎo)航下滑動(dòng)。
想了解更多內(nèi)容請(qǐng)見W3C網(wǎng)站。
JQuery和JavaScript
圖9:這個(gè)簡(jiǎn)單且精巧的置頂導(dǎo)航條由JavaScrpt實(shí)現(xiàn)
如果你更喜歡jQuery、JavaScript,你可以試試下面的方法:
● jScroll
● Simple Smart Sticky Navigation Bar
● jQuery Waypoints
● Sticky MenuBar
置頂導(dǎo)航的缺點(diǎn)
圖10
設(shè)計(jì)局限性
采用置頂導(dǎo)航可能需要放棄一些設(shè)計(jì)選擇,而這些可能是團(tuán)隊(duì)不愿放棄的。例如,水平置頂導(dǎo)航位于頁(yè)面的頂部,其他元素的上面。雖然它很容易實(shí)現(xiàn),但不一定是用戶所需要的。
容易分心,受到打擾
一不小心,垂直導(dǎo)航就會(huì)讓用戶分心。在用戶滾動(dòng)頁(yè)面時(shí),一些置頂元素可能會(huì)出現(xiàn)延遲;其他元素可能太高(或太寬),而影響對(duì)內(nèi)容的訪問。導(dǎo)航應(yīng)該容易訪問,同時(shí)不應(yīng)搶奪內(nèi)容的注意力。
對(duì)移動(dòng)設(shè)備的兼容性
上文提到的CSS和JavaScript實(shí)現(xiàn)方法,在某些移動(dòng)設(shè)備瀏覽器上并不提供支持。Luke Wroblewski的文章《Organizing Mobile》分享了在移動(dòng)設(shè)備上創(chuàng)建導(dǎo)航需要重點(diǎn)注意的多項(xiàng)原則。響應(yīng)式設(shè)計(jì)技術(shù)也為基于屏幕尺寸調(diào)整導(dǎo)航提供了一些解決方案。
要了解各個(gè)設(shè)備對(duì)它的支持情況。提前了解這些兼容性問題,可以節(jié)約更多時(shí)間�！禬hen Can I Use?》文章中介紹了桌面和移動(dòng)瀏覽器對(duì)CSS屬性“position:fixed”的支持情況。Brad Frost也對(duì)此做了測(cè)試和分析,在他的視頻中也提供了精彩的觀點(diǎn)。
結(jié)論
作為設(shè)計(jì)者、開發(fā)者,我們?yōu)槭裁匆粩嗥仁褂脩羯舷聺L動(dòng)頁(yè)面來(lái)尋找導(dǎo)航呢?這在桌面軟件上已不是問題,并且我們有一些數(shù)據(jù)可以顯示置頂菜單的益處。在美國(guó),訪問量最高的25家網(wǎng)站中有84%可以通過置頂導(dǎo)航,來(lái)加速對(duì)用戶的導(dǎo)航。
當(dāng)然,置頂導(dǎo)航并不適用于任何情況,尤其在資源緊俏時(shí)。使用置頂導(dǎo)航需認(rèn)真考慮,并保證網(wǎng)站的可用性和整體用戶體驗(yàn)。
作者簡(jiǎn)介:
Hyrum Denney,專注于Web設(shè)計(jì)和開發(fā)。現(xiàn)就職于SirsiDynix,擔(dān)任UX/UI設(shè)計(jì)師。曾創(chuàng)辦自己的UX工作室,同時(shí)在電子商務(wù)行業(yè)擔(dān)任網(wǎng)絡(luò)運(yùn)營(yíng)主管。熱衷于學(xué)習(xí)新知識(shí),對(duì)用戶體驗(yàn)設(shè)計(jì)、用戶使用網(wǎng)站的心理學(xué)有著特殊的興趣愛好。
原文鏈接:Sticky Menus Are Quicker To Navigate
文章編輯: 365webcall網(wǎng)頁(yè)客服系統(tǒng)(www.365webcall.com)
我的評(píng)論
| 登錄賬號(hào)： | 密碼： | 快速注冊(cè) | 找回密碼 |  |
