網頁設計中漢堡選單的利與弊

發表於2016-04-28

現在很多時候,你可能都會在移動介面的右上角看到“漢堡選單”,它們通常是三行堆積在一起,形狀類似於一個漢堡,因為佔用空間少,所以常被作為一個網站設計功能納入網站選單。

雖然漢堡式選單在提供簡練的資訊和簡約設計上有著巨大的優勢,而且能使網站本身看起來十分簡潔,但是也存在著巨大的缺點。

Image title

無論你怎麼稱呼它,側邊欄,抽屜式導航還是漢堡選單,隨著時間的推移,總會有一個新的事物來代替它來提高使用者參與度。許多人在網頁設計中的漢堡式選單上抱有爭議,以“眼不見,心不煩”這種思路來設計會降低使用者的參與度和網站的功能性。並且會降低轉化率。

使用目標選單來保護寶貴的介面空間的設計思維像野火一樣蔓延了整個網頁設計界,漢堡選單這種設計方法幾乎在全線每一個網站都迅速被採用。現在改變這種方式可能為時已晚,但是討論漢堡選單的利與弊仍然具有價值,因為使用者的需求發生了改變。

漢堡式選單缺乏效率

一個漢堡式選單最基本的缺陷就是位於移動應用上突出的位置 – 左上角。對於習慣用右手操作的使用者而言,這個位置顯然並不完美,並且不適合閱覽。

在使用者能看到他們選擇的內容之前,他們必須輕點選單,當確定這是要找的正確資訊時,還得再點選一次。如果想要回到選單導航,他們還必須在多螢幕中進行多次點選,選擇“是”或者“返回”等多次操作才能退回。單次看起來這可能不會有什麼,但這使一個使用者找到正確介面的時間成本大大的增加了,使用者對這種操作越熟悉越覺得不妥,於是越來越多的使用者會抱怨這個模式。

在當今這個競爭異常激烈的市場,是什麼讓你的網站脫穎而?是使用者,所以你所有的出發點和圍繞中心都必須是使用者。當你用漢堡選單簡練的概括了你網站的所有功能或者內容的時候,你就必須瞭解,可能存在這樣的風險,你的使用者將不會看到你的品牌到底哪裡與眾不同。這傷害了整體品牌的知名度和轉換率,對於推廣你的產品也毫無益處。

Image title

使用者可能偏向“熱狗式”選單

雖然設計師們很快完成了漢堡選單設計的革命,這種設計清新,美觀並且十分簡約大方,但是他們忽視了一個重要的因素——使用者需求。很多使用者並不知道這種選單提供了什麼,或者不願意去點選它。他們依然面無目的的在你的網站中搜尋著他們需要的資訊,當時這是徒勞的。

與此同時,還有這樣一批網站,它們將使用者尋求的資訊設定在使用者一眼就能看到的地方,使用者不必一個個的翻找隱藏的選項,而且不用擔心自己會漏掉資訊。許多網站都選擇了概括式途徑和恢復上一級選單的設計方式(比如將其水平排列在頂部選單),並且看起來效果很不錯。

漢堡選單的簡練使文字資訊不易被發覺,而現在的情況是,一個普通使用者如果檢視頁面十秒鐘不能發現或者理解他想要的資訊,他會馬上離開,漢堡選單要求使用者有快速的發現能力,但這點很難實現。雖然漢堡選單相當吸引人,但卻忽視了使用者的實際水平。

使用者通常很難理解一個漢堡選單,而傳統的選單不能不立即被理解 。於是很多人會產生抱怨,網站試圖通過改變選單包括後退按鈕或其他選項,如在漢堡選單圖示的旁邊新增文字,使之更加人性化,以減輕使用者的不滿。

Image title

但是許多改變只會使使用者對於選單欄更加困惑,現在許多漢堡選單樣式和使用者在使用選單之前,都必須先搞清楚那些選項可以使用才能使用正確的導航功能。你應該多想想其他選擇,而不僅僅只是假設漢堡選單包含和作用於所有網址導航。

如何打破禁錮

在許多情況下,你可以優化漢堡選單使其具有更高的可用性,或將其替換成別的導航選項。但是有時,你只需將漢堡選單移動到螢幕的右側,就足以使你的網站看起來獨特並提高使用者的參與,因為右側更容易挖掘習慣右手的使用者。

同樣,你可以優化選單的點選方式。在頂部選單中,使用者通常都會將他們的注意力集中在第一個和最後一個元素,這兩個地方同樣是你放置重要資訊的地方。如果你將選單設定在側邊欄中,你需要從高到低排列不同重要程度的資訊,以符合使用者垂直掃描的檢視習慣。

你同樣可以恢復到漢堡選單最初的模式,創造一個經典的使用者友好的頂部選單,比如下面這個例子:

Image title

GameStop使用動畫圖示,以提高可用性,同時也完全避免了漢堡選單。他們已經優先調查了使用者最需要從他們的應用程式中獲得什麼,在其頂部選單中只包括這些。這樣在不需要一個抽屜式的選單隱藏資訊的情況下,該網站仍然達到一個乾淨,清新的外觀。

Image title

這些圖示和文字結構會使你一眼就注意到文字內容,但是又同時保證不會搶了下方介面內容的風頭。但是事實上你並不能時時刻刻根據下文內容來調節圖示及文字的大小,這個時候,我們建議你使用純文字的選單或者網站,這樣選單就不需要了。無論哪種方法,首先考慮使用者,根據使用者特性進行設計。

對於那些希望能減少浪費時間的使用者來講,你的選單應該是一目瞭然的,同時也必須是易理解的。實現這點功能,你需要在其他地方妥協很多。如果你想要最大程度上調動使用者的參與性,簡單和易解這兩點是必需達到的。當你困擾與選單選項的優先次序時,記住把自己當作使用者,從使用者的角度出發。舉個例子,你的文筆可能很好,很會寫生活感悟,但是使用者到你的網站來想看的是你的產品,那麼文筆再好也是次要的,只能為了突出產品做陪襯。

跟著你的直覺走

如果你在作品中已經採用了漢堡選單或者它的一些變形,別急著馬上用其他設計模式改變替代它,仍然有許多使用者傾心於漢堡選單的易用性和獨特魅力。特別是當開發一個移動應用時,在有限的空間中,漢堡選單就相當實用了。

儘管漢堡選單目前飽受爭議,但是如果你的網頁特別適合採用漢堡選單,那就繼續使用,只要保證你選單中的所有部件都達到標準,能達到最佳的使用者參與度。但是如果你僅僅是出於懶惰就直接選擇了漢堡選單,那我認為你該重新思考一下自己的選擇了。

相較於那些比較容易淡出使用者視線的元素,將重心多放一點在選單選擇和設計上面,但是比這個更重要的是那些能夠提高轉化效率,在正確操作下,使用者會依靠選單來瀏覽你的網站,但是如果他們發現通過選單並不能滿足自己的需求,那麼他們就會反彈。無論是漢堡選單還是其他樣式的選單,記住,它們都只有一個作用——改善使用者體驗。

相關文章