it-swarm.cn

带有很多按钮的表格/表格

考虑到我有一个网格,其中包含许多用户可以执行的操作的按钮。看起来像这样。

Button grid

我在系统中有许多类似的网格。我想知道人们是否应该这样做。

  1. 照原样
  2. 一键式显示各种选项的下拉列表。这将意味着行高较低。
  3. 还有别的.

这是用户不经常使用的屏幕,平均每天可能只使用一次。速度(1次点击2次点击)可能不是主要问题。

23
Craig

Youtube Studio视频编辑器中也存在类似情况,可以帮助您获得想法,混合图标,下拉选项菜单和交互性。

  • 每行都有两个图标:左侧的select图标和视图带有选项的绿色图标
  • 悬停时会出现一个在YouTube中观看图标和三点选项菜单
  • 单击三个点选项菜单显示五个选项:
    • 编辑
    • 获取链接
    • 促进
    • 下载
    • 删除

enter image description here

30
Danielillo

从可访问性的角度来看,我强烈建议您每个表单元格只有一个交互式元素。它极大地改善了使用屏幕阅读器浏览表格的能力。在我的工作地点,我们有一张类似的桌子。由于单元格及其表头中的所有各种内容,某些单元格将被屏幕阅读器大声读取10-20秒。

6
Tobias Christian Jensen

如是:丑陋但实用。我认为在每行上使用相同的按钮阵列,将无用的按钮显示为灰色,会更好地阅读。当每一行具有完全相同的格式时,处理表格数据就更容易了。我也将它们的样式设置得更小,尽管如果它Bootstrap),这样做有点麻烦(为什么他们为什么要删除btn-xs呢?)

下拉菜单:如果选择操作触发了该操作,则此界面将出现错误的可能性更高,因为操作下拉菜单实际上更容易出错。如果选择一个动作,然后单击一个按钮使之成为现实,那很好。

4
nigel222

没有更多的背景信息,很难回答您的问题。用户如何使用您的桌子?他们多久与它互动一次。用户是否清楚在不同状态下可以执行哪些操作?

以下是一些想法,但不了解上下文:按原样,可能看起来不太漂亮,但是与下拉菜单相比,它具有一些优势。显然,并非所有动作在所有状态下都可用。乍一看,所有可能的动作都是可见的。用户可以直接单击所需的操作,而无需先单击下拉菜单。如果您更改此设置,则必须考虑这些优点。但是也有一些缺点。用户界面非常混乱。用户需要处理很多事情。

问题是,此表的目标是什么。是否应该帮助用户非常有效地执行任务。是否应该帮助用户快速了解状态以及与项目进行交互是次要的,而且并非总是必要的。

我想说,也许您可​​以混合使用解决方案1和2。请使用最常用的操作,并在下拉列表中添加不常用的操作。困难可能是,主要动作并不总是相同的,这取决于物品的状态。

但是最终,您的用户将最了解。因此,我要做的是使用一个简单的原型对其进行测试,并与实际用户进行测试。您将不需要对大量用户进行测试,即可查看哪种解决方案在您的上下文中效果最佳。

3
BrunoH

您可以将所有选项放在上下文菜单中,并禁用由于项目状态而在此时无法使用的选项。这样,用户始终具有相同的选项列表(您可能可以解释为什么禁用了选项)。

同样,使视图选项不是按钮而是仅单击行本身也不可行吗?

3
Annemiek

我们可以辨别订单上的三种动作。拆分这些,并将操作分组为一个类型。

观看中

首先,我将为订单提供一个唯一的选择按钮,即查看订单(我假设这里不反对查看订单新订单),其自身的位置更可预测。现在,它到处跳跃,具体取决于其他可用选项。

编辑中

在编辑订单时,用户首先需要查看其中的内容。因此,请删除此处的编辑按钮,并从视图屏幕访问编辑选项。

处理中

现在我们剩下的是发送,重新发送,接收,取消和取消。您可以使用下拉菜单,但是这些菜单项比常规按钮要挑剔一些,因此最好由五个按钮组成的网格。不要隐藏不可用的选项,而是将其禁用,因此每个按钮将始终位于同一位置。


先查看,然后再执行操作

或者,按照 Annemiek的出色建议 ,通过单击该行以使观看可用。删除所有按钮,然后将其重新放置到查看屏幕上,,如果每个订单没有额外的点击都不成问题。这取决于您的用户。它会执行额外的检查,因为用户必须先查看订单才能对其执行操作。

3
SQB

我的系统中有许多类似的网格

您共享的屏幕截图在每一行上都有不同的操作。就视觉混乱,用户的认知负担以及从 Tobias 之类的可访问性的角度而言,在每行上预先提供所有这些按钮/操作不是一个好选择。如果每行上有一个动作,并且用户经常执行该动作,则可以将该按钮保留在该行上,其余的次要动作可以在烤肉串菜单中分组(三个垂直点图标)

2
Sooraj MV

您可以继续对每一行进行悬停操作。因此,一旦用户将鼠标悬停在某行上,他将看到一个下拉选项,其中提供了操作列表。

1
Mohammed Yaseen Ganai

在此视图中,每个项目都有不同的选项似乎令人困惑。通常,在网格或列表中,用户期望每个元素具有完全相同的界面。

您可以保留“查看”按钮(也许将其转换为图标,但这并不重要),因为该操作适用于所有项目,并将其他选项移至用户“查看”项目时公开的任何UX元素。 。

此外,观看不是破坏性的步骤,而其他动作则可以完成某些工作,而这可能是不可逆的。想象一下,用户试图取消列表中的ORD-123455(夹在ORD-123545和ORD-213455之间)。通过在查看项目和对其执行操作之间添加其他动作,您可以增加少量的摩擦,同时也使用户更有信心选择了正确的项目。

0
Harrison Paine