24 - Hamburger Menu 到底要放左邊還是右邊？

本週主題：
《 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方法，而不會被現有的設計元素所限制。

‍