it-swarm.cn

在长列表中选择项目子集的最佳方法

我们的一位客户希望我们构建一个Web应用程序,以共享有关他出版的杂志的信息。杂志的每个版本都包含可变数量的广告客户。这些广告商来自中央的广告商库。该库目前包含大约150个广告客户。杂志的每个版本都包含这些广告客户的子集(大约70-80)。

我们的客户希望我们为他提供一种方法,将他的150名名单中的70-80名广告客户添加到一本杂志的版本中。它需要尽可能快,尽可能简单和直观。

在这里什么是理想的解决方案?我在考虑下面图像中的某些内容。

  1. 可用广告商列表。
  2. 所选广告商列表。广告商具有删除按钮。
  3. 左侧列表中具有针对广告客户的自动建议的文本框。 <Enter>将广告商从左侧列表中删除,并将其添加到右侧列表中。文本框被清除并保持焦点。

我的同事建议为每个广告客户拖放或仅列出一个带有复选框的列表,但是这些方法迫使用户进行大量搜索和单击。使用我的方法,用户可以继续输入。

对于这种情况还有其他建议吗?

My idea to transfer items between lists

36
Kristof Claes

您的设计Kristof已经相当不错了。您已经钉上了非常重要的内容,例如停止此鼠标和键盘来回移动动作-这将破坏体验。我和你一起拖放-uk!

我对您的想法做了一些改进:

alt text

  • 显然,在左侧项目上单击鼠标会将其添加到右侧。
  • 您希望文本过滤器为Google样式-即。多字,部分匹配。如在搜索输入中一样,“ rce bm”将与图中所示的第三项匹配。这很容易做到,并为用户提供了一种功能强大,直观的名称查找方法。二流过滤(例如字符串开头)只会使用户感到沮丧,并使他们不再使用它。由于过滤对于接口至关重要,因此可以更好地工作。
  • 为用户节省时间的另一种方法(如其他人建议的那样)将是在“选定的广告商”侧拥有部分完成的列表。如果您认为“前10名最常使用”的广告商很有可能会获得70%或更高的点击率,那么是否也可以将其直接载入负载列表中?最坏的情况是,用户必须删除前十名中的一两个(每次单击1个鼠标),而他们想要保留的其余7项已保存以进行搜索。调整数字,以减轻用户的工作负担。

记住:yo可以为用户做更多的工作;为了减少他们的点击,查找和搜索,您的界面将变得更快,更容易和更讨人喜欢。

34
cottsak

我在一家发行杂志的公司工作,所以我对您的领域有点熟悉。

我想广告商的列表在各期之间变化不大,因此我会默认选择上一期的广告商。

由于您只有150个广告客户,并且大约一半将被选中,因此我不会为搜索而烦恼。我将从一个简单的复选框列表开始,看看它的效果如何。确保所选的项目在视觉上是不同的(例如,使其变粗),以便于扫描。

7
Patrick McElhaney

我的第一篇文章,所以请保持柔和,我将做同样的事情:-)

尽管这里有一些好主意,但我认为其中没有一个完全符合原始海报的要求:

“我们的客户希望我们提供一种方法,让他从150个列表中添加70-80个广告客户”-Kristof Claes

我当然同意许多巧妙的想法,在这些想法中,用户可以过滤结果并将其添加到Selected Advertisers列表中,我们仍然需要一种方法来批量添加大约70个广告客户进行选择。尽管过滤的想法非常好,但它只会导致产生一个类似于任何电子邮件应用程序的应用程序,在该应用程序中,用户在“收件人”字段中指定了收件人。想象一下,必须手动添加70个收件人!

理想情况下,我们不需要以下工作流程:

  1. 要搜索的词组类型
  2. (结果出现)
  3. 使用Enter键输入自动完成的项目,或从出现的列表中选择一个或多个项目
  4. 重复步骤1到3,直到已添加大约70个广告客户

我从许多真正了解他们的知识的人那里看到一些不错的帖子,但是我认为有些人可能偏离主题了,而有些侧重于实现技术而不是良好的“用户界面设计”心理。

我对该线程的最后想法是–也许某种将“组”添加到选择中的机制,因为这肯定会减少重复相同的工作流程70次。我见过的某些软件将以“轮循”方式选择广告客户。当然,这可能有助于某些选择。此外,您可能会一直希望添加预定义的组,可能是您的付费最高的广告客户或“新”产品广告的列表。

现在,有些话题不对了...

马蒂,我看到您提到Apple,尤其是iPhone-

...我们可以从iPhone中学到...关键在于做出合理的假设,最终会为用户做出决定...

前几天谈话后,您不太确定这是什么意思。不仅触摸设备可能不易使用,而且Apple通常都有制造软件的历史,这使您想知道他们对用户群的看法。一个很好的例子–如果您想重命名您的iPad设备上,首先您需要将其连接到另外具有iTunes软件的计算机上,为什么我不能简单地进入General设置iPad是任何人的猜测。

最好的用户界面应采用“归纳用户界面设计”的风格,而不是“演绎用户界面设计”或换句话说“试验与错误”的风格。触摸设备属于后一类。让我解释:

如果Apple像iTouch,iPhone中那样流行的触摸设备,现在iPad有了触摸软件,如果有的话, “演绎用户界面”的石器时代。就像按钮上设计得很糟糕的标志符号一样,让用户思考–“我的天哪,这是什么意思?”,凝视着在触摸设备上,使用两个手指可以使用户放大或缩小尚不明显;或者,我最喜欢的-按住手指和图标两秒钟左右会使设备进入“删除模式”。

以同样的方式,一个设计不当的图标将归类于–“ -我不知道这意味着什么,但是在我第一次使用它之后,我通常会记得它的作用 ”,许多触摸设备属于“演绎用户界面”类别,因为用户必须通过“ 玩它”来推断程序可以实际执行的操作,从而降低程序的即时可用性。

继续努力!

MickyD的随机想法

6
MickyD

整个广告客户列表应在其上方进行过滤(基本将您的“ 3”放在“ 1”之上,并让“ 3”动态影响“ 1”的内容):

  • 搜索(即时缩小列表范围)
  • (“上次使用”,“时尚”,“电子产品”等)

注意-如果搜索功能足够强大,则只能使用一个控件,因此搜索“时尚”将返回名称中具有“时尚”或被标记为“时尚”类别的所有广告客户。
“上次使用”可以是一个复选框。

主要好处:
即时缩小列表范围可让您一起选择所有相关项目并将其移动。

示例:键入“电子产品”,获取所有与电子产品相关的广告商的列表,将其全部选中(使用鼠标,Ctrl + A或其他任何方法),然后将它们立即移至右侧列表。

4
Dan Barak

我有这个可能相关的用户界面。
https://dl.dropbox.com/u/2965258/foodSelector/foodHierarchy.html
如果广告主以某种方式组织类别,并且用户知道每个类别属于哪个类别,则可以使用。
这是纯鼠标的UI,每个广告客户都需要单击一次。
可以使用键盘进行操作,但是菜单关闭并且必须为每个选择再次展开。可以通过不关闭Enter菜单来解决此问题。

3
Juan Lanus

我必须同意 Micky Duncan :我认为搜索/分组/过滤根本不适合此任务。

您不想搜索并从大列表中选择一些项目。您要选择列表中所有项目的大约一半。如果用户必须选择一半的项目,则用户将要确保他已经选择了所有候选者并且没有错过任何人。因此,工作流程更类似于以下内容:

假设您有150个广告客户清单。您会从上到下浏览列表,确定每个人“我想要这个广告客户?”然后给它打勾或删除线,最后确定您已经评估了所有人。

所以设计应该是这样的:

Selector mockup

焦点位于中间列表的顶部,用户可以使用左右箭头键放弃该项目,或将其放入所选列表。因此,他可以根据广告客户的需要,通过向左或向右按​​来快速浏览整个列表,并确保他已经给每个人一些想法,并且没有错过任何想法。

2
Falco

看起来您的解决方案是一个很好的解决方案。我将删除左侧列表,因为它实际上并没有添加任何信息(这只是一个很长的列表,并且很难确定在按Enter键之后某些信息刚刚从列表中消失了),并且只提供了具有自动完成功能的搜索字段( (虽然应该在该字段中添加一个下拉菜单,以便用户仍然可以看到可用的选项),并添加一个大的“将广告客户添加到列表”按钮,以防您的用户不知道按Enter。

尽快进入原型阶段(使用模拟数据),然后与您的客户端进行演示并使其运行。尽快获取反馈至关重要,因为他们会经常使用反馈,因此他们需要对此感到满意。

1
Rahul

我同意 MickyDPatrick 提出的观点。这完全取决于选择广告商的方式。客户将使用UI来选择应在特定问题中发布的广告商,还是客户已经具有在特定问题中包含广告商的列表。无论哪种情况,我都不认为过滤是最好的解决方案。

如果客户使用UI来选择广告商,则只显示一个处于选中/未选中状态的列表应该会更好。正如帕特里克(Patrick)所写,使所选状态脱颖而出是个好主意。也有可能使未选中状态看起来更亮,而不仅仅是加粗选中状态。客户使用向上键/向下键以及使用空格(或类似键)进行检查/取消选中来在列表中移动。

如果客户的清单中有特定问题的广告客户,则第一种方法应该是检查该清单是否可以数字形式接收并自动导入。如果不可能,则可能以某种方式对列表进行排序,然后UI应以相同的方式对广告商进行排序。

第三种选择是,客户要么在问题中寻找广告商,要么他的列表未排序。在这种情况下,具有过滤器功能是有意义的。

关键是,在不了解目标和任务周围情况的情况下,很难提供良好的解决方案。

0
Robert Höglund

我将使用两个列表和两个按钮。用户可以通过单击鼠标在左侧列表中标记单个元素,双击将元素移至右侧列表。

他可以按住Shift键单击,单击标记范围,然后使用[>]按钮将所有标记的元素移到右侧。使用Ctrl可以将单个元素从已标记状态切换为未标记状态,然后再次返回。

Ctrl-a将标记所有元素。所有这些都是从其他程序接口知道的。

按字母顺序排序的元素将使查找条目变得容易,如果需要滚动,则第一个字符可用作导航到该条目的热键。

> afoo                    ifoo
bfoo                      jfoo
cfoo                      kfoo
> dfoo                    lfoo
> efoo                    mfoo
> ffoo                    
gfoo
hfoo
          [ < ]    [ > ]  

{a,d,e,f} foo现在被标记在左侧。用户使用[>]将它们向右移动。

这样的界面非常快速,易于使用并且易于理解。也许您可以添加工具提示文本或将按钮命名为“移至所选项目列表”和“从所选项目列表中删除”。

移至另一个列表后,必须重新使用此列表。

0
user unknown