# 為什麼要使用大型菜單（Mega Menus）？
###### 閱讀時間約3分鐘
## 首先先回顧一下上週內容：

[上週說](https://hackmd.io/@w94090/SyqaH-H4q)，在**選項多、類別多**時，會建議使用「水平選單列」來提升使用者瀏覽的體驗。

「水平選單列」的陳列方式能**加快瀏覽速度**，並且搭配**點擊面積大**的「膠囊按鈕」，**降低誤觸機率**。

## 什麼是大型菜單 Mega Menus？
**Mega選單是一種可擴充套件的選單（[Expandable Menu](https://www.nngroup.com/articles/expandable-menus/)）。**

它能將許多選項以下拉選單的方式，在一頁頁面中容納大量選項，讓使用者能一目了然地看見上級和較下級的選項。


對應上圖範例來說，大型菜單具有以下特點：
* 有**大面積**的選單區域，搭配多個**類別標題**，形成選項按鈕**群組**
* 透過 **字型、icon、佈局** 建構選單**架構**
* 不需要滾動/點擊就能**一次看清楚**所有項目
* **懸浮**或**點擊**時會顯示的更多選項

## 研究怎麼說？
### 1. 大型菜單的設計，贏過下拉選單的設計
**下拉選單是為了將介面更加簡潔而產生出來的設計。** 在網站只有**有限數量**的功能需要陳列時，下拉選單的設計能讓介面看起來乾淨整潔好導覽。但當網站有**大量功能跟選單**需要容納時，使用下拉選單反而會**隱藏大部分選項**，導致使用者**誤解**他需要的**功能不存在**頁面中。

確實，使用者可以「滾動」以瀏覽剩下選項，但在行動裝置普及的情境下，在窄小的介面上「滾動」閱覽，會隱藏掉頂部的選單，間接強迫使用者倚賴[「短期記憶」](https://www.nngroup.com/articles/short-term-memory-and-web-usability/)來記住頁面中的所有選項，也讓使用者閱讀起來相當痛苦。

人腦在瀏覽文章跟介面時已經需要短期記住相當龐大的資訊量，而當你又需要倚賴「短期記憶」記住更多內容時，很容易讓使用者**忘記原本需要在此網站上完成的任務。**

透過 **「大型菜單」** 一目瞭然的陳列出所有許項，使用者可以直接**用「眼睛」看到**，而不是[試圖記住](https://www.nngroup.com/articles/recognition-and-recall/)，讓使用者能更快速的錨釘選項，**加速瀏覽與選擇的速度**，**降低誤觸與導覽失敗的機率**。

> 範例與更多延伸如下，有興趣再閱讀：
:::spoiler
### 延伸：菲茨定律(Fitts's Law)
[菲茨定律](https://lawsofux.com/fittss-law/)是計算人們使用鼠標、手指或徒手抓取等方法，導覽到指定目標所需要花費的時間。

簡單並且直觀的說，使用者導覽到目標所需的時間會取決於：

* 指定目標的大小（目標越小，時間越長）
* 與指定目標的距離（目標越遠，時間越長）

菲茨定律指出，達到目標 A 的時間比達到任何其他目標的時間要短。雖然目標 A 和 B 的大小相同，但從鼠標原點到 A 的距離 (d1) 比到 B 的距離 (d2) 短，因此到 A 的移動會更快。目標 C 與目標 A 放置在距鼠標相同的距離 (d1) 處，但距離更小，因此將鼠標移動到它比移動到 A 需要更長的時間。

::: info
**移動距離越遠，且滑鼠/手指可以移動的範圍越小，使用者越容易不耐煩。**

以下圖來說，要從 行政資源 -> 學習與發展 -> 國泰學習網，使用者導覽僅能僅能跟隨紅虛線的範圍。如果不小心滑鼠移出可以點選的範圍，選單就會關閉，使用者又需要重新從「行政資源」開始導覽到「國泰學習網」。

這樣的設計會讓使用者容易忘記常用功能的位置，也容易因為誤觸而感到不滿。

**痛點：**
因點擊面積小、游標移走就會關閉選單、需要點到 **>** 上才能看第三層的選項，使用者很常需要重頭再選一次才能導覽到想去的頁面。
:::

### 2. 如何有效整理選單階層跟選項分組？
在功能漸漸增長後，便需要將各個選單項目重新群組歸類。因為使用者與開發者角度與認知不同，使用者瀏覽網站菜單常常會有「為什麼這個功能會放在這裡？」的疑問，而開發者可能會認為網頁的設計與排版理所當然。

功能龐雜時（或是需要做選單階層優化時），可以注意以下幾點：

* 最有效的方法就是做[**使用者訪談**](https://hackmd.io/@w94090/B1uLuDAE5)，真正理解使用者的使用習慣。使用者才是真正使用系統與選單的人，開發/設計者的預想只是想像而已。
* **保持適當的階層大小**。盡量不要一次陳列出大量標題下面容納少量的選項，或是只顯示出少量標題下面容納大量的選項。可以參考[米勒定律](https://lawsofux.com/millers-law/)(7+-2)的數量去設計/陳列菜單選項。
* **使用精確且符合使用者認知的字詞**，避免使用生澀難懂/不易清楚理解的字詞。
* **每個選項只出現一次**。重複出現容易令使用者困惑
* 選單排序應依據「工作流程」、「點擊頻率」、「重要性」排列

最後，因為設計大型菜單需要佔掉頁面一部分空間，常需要犧牲部分元件的呈現空間。無論如何，[「搜尋」功能與欄位都需要清楚呈現在不網頁上不會被遮蓋的地方](https://www.nngroup.com/articles/search-visible-and-simple/)，讓使用者自己決定使用意圖，並且當在菜單中迷失時，也有個管道自行排解困難。

:::warning
**下一週：** 介紹Web3.0 apps 的UX設計

如果有任何有興趣的主題都歡迎留言討論，或寄信到 [thankyou0739@gmail](mailto:[e-mail]) 告知
:::

**Source:**
[Mega Menus Work Well for Site Navigation](https://www.nngroup.com/articles/mega-menus-work-well/)
[Mega Menus Gone Wrong](https://www.nngroup.com/articles/mega-menus-gone-wrong/)
[Expandable Menus: Pull-Down, Square, or Pie?](https://www.nngroup.com/articles/expandable-menus/)
[易用性測試流程簡易筆記](https://hackmd.io/@w94090/B1uLuDAE5)
[Search: Visible and Simple](https://www.nngroup.com/articles/search-visible-and-simple/)
[Laws of UX](https://lawsofux.com)

###### tags: `每週一UX` `選單列優化`