Hamburger Menu 到底要放左邊還是右邊?

Hamburger Menu 到底要放左邊還是右邊?

January 6, 2023

本週主題:
《 ChatChat 》是一系列來自 BORING Design Lab 的夥伴與設計師 Sam (冰拿鐵)的對談系列文章,每週都會有不同的思考內容與討論主題,不論是關於職涯發展、個人成長、面試、以及準備作品集等等都會有所涉略。

這次我們邀請我們工作室的 UI/UX 雙門神,Alex ,aka 黑咖啡。與 Janice ,aka 冰可樂來找討論這個議題。

冰拿鐵:
今天想要找你們兩個來討論兩個議題,一個是 Hamburger Menu 要放在左邊還是右邊,我知道這個討論沒有對與錯,甚至這個議題已經討論非常久了,但如果同時把 Logo 的樣式考慮進去答案會是... ? 那第二個議題,雖然我們有數據證明,Anyway,全世界大部分的用戶已經慢慢習慣使用 App 的型式,那請問 Website 的手機版的 Nav Bar 是不是也要放在螢幕的下方,就跟 App 一樣?

那我們先從第一題開始!


黑咖啡:
我想重點其實像你說的,從易用性來看,這個問題本身沒有對錯。我去翻閱了一些研究,雖然沒有直接針對這個議題提出的實驗,但從其他實驗(順便測試到 Hamburger Menu)的數據可以看到,這個按鈕本身放在畫面左上或右上並不會導致使用者的效率、誤觸率有顯著差別。因此最終 Hamburger 被放置的位置就必須考慮其他因素。

第一個是整體頁面的資訊架構模式。電腦版網頁通常採取了「從上到下」的資訊架構,最上方是層級最高的元素,因此 Nav Bar 常常被放在最上方;而手機版,無論是 Android 或 iOS,在系統中都默認了「和語言閱讀順序」相同的層級順序;因此在從左往右閱讀的語言中,最左邊的元素通常層級最高,而子頁面會從畫面右邊滑入。在這個規則下,層級最高的 Menu 自然被放在了左邊(從畫面左邊滑入),而 Hambuerger Menu 的 Icon 相應的也必須放在左上角(從右往左閱讀的語言,如希伯來文則相反)。

但手機網頁的資訊架構還是可以採取從上到下的架構(這種情況下 Nav Menu 會從手機上方滑入或直接蓋版,而不會從左側滑入);如果在考慮 Nav Bar 必須放置品牌 Logo,而品牌Logo很難與左側 Hamburger Icon 達成視覺平衡的情況下,可以考慮將 Hamburger Icon 放在右上角,網站整體則用從上到下的資訊架構。

至於螢幕下方的Nav Bar,我覺得是一個更為複雜的議題,他有很多獨特的優點,也會導致很多問題。可能要將網頁和 App 分開討論。


冰可樂:
如同上面兩位所說,這題沒有對錯。

上述提到了若是 nav bar 有 logo 與 menu 兩個元件的放置位置,那這邊想延伸思考,如果是 nav bar 有三個或是更多元件需要排列呢?又要怎麼讓使用者能夠直接的知道每扇門的不同?

而我也觀察了許多的網頁,放左或放右的原因,其實跟整個資訊分類的結構有關,像是一些需要登入登出的網站,如電商、網路銀行等,就會依照「功能性區」分為不同的入口,因此就需誕生一個以上的元件需要排列於 nav bar。

所以我個人的想法是,元件位於左邊跟右邊,在於閱讀與操作上,對於現代人普遍都是高度數位產品使用者來說,沒有太大的影響,重點反而是要讓使用者在點擊之前,就能知道這是哪個功能的入口,甚至 icon 的圖示能夠大幅度的暗示使用者,讓人可以猜測到裡面應該就是什麼了,反而更能夠加速操作流程,升級整個使用體驗。


冰拿鐵說:
那我這邊就下一個總結好了,確實目前現代普遍人都是高度數位產品使用者來說, Hamburger Menu 不管放在左邊還是右邊好像都沒有差太多,反而是要考慮其他因素的排列組合。像是 Logo 與其他功能 Icon ( 購買、登入、搜尋等等),甚至是一眼就能讓用戶快速了解 Icon 的功能性,有些 Logo 適合放在中間,而兩端可以放置 Icon 整個視覺會非常的平衡,像是 Apple 就是很好的例子,而有些 Logo 放置在中間卻非常的不平衡,所以只能放在左側,而 Hamburger Menu 移動到右側。

那下一個議題就是『手機下方是否要跟App 一樣放 Tab Bar ?』


冰可樂說:
我立即聯想到了一個很相似的事情,就是在 iOS 15推出後,「 Safari 的網址欄位改到最下方」這件事,當時我使用後的第一印象蠻深刻的,個人覺得這個改動非常精明,而且有種「魔鬼藏在細節裡」的體驗,我想,這個改動也是跟本議題有很大的相關。( PS 但 safari 仍保留讓不習慣改動的使用者,可以自行設定,把網址欄位搬回上方。)

當智慧型手機逐漸普遍的時候,響應式網頁設計( Responsive Web Design,簡稱 RWD)也一面同步發展。許多網站基本上都是先有電腦版,而為了讓行動裝置者也可以瀏覽網站,才一邊也推出手機版,所以說思考可能不是已手機使用體驗為主,體驗就會被影響。

上述 safari 的改動案例與 app 就是「以行動裝置使用者為中心」,所以才將最常使用的 nav bar(或在 app 常稱為 tab bar),移動至最下方,距離手指頭最接近,最好操作。

而近期也有看見過,有些功能性較多的「網站」,在手機版呈現時,下方出現了跟 app 內的 tab bar 一樣的設計,也許就是以手機使用者為主要考量,所設計出的結果吧,但此方法也許又會延伸出另一個問題:若是螢幕小的使用者,整頁畫面可能已被佔掉了下方許多空間。


黑咖啡:
Nav Bar放在底部,在我看來是一個條件非常苛刻的設計。在達成三個條件的情況下,採用底部設計才能產生良好的使用者經驗。

首先,底部Nav Bar的選項通常在5個以內;當選項多於5個時,會導致單個選項觸控區域過小,操作不便。其次,這些選項的性質必須較相似(如都是最高層級的選單),使用者在切換這些選項時才有意義。最後,這些選項一定要是使用者最常需要使用或切換的功能,因為像冰可樂所說,在手機有限的螢幕大小下,每一寸空間都非常寶貴;如果使用者不需要經常在這些功能中切換,實在不必浪費空間。

App和網頁還有不同的一點,是使用者在開啟網頁時,畫面上、下還會有瀏覽器的UI元素,因此空間就更為有限。在手機版網頁採用底部Tab Bar設計時,就必須更加謹慎。

UX中最常用的一句話是:It depends! 在流程導向、功能單一的網站中,也許我們根本不需要Menu;在功能最複雜的系統中,可以單獨劃分出一個導覽頁來整理所有的菜單選項(這個頁面叫做navigation hub)。雖然設計師能依照現有的設計體系給出Menu layout的參考或Best practice,但要達成最好的使用者經驗,必須依照使用者的目的、需求和情境重新思考。

如果有一天真的遇到非常特別的使用者需求,也許我們可以激盪出新的navigation方法,而不會被現有的設計元素所限制。

非常感謝你的時間來閱讀這篇文章,喝杯拿鐵吧,下次見!
在走之前,如果期待下次的見面,可以訂閱以下的不同的通知方式。

Sam Kuo.

📮 Daily Mailbox

而我在2023年為自己設定一個目標,就是每天要看50篇文章,並精選 1 - 3 篇文章分享在以下平台,如果有興趣的話,可以追蹤以下的平台。

01 | Line Openchat

02 | Twitter

03 | Instagram

04 | Facebook

Friday Newsletter

基本上,這份每週的 Friday Newsletter 會在禮拜五送到你的信箱中 📮。(有時候太忙會晚一點寄出去)主要內容會分享生活中所面對的設計、科技與創意,像是工作上的生產力技巧、來自不同媒介的高質量內容(書本、Podcaset、雜誌與文章)與讓生活更棒的建議,有時候會分享幾間本週我去過的咖啡店與好地點。

訂閱成功
Oops! Something went wrong while submitting the form.

如果你習慣使用 Line 來收取訊息,也非常歡迎訂閱我們的 LINE - Official。我不會寄送任何相關廣告訊息給你,我只會寄送每週的 Newsletter 到你手上。

訂閱 Line 官方帳號