Dropdowns: Design Guidelines 下拉選單的設計指南

此文將翻譯 Nielsen Norman Group logoNielsen Norman Group 的 Dropdowns: Design Guidelines，並結合實作 Dropdown / Select 分享。

Dropdowns: Design Guidelines

Dropdowns 可以有效的節省介面空間問題，但被過度使用與錯誤使用，造成許多易用性問題與使用者的困惑。以下為設計師在不同情境下使用 Dropdowns 達到目的的範例：

1. 命令選單 Command menus
which initiate an action based on the selected option
命令菜單，根據所選選項啟動操作

2. 導覽選單 Navigation menus
which take users to a new location
，可將用戶帶到新位置

3. 表單填寫 Form filling
which lets users select an option to enter into a form field
，允許用戶選擇一個選項以輸入表單字段

4. 屬性選擇 Attribute selection
which lets users choose a value from a menu of possible values
屬性選擇，允許用戶從可能值的菜單中選擇一個值

最初「下拉框」（dropdown box）和「下拉菜單」（dropdown menu）這兩個詞是可以互換使用的，但隨著時間推移，兩者出現了功能上的區別。
目前，下拉菜單（dropdown menu）主要涵蓋下拉選單（dropdowns）的導航和命令選單，而下拉框（dropdown box）通常是表單填寫和屬性選擇的首選方法。

而下拉框（dropdown box）的 UI 通常看起來與下拉菜單（dropdown menu）不同，下拉框通常旁邊有一個下拉箭頭，用於選擇屬性或輸入表單資料。
通常在下拉框內的文字會顯示第一個選項，以便讓使用者選擇前可以看到可能的選項類型。
儘管 MacOS 和 Windows 具有不同的下拉框洞見，但他們仍認為命令選單（Command menus）是不同於屬性選單（dropdown menu）的。事實上，Macintosh Human Interface Guidelines 明確建議不要對命令使用下拉選單。

下拉選單設計指南 Guidelines for Dropdown Design

下拉選單的幾個優勢：

1. 節省螢幕空間
2. 使用者熟悉如何使用
3. 防止使用者輸入錯誤資訊

儘管有這些優勢，如果設計師不那麼常使用下拉選單，易用性或許會更好。為此，這裡提供一些下拉選單的設計指南：

1. Avoid interacting menus

避免交互選單，當選擇了頁面上某個選單，另一個選單中的選項會發生變化。這會造成使用者的困惑，且當使用者目標是在選單內層時，通常很難一眼找到。

iTunes - 上方「view」選單包含不同的選項，是取決於左側選單中的選擇

2. Gray out any unavailable options

將所有不可用的選項塗灰，也就是做 Disabled 效果，而不是刪除它們。任何無法選擇的選項都應保留在選項列表中。如果使用者將鼠標 hover 在 Disabled 的選項上超過一秒，請考慮顯示一個簡短的幫助消息（如：Tooltip），解釋為什麼該選項被禁用，以及如何做能使它變為啟用狀態。

如果禁用的選項被移除，介面將失去空間一致性且變得更難學習。

Snagit - Gradient 和 Tolerance 選項 Disabled，表示在選擇 No Fill 情況時無法選擇它們。

3. Avoid very long dropdowns

盡量避免選項超多的下拉選單。使用者需要一直滾動，且無法一眼看到他們的所有選擇，還需要小心控制鼠標，使其不會離開下拉選單。（這是轉向定律的一個例子，它說明使用者引導指點設備通過隧道所需的時間取決於隧道的長度和寬度，隧道越長越窄，花費的時間就越多。轉向定律源自 Fitts’ law，我們在我們的人機交互課程中討論過。）

盡可能抵制 dropdown 可以包含許多選項的誘惑。如果有許多選項，可以考慮替代方式，例如傳統鏈接的 HTML 列表或 mega menus，它們是二維的而不是線性的，有更簡單的滑鼠操作和更快選擇到內部目標選項的優勢。

Angie 使用下拉選單列出服務類別，要查看所有選項，必須向下滾動多次。且沒有滾動條，無法預測列表長度

4. Avoid dropdown boxes when typing may be faster

如果輸入比較快，避免使用下拉框。典型情況包括州或國家/地區列表，例如美國郵寄地址。對於使用者來說，簡單地輸入「NY」比從下拉選單中選擇一個狀態要快。這類有標準格式的選項，若讓使用者自由輸入，確實需要在後端進行數據驗證。但是，從易用性的角度來看，這通常是最好的方法。（這是我們的電子商務易用性指南之一，我們在結賬表單中觀察到了許多錯誤。）

Tinyprints 使用下拉選單更改購買的杯子數量，若直接輸入數字會更快。

5. Avoid dropdown boxes for data that is highly familiar to your users

避免使用下拉選單讓使用者輸入非常熟悉的數據，例如他們的出生年月日。這類輸入通常使用者的手指已經有習慣的操作手勢，且要在選單中找到這些選項很乏味，打破了以前的指導方針，並且增加了使用者的操作量。

6. Keep the menu label or description in view

當下拉選單打開時，保持選單標題或描述在介面中。選單標題提供了範圍和方向，以讓使用者作選擇。當選單打開時標題被遮擋或移除時，使用者必須回憶正在選擇的內容，才能採取行動。

Square - 當下拉選單打開時， 隱藏了「選擇業務類型」的標題。使用者需要回憶才能了解下拉選項中的上下文。 （我們通常也建議不要使用居中或右對齊的選項，左對齊更容易瀏覽。）

7. Keep global navigation options out of dropdown menus on desktop

使用大螢幕時，將全局導覽選項排除在下拉單之外。隱藏網站的主要類別導覽可能不利於使用者在任何網站上的操作。

Joann - 在其主要導覽中提供了一些鏈接，但大部分全局導覽都位於「部門」下拉選單中。這種設計選擇使導覽選項不易被發現。

8.Support keyboard input

在下拉選單中支持鍵盤輸入。下拉選單（包含 dropdown box 和 dropdown menu）不僅應該支持滑鼠輸入，也應該支持鍵盤輸入。
在下拉菜單（dropdown menu）中，訪問鍵應該讓使用者在不使用滑鼠的情況下，依然能夠快速選擇可見選項。
在下拉框（dropdown box）中，使用者應該能夠輸入一個字母，就快速找到到以該字母開頭的選項。

這些功能可以改善很長的下拉選單引起的一些問題，並且提高了盲人的可用性。

NN/g 結論

不久前，我們進行了一個小型使用者測試。在完成註冊頁面時，測試者必須在表單上輸入地址，表單上有選擇路及街道的下拉選單，及一格街道後詳細地址的輸入欄位。猜猜看我們發現什麼？
使用者在輸入欄位中打上完整的地址，後來發現需要用下拉選單選擇路及街道等，他不得不重新回到輸入欄位，刪除部分內容。

從這個小型的使用者測試發現，有時候僅對單個使用者進行測試，就足以說明一個觀點。當你看到這種混亂的操作，就會意識到使用「有用」的下拉選單，來節省使用者的鍵盤操作，可能帶來反效果。

在設計中遵循以上這些準則，來改善網站導覽與提高任務成功率吧！

個人經驗

當初會開始閱讀 Dropdown 相關文章是因為要製作公司 UI kit。將公司產品有使用到 Dropdown 的部分先整理出來，參考設計指南與同事討論後，將會使用到的各種形式列出，將之排序納入 UI kit 製作的清單。

將產品有使用到 Dropdown 的部分截圖整理，此圖僅示意部分內容

結語

NN/g 建議以達到使用者最佳體驗為出發點，而常常我們面臨的是時程、人力與系統準確度等問題，仍可能以下拉選單的方式達到目的。因此，設計師必須全面了解現況，綜合所有可能來做出最適合的設計決策。

最後，還是多一點事前的討論與詢問，才能少一點事後修改的痛苦啊！（雖然也不盡然 🤣）

謝謝你的閱讀！
如果喜歡這次的分享，請快樂的隨意👏👏吧！

延伸閱讀

Listboxes vs. Dropdown Lists