華文網

移動介面!為什麼下拉式功能表應該是最後的選擇?

@-朱宇軒 :使用下拉式功能表的形式似乎已是司空見慣:它不佔用太多空間的介面,它自動驗證輸入,所有流覽器和平臺都支持它,實現下拉式功能表非常的方便且容易,用戶都覺得它使用起來很好。

與此同時,根據Luke Wroblewski和被多人提及的原則:“下拉式功能表應該是最後的選擇”的說法,那麼下拉式功能表卻是最經常被誤用的。

讓我們看一看下拉式功能表的局限性和令人擔憂的地方:

下拉式功能表控制項的可用是選項不可見的,直到你點擊或點擊打開它。同時, 在第一眼看到列表時,列表的長度是隱藏的,即用戶無法預測一個下拉式功能表是包含2個還是50個元素。

從下拉清單中選擇一個選項,(尤其是在移動設備上)是一個多步驟的過程:你必須點擊下拉式功能表打開選項清單,然後滾動和流覽項目並選擇一個,然後關閉下拉。

下拉式功能表可以讓設計師懶惰:設計師很容易就把所有可能的選項不分任何優先順序一起放到下拉清單裡(這很類似於漢堡菜單的做法)。

像國家地區選擇這種很長的下拉式功能表,

用眼睛掃描起來簡直是噩夢,尤其是在鍵盤搜索通常是不可用的移動端。

在可見、可滾動但面積很小的螢幕上滾動去選擇想要的選項是一件非常痛苦的事情。

△ 在iOS系統上,第一眼可見的選項少的驚人。

但是好消息是這裡有大量的很棒的可替代下拉式功能表控制項的選擇,

能為你在不同的情況下所用到。

考慮選項的數量

若只有兩個選項(例如開/關),那麼使用下拉式功能表就是一個錯誤的選擇。這裡你需要用核取方塊(CheckBox)或者用切換開關(toggle switch)。

如果你的下拉式功能表僅僅包含是/否、開/關這樣的選項,那麼就用開關控制項來替代它。

對於個數少且互斥的選項 ,建議使用選項按鈕(radio buttons)或分段控制項(segmented),使所有可用的選項第一眼可見,

且無需打開列表。

分段控制項(Segmentedcontrols)可以一次性展示出所有的可選項。

可見選項的數量取決於螢幕寬度和選項標籤的長度,但不要超過5項

當用戶確切地知道他們在尋找什麼時,對於大量確定的選項,考慮使用“請輸入…”這樣的解決方案,其中篩選選項清單在輸入第一個或兩個字母之後顯示。

用讓使用者來輸入文字來篩選選項的方式替代滑動下拉式功能表。

對於大型和多樣的列表,嘗試使用現有的使用者資料來排列優先順序,只列出幾個使用者常選的選項。這種方式有一個好處就是90%的用戶會立即發現自己偏好的選擇項,只有10%的人選擇立即“其他”然後跳到指定的下一個問題。

雖然“其他”不適一個優雅的解決方案,但是優先順序排序的方式能夠提高大多使用者的體驗

考慮預填寫

下拉清單的好處之一是使用者不必輸入很多內容。然而,如果預期的輸入不是太長並且經常被問到(例如個人資訊),通常用輸入的方式是比較容易的,而不是從列表中選擇:

在移動設備上輸入生日的年份,使用數位鍵盤比滑動長清單要容易的多

通常,在移動設備上輸入數值會比數位下拉清單效率高。

儘管數字下拉清單是清晰的,但是輸入數值依然比滑動選擇要方便。

如果驗證使用者輸入的內容很重要,輸入內容用於篩選可用選項時,“請輸入……”這個方法可能是有用的。

當選擇美國時,輸入一個字母就可以篩選出來。

當清單元素的排序順序不清晰時,在選項清單中搜索的能力特別有用。

不清楚貨幣代碼排列順序的使用者,能確保他們能在名稱和貨幣代碼間進行搜索。

同樣的技術也應該應用於國家列表上面:使用讓用戶儘快開始鍵入並過濾結果來替代列出200多個條目的方案。

對於表示數量的謹慎的數值選擇(例如乘客數量或購物車中的商品數量),步進器(stepper)允許用戶點擊來快速增加或減少數值。

對於刻度範圍上的非謹慎數值,請考慮使用滑塊。

顯示最大值和最小值的範圍有助於用戶理解。

選擇當下最近日期,使用多個選擇功能表選擇可能是一次非常痛苦的體驗,因此我們選擇使用日期選擇器(date picker)。(但千萬別用它輸入出生日期)

設計更智慧的下拉式功能表

通常下拉式功能表不是總要被避免使用的。當你發現選擇功能表是最合適的輸入控制項,這很好,那就讓它對用戶盡可能的友好。

使用有意義的標籤:當功能表打開時功能表標籤或描述也應該清晰和可用。在“選擇”功能表中使用一個描述性標籤,告訴用戶他們正在選擇什麼(即“選擇類型”而不是“請選擇”)。

按合理的方式排序條目:基於使用者資料嘗試將最流行的選項放在清單的頂部。甚至預先選擇使用者最常選的選項作為預設選項。

使用智慧預設值:手機和流覽器知道用戶的位置、日期等大量的資訊。利用已知的資料預先為每個使用者選擇最有可能的選項。

減少欄位的數量,讓電腦做一些工作:如果使用者輸入郵遞區號,毫無疑問電腦已經知道這個郵遞區號所屬的國家和城市。如果使用者輸入信用卡號碼,電腦也毫無疑問的已經知道這是MasterCard 。

考慮使用API:使用協力廠商的方式註冊比填寫註冊表要容易。PayPal支付比輸入你的信用卡資訊更容易。

------

原文地址:medium

譯文地址:zhihu

只有10%的人選擇立即“其他”然後跳到指定的下一個問題。

雖然“其他”不適一個優雅的解決方案,但是優先順序排序的方式能夠提高大多使用者的體驗

考慮預填寫

下拉清單的好處之一是使用者不必輸入很多內容。然而,如果預期的輸入不是太長並且經常被問到(例如個人資訊),通常用輸入的方式是比較容易的,而不是從列表中選擇:

在移動設備上輸入生日的年份,使用數位鍵盤比滑動長清單要容易的多

通常,在移動設備上輸入數值會比數位下拉清單效率高。

儘管數字下拉清單是清晰的,但是輸入數值依然比滑動選擇要方便。

如果驗證使用者輸入的內容很重要,輸入內容用於篩選可用選項時,“請輸入……”這個方法可能是有用的。

當選擇美國時,輸入一個字母就可以篩選出來。

當清單元素的排序順序不清晰時,在選項清單中搜索的能力特別有用。

不清楚貨幣代碼排列順序的使用者,能確保他們能在名稱和貨幣代碼間進行搜索。

同樣的技術也應該應用於國家列表上面:使用讓用戶儘快開始鍵入並過濾結果來替代列出200多個條目的方案。

對於表示數量的謹慎的數值選擇(例如乘客數量或購物車中的商品數量),步進器(stepper)允許用戶點擊來快速增加或減少數值。

對於刻度範圍上的非謹慎數值,請考慮使用滑塊。

顯示最大值和最小值的範圍有助於用戶理解。

選擇當下最近日期,使用多個選擇功能表選擇可能是一次非常痛苦的體驗,因此我們選擇使用日期選擇器(date picker)。(但千萬別用它輸入出生日期)

設計更智慧的下拉式功能表

通常下拉式功能表不是總要被避免使用的。當你發現選擇功能表是最合適的輸入控制項,這很好,那就讓它對用戶盡可能的友好。

使用有意義的標籤:當功能表打開時功能表標籤或描述也應該清晰和可用。在“選擇”功能表中使用一個描述性標籤,告訴用戶他們正在選擇什麼(即“選擇類型”而不是“請選擇”)。

按合理的方式排序條目:基於使用者資料嘗試將最流行的選項放在清單的頂部。甚至預先選擇使用者最常選的選項作為預設選項。

使用智慧預設值:手機和流覽器知道用戶的位置、日期等大量的資訊。利用已知的資料預先為每個使用者選擇最有可能的選項。

減少欄位的數量,讓電腦做一些工作:如果使用者輸入郵遞區號,毫無疑問電腦已經知道這個郵遞區號所屬的國家和城市。如果使用者輸入信用卡號碼,電腦也毫無疑問的已經知道這是MasterCard 。

考慮使用API:使用協力廠商的方式註冊比填寫註冊表要容易。PayPal支付比輸入你的信用卡資訊更容易。

------

原文地址:medium

譯文地址:zhihu