it-swarm.cn

处理非常复杂的表格的最佳方法是什么?

我正在尝试为非常庞大的系统(例如CRM)的用户提供最佳体验。它有很多形式,其中许多都有很多领域。我的疑问是我应该使用单列形式(引起过多的垂直滚动)还是两列形式(需要较少的垂直滚动并使用更多的水平空白)以及最后一个包含四列的形式(其数目很少滚动并使用几乎整个空白区域来尝试使大多数字段保持在折叠上方)。

重要的是要说我们的客户讨厌滚动,并且他们总是问为什么当我们展示一栏式表格时我们不使用水平空白)。

因此,我对此感到有些困惑,因为许多用户体验研究和良好实践建议不要使用/避免使用多列表单,但是客户通常会询问多列表单。

我们的客户非常习惯桌面程序,并不是每个人都对基于Web的系统非常熟悉。

以下是我想分享的一些可能性,以说明我提到的三种可能性的系统中复杂形式的示例:

screenshot of one-column version

在上面的示例中,我使用的是一栏形式(UX研究中最推荐使用),但垂直滚动非常长。

screenshot of two-column version

在第二个示例中,我尝试通过使用两列来减少垂直空间。

screenshot of four-column version

这是客户最喜欢的一列,使用空白的4列,并尝试将所有内容保持在首位。

  • 字段的长度基于每个字段的字符数的平均值。

我想知道您对这种情况的最佳处理方法的看法。

73
Marcos Rocha

我强烈建议AGAINST多列色谱柱,因为这会中断眼图和工作流程。但是,将多个输入分组在同一行按逻辑可能是一种可用性+++,并且可以节省大量空间。

在这里,我简要说明了我的意思:

enter image description here

此外,您还可以:

  • 将输入字段的数量减少到最少(将可选字段隐藏在表单下方的可扩展框中,或将其移动到侧面的其他面板中)
  • 按组框或标题对一些逻辑连接的输入进行分组(不会节省空间,但使导航更容易)
  • 完全隐藏本应禁用的输入字段
  • 将标签放在左侧(对于较小的表单,标签会在顶部更好,但如果表单较大,则在左侧会更好)
  • 使用弹出式窗口(其中简单的下拉列表是不够的),甚至更好的方法是,创建自己的下拉容器组件。

如何在不使用列的情况下将大尺寸的表格适应屏幕宽度

我前一段时间在一个项目中使用的一种有用的方法是使用2个面板,它们在较小的屏幕上自动垂直对齐,而在较宽的屏幕上水平对齐。

enter image description here

如果您不确定某些想法是可用性+还是可用性-,请让外部UI设计人员查看您的实际内容模型。

74
Alph.Dev

我认为,还有其他一些方法可以处理复杂表格的滚动和建模,而不仅仅是尝试将所有字段压缩到一个屏幕上,这些方法会产生更好的结果。减少滚动的明显性或完全删除滚动以及使空白更易于管理且不太明显的方法。

我建议考虑以下策略(并强烈建议最好使用单列):

多页-可以使用继续按钮和智能数据保存功能将复杂的表格分为多页。步数将有助于导航并向用户显示他们在此过程中的位置。从某种形式上减轻一些认知上的负担。

复杂度-分析表单的使用,确保常用输入更加突出,并且表单可以通过暴露/激活表单的其他部分来对某些选择做出反应形成。

tab索引-密切关注tab索引,这些字段是由诸如tab之类的操作选择的顺序。确保使用Tab键可以访问所有元素,并且表单可以智能地进行响应。 Tab索引允许正确完成操作后仅用键盘填写表格。 ( http://ui-patterns.com/blog/Input-contexts-switching-from-mouse-to-keyboard )。从一个字段到另一个字段的制表符将帮助用户忽略滚动,因为滚动只会发生-他们不必一直伸手去拿鼠标(我想这可以弥补相当一部分滚动疲劳)。

默认值-根据用户观察提供良好的默认值,并让高级用户设置自己的默认值。允许使用复制/复制功能从现有记录中进行预填充。尽可能避免实际填写。

滚动-如果有必要显示复杂的输入,请不要避免滚动。良好的制表符排序和复杂性管理(如前三点所述)将对此有所帮助。 (您可能还会发现某人的帽子上有一只蜜蜂在“折叠上方”)。

feedback-使用空格对字段条目进行反馈。这应该有助于处理单列表单上的空白,也可以为用户提供对字段输入数据的快速验证。复杂和通常的领域也可以从建议中受益。这将有助于平衡页面与有用的信息。

undo-为用户提供撤消功能以回滚更改。

有很多证据涉及对眼动追踪和表格的研究,以支持单列表格最容易填写的主张:

编辑...

由于提出了研究成果,并且经验丰富的成员做出了贡献,因此我将其编辑为是说,字段左侧的右对齐标签也是标记表格的有效方法,并且具有支持OP特定用途的附加优点。案件。有关更多信息,请参见评论中的链接。谢谢@Rasha和@ DA01

...结束编辑

这里是一个很好的链接,其中有更多详细信息:

https://www.cxpartners.co.uk/our-thinking/web_forms_design_guidelines_an_eyetracking_study/

21
Toni Leigh

用户测试应该给出更客观的结果。无论如何,我对复杂形式的建议是提供当前场的视觉指示,看图。

它允许:

  • 更专注于当前领域
  • 在中断或中断后更快地恢复工作。

enter image description here

您在Excel中会看到相同的方法,这是Edge的复杂形式,因为每个单元格都是一个输入字段。
enter image description here

19
Alexey Kolchenko

表单的上下文和用户的意图是该方法的重要条件。

按用户使用和动机划分的设计类别

1。交易表格-目的是吸引用户。您需要获得许可才能问他们下一个问题,最好的参与方式是单击。从决策树的开始或底部开始,以最简单的问题开始。除非有关系,否则不要以联系信息开头。提出一个向客户表明价值的问题。如果您要出售汉堡包,请问:您最喜欢的汉堡包是什么?然后,您可以要求提供联系信息,以进行发送。即使您的表格很长,如果您与用户之间没有关系,也要先获得认可。

screenshot: single question

接下来,您可以扩大问题的范围,但我建议您逐步进行。不要不知所措。在表单的布局上使用常识。第一条规则:保持一致。相同的字段大小,位置和图形样式。当您可以要求联系信息时,考虑并测试这是一个很好的主意。如果这是交付价值所必需的-可以更轻松地要求联系信息。

ScreenSholt: expanded scope of information

使过程可见,以管理期望并保持强烈的信任。 SCREENSHOT: VISIBILITY

2。复杂数据收集表格我发现了我所知道的最复杂的表格。它用于具有多个房屋,车辆,驾驶员和其他有价值资产的客户的保险范围:

注:

a。建议告诉人们预计需要多长时间。 b。可视地将表格分成几部分c。如果人们在回答时可能会对其进行调整,则允许他们滚动。否则可能更好地作为页面。 d。使用户可以随时随地进行保存e。定期自动保存数据(应立即进行注册)f。退出可选窗口关闭,但可见-单击后即会打开g。尽可能根据信息体系结构创建动态表单字段并排序问题。根据您使用的后端系统,这可能需要多个页面。 h。可以通过这些字段进行制表,然后按回车键以选中复选框(可以使用JavaScript编程该复选框)。

SEAGE:没有人想要填写这样的表格。他们将需要动力。在这种情况下,他们可以获得所需的覆盖范围,即使如此,我们仍然发现代理商经常不得不在电话上引导他们完成整个过程。

MULTIPAGE OPTION:使页面数从头开始可见并保存在每个小节中。

我希望这是有帮助的。下面的表格并不完美。想使用滑块和动态内容-但这至少是可靠的。

enter image description here

12
David Shantz WOW

纯粹基于您所拥有的内容并在视觉上重新安排事物,我建议您从顶层标签开始:

mockup

下载bmml源 –使用 Balsamiq Mockups 创建的线框

到左侧标签:

mockup

下载bmml源

虽然更宽,但大约只有高度的一半,因此将大大减少滚动。

另外,向导或选项卡样式的布局又如何呢?表格可以逻辑地分为2个或3个“屏幕”而不是一个长屏幕吗?

12
DA01

有几个问题需要回答:

  1. 此CRM系统是否仅严格针对您客户的员工?
  2. 如果是这样,他们是否一整天都致力于使用此CRM?
  3. 这些用户的屏幕尺寸是否一致?
  4. 这些是什么样的形式?他们是否填写了大多数字段(少于一半)?
  5. 用户多久从头开始填写新表格,而不是简单地查看它们?
  6. 这些表单页面是否具有单独的“仅查看/浏览”模式?

在设计具有一定受众的内部应用程序时,与设计以消费者为中心的应用程序相比,将应用不同的UX规则集。根据答案,将字段塞满褶皱上方有很多好处。

8
Jung Lee

我认为您应该看看@Jung Lee的答案。

在我看来,UX在不同的上下文中应该有不同的应用,而且,我们总是会忘记客户的障碍。据说客户永远是对的,所以如果您的客户很固执,那么您最终应该同意他们想要的东西(先说服他们),然后再为他们购买产品买单。

在您的情况下,我会告诉他们1列布局的优点,并用一些实际的工作室和/或数据进行备份。

另外,您还有[〜#〜]巨大[〜#〜]优势,您可以触及实际的最终用户,而不是“类似”目标人群测试人员”。定义上最有效的方法是让员工完成X次表格(或类似设置),并保存所用时间的记录以及他们的反馈,然后做出决定。

6
aleation

由于这是基于Web的客户端-服务器数据输入表,因此它至少具有3个主要用例:

  1. 新纪录
  2. 更新记录
  3. 查看记录

您的问题和大多数答案仅集中在#1上。即使是只输入新记录的组,也几乎可以保证它最终也将用于视图和更新,这就是滚动真正成为大问题的地方。

单列滚动输入数据的情况更糟
带滚动的单列仅适用于临时数据输入(大多数用于注册用户的Web表单等)和查看。即使这样,滚轮还是必须的。

单列不利于添加新记录,因为源文档(可能是其他联机或屏幕上的表单)的字段永远不会与表单具有相同的顺序。用户在源文档字段中顺序移动时,他们必须不断上下滚动以查找相应的表单字段。屏幕上的字段越多,滚动越多,丢失和错过输入字段的机会就越容易-非常糟糕。在更新数据时查找所需的表单字段更加缓慢且令人沮丧。

多列/多选项卡,无滚动最适合数据输入/更新
字段(案例1和案例2)的数据输入类似...

  1. 标识源文档字段
  2. 如果可能,请选择并复制该字段
  3. 查找对应的表单字段
  4. 如果可能,将所选数据粘贴到字段中。如果没有,请输入。

步骤3所需的时间通常会使其他三个步骤相形见war。

如果所有表单字段都在一个屏幕上,则用户的眼睛可以水平和垂直(二维)扫描,以快速找到正确的表单。 如果相关字段出现在同一行上,则准确性和速度都会提高。如果存在用户熟悉的通用分组和顺序(例如邮政名称和地址格式),则使用它可以进一步提高生产率。

如果一个屏幕上的字段太多,并且有一个用户熟悉的逻辑分组,可以用一个简短的标题来标识,那么带有这些标题的选项卡(如果不能很好地支持这些选项卡,则可以是一个单级菜单)。下一个最佳方法。

一切都是为了优化用户的期望。在标识源字段时,他们应该能够立即找到它在目标表单上的位置。

放开鼠标...
当用户从不松开键盘的时候,数据输入效率最高。如果您希望数据输入用户爱您(或至少三思而后行) (有关形成小怪兽),请确保按逻辑顺序设置跳位顺序(在西方,从左到右,从上到下),并且所有操作都有简单的快捷键,尤其是导航操作,例如切换选项卡和提交记录。这些快捷方式的列表也应该在一个按键之内。

[〜#〜]资源[〜#〜]

4
DocSalvager

如果需要显示具有多行的表单,则应考虑使用免费的开源表格表示框架,例如 http://Datatables.nethttp://flexigrid.info/ =获得最佳展示效果。如果您只有一个用户/单个项目表,请不要打扰他们,但是如果您的管理表列出了针对不同客户的多行或其他多行表布局需求,它们将为您带来大量的UI优势毫不费力。请注意,其中一些支持开箱即用的“卡片视图”,这是一种显示单行数据的方法,该数据可能像一系列堆叠的输入框一样宽。在理想的演示中,您可以在多个客户的管理演示中使用与用于客户数据输入的布局相同的布局,从而减少与以多种格式显示相同数据相关的认知负担。

3
Steve Whetstone

当我的话题关闭时,我提到了该话题讨论的一些问题。

https://ux.stackexchange.com/questions/39760/multi-column-form-design-is-there-a-consensus

1
erik_lev

我个人喜欢多页或“步进”系统。它把一个漫长的过程分解为看似更易于管理的部分,您还可以轻松地显示用户在整个过程中所走的距离。

我还遇到了表单提交不正确的情况,这意味着我必须再次填写所有表单。如果发生这种情况,最好是表格形式的1/5,而不是整体形式。

1
Joe Taylor
  1. 您可以使用占位符而不是显示标签。它节省了高度。

  2. 4列字段是个坏主意。如果您想节省高度,用户可能会沮丧地看到/填写表格。

  3. 按照您的第一个,您的表单有太多正确的空白。为避免这种情况,您可以将表单居中。用户将注意中心。

  4. 您可以分为2页或3页,具体取决于步骤过程等字段。

  5. 我们应该特别注意表格的设计。这些都不容易。我们必须使用户顺利进行到表格末尾。为此,我们必须处理颜色,字体大小,分隔线,一些交互作用..。您可以查看以下示例:Yahoo注册,eBay注册,

  6. 您可以在表格的右侧或左侧显示您产品或网站的广告/建议/功能。Ref:Google注册。

1
Pavan Kumar

我真的很喜欢这里描述的所有好的建议和方案。多年以来,我还一直将引用的眼动研究用作参考。但是我不得不说,我仍然很高兴我们仍在使用2009年的论文(并没有真正地正式复制)作为准则。从那时起,发生了很多事情。互联网与众不同,用户的期望和体验发生了很大变化。更重要的是-研究是以非常简单的形式进行的。我希望看到一些最近的研究。

另一件事-向导等。-很好的建议,但是总是这样吗?我认为,在许多情况下,用户可以同时查看整个表单-在单个视图中,尽管具有滚动功能,但具有很大的价值。

0
bartek.matoga