謹慎使用下拉選單
阿恆
Jakob Nielsen 有一篇文章討論下拉選單作為用戶介面應注意的地方,文章寫於 2000 年,最近他針對滾輪滑鼠對下拉選單使用性的影響,補強了這一篇文章,對用戶介面有興趣的朋友,這是一篇不可多得的好文。
Jakob Nielsen 認同下拉選單是網頁設計中一個很有用的工具,可是由於設計人員對它的濫用和誤用,它有限的互動性經常引起使用性的問題,有時甚至對用戶做成混亂。以下是下拉選單經常出現的地方:
- 命令菜單──執行用戶所選的命令
- 導航菜單──帶領用戶到其他頁面
- 填寫表格──填寫表格時從多個選項中選擇一項
- 選擇特性──在一個包含多個選項的菜單中選擇一項
以上只有最後一項符合下拉選單的傳統定義,其他用法(特別是命令菜單)與下拉選單的設計原意差異頗大,命令菜單應該是一支菜單棒,雖然 Mac 和 Windows 有其他實作命令菜單的方式,但總不會把它弄成一個下拉選單,「Mac 人機互動介面指引」第 87 頁甚至明確寫著:「不要用下拉選單來選擇命令。」
展望未來
將來的瀏覽器肯定支援更多介面工具,至少比 1980 年代 Mac 提供的工具多,更多介面工具和更豐富的詞彙表示針對每一種情況設計師都有專屬的工具,避免了在相同情況下不同的設計師使用不同的工具,造成用戶的混淆。
不幸的是,短時間內也不可能有突破性的瀏覽器出現,即使我們有了更豐富的介面工具,由於瀏覽器緩慢的滲透率,我也要花兩年時間才會推薦這些新工具。
所以在可見的將來,我們仍然要跟具備多面性、令人混淆的下拉選單糾纏下去。
應該避免的情況
下拉選單有它的好處,首先它節省屏幕的空間,它也避免用戶輸入錯誤的資料,因為它們只會顯示合法的資料,最後儘管它不是一個令人滿意的介面工具,它好歹也算是標準的工具,當用戶見到它時知道怎樣操作它。
雖然具備這些優點,但若果我們減少使用它,網頁的可用性將會提高,以下是一些應該避免使用下拉選單的情況:
- 互動的菜單:當用戶在一個菜單選了一個選項,同一個頁面中另一個菜單的內容會自動改變。用戶對於選項突然出現又消失會感到很混亂,想像一下你要找的選項是否會顯示出來,完全被另一個介面工具控制著,那是多麼令人沮喪的事。
- 非常長的命令菜單:一個長得需要上下捲動的菜單,沒有把所有可供選用的選項同時呈現在眼前。這樣長的命令菜單應該用一般的 HTML 超連結羅列出來。
- 州名/省名簡稱菜單:這種菜單在輸入地址的表格中經常見到。用戶用鍵盤輸入 NY 比在一長串州名中點選 NY 快得多,雖然鍵盤輸入的資料需要在伺服器端進行檢驗校對,但是從可用性的角度看這種方法仍是較為可取的,事實上有報告指出用戶在下拉式的州名菜單中經常選錯項目。
- 用戶很熟悉的資料:用戶的出生年份、月份等都屬於這類資料。輸入這種資料對用戶來說可說是本能的事,強迫他們打破習慣,使用非傳統的方法輸入這些資料只會增加他們的負擔,也增加犯錯的機會。
滾輪滑鼠的影響
(2006 年新增)
現時大部分用家都使用配備滾輪的滑鼠,當你在一個下拉選單中點選了一個選項,然後使用滾輪移到頁面下面的地方,大多數情況下你已經不小心改變了你的選項,很多用戶在不知情下呈交了變更後的表格。
若果用戶需要在一個很長的表格中輸入資料,這種情況特別容易發生,例如在網上訂購機票,或者設定貨品的送貨日期。
不妨跟你公司的客戶服務部驗證一下,他們是否經常收到客戶投訴他們輸入的送貨日期或者訂票日期「神秘地」變成一個較後的日子,消耗公司的人力和資源來糾正這些錯誤是頗昂貴的,而這些錯誤正是由於在表格中使用下拉選單所引致。嘗試把這些下拉選單改成鍵盤輸入,你可能會發現支援熱線的工作量大為降低,客戶的滿意程度也會上升。