如何正確設(shè)計下拉菜單?

在表單中使用下拉菜單有很多優(yōu)點(diǎn):

1. 它們在UI上占用的空間不多;

2. 支持自動驗證輸入;

3. 所有瀏覽器和平臺都支持它們;

4.它們實現(xiàn)起來既方便又便宜,用戶熟悉;

同時,雖然下菜單是最常被濫用的表單控件之一,但是也是公認(rèn)的“應(yīng)該是不得已的選項”


下面我們來看看一些局限性和關(guān)注點(diǎn):

1. 使用下拉菜單時,在點(diǎn)擊展開之前,無法一眼看出菜單選項,因此用戶無法預(yù)知里面是2個還是50個選項。

2.從下拉列表中選擇一個選項(特別是在移動設(shè)備上)步驟繁瑣:

(1)您必須點(diǎn)擊下拉列表以打開選項列表

(2)滾動并瀏覽項目以選擇一個項目

(3)然后關(guān)閉下拉菜單

3. 設(shè)計師設(shè)計下拉菜單更輕松:只需將所有可能的選項添加到下拉列表中,不需要考慮優(yōu)先級(類似漢堡菜那樣)

4. 較長的下拉菜單(如國家/地區(qū)選擇器)尋找起來會很麻煩,特別是在沒有搜索功能的移動設(shè)備上。

5. 在列表中可見和可滾動區(qū)域很小,某些移動屏幕上滾動瀏覽選項會不方便。


不過除了下拉菜單之外,還有很多代替輸入控件可以更符合具體的場景使用。

一 考慮選項的數(shù)量


1. 例如:下表中示例1(開/關(guān))決策,使用下拉菜單是一個非常糟糕的選擇。應(yīng)該使用一個復(fù)選框或切換開關(guān)。

示例1


2.如果選項較少時,建議使用單選按鈕或分段控件,以便所有選項一次顯示,而無需打開列表。

示例2-1


示例2-2


3. 如果選項數(shù)量多時,并且當(dāng)用戶確切地知道他們在找什么時,請考慮一個“?開始輸入...?”解決方案,而不是滾動列表,允許用戶輸入,只顯示過濾的選項。節(jié)省翻看列表的時間。

示例3


4. 對于數(shù)量多且多樣化的列表,可以使用現(xiàn)有的用戶數(shù)據(jù)來確定選項的優(yōu)先順序,并僅列出用戶的前幾個最受歡迎的選項。這樣一來,有90%的用戶可以立即找到自己的偏好,只有10%的用戶需要選擇其他,然后在下一個問題中選擇。盡管“其它”看起來不是非常完美,但這種方式可以提升大部分用戶的體驗。


考慮什么場景中需要用戶輸入

1. 下拉列表的好處之一是用戶不必輸入太多內(nèi)容。但是,如果不需要輸入太長并且經(jīng)常被詢問(例如個人信息),那么通常輸入更容易,而不是從列表中選擇;

使用數(shù)字鍵盤在移動設(shè)備上輸入出生年份比通過滾動長列表更容易


2. 一般來說,在手機(jī)上輸入數(shù)字通常比使用菜單選擇數(shù)字更加方便。

即使數(shù)字下拉列表的排序順序清晰,但鍵入仍然比滾動更容易


3. 如果需要驗證用戶的輸入,那么在輸入字段用于搜索,一邊打字一邊過濾出可能的選項,讓用戶選擇。

列出美國的州時,只需輸入一個字母即可過濾列表


4. 當(dāng)選項的排序順序不明確時,在選項列表中搜索的功能尤其有用。

貨幣的排序順序可能不清楚,因此確保他們可以搜索名稱和貨幣代碼

例如:國家列表:與其一次列出超過兩百個國家名稱,還不如通過輸入和過濾來幫助用戶


5.對于表示數(shù)量精確值(例如乘客購物車中的物品數(shù)量),可以允許用戶通過單擊快速增加或減少數(shù)量。

6. 對于位于刻度上的不精確數(shù)值,可以使用滑塊。


7. 用多個選擇菜單選擇一個日期可能是一個非常痛苦的經(jīng)歷,所以為了輸入最近的日期,需要使用日期選擇器。(但用它來輸入較遠(yuǎn)的日期是不方便的)


三、如何讓下拉菜單更加智能

不言而喻,不應(yīng)該總是避免下拉菜單。當(dāng)選擇菜單是最適合的輸入控件時,請根據(jù)以上情況的考量,設(shè)計的更加方便。

使用有意義的文案:即使列表打開,仍然可以看到。在選擇菜單中,使用描述性文案告訴用戶他們正在選擇什么(即“?選擇類別”而不是“?請選擇?”)。

以合理的方式對項目進(jìn)行排序:根據(jù)用戶數(shù)據(jù),嘗試將最受歡迎的選項放在列表頂部。甚至默認(rèn)選擇最常選的一個。

先為用戶默認(rèn)選擇:手機(jī)和瀏覽器都有辦法知道用戶的位置,日期和其他信息。使用該數(shù)據(jù)為每個用戶預(yù)先選擇最可能的選項。

減少字段數(shù)量并讓計算機(jī)完成工作:如果用戶輸入郵政編碼,計算機(jī)就可以知道城市和州 - 無需詢問。如果用戶輸入信用卡號碼,計算機(jī)就已經(jīng)知道信用卡信息 - 不需要問。

考慮使用API:?使用微信、QQ注冊比填寫注冊表更容易。用Paypal支付比輸入信用卡數(shù)據(jù)要容易得多。

原文鏈接

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容