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

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

但是有没有其他的方式为列表重新sorting的用户界面?

还有其他两种sorting方法(除了你提到的),我已经看到哪些工作很好。

点击移动

用于订购Gallerynetworking相册中的项目的方法对于订购照片非常有效,对于任何可以表示为可点击元素sorting组的集合,它都可以正常工作:

  • 将您的物品列表显示为可点击的元素。
  • 点击一个元素“select”它,它被突出显示,表示它被选中。
  • 点击另一个项目将所选项目移动到点击项目之前的位置。
  • 重复,直到所有的项目是在所需的顺序。
  • 在列表的末尾显示一个虚拟项目,用于将项目移动到最后。

这比拖放更容易,因为它需要较less的灵活性,而且您不必在按住鼠标button的同时找出想要“放下”项目的位置。

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

提供订单号码

Netflix和我一起使用的一些内部应用程序使用。 如果您的用户具体具体了解数字顺序应该是什么(在使用内部应用程序中的指令步骤列表时使用),这种方式效果最佳。

  • 出示您的项目列表每行一个。
  • 在显示订单号的每个项目旁边提供一个文本input框,从1开始。
  • 用户根据需要更改文本字段中的订单号。
  • 如果多个项目被赋予相同的订单号码,则它们彼此相邻放置。
  • 提供一个button,用于在JavaScript中“应用”sorting,以便用户不必提交整个页面即可查看重新排列的列表。 这使得增量工作变得容易。

编辑:一些额外的想法拖放 。 你以前可能已经使用过这些,但是有一些东西可以让拖放变得更加宽容,也更容易使用:

  • 突出显示项目在下降时出现的区域。 例如,显示两个现有项目之间突出的水平线,如果项目被丢弃,项目将被插入。
  • Ghost可拖动的项目,因为它被拖动,这是显而易见的东西被移动,而不是使用通用的“拖动”光标。 如果被拖动的项目如果透明地显示在彼此之上,则这仍然是最好的。
  • 确保可拖放的目标区域足够大。 较大的区域可以帮助那些在协调中遇到麻烦的人。

我们发现,对于非技术人员来说,拖放是非常直观的。 我们已经探索了向上箭头这个工作,但也可以是繁琐的,因为你需要保持点击上下,它会导致大量的stream量。

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

当列表中的每个项目占用大量空间时,这种方式很有效,如果每个列表项只有一行,就会导致界面混乱。 在我们的例子中,每个项目都是半行或更多的文本。 我们还在每个项目之前/之后添加项目button以允许插入。

Survey Monkey也使用这种模式,并启发了我们所做的一些事情。

一些想法 – 非常多的想法,而不是执行结束,但…

1 – 提供向上和向下的箭头和拖放,并监视哪些更受欢迎,哪种types的用户使用哪些等,然后从那里量身定制一旦你有一些数据

2 – 添加一个随机生成顺序的“随机”button可能是无用的,取决于您的应用程序可能很有趣

3 – 在每个项目的旁边添加一个“显示顺序”字段,并允许用户操作它(但是确保你有一些代码来自动更新其余的数字,当一个变化)我个人认为这可能是非常令人困惑,但对于一些用户来说,它可能工作

4 – 而不是拖放到位,用户拖动到一个新的列表

5 – 对于一个非常简单的版本,有一个“最喜欢的”checkbox,然后让该列表首先显示collections夹(按字母顺序或其他)

6 – 有团体 – 你给一个项目分配一个团体号码,所有的团体号码首先出现,然后是第二组等

希望这个随机散漫是有用的,如果我想到更多的东西,我会回来…

您可以使用jQuery UI Sortables的示例进行拖放实验。 为了让非技术用户或新用户明白,可以使用诸如手柄或箭头之类的视觉线索,也可以使用hover时的工具提示来提示拖动元素。

你甚至可以提供一个animation的gif来展示这个动作。

只要用户学习如何做到这一点,我认为这是订购清单最简单的方法。

另一种方法是在每个项目旁边提供一个小文本input,这样用户可以自己input数字顺序; 然后他们点击一个button重新排列一次。 (我只看到这个用于存储项目顺序的网站,例如Netflix队列或Livejournal链接。)

1) 点击移动的变化将涉及具有单独的目标列表,其中用户select其物品将移动到的插槽,然后单击原始项目以移动它。

例如,在下图中,用户已经将“E”放在重新sorting的列表的头部,并且已经select了第三个插槽以供他们的下一个select。 他们的下一步是select旧列表中的哪个项目进入新列表中的第三个插槽。 (星号的排是一个微弱的尝试,表明插槽3突出显示或select。)

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

点击列表中的一个项目选中它,并突出显示列表中的原始插槽,该列performance在成为目标。 再次单击该项目将其返回到原始插槽。

新的列表还应该显示某种指标,以显示它具有可select的区域,也许在其插槽中具有不显眼的(低不透明度)编号button或一些其他信息可供性。

2)另一种方法是允许用户在原始位置和所需位置之间画线。

无论select什么方法,这个过程都不​​需要喋喋不休:没有任何理由不能把所有的东西都做到客户端(可以select保存和提交对服务器的修改)。

通过点击标题进行sorting非常受欢迎。 虽然也许只被认为是对实际列表视图的重新sorting。

实现复制/粘贴样式function? 这意味着您可以从列表中取出一个项目,然后select另一个项目,然后单击“粘贴”或CTRL + V。 这很直观,可以轻松地处理大型列表。

您可以轻松实现多项select来移动大块相邻的项目。

networkingstream量会很低(只有一个或两个请求)。

你需要确保“粘贴”是一致的。 即粘贴总是插入选定的项目之上。

看看Checkvist更多的灵感。

您也可以使用箭头键上下移动。

我实际上认为iphone / itouch在移动应用程序图标时确实做得很好。

如果您还没有看到它,请看这里: http : //www.youtube.com/watch?v = qnXoGnUU6uI

“摇动”图标是一个非常好的视觉提示,某些东西是可移动的/可拖动的。

所以我会build议这个方法拖放。 点击并按住一个项目可以把它放在'可移动模式',这将表示它晃动(或一些更容易编码视觉提示)。 然后拖放将以正常的方式工作。

在JavaScript中实现这一点当然是挑战…

还有一件事要考虑 – 大多数人犯了可用性与可学性混淆的错误。 想想这个应用程序的用户是谁(他们会定期使用它,学习如何使用它,或者他们是公共Web用户,他们可能不经常使用它,而不会被教会如何使用它) – 它可能会给你一个不同的答案应该是什么解决scheme。

对我来说,执行列表元素的拖放(即在列表本身内)是最好的方法。

您不仅可以向用户提供他们的列表(列表在他们眼前重组)的直接构想,而且他们也很容易理解移动机制。 这是最简单的方法,让您的用户以最短的次数下单。

顺便说一句,预见列表可能比less数几个元素长,除了DnD方法外,还可以提供asynchronous方式来排列列表:给用户赋予每个条目一个sorting号的能力,然后单击“订单“button。 以一种智能和正确的方式处理用户的input,这可能会导致更长的列表编辑速度。

我正在考虑“搬到这里”:

  1. 让所有项目都可以通过checkbox来select
  2. 让所有项目都有一个button或图标,意思是“移动到这里”
  3. 当点击“移动到这里”时,所有select的项目将以现有顺序移动到该项目

这里的边缘情况是当项目应该移动到列表的任何一端。 解决这个问题的方法之一是将所有选定的项目移动到目标之前,并在最后保留一个特殊的button/图标,以在那里移动select。

您可以像Google一样为SearchWiki显示“上”和“删除”button。 现在大多数人至less有一些经验。 大多数人只会在“Upping”的select上感到困扰。 如果他们不喜欢某个东西,并且想要降低它的音量,那么在上面的“删除”button的帮助下从列表中删除将会更容易

将鼠标hover在某个元素上时,可以显示叠加层。 这个覆盖显示你4个箭头(N / E / S / W),你可以点击并相应地移动元素。

如果您正在尝试通过Facebook和picasaweb的照片分组function在网格中添加项目,那么这是处理该问题的唯一方法

如果您有3列,每列有一个项目列表,点击任何项目将移动项目向左或向右,中间列可以显示左侧或右侧的选项。 您仍然可以使用该function的典型function进行拖放或sorting。