移動端下拉表單的更好選擇

時間:2017年7月16日 9:36 點擊:2075次 

在表單中使用下拉菜單看起來并不重要:它們在用戶界面上占用的空間不大,它們自動驗證輸入,所有瀏覽器和平臺都可以支持它們,它們實現起來容易且方便,用戶知道它們的好。

同時,根據 Luke Wroblewski 和一些人的說法,下拉菜單(或選擇)是最常被誤用的表格模式之一,“應該是最后的 UI”。

我們來看看一些限制和擔憂:

  • 在下拉列表中,只有點擊或按鍵才能打開它,可用選項是不可見。此外,表單的長度一見即可隱藏,即用戶無法預測下拉菜單是否包含 2 或 50 個元素。
  • 從下拉列表中選擇一個選項(特別是移動設備)是一個多步驟的過程:你必須點擊下拉菜單打開選項列表,然后滾動并掃描以選擇一個項目,然后關閉下拉列表。
  • 下拉菜單會讓設計師變懶:將所有可能的選項添加到下拉列表中是沒有任何優先級的(這與漢堡包菜單類似)是非常簡單的。
  • 更長的下拉列表,例如國家/地區選擇器可能是一個惡夢掃描,尤其是在通常無法進行鍵盤搜索的手機上。
  • 在一些移動屏幕的可見和可滾動的列表區域是很小的,滾動選項會使人不愉快:

(在 iOS 上,可見的選項數量是乍一看是驚人的低)

在許多情況下,有很多替代輸入控件可以為你更好地工作。
考慮選項的數量

對于二進制(開/關)的決定,下拉菜單是一個非常糟糕的選擇。你需要的是復選框或切換開關。

(如果你的下拉列表僅包含“是/否”或“開/關”選項,請改用簡單的開關)

對于少數互斥選項,建議使用單選按鈕或分段控件,以便無需打開列表,所有可用的選項都可以看到。

(分段控件同時顯示所選項和替代選項)

(可視選項的數量取決于屏幕寬度和選項標簽的長度,不建議使用超過 5 個項目)

對于大量指明的選項,當用戶知道他們正在尋找什么時,考慮“開始輸入…”解決方案,其中過濾選項列表顯示在第一個或兩個字母之后。

(不用滾動列表,讓用戶開始輸入,且僅顯示已過濾的選項)

對于大型和多樣化的列表,嘗試使用現有的用戶數據來優先該選項,并將用戶首選的最流行的選擇列出。這樣一來,有90%的用戶會立即找到自己的偏好,只有10%必須選擇“其他”,然后在下一個問題中指明。

(雖然“其他”不是一個優雅的解決方案,但這樣的優先級可能會改善大多數用戶的用戶體驗)

考慮預期的輸入

下拉列表的優點之一是用戶不用過多多輸入。但如果預期的輸入不是太長,并且經常被詢問(例如個人數據),則通常更容易鍵入,而不是從列表中選擇它:

(使用數字鍵盤在滾動設備上輸入誕生年份比滾動瀏覽長列表更容易)

總之,在移動設備的數字鍵盤上輸入數字值通常會更有效。

(盡管數字下拉列表的排序順序是清晰的,但它可能比滾動更容易鍵入)

如果驗證用戶輸入是非常重要,“開始輸入…”方法對使用輸入字段來過濾掉可用的選項是很有用的。

(當舉出 USA 的狀態時,只輸入一個字母可以很好的篩選出來)

當元素的排序順序不清晰時,在選項列表中的搜索能力是非常有幫助。

(貨幣的排序順序或許對用戶不清晰,所以確保他們的搜索名稱和貨幣代碼)

同樣的技術應該適用于美好的的國家列表:而不是列出 200 多個項目,讓用戶開始輸入并盡快過濾結果。

對于表示數量(如乘客人數或購物車中的物品數量)的預估值,步進器允許用戶通過一次點擊或按鍵即可快速增加或減少數量。

(對于位于數字范圍內的的非預估值和預估值,考慮使用滑塊。)

(顯示最小值和最大值的數值范圍有助于理解上下文)

選擇多個選擇菜單的日期可能是一個不堪的體驗,所以進入就近的日期,總是使用日期選擇器。(但不要用它來輸入出生日期?。?/p>

考慮設計更智能的下拉列表

下拉菜單不應該總被避免。你會發現當選擇菜單是最合適的輸入控件時,只需要使其盡可能的用戶友好。

  • 使用有意義的標簽:即使列表打開,菜單標簽的描述也應該是清晰可見的。在選擇菜單中,使用描述性標簽,告訴用戶他們正在選擇什么(即“選擇類型”而不是“請選擇”)。
  • 以合理的方式分配物品:基于用戶數據,嘗試將最受歡迎的選擇放在列表的頂部?;蛘?,甚至以默認的方式預先選擇最流行的。
  • 使用智能默認值:手機和瀏覽器知道用戶的位置,日期和許多其他信息。使用該數據為每個用戶預先選擇最可能的選項。
  • 減少字段數讓計算機進行工作:如果用戶輸入郵政編碼,則計算機就知道城市和州——不需任何要求。如果用戶輸入信用卡卡號,則計算機就知道它是萬事達卡——不需任何要求。
  • 考慮使用 API:使用 Facebook 的Connect 按鈕注冊比填寫注冊表更容易。使用 Paypal 付款比輸入你的信用卡數據更容易。
日韩av在线未18禁止观看_老司机午夜精品视频在线观_深夜爽爽动态图无遮无挡