选择多条记录的良好用户界面的例子[英] Examples of good UI for selecting multiple records

本文是小编为大家收集整理的关于选择多条记录的良好用户界面的例子的处理/解决方法,可以参考本文帮助大家快速定位并解决问题,中文翻译不准确的可切换到English标签页查看源文。

问题描述

我目前正在重新访问我的基于Windows软件的区域,并考虑将关系从1-> m更改为m-> m.结果,我需要调整UI以适应选择多个相关记录.

有很多方法可以处理这种情况,但通常很笨拙.示例包括所有项目的两窗格列表,以及所选项目的列表,或所有适用的记录列表和一个复选框.

就我而言,可能有很多可能关联的记录(数以万计的记录),因此我可能需要包括某种搜索机制.

我不是在寻找一个艰难而快速的答案 - 我可以很容易地实施功能,我想看看这里是否有人提出过(或看到)任何人不管是基于网络的,Windows,Mac,Unix等,都可以做这种事情.

图像或链接将不胜感激!

编辑:这是我正在考虑的示例:

 sample search ui 1

推荐答案

我喜欢Stackoverflow将许多标签与许多问题相关联的方式:

 alt text

项目显示为用户类型

  1. 您显然从要将多个项目关联的记录开始.

  2. 输入搜索时显示匹配项(无需按"搜索")

  3. 用户选择所需的记录(排序将是不错的.因此,使用"标签相关性".例如,键入'a'带来Java而不是ASP,因为Java比ASP有更多的问题,在您的情况下,相关性可能是用户名)

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

  5. 如果许多记录(5+)正在填写输入字段,则将它们移至半注册区域(不是这样的问题,因为它只有5个标签,但在您的情况下,需要类似"有趣的标签"功能)

 alt text

关联的项目移至"刚性"区域

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

  • 最后,当用户与关联结束时,单击保存或取消按钮.

这种方法不需要在"搜索"或"添加其他"上分散他们的注意力,从而使用户推开"搜索"或"添加其他",从而使他们的效率提高了效率.

另外,如果您让用户抓住鼠标在输入UI时单击某些内容的效率较低(我认为有一种称为希克定律

您看到这种方法几乎已经想到了您的想法,但是添加一些设施使用户更快乐(如果用户喜欢这种方法并希望在系统的其他部分中使用它)

其他推荐答案

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

那里有各种选择的方法.从可用性的角度来看,最好只使用每种情况使用一种方法.然后,当用户看到它时,他们会知道该怎么做.

各种选择技术:

  1. 下拉列表 - 明显的单个选择.
  2. 打开列表Multi Select-例如:一个显示10或20行且具有滚动条的多行文本框
  3. 下拉列表您选择的位置,然后点击并'添加'链接或按钮添加多个选择
  4. 列表移动 - 您有两个开放列表,并在左列表中提供所有可用的选择,然后选择几个,然后单击一个按钮将您的选择移至右边列表.
  5. 复选框 - 仅适用于多种选择可能性的几种选择.
  6. 项目列表,每个项目旁边都有一个"添加"按钮 - 适用于简短列表

您已经说过,您将有成千上万的选择,因此消除1和5.实际上,成千上万的人将消除所有这些选择,因为在列表中的可用性并不能很好地扩展. .

如果您可以指望用户过滤列表,例如在示例中,则6可能是合适的.如果您想到Facebook图片标签的工作原理,我认为对于长列表而言,它相当有效:背景:Facebook图片标记是一种机制,可让您分配一个或多个人到图像的部分 - 即"标记"它们.<<<<<<<<<<<<<<

当您选择标记图像(即"单个项目")并希望将其他项目(人)与之相关联时,会弹出一个对话框.它包含您过去使用过的前6个左右名称,以及一个文本框,您可以在其中开始输入要使用的人的名字.当您键入时,列表会动态更改,以减少仅包含您输入字母序列的人的数量.这对于大列表非常有效,但是它确实依靠用户输入来过滤.它还将依靠使用脚本来根据用户的输入智能减少列表.

对于您的应用程序,它将依靠用户对每个关联执行此步骤,因为我假设其他项目都不会具有相似的名称!

这是Facebook标记应用程序的图像: >

其他推荐答案

实时过滤记录时,您键入的搜索功能可能是一个好主意.另一个可能是对记录进行分类.

由于可能有很多记录,在这种情况下,最好的选择可能是有一个单独的区域,该区域显示您已经选择的东西,因此用户不必浏览选择区域即可找到什么他们已经有.

本文地址:https://www.itbaoku.cn/post/597430.html

问题描述

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.

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.

Images or links to them would be appreciated!

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

Sample Search UI 1

推荐答案

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

alt text

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" )

  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 )

  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 )

alt text

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.

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 )

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 )

其他推荐答案

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.

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. open list multi select - eg: a multiline textbox that shows 10 or 20 lines and has a scroll bar
  3. dropdown list where you select then hit and 'add' link or button to add multiple selects
  4. 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.
  5. Check boxes - good for just a few choices of multiple selection possibilities.
  6. List of items, each with an 'add' button next to them - good for short lists

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.

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.

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.

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

其他推荐答案

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.