用于重新排序列表项的用户界面

我有一个项目列表作为Web应用程序的一部分.问题是用户如何操纵列表中的项目顺序(而不是列表排序顺序).典型的方法是使用箭头按钮向上或向下移动项目.另一种方式是拖放.

但是有没有其他方法可以用于列表重新排序的用户界面？

还有另外两种排序方法(除了你提到的那些)我已经看到哪种工作非常好.

单击"移动"

用于在Gallery网络相册中订购商品的方法非常适合订购照片,并且对于任何可以表示为可点击元素的排序组的集合,它也应该同样适用:

将您的项目列表显示为可点击元素.

单击一个元素"选择"它,它会突出显示以指示它已被选中.

单击另一个项目会将所选项目移动到所单击项目之前的位置.

重复,直到所有项目都按所需顺序排列.

列表末尾显示一个虚拟项目,用于将项目移动到最后.

这比使用拖放更容易使用,因为它需要更少的灵活性,并且您无需在确定要"放下"项目的位置时按住鼠标按钮.

该方法可以很容易地扩展到允许选择多个项目(通过移位点击或类似),然后可以以相同的方式放置在新位置.

提供订单号

由Netflix和我使用的一些内部应用程序使用.如果您的用户具体确切了解数字顺序应该是什么(在我们的内部应用程序中使用指令步骤列表时使用),则此方法效果最佳.

每行显示一个项目列表.

在显示订单号的每个项目旁边提供一个文本输入框,从1开始.

用户根据需要更改文本字段中的订单号.

如果多个项目具有相同的订单编号,则它们彼此相邻放置.

提供一个按钮以在JavaScript中"应用"排序,这样用户就不必提交整个页面来查看重新排列的列表.这使得以增量方式工作变得容易.

编辑:关于拖放的几个额外的想法.您之前或者之前可能已经使用过这些,但有一些东西可以让拖放更宽容,更容易使用:

突出显示项目在放下时将出现的区域.例如,在两个现有项目之间显示一条突出的水平线,如果该项目被删除,该项目将被插入.

Ghost拖动的可拖动项目,以便显示正在移动的内容,而不是使用通用的"拖动"光标.如果被拖动的项目在透明的情况下彼此叠加显示时,这种方法效果最佳.

确保可拖放的目标区域足够大.较大的区域可以帮助那些在所需协调方面遇到问题的人.

我们发现拖拽对于非技术人员来说可能是反直觉的.我们已经探索了向上箭头,它可以工作,但也可能很麻烦,因为你需要继续点击上下,这会导致大量的流量.

我们探索过的另一个范例是"移动"按钮,因此当您单击列表中的每个项目都有一个"移动项目"按钮时,会在列表中的每个项目之前和之后添加新按钮,以便将项目移动到任何位置.

当列表中的每个项占用大量空间时,这很有效,如果每个列表项只是一行,则可能导致杂乱的界面.在我们的例子中,每个项目都有六行或更多.我们还在每个项目之前/之后添加项目按钮以允许插入.

Survey Monkey也使用了这种模式,并启发了我们的一些工作.

一些想法 - 很多关于想法而不是实现尽管......

1 - 提供上下箭头和拖放,并监控哪个更受欢迎,哪种类型的用户使用哪个等,然后在你有一些数据后从那里定制

2 - 添加一个随机生成订单的"随机"按钮 - 可能没用,根据您的应用程序可能很有趣

3 - 每个项目的侧面添加"显示顺序"字段,允许用户对其进行操作(但要确保你有一些代码来自动更新,当一个改变号码的其余部分)我个人认为,这可能是很令人困惑,但对某些用户来说,它可能会起作用

4 - 让用户拖动到新列表,而不是拖放到位

5 - 对于一个非常简单的版本,有一个"收藏夹"复选框,然后让列表首先显示收藏夹(按字母顺序或其他内容)

6 - 拥有组 - 您为一个项目分配一个组号,所有组首先出现,然后是组2等

希望这种随机漫游有用,如果我想到更多,我会回来......

您可以使用jQuery UI Sortables的示例来试验拖放.为了使非技术用户或新用户显而易见,您可以使用视觉提示(如手柄或箭头)以及悬停时的工具提示来建议拖动元素.

你甚至可以提供演示手势的动画gif.

一旦用户学会了如何做到这一点,我认为这是订购列表最简单的方法.

另一种方法是在每个项目旁边提供一个小文本输入,这样用户就可以自己输入数字排序; 然后他们点击一个按钮立即重新排序.(我只在存储项目顺序的网站上看到过这种情况,例如Netflix队列或Livejournal链接.)

1)Click to Move的变体将涉及具有单独的目标列表,其中用户选择其项目将移动到的槽,然后单击原始项目以移动它.

例如,在下图中,用户已将"E"放在重新排序列表的开头,并为下一个选择选择了第3个插槽.他们的下一步是选择旧列表中的哪个项目进入新列表中的第3个插槽.(星号行是一种微弱的尝试,表明突出显示或选择了第3个插槽.)

  old       new
 -----     -----
|  A  |   |  E  |
|  D  |   |     |
|  C  |   |*****|
|     |   |     |
|  B  |   |     |
 -----     -----

单击新列表中的项目将选中它并突出显示旧列表中的原始插槽,该列表现在是目标.再次单击该项目会将其返回到原始插槽.

在新的名单也应该显示某种指标表明它具有可选择的区域,或许不显眼(低透明度)在其插槽编号的按钮或其他一些信息启示.

2)另一种方法是允许用户在原始位置和期望位置之间绘制线条.

无论选择哪种方法,这个过程都不​​需要繁琐:没有理由不能在客户端完成这一切(可以选择保存并提交对服务器的更改).