用于选择多个记录的良好UI示例

I'm currently revisiting an area of my Windows-based software and looking at changing the relationship from 1->M to M->M. As a result, I need to adjust the UI to accommodate selecting multiple related records.

目前，我正在重新访问基于windows的软件的一个区域，并考虑将关系从1->M更改为M->M。因此，我需要调整UI以适应选择多个相关记录。

There are a lot of ways to handle this that are common, but usually pretty clunky. Examples include the two-pane list of all items, and list of selected items, or a list of all records and a checkbox beside each one that applies.

有很多方法可以解决这个问题，它们很常见，但通常都很笨拙。示例包括所有项的双窗格列表和所选项的列表，或所有记录的列表和每个应用项旁边的复选框。

In my case, there may be an awful lot (in the tens of thousands) of records that could be associated, so I'll probably need to include some kind of search mechanism.

在我的例子中，可能有很多(成千上万)的记录可以关联，所以我可能需要包含某种搜索机制。

I'm not looking for a hard and fast answer -- I can implement something pretty easily that's functional, I'm looking to see if anyone here has come up with (or seen) any great UIs for doing this kind of thing, whether it's web based, Windows, Mac, Unix, whatever.

我并不是在寻找一个又硬又快的答案——我可以很容易地实现一些功能上的东西，我想看看这里是否有人提出(或看到)任何伟大的ui来做这类事情，无论是基于web的、Windows的、Mac的、Unix的，等等。

Images or links to them would be appreciated!

图片或链接到它们将被欣赏!

Edit: here's an example of what I'm considering:

编辑:这是我正在考虑的一个例子:

7 个解决方案

#1

I like the way * relates many tags with many questions:

我喜欢*有很多标签和很多问题:

alt text http://img11.imageshack.us/img11/7062/imagen9n.png

alt文本http://img11.imageshack.us/img11/7062/imagen9n.png

_{Items are displayed as user types}

项目显示为用户类型

1. You start obviously with the record you want to associate multiple items with.

   显然，您首先要与多个项关联的记录。

2. As you type the search displays the matches ( no need to press on "Search" )

   输入搜索时，将显示匹配项(不需要按“search”)

3. The user select the desired record ( Sorting would be nice. SO uses "tag relevance". For instance typing 'a' brings Java rather than asp because Java has more questions than asp, in your case relevance may be the user name )

   用户选择所需的记录(排序会很好。所以使用“标签关联”。例如输入“a”会带来Java而不是asp因为Java比asp有更多的问题，在你的例子中相关性可能是用户名)

4. The system creates the relationship ( in memory )

   系统创建关系(在内存中)

5. If a number of records ( 5+ ) are filling the input field, they are moved into a semi-regid area ( not a SO problem because it only has 5 tag withing a single question, but in your case something like the "interesting tags" feature would be needed )

   如果许多记录(5+)正在填充输入字段，那么它们将被移动到一个半注册区域(不是那么大的问题，因为在一个问题中只有5个标记，但是在您的情况下，需要“有趣的标记”特性)

alt text http://img7.imageshack.us/img7/8753/imagen12p.png

alt文本http://img7.imageshack.us/img7/8753/imagen12p.png

_{Associated items are moved to a "rigid" area}

关联的项目被移动到“刚性”区域

Of course in an ordered manner ( using a table )

当然是以有序的方式(使用表格)

• Finally when the user end with the association it clicks SAVE or CANCEL buttons.
• 最后，当用户以关联结束时，它单击SAVE或CANCEL按钮。

This approach has more efficiency by not needing to have the user press on "search" or "add other" which distracts them from what they're doing, it is being said it interrupts its train of thought.

这种方法的效率更高，因为它不需要用户按下“搜索”或“添加其他”按钮，而这些按钮会分散用户的注意力。

Also, if you make the user grab the mouse to click on something while they are typing the UI is less efficient ( I think there is something called the Hick's law about that, but quite frankly I may be wrong )

另外，如果你让用户在输入UI的时候抓着鼠标点击某样东西就没那么有效了(我认为有一些东西叫做Hick定律，但坦白说，我可能是错的)

As you see this approach is pretty much already what you have in mind, but adding some facilities to make the user happier ( The danger would be if the user loves this approach and wants it in other parts of the system )

正如您所看到的，这种方法基本上已经是您所想的了，但是添加一些工具使用户更高兴(危险的是，如果用户喜欢这种方法，并希望在系统的其他部分使用这种方法)

#2

It's an interesting and fairly common UI problem, how to efficiently select items. I'm assuming that you are intending on having the user first select a single item and that the mechanism you are interested is how to choose other items that get related to this first single item.

如何有效地选择项目是一个非常有趣且相当常见的UI问题。我假设您打算让用户首先选择一个项目，您感兴趣的机制是如何选择与第一个项目相关的其他项目。

There ares various select methods. From a usability standpoint, it would be preferable to just have ONE method used for each scenario. Then when the user sees it, they will know what to do.

这里有各种选择方法。从可用性的角度来看，最好只为每个场景使用一个方法。当用户看到它时，他们就知道该怎么做了。

various selection techniques:

不同的选择技巧:

1. dropdown list - obvious for single selects.
2. 下拉列表—对于单个选择来说很明显。
3. open list multi select - eg: a multiline textbox that shows 10 or 20 lines and has a scroll bar
4. 打开列表多选择-例如:显示10或20行的多行文本框，并有一个滚动条
5. dropdown list where you select then hit and 'add' link or button to add multiple selects
6. 下拉列表，选择然后点击“添加”链接或按钮添加多个选择
7. list moving - where you have two open lists, with all the choices available in the left list, you select a few then click a button to move your selection to the right list.
8. 列表移动——你有两个打开的列表，所有的选项都在左边的列表中，你选择几个，然后点击一个按钮将你的选择移到右边的列表中。
9. Check boxes - good for just a few choices of multiple selection possibilities.
10. 复选框——只适用于几种选择的可能性。
11. List of items, each with an 'add' button next to them - good for short lists
12. 项目列表，每个项目旁边都有一个“添加”按钮——适合简短的列表

You've said that you'll have thousands of possible choices, so that eliminates 1 and 5. Really, thousands will eliminate all of them, as the usability doesn't scale well with more than a few hundred in the list.

你说过你会有上千种可能的选择，所以这就排除了1和5。实际上，成千上万的人将会消除所有这些，因为在这个列表中超过几百人的可用性并不能很好地扩展。

If you can count on the user to filter the list, like in your example, then 6 may be suitable. If you think of how Facebook picture tagging works, I think that it fairly efficient for long lists: background: Facebook picture tagging is a mechanism that allows you to assign one or more people to portions of an image - ie 'tag' them.

如果您可以依靠用户来过滤列表，比如在您的示例中，那么6可能是合适的。如果你想想Facebook的图片标签是如何工作的，我认为它对于长列表是相当有效的:背景:Facebook的图片标签是一种机制，允许你分配一个或多个人到图片的一部分——即“标签”他们。

When you select an image to tag (ie the 'single item') and wish to relate other items(people) to it, A dialog box pops up. It contains the top 6 or so names that you've used in the past, and a textbox where you can start to type the person's name you wish to use. As you type, the list dynamically changes to reduce the number of people to only those who contain the letter sequence you've typed. This works very well for large lists, but it does rely on the user typing to filter. It also will rely on use of scripting to intelligently reduce the list based on the user's input.

当您选择要标记的图像(即“单个项目”)并希望将其他项目(人员)与它关联时，会弹出一个对话框。它包含你过去使用过的前6个名字，以及一个文本框，你可以在其中输入你想要使用的人的名字。当您键入时，列表将动态地更改，以将人员数量减少到只包含您键入的字母序列的人员。这对于大型列表非常有效，但它确实依赖于用户输入进行筛选。它还将依靠脚本的使用来智能地减少基于用户输入的列表。

For your application it would rely on the user performing this step once for each association, as I'm assuming that the other items won't all have similar names!

对于您的应用程序，它将依赖于为每个关联执行此步骤的用户，因为我假定其他项不会都有类似的名称!

Here's an image of the Facebook tagging application: http://screencast.com/t/9MPlpJQJzBQ

这是Facebook标签应用程序的图片:http://screencast.com/t/9MPlpJQJzBQ

#3

A search feature that filters records in real time as you type would probably be a good idea to include. Another would be the possibility to sort the records.

搜索功能可以在输入时实时过滤记录，这可能是个不错的选择。另一种可能是对记录进行排序。

Since there may be a lot of records, the best choice in this case is probably to have a separate area which displays what you have already chosen, so that the user won't have to scroll around the selection areas to find what they already have.

由于可能有很多记录，所以在这种情况下，最好的选择可能是有一个单独的区域来显示您已经选择的内容，这样用户就不必在选择区域内滚动才能找到它们已经拥有的内容。

#4

self-explanatory GUI http://img25.imageshack.us/img25/8568/28666917.png

自解释的GUI http://img25.imageshack.us/img25/8568/28666917.png

Link to the original image

链接到原始图像

Another thing is, that in my opinion your problem is not about selecting multiple records, but filtering those tens of thousands of records. M->M association can be implemented in variety of way, but the tricky part is to provide a convenient and logical way to browse/search the huge amount of data.

另一个问题是，在我看来，您的问题不是选择多个记录，而是过滤那些成千上万的记录。M->M关联的实现方式多种多样，但棘手的部分是提供一种方便、逻辑的方式来浏览/搜索海量的数据。

#5

I'd suggest not having to click add more to be able to search. The warning at the right is nice, but IMHO it should only say the search displays results as the user types.

我建议不需要点击add more才能进行搜索。右边的警告很好，但是IMHO应该只说搜索显示结果为用户类型。

Sorting a column (maybe along with the search) would also be a nice functionality. I'd suggesting it being done by clicking on the header of the table, with some icon indicating whether the sort is ascending or descending.

排序一个列(可能与搜索一起)也是一个不错的功能。我建议通过单击表的页眉来完成，并使用一些图标来指示排序是升序还是降序。

I'd suggest also the search to do an approximate string matching in case there are no or few results. It is so annoying not being able to find something you don't remember exactly.

我还建议搜索进行一个近似的字符串匹配，以防没有或很少的结果。找不到你不太记得的东西真是让人讨厌。

Finally, for testing the first impression (though not the functionality itself), I'd suggest uploading it to the 5 second test and see what you get.

最后，为了测试第一印象(虽然不是功能本身)，我建议将它上传到5秒的测试中，看看会得到什么。

#6

I think that what you have mocked up is a pretty good way to do it. When you think about the tags-to-posts relationship on a blog (or on SO even), that is many-to-many and it is usually implemented very similarly: for one post, you search for (or, since they are simple strings, directly enter) as many tags as you want to associate with it. I can't really think of any many-to-many relationships I encounter often, although I know there are probably many...

我认为你模仿的是一个很好的方法。当您考虑到博客上的标签到贴子的关系(或者甚至)，它是多对多的，并且它的实现通常非常类似:对于一个贴子，您搜索(或者，由于它们是简单的字符串，直接输入)尽可能多的标签。我真的想不出我经常遇到的多对多的关系，虽然我知道可能有很多……

#7

There are a number of important questions to consider - how many records will typically be used (as opposed to available for association)? Will there be a large number of records on one side of the association (given the switch from 1->M, this seems likely)?

有许多重要的问题需要考虑——通常会使用多少条记录(而不是用于关联)?在关联的一端是否会有大量记录(考虑到从1->M切换，这似乎是可能的)?

If one of the quantities of records is usually very small (<10, I'd say), call this the LHS (because it usually is), then the best way to associate may be to allow searches for LHS and RHS items, then drag-and-drop them onto a list - LHS items onto the list proper; RHS items into the existing LHS items. That way, it's intuitive to specify a relation between to items. You could also add other options like "associate with all", or a grouping pen so you can assign several records to several other records - nothing is tedious like having to do 15 drags-and-drops of the same record.

如果一个记录的数量通常是非常小的(< 10,我想说),称之为lh(因为它通常是),那么最好的方法将可能允许搜索lh和RHS物品,然后拖拽到一个列表- lh物品到适当的;RHS项目进入现有的LHS项目。通过这种方式，可以直观地指定与项之间的关系。您还可以添加其他选项，如“关联所有”或分组笔，以便您可以将多个记录分配给其他几个记录——没有什么比必须执行15个相同记录的拖放操作更乏味的了。

In fact, I think that's the most crucial bit of any M->M UI design - minimize repetition. Doing the same thing over for 100s of records (remember that if "nobody will ever...", they will) is unfun, especially if it's complex. I know this seems to contradict my earlier advice, but I don't think it does - design for the typical use case, but make sure that the atypical ones do not make the program unusable.

事实上，我认为这是任何M->M UI设计中最关键的一点——最小化重复。重复做同样的事情，重复做100多个记录(记住，如果“没有人会永远……”(他们会)是无趣的，特别是如果它是复杂的。我知道这似乎与我之前的建议相矛盾，但我不认为它是这样的——为典型的用例设计，但是要确保非典型的用例不会使程序不可用。