# 為什麼水平選單列比大型菜單好？ <br>Why Horizontal Lists Are Better for Mega Menus
###### 閱讀時間約5分鐘 建議用電腦瀏覽比較好閱讀呦
當工程師/設計師在設計 Menu 選單列的時候，很多人都會直覺使用 Vertical List 去設計。（跟目前國泰員工入口網的選單列一樣）
> 國泰員工入口網使用的選單列是下拉菜單，需要將游標移到>上，才會顯示第三階層的選項。容易因為點擊面積小、游標移走讓使用者需要重頭再選一次。

## 但是就會有以下問題：
1. 一列的選項多時，空間不夠放，就用 `More/View All` 按鈕讓使用者展開剩下的連結。但是「更多」按鈕又會混在選項中，**不易找到**。
2. 因為裝置大小限制，每個子項目之間的 **Padding 不足**，**點擊區塊也較小**
4. 「類別」和「項目」之間字體大小、顏色差異不大，「類別」不夠突出。
* 當使用者要找到「類別」時，因為下方「項目」**總體所佔空間比例較大**，使用者**瀏覽時會花費更多時間**，也讓**使用者注意力流失**，容易讓使用者不再有耐心使用網站的服務。

> 假設你現在要找 Dressers，你會花多久時間找到呢？（觀察一下自己的瀏覽方向跟方法）

:::info
**[Padding 是什麼？](https://developer.mozilla.org/zh-CN/docs/Web/CSS/padding)**
是 CSS 語言中，用來控制元素內邊距區域的方法。內邊距區域指的是內容與邊寬之間的空間。

**注意：**
內邊距空置的是元素內部空出的空間。相反的，margin 則是操作元素外部空出的空間。
:::

## 解決方法：
大型菜單的解決方法並不是繼續使用垂直列表搭配表格式的佈局，或是單純透過文字顏色大小進行統整，而是應該使用**水平列表**。


1. 各個「類別」標題**可容納文字數量變大**，也可以將標題文字放大加大讓他更突出更明顯。
2. 把「瀏覽更多」的功能鍵放在標題旁邊，能讓它從選單列中脫穎而出。
3. 使用「膠囊式」按鈕，能夠清楚讓使用者知道各個選項的邊界在哪，同時也讓點擊的區塊變大，降低誤觸的機率。
4. 使用「膠囊式」按鈕，搭配顏色可以讓各個類別多上更多種的分類，也讓使用者更好瀏覽子選項的內容，同時也暗示使用者文字長度，**加速瀏覽查找的速度**。

> 現在再找找 Dressers，你會花多久時間找到呢？

## 這次改動的目標就是：
* 加大分類項目的標題，以提升瀏覽速度
* 更大的觸控目標，以加快選擇速度
* 更明顯的索引連結，以加快瀏覽速度
* 更好瀏覽跟點擊的物件 label，以降低誤觸機率


回頭想想你剛剛瀏覽 Dressers 時的視線順序：
使用者使用「垂直列表」時，視線需要從左到右、從上到下的瀏覽。
使用者使用「水平列表」時，視線僅需從左到右瀏覽，即可清楚知道所有項目。

## 研究怎麼說？
[研究顯示](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC8047869/)，與垂直陳列的方式相比，用戶在水平陳列上，視覺搜索的速度更快。[另一項研究發現](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2712349/)，使用者掃描/瀏覽資訊的效率取決於**掃視(saccade)**，而不是**注視(fixation)**。

換句話說，水平陳列的資訊掃描速度更快，因為 **掃視(saccade)** 和 **知覺廣度（perceptual span）** 範圍都更大。
:::info
**什麼是知覺廣度 Perceptual Span?**
知覺廣度，或標誌性記憶(iconic memory)，是指一眼就能捕捉到並很快保存在感官存儲中的資訊量。
:::
[還有一項研究](https://faculty.wharton.upenn.edu/wp-content/uploads/2016/12/jmr130151_ia9gse-1.pdf)探討水平和垂直顯示物件對視覺處理速度的影響。它發現水平顯示的處理效率更高，並也使選項的多樣性更容易被察覺到。

## 如何提升我的選單列設計？
即使我已經透過上述方法，把菜單列改成橫向陳列，我想讓他更漂亮、更容易瀏覽該怎麼辦？
可以透過在分類標題旁邊加上有顏色的標籤，做出不同類別的視覺提示。
再加上半透明的分類背景圖，**用「圖」去加快使用者腦中處理「分類」的速度**。

## 補充
**水平選單列不適用於少項目和少類別的 Menu。** 水平選單列的優勢就是強調類別標題和加寬選項空間，以提升知覺廣度。僅有少數項目的菜單則無法有效發揮他的優勢。

另外，**如果選單列本身已經有按照字母順序排列，垂直列表反而會更易於瀏覽。** 使用者會傾向於關注每個選項標籤的第一個字母來找到他們的目標項目。因此當所有項目垂直對齊時，用戶可以向下迅速單方向掃描的每個選項的第一個字母。

Source: [Why Horizontal Lists Are Better for Mega Menus](https://uxmovement.com/navigation/why-horizontal-lists-are-better-for-mega-menus/)
###### tags: `每週一UX` `選單列優化`