Navigation Menu的大學問：那些你沒注意到的小細節#像極了愛情
這陣子在開發web跟mobile的時候，開始觀察了不同網站下Navigation Menu主選單的呈現方式。不仔細看還好，一但開始認真觀察，才發現原來連Menu都有一番學問
而UIUX設計師為了讓使用者有更好的體驗，往往在小細節裡也照顧得無微不致
1. Hover?Tab?啊你到底要我做什麼事？
以前覺得Hover超方便，只要滑鼠移過去，就會有相對應的子選單跑出來，我不用再另外花費點擊的力氣就可以知道在這層Category下面有哪些subcategory，超棒der
這一切似乎看起來非常合理，但實際上卻會造成：
當用戶使用touchscreen瀏覽網站時，因為沒有Hover的手勢，用戶必須點擊導覽列的項目才會展開（裝置行為不一致）
這邊因為電腦版跟手機版的UI沒有任何差異，所以
或許你會說：這還好啊，使用者看了也知道點擊會展開殺小的
來，跟著我唸
道高一尺，魔高一丈
為了避免用戶行為不一致：
- 統一設計成點擊Category後再展開Subcategory
- 一開始就根據裝置的習性，電腦版跟手機版設計成不同的UI，這樣就能合乎裝置的行為
(電腦版用hover，手機版用Tab)
2. 網站的Menu Navigation能不能使用Split Buttons?
噢在那之前，讓我們先認識什麼是Split Buttons （分割按鈕）
分割按鈕通常有兩個元素：
標籤 (通常是預設值或是優先層級最高的指令) +箭頭 (同項目的其他操作選單)
Split Button長得跟下拉式選單很像，差別在於Split Button的選項為指令/項目操作，同時也可以點擊標籤套用Default值
關於分割按鈕的介紹，可以看NN/g寫的文章有詳盡的解說：看解釋
那為什麼Split Button不能用在網站的Navigation裡呢？
通常使用的情境為使用split button裡的選項來變更狀態或是套用其他指令，常在應用程式裡(Microsoft Word/Exce/Photoshop…)可以看到
總而言之，拿Split Button應用在Navigation Menu裡可以說是非常不適合
畢竟UX家的權威NN/g都用斗大的標題寫了
“Don’t Use Split Buttons for Navigation Menus ”
(((抖)))
3. Navigation Menu箭頭的使用情境?
答案是：如果今天這個Menu下的Category還有更多的內容，那是可以加上的
當有一個向下的icon或是箭頭時，使用者預期的行為應該會是：
噢，這裡有一個向下的圖示，我必須跟他有互動之後才會有更多選項跑出來
以Overflow的官網為例：
在Product的階層下因還有其他Category，所以使用了下拉式菜單。暗示用戶可以點擊分類在Product底下的其他頁面，反之Pricing沒有
4. 善用Mega Menus幫助你建立良好的瀏覽體驗
沒聽過應該也有看過Mega Menus是什麼
Mega menus：一種把網站內的菜單分類的不同階層跟子項目統一顯示在大面積的長方形區塊，用戶可以簡單快速的找到需要的產品或功能
Mega Menu的好處在於：
(1) 結構化複雜的產品組合
如果今天要設計的網站有很多的項目(像是品牌官網或網路電商)，要把這麼多的商品分類跟組合搭配都顯示在Menu裡面捨它其誰？比起傳統的下拉式菜單，靈活的版面加上淺顯易懂的父子層級操作，讓愈來愈多網站也紛紛採用
(2) 搭配圖片，增加點擊率
也不一定要非常多的文字才能使用Mega Menu，在裡面放上吸引眼球的圖片也可以增加使用者點擊的意願。因為比起單純的文字，視覺化的訊息讓大腦可以更快的讀取跟記憶，近而吸引用戶查看的慾望
例如: Dribble官網
(3) 費茲定律的應用
有在學習UX的大家應該都對Fitts’ Law不陌生
目標越遠移動時間就越長，目標越小時間也會越長；反之，目標越近或目標越大的話，所需時間就越短
設計mega menu時也需考慮到移動游標與按鈕的距離，不宜過長也不宜過短，選用適當的間距讓用戶能更清楚地被引導到相關的地方
來看看林育正 Riven前輩寫的文章，可以對Fitts’ Law更加了解
另外Nagivation Menu可以設計成各種不同的呈現方式，有很大一部分的設計師已經捨棄Hamburger的做法。將主選單設計在手機的螢幕底部(Tab Menu)、或是直接把Menu裡的Category放出來在頁面中讓用戶直接點選(Galllery)、也有人設計成整頁用Modal的方式覆蓋滿版整個視窗。5. 設計成在需要他的時候能容易被找到
(1)依據裝置尺寸設計適合的Menu
曾經有看過有網站設計成手機跟電腦都同時使用hamburger把分頁選單都收起來(確實，可以保持裝置的一致性)，但是如果用電腦看時，網頁的功能會有很大一部分都被隱藏掉，可能使用者也會困惑為何不能一眼找到主功能，所以盡量視裝置的特性來設計才能對用戶更加友善
(2)放在一樣的地方
為了不要讓用戶找不到Menu在哪裏，通常會把它設計在頁面上方。且網頁版跟手機版設計在一樣的位置，才不會導致用戶在同樣的位置找不到功能。
(3)可被辨識的視覺區隔
有時候可能因為背景的關係，造成Menu跟頁面看不出來區隔。可以改善的方式是Menu直接套用一個深色的背景底色，或是Scroll或是Hover時變色。重點是要可以明顯地讓使用者看到並操作。
總結
設計任何一個元素時都要考慮到背景以及情境，了解為什麼這樣設計的原因，不單純只是求畫面好看。也可以避免與工程師的溝通不良，減少未來變動的次數與不合邏輯的設計。
衍伸閱讀：
謝謝閱讀到這裡的你們！如果喜歡我的文章的話，可以幫我拍拍手👏👏👏
