Use Case Study (1) 何時使用Hamburger Menu

uxeastmeetswest
UXeastmeetswest
Published in
6 min readMar 20, 2017

不知大家對這個有沒有印象

大俠愛吃漢堡包

純正牛肉真是好

香港市民添口福

吃完就是乖寶寶

摩登如來神掌

充滿懷念的感覺了嗎?

漢堡大哥充滿了正面的能量,人人都愛吃(尤其米國)

各種Shake Shack, In n Out, Super Duper 等等。

好惹浪費大家兩分鐘了文章可以不用寫太長了。

今天介紹的是這位 — Hamburger Menu

http://www.demacmedia.com/design-user-experience/reduce-ux-friction/

常常存在於手機App、網頁之中,因為它可以收納許許多多的功能並且讓介面簡潔乾淨,常常被許多設計師奉為圭臬,拿來當作設計的最佳解之中。

而今天,我要告訴大家,請別輕易使用漢堡大哥!!!

雖然這個議題被許多UX Designer爭論到爛了(可能是英文社群之中),還是希望可以拿出來討論並就我想法跟大家討論何時該使用何時不該使用。

Hamburger Menu可以用簡單的三條線將許多功能藏在裡面,一方面提供介面許多留白的空間也可以讓介面起來非常簡潔。但是,在UX之中一個設計師並不是讓許多的功能變成圖示(Icon)讓介面看起來簡潔就好,根據Nielsen Norman Group(一個廣大的UX組織提供各種UX的教學和文章)有個五秒定律,裡面說道裡面說道:

Use the 5-second rule: if it takes you more than 5 seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate that meaning.

臺式翻譯:阿捏喔~超過五秒才讓使用者猜出這個東西在幹麻的話就表示這個圖無法表達他的意思咧啦。

Hamburger Menu在大部分的介面中提供各種功能導航,但又在某些軟體中提供其他功能,雖然他現在已經漸漸被使用者接受這個含糊的圖示了,但是記住,你的東西是只給年輕人使用的嗎?其他比較高齡或是不常使用的人會清楚這個意思嗎?

Hamburger Menu並不會提供使用者清楚地暗示說你按下去會帶你去哪裡(用我也聽不懂的說法叫做Information Scent,快把它記下來面試時可以很有自信地把它唸出來!),無法讓使用者去預測他們接下來會去哪裡。

但是目前許多APP還是在用漢堡大哥的,我想最主要是,確認你的產品目的是什麼,如果你的產品可以提供明顯可以達成產品目標的功能的話,使用漢堡大俠是可以的。

案例討論一

還記得Spotify之前有左邊這版本的介面嗎?現在已經改版成右邊了惹

他們把本來有的Hamburger Menu取消掉,換成Tabar,一些常用的功能讓使用者更容易進入(Radio和搜尋啊等等),那時候的介面並沒有Radio這個功能,可能是因為功能增加了許多,希望使用者可以更容易進入這些功能所以radio出現沒多久介面就改了。(也可能是我想太多顆顆)

但重點是比較常用的功能都在主要介面上讓使用者不用進入到第二層,更容易地使用了!棒棒der!

案例討論二:

Uber

兩個都是大家常用的共乘系統,他們通通都是使用Hamburger Menu(Lyft左上角那個就是漢堡)點進去可以到達其他各種不同的功能,但這情況下是可以的,因為這兩個軟體主要功能都是讓使用者搭到車,這功能在主要介面都可以馬上達成,而且功能都非常的明顯讓使用者可以輕易達成。其他各個比較次要的功能安排在漢堡哥那裡是OK的,畢竟使用者並不是那麼常進去那邊,大部分的使用者都是進來選擇叫車。

案例討論三

Amazon

Amazon則是提供了一個大大的漢堡大叔在左上角,其實很多其他ecommerce並沒有使用漢堡像是B&H(賣相機的)

Amazon販賣的東西實在太多了,無法像B&H因為只賣電子產品一樣提供tab bar讓使用者可以簡單的搜尋類別(他們提供一個類別搜尋可能使用者往下永遠滑不完),Amazon則是提供了一個非常顯眼的search bar來做解決方案,讓使用者大部分可以進入搜尋,畢盡使用者大部分是使用搜尋功能的,再將一些雜七雜八放入漢堡大俠裡面,這樣才能讓介面盡量整潔。

案例討論四

Yelp

Yelp和facebook等等將Hamburger Menu收納在右下角tab bar的其中一個,提供使用者更多的功能在那之下,將主要用戶使用的功能放在tab中,是符合蘋果所提供的設計準則的(IOS Human Interface Guideline),避免放太多tab在tab bar之中,又可以結合tab bar提供提供讓使用者快速使用主要功能和進入第二層的次要功能。但小編認為其實用三點(。。。)或是用個My Yelp可能比較好,畢竟Hamburger Menu跟More所傳達的意思其實不太一樣。

言而總之,不是說Hamburger Menu不好,只是說在設計你的軟體之前,好好的想你的產品主要功能是什麼,主要功能是不是可以在主要介面達成,做好資訊架構,想好整個產品使用流程架構再來想好Hamburger Menu可以怎麼放比較好,不要說啊誰誰誰都放了我們為何不能放或是那個什麼公司也怎麼做我們也那樣解決,每個產品的定位都不一樣,並不是誰能這樣解決你的產品就可以這樣解決的。

我想最重要的事 — 無時無刻都要質疑你的設計為何要這樣做,無時無刻批判你自己的設計,這樣才能有清楚的設計邏輯和使用方式。

就醬!歡迎大家來一起討論~

-Wei

--

--

uxeastmeetswest
UXeastmeetswest

We are 4 passionate UX designers, working in both China and the US. We share our work experiences, cultural differences and personal UX perspectives.