替代大型数据集的单个<select multiple =“multiple”>元素</select>

Question

我经常在如何在我的应用程序中解决此问题时发生冲突。我使用了许多选项，包括：

• 通用多选 - 这是我最不喜欢和最少使用的选项。我觉得可用性很糟糕，一次简单的误点击会搞砸你所有的努力工作。
• “自动完成”解决方案 - 缺点：用户必须具备拼写能力才能找到他们需要的该死的值，不会暴露于他们可能没有想到的值，以及子串搜索的潜在后端性能。
• 两个相邻的多重选择，带有添加/删除按钮 - 下行：仍然“丑陋”imo
• 任意数量的精彩javascript解决方案（http://livepipe.net/control/selectmultiple，http://loopj.com/2009/04/25/jquery-plugin-tokenizing-autocomplete-text-entry/等）

我未能找到针对此问题的最佳方法进行的任何可用性研究。当你从<10个元素到100个元素时，这些替代解决方案中的许多都是很好的，但是当你从一百个元素变成一个元素时，它们可能完全崩溃。

你们用什么？你为什么用它？你能指点我的可用性案例研究吗？是否有尚未发现的“神奇”解决方案？

Answer 1

我的建议是不要使用通用的多选控件。我在整个职业生涯中一直在运行用户体验研究，每次我用多个选择控件测试网站时，它总是会给最终用户带来问题。

我前一段时间做了一个帖子：Multiple Select Controls Must Evolve or Die

但是，无论如何，听起来你知道这一点。你真正的问题是“我该用什么呢？”那么，要回答这个问题，你必须弄清楚用户的任务是否倾向于召回或认可。

（i）通过召回，我的意思是用户在看到列表之前就知道他们想要选择什么。在这种情况下，如果您提供自动完成工具（例如在Facebook上非常有效地使用），对他们来说可能是最简单的。当选项列表也不可能长到在页面上呈现时（例如，位置名称等），该解决方案甚至更好。

（ii）继续识别 - 这意味着一项任务涉及用户在看到选项列表之前不知道他们想要选择什么。在这种情况下，自动完成不会给他们任何提示。一系列复选框会更有帮助。如果您可以一次显示所有内容，这对用户很有帮助。滚动DIV更紧凑，但它们为用户创建了内存负载 - 即一旦它们向下滚动，他们必须记住他们选择了哪些项目。当用户保存表单并稍后再返回时，这一点尤其明显。

所以 - 考虑一下你的问题，你需要一个召回或认可的解决方案吗？

Answer 2

不幸的是，我不能指出你的任何案例研究，但我可以告诉你的是，我个人更喜欢大小的复选框数组，在二到五列布局中。当然，它们占用了大量空间，但它们非常精确且简单。

我认为对于任何控件 - 无论是基本的多选，双列表，复选框数组还是任何其他解决方案 - 一旦超过某个项目的阈值，对用户来说就会遇到挑战无论如何。

Answer 3

查看Dojo Toolkit's DataGrid控件。它是迄今为止最灵活和最强大的，并支持多行选择。它还具有内置的辅助功能。

Answer 4

ExtJS库为您的问题提供了一些非常好的解决方案。有一堆用户扩展用于整齐的组合和多选框。

如果您想要一个组合选择列表，您可以添加查询搜索和分页，并使用简单的模板设计生成的下拉菜单，如下例所示：

<强> http://extjs.com/deploy/dev/examples/form/forum-search.html

这是一个很好的多选，按照你似乎描述的风格：

<强> *（main_site）/学习/扩展：Multiselect2

您可以在此处找到所有用户扩展程序：

<强> *（main_site）/学习/ Ext_Extensions

另外，您可以轻松地将其包含在现有网页中，而无需额外的额外开销。 ExtJS的完整堆栈非常大，但是为了只获得你需要的JS文件，它们提供了一个很好的构建工具来抓取你需要的那些部分：

<强> *（main_site）/产品/ ExtJS的/生成/

只是一个警告：ExtJS刚刚发布了3.0，但我不确定用户扩展是否已升级。 “论坛搜索”是从一个3.0的例子中获取的，所以它可以与最新和最好的一起工作。

（*）显然新用户只能发布一个链接......