【DDC译文】下拉菜单更好的替代选择(移动端)

使用下拉菜单的形式似乎已是司空见惯:它不占用太多空间的界面,它自动验证输入,所有浏览器和平台都支持它,实现下拉菜单非常的方便且容易,用户对他们也习以为常了。

与此同时,根据Luke Wroblewski和被多人提及的原则:下拉菜单应该是最后的选择的说法,那么下拉菜单却是最经常被误用的。

让我们看一看下拉菜单的局限性和令人担忧的地方:

  • 下拉菜控件的可用是选项不可见的,直到你点或点打开它。同 在第一眼看到列表,列表的度是藏的,即用无法预测一个下拉菜是包含250个元素。
  • 从下拉列表中选择一个选项,(尤其是在移动设备上)是一个多步程:你必下拉菜打开选项列表,然后滚动浏览项目并选择一个,然后关下拉。
  • 下拉菜可以让设计师懒惰:设计师很容易就把所有可能的选项不分任何一起放到下拉列表里(似于汉堡菜单的做法)。
  • 像国家地区选择这种很的下拉菜单,用眼睛扫描起来简直是噩梦,尤其是在键盘搜索通常是不可用的移端。
  • 在可、可滚动但面很小的屏幕上滚动选择想要的选项是一件非常痛苦的事情。

iOS上,第一眼可选项少的惊人

1

但是好消息是这里有大量的很棒的可替代下拉菜单控件的选择,能为你在不同的情况下所用到。

1

考虑选项的数

若只有两个选项(例如开/关),那么使用下拉菜单就是一个错误的选择。这里你需要用复选框(CheckBox)或者用切换开关(toggle switch)。

如果你的下拉菜单仅仅包含是/否、开/关这样的选项,那么就用开关控件来替代它

1

对于个数少且互斥的选项 ,建议使用单选按钮(radio buttons)或分段控件(segmented),使所有可用的选项第一眼可见,且无需打开列表。

分段控件(Segmented controls)可以一次性展示出所有的可选项

可见选项的数量取决于屏幕宽度和选项标签的长度,但不要超过5

1

当用户确切地知道他们在寻找什么时,对于大量确定的选项,考虑使用请输入…”这样的解决方案,其中筛选选项列表在输入第一个或两个字母之后显示。

用让用户来输入文字来筛选选项的方式替代滑动下拉菜单

1

对于大型和多样的列表,尝试使用现有的用户数据来排列优先级,只列出几个用户常选的选项。这种方式有一个好处就是90%的用户会立即发现自己偏好的选择项,只有10%的人选择立即其他然后跳到指定的下一个问题。

虽然其他不适一个优雅的解决方案,但是优先级排序的方式能够提高大多用户的体验

1

考虑预填

下拉列表的好处之一是用户不必输入很多内容。然而,如果预期的输入不是太长并且经常被问到(例如个人信息),通常用输入的方式是比较容易的,而不是从列表中选择:

在移动设备上输入生日的年份,使用数字键盘比滑动长列表要容易的多

1

通常,在移动设备上输入数值会比数字下拉列表效率高。

尽管数字下拉列表是清晰的,但是输入数值依然比滑动选择要方便。

1

如果验证用户输入的内容很重要,输入内容用于筛选可用选项时,请输入……”这个方法可能是有用的。

在罗列出美国各洲的时候,只需输入一个字母就能大大简化原本很长的列表。

1

当列表元素的排序顺序不清晰时,在选项列表中搜索的能力特别有用。

不清楚货币代码排列顺序的用户,能确保他们能在名称和货币代码间进行搜索

1

同样的技术也应该应用于国家列表上面:使用让用户尽快开始键入并过滤结果来替代列出200多个条目的方案。

对于表示数量的非连续值(例如乘客数量或购物车中的商品数量),步进器(stepper)允许用户点击来快速增加或减少数值。

对于连续数值或在某个范围内的数值,请考虑使用滑块。

显示最大值和最小值的范围有助于用户理解

1

选择当下最近日期,使用多个选择菜单选择可能是一次非常痛苦的体验,因此我们选择使用日期选择器(date picker)。(但千万别用它输入出生日期)

设计更智能的下拉菜

1

虽然本文一直在告诫你不要使用下拉菜单,但如果在某些场景下,你确实认为让用户在下拉菜单中选择是一种最合适的输入方式,也没关系,不过你要进来让下拉菜单更友好一些。

  • 使用有意标签:当下拉菜打开,菜单标题和描述也需要保留且清晰可。在选择中使用一个描述性标签,告正在选择什么(即选择类型而不是请选择)。
  • 按合理的方式排序条目:基于用数据尝试将最流行的选项放在列表的部。甚至选择用户最常选项认选项
  • 使用智能默认值:手机和浏览器知道用的位置、日期等大量的信息。利用已知的数据每个用户选择最有可能的选项
  • 减少用需要填写的内容,让计算机分担一些工作:如果用户输编码,毫无疑问计算机已识别编码所属的国家和城市。如果用户输入信用卡号算机也可以自动识别这是Master信用卡 。不需要自己填写。
  • 使用API:使用第三方的方式注册比填写注册表要容易。PayPal支付比入你的信用卡信息更容易。

如果你想知道更多关于下拉菜单的设计,请看Golden Krishna  Eric Campbell SXSW的分享. https://www.youtube.com/watch?v=hcYAHix-riY(请自备梯子)

 

原作者:Zoltan Kollin
原文地址:https://medium.com/@kollinz/dropdown-alternatives-for-better-mobile-forms-53e40d641b53