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

本文由 @SKYUI 翻譯發佈於人人都是產品經理，原文作者為 Zoltan Kollin，原標題為：《移動端下拉表單的更好選擇》。未經許可，禁止轉載。

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

同時，根據 Luke Wroblewski 和一些人的說法，下拉菜單（或選擇）是最常被誤用的表格模式之一，「應該是最後的 UI」。

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

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

（在 iOS 上，可見的選項數量是乍一看是驚人的低）

在許多情況下，有很多替代輸入控制項可以為你更好地工作。

考慮選項的數量

對於二進位（開/關）的決定，下拉菜單是一個非常糟糕的選擇。你需要的是複選框或切換開關。

（如果你的下拉列表僅包含「是/否」或「開/關」選項，請改用簡單的開關）

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

（分段控制項同時顯示所選項和替代選項）

（可視選項的數量取決於屏幕寬度和選項標籤的長度，不建議使用超過 5 個項目）

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

（不用滾動列表，讓用戶開始輸入，且僅顯示已過濾的選項）

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

（雖然「其他」不是一個優雅的解決方案，但這樣的優先順序可能會改善大多數用戶的用戶體驗）

考慮預期的輸入

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

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

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

（儘管數字下拉列表的排序順序是清晰的，但它可能比滾動更容易鍵入）

如果驗證用戶輸入是非常重要，「開始輸入…」方法對使用輸入欄位來過濾掉可用的選項是很有用的。

（當舉出 USA 的狀態時，只輸入一個字母可以很好的篩選出來）

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

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

同樣的技術應該適用於美好的的國家列表：而不是列出 200 多個項目，讓用戶開始輸入並儘快過濾結果。

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

（對於位於數字範圍內的的非預估值和預估值，考慮使用滑塊。）

（顯示最小值和最大值的數值範圍有助於理解上下文）

選擇多個選擇菜單的日期可能是一個不堪的體驗，所以進入就近的日期，總是使用日期選擇器。（但不要用它來輸入出生日期！）

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

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

• 使用有意義的標籤

  ：即使列表打開，菜單標籤的描述也應該是清晰可見的。在選擇菜單中，使用描述性標籤，告訴用戶他們正在選擇什麼（即「選擇類型」而不是「請選擇」）。

• 以合理的方式分配物品

  ：基於用戶數據，嘗試將最受歡迎的選擇放在列表的頂部。或者，甚至以默認的方式預先選擇最流行的。

• 使用智能默認值

  ：手機和瀏覽器知道用戶的位置，日期和許多其他信息。使用該數據為每個用戶預先選擇最可能的選項。

• 減少欄位數讓計算機進行工作

  ：如果用戶輸入郵政編碼，則計算機就知道城市和州——不需任何要求。如果用戶輸入信用卡卡號，則計算機就知道它是萬事達卡——不需任何要求。

• 考慮使用 API

  ：使用 Facebook 的Connect 按鈕註冊比填寫註冊表更容易。使用 Paypal 付款比輸入你的信用卡數據更容易。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！