it-swarm.cn

如何显示太多数据

我们正在构建一个基于Web的平台,在该平台上主仪表板会显示一个数据表供用户查看和分析。随着该工具的发展,我们似乎在增加越来越多的列,并且在较小的屏幕分辨率上用完了水平空间(我们看到了一些数据换行)。对用户而言,一次查看所有列很重要,因此,隐藏列在某种程度上是不可能的,水平滚动也是如此(根据老板的要求,因为水平滚动反而很糟糕)。我想知道是否有人知道带有多列的表格的智能UI。

[〜#〜] edit [〜#〜]

下面是表格布局的屏幕截图。不幸的是,出于安全目的,我不得不模糊列标题。此示例中的行实际上没有数据,但是在使用中,它们将具有很多数据,这些数据的扩展范围将比其各自的列标题还要广。为了响应某些答案,用户必须查看所有列,因为它们对于分析数据做出某些决定是必不可少的。除前三列外,所有数据均为数字。再次感谢您的任何反馈。

alt text

好的,所以我看到上传此图像并不能真正做到这一点……它以1680x1050分辨率(22“)占据了屏幕的整个宽度,并且当数据填充到列中时,左列w /文本缩小了下来一点。

编辑2我只想对每个人的出色想法表示感谢。我只能选择一个答案,但事实证明,您的许多想法非常有用,并且可能会出现在最终产品中。再次感谢!

217
Jason

由于前三列之后的所有数据均为数字,因此可以四舍五入,以使每列的宽度少至四个字符。

 Full Length   Shorter   Tiny
------------   -------   ----
 $143,573.39   $143.6k   144k
     112.54%    112.5%    113 
 198,220,329    198.2m   198m

您可以根据可用空间量决定显示哪个版本。那些幸运的是拥有更大的显示器的人仍然可以得到所有东西。对于较小的显示器,演示文稿将正常显示

当然,当单元格的内容缩写时,您应该在工具提示中显示完整的值。


更新:@Oskar在评论中指出,显示不同幅度的数字将使视觉比较变得更加困难。因此,在比较相对值比精度更重要的情况下,这是一个变体。

  Revenue 
($millions)  
------------ 
       143.6   
        93.2
         0.3
       < 0.1  

(此示例中的标头比数据宽,但正如其他人指出的那样,可以通过将标头倾斜45度角来解决。)

134
Patrick McElhaney

您可以尝试显示每条记录多行,例如:

alt text

您还可以通过使每一行成为摘要视图来进一步扩展,该摘要视图可以展开,以便用户可以看到完整的记录,例如:

alt text

在上面的图片中,用户对Mary Jane的完整信息感兴趣,因此她单击了她的名字旁边的三角形以查看完整的记录。

另外,我不同意您的前提,即“隐藏列有点不可能”。如果确实有that很多信息,那么用户将要隐藏something。您可能希望默认情况下使它们全部可见。但是用户应该有一种在行进时隐藏一些列的方法。

153
Hisham

如果列超出行数,则可以尝试将行作为列

alt text

109
Eduardo Molteni

这听起来很像客户/产品经理想要主屏幕上的一切相对于一切的情况需要在主屏幕上。

恕我直言,仪表板屏幕应该为用户提供总览的所有内容...但是要获取其中一部分的详细信息(例如,本周销售量增长了275%),用户应“向下钻取”数据以查看有关销售来源信息的表格。

过度复杂的“主”视图以尝试显示大量信息最终导致失败,因为用户会丢失大量数据。下面的示例只是我在Google上发现的随机内容,但是在屏幕A中,您甚至无法决定从哪里开始-与屏幕B中的内容如何整齐地组织成概述。

压倒性数据的示例: alt text

简单易消化的数据示例: alt text

61
scunliffe

表是呈现大量数据的好方法。但是,超过5列的表格很快就变得不可读。如果您的数据按照您所说的实时变化,那么用户必须同时查看15个不同的列,很可能无法及时做出决定。

Google最清楚的是,查看大量数据时最重要的考虑因素是排序。您需要按其与用户的相关性进行排序。每条数据可能都很重要,但是某些数据比其他数据更重要,您需要确定哪个数据块最重要,哪些数据块不重要,这在很大程度上取决于业务目标。

并非所有列都相等

一些列比其他列更重要:

  • 必须先读取某些列,然后另一列中的数据才有意义。讲英语的用户从左到右阅读,应尽可能从左到右阅读列;
  • 某些列仅按相对顺序是重要的,即它们的绝对值并不重要,例如约会时间。您可以隐藏此列,并使用排序来赋予顺序感;
  • 一些值仅重要,如高,中,低。两个“高”值之间的微小差异可能并不会真正影响决策,因为还有其他一些因素会更明显地影响决策。您可以使用“绿色”,“黄色”,“红色”图标代替全文,以节省空间。
  • 有些列可能是只读的,或者需要比其他列少编辑的次数,所以有几组列很可能一起编辑。对列进行排序,以便将需要一起编辑的列组合在一起;

并非所有行都相等

排序时一种很常见的mistake是按一些无用的任意顺序进行排序,例如字母顺序或日期或数值。如果需要搜索值,则静态且一致的排序很有用,但是应该让计算机为您搜索。相反,在大多数情况下,您想要按其相关性排序

其中一些可能会或可能不会适用于您的情况:

  • 最近更新的数据更为重要;
  • 价值更高的交易或价值范围内的交易更重要;
  • 错误值或真实值并不重要;
  • (更复杂)仅当另一个字段具有特定值时,假值才重要,否则,真值才重要

您需要为用户确定这些目标,并对数据和列进行加权排序。如果您尚未确定哪个目标对用户最重要,那么并不是在真正设计。在确定哪些数据最重要之后,您可以继续隐藏一些不太重要的数据,或对其进行缩写,或将其抽象为图标。图标很容易吸收,如果您的用户可以花十分之一秒的时间查看“绿色圆圈”和“红色十字”,则不希望花费三秒钟来阅读它们。

有些价值观仅在某些情况下才重要

突出显示有趣的价值。用户可能只对某个字段中具有特定值的交易感兴趣。用户可能会知道他绝不会碰触对他的偏好而言太高或太低的交易。您可以对其进行过滤,以便用户甚至无需查看它们。如果用户说他没有使用该列,那么您甚至可以隐藏整个列。

37
Lie Ryan

用户实际需要查看哪些数据?

如果我们能得到一个直接的答案。而不是“取决于”

我一直在遇到这个问题,每当我使用Google时,我都会回到Jason的问题上来。

答案很多,但我闻到一个元主题,大家似乎都在绕过,但我认为值得一试。

首先了解用户意图的真实范围

当遇到这样的情况时,我发现退后一步并确保我们对系统内用户意图的多样性有很好的了解是很有用的。我画了一个简单的图来说明我的意思:

domain of user intents

在这里,我正在考虑两件事:

  • 我们如何定义用户的活动?
  • 我们如何预测用户何时需要某些东西?

例如:

如果我们知道销售经理每天早上都按价值和截止日期检查他们的销售渠道,那么我们可以为此设计一个仪表板,并且知道每天早晨它都应该“近在咫尺”。这就是我所说的定义普遍用例。

当我们看到投资分析师倾注其投资组合中的股票时,我们知道他们一直在使用一系列标准技术来不断评估其头寸,但是我们无法在任何给定时刻准确确定他们的评估方式。如果它是对外部刺激的响应(例如,来自交易大厅的同事的电话或《金融时报》的报道),则尤其如此。这就是我们可能所说的未定义,但普遍

也许我们知道部门负责人负责管理其成本和预算。但是我们了解managing到底意味着什么吗?而且这可能会随着时间而改变-例如,在今年年初,公司可能会专注于市场份额和收入优化,而到第四季度,每个人都将重点放在降低成本上。这可能导致非常不同的审查和操作。我可能将这种情况称为未定义短暂

依此类推..我想你明白了。

确定重点

右上象限显然是成为设计师的最佳场所。我们可以确定用户的真正需求,并努力为他们设计最佳体验。我们可以消除应用程序中所有不会增加体验价值的东西。如果我们做得好,我们可以赢得奖项;-)

不幸的是,世界是一个混乱的地方。我们的用户很可能遍布整个图表。这可能会随着分钟的变化而变化。

我们一贯的回应,仍然是无论学科(程序员,设计师,企业家)如何都能听到的最佳建议,这只是重点。在极端中:做一件事并做好。

如果您是初创公司或从事MVP工作,这很容易且可以自行选择(“我们仅为想要X的用户构建此产品”)。

对于其他所有人,我建议我们首先需要了解用户想要和需要在哪个象限中工作,并以此为重点来关注我们的工作。如果我们的用户在象限D中工作,但我们试图将其强制为象限A解决方案,那将不会是一件漂亮的事情,无论如何,用户最终都将赢得胜利。

杰森的场景

真正的Jason可能早就搬走了,但是当我们成为Jason时,我们中的许多人都有自己的日子。从他的描述来看,似乎开始的假设/主张是Jason的用户都是关于Quadrant C的-总是非常忙于做一些我们无法轻易使用提供的数据集进行定义的工作。

换句话说,经典的 知识工作者 。我们特别努力为这些人构建系统,因为他们知道并响应我们可怜的计算机所不知道的许多事情。

毫不奇怪的是,不起眼的电子表格在诸如财务部门之类的地方仍然具有最高的统治地位。一旦完成了所有交易处理的ERP)系统后,剩下的大部分工作都将落在右上象限之外……而电子表格仍然是处理数据的最终空白画布。

所以,我们能做些什么?我建议两种平行策略

确定象限A处理的用例

好的,也许大多数工作需要在伪电子表格视图中完成。但也许不是全部。当我们发现定义的普遍用法的指示时,我们可以专门为此构建(另一个视图,仪表板页面或打孔)。

这个问题已经有很多很好的答案和注释,可以通过以下方式实现:如何在象限C的混乱中找到象限A的宝石?

我们如何在原石中找到宝石?

  • 老学校-花费数小时/数天/数周与用户合作,以​​了解他们的实际工作
  • 从用户社区中找到可以解释事情如何完成的拥护者
  • 看数据。我们可以发现 预测性行为 导致定义好的动作吗?例如在下达卖单之前,用户似乎总是先查看视图A和B,然后按C和D排序,然后生成报告E。这至少可以为我们提供一个开始进行更仔细检查的地方...

打造最佳的象限C体验

但是对于这样的系统,通常认为 Taylorist梦想 认为我们最终可以将其缩减为整洁的用例集,从而可以围绕其设计Quadrant A解决方案。

如果我们无法实现完整且定义明确的最终目标,也许我们仍然可以通过专注于改善用户的旅程来取得重大飞跃?

重点访问和支付能力

因此,我们不知道用户到底想做什么,但是我们可以提高他们访问和操纵数据的能力。例如:

  • 同类最佳的搜索,过滤和排序
  • 列显示/隐藏。更好的是:显示/隐藏列组
  • 轻松下载数据进行自己的分析
  • 从一组预定义视图中进行选择以用于特定目的
  • 也许我可以保存和使用自己的自定义视图?也许我可以与同事分享这种看法
  • 作为用户,我可以根据需要“缩放”我的视图。例如:
    • 字体大小
    • 每个单元格更多/更少的细节
    • 细行/胖行/ pinterest-mode

专注于微工具

我们不了解您要实现的目标的全部故事,但是我们可以提供部分难题。例如:

  • 在行上明显向下钻取更多信息
  • “右键单击”工具:
    • 按此列透视
    • 为该单元格寻求新的价值
    • 此行/单元格的弹出历史趋势
    • 固定此行并将其排在周围

专注于为数据增加价值

我们不知道我们的员工如何将我们的数据转换为 Information-Knowledge-Wisdom ,但是我们应该寻找机会不断提高可为数据添加的价值。

例如今天我只给你原始的生产数字,明天我可以给你加上昨天/上周/上个月以来的变化。

因此,尽管人们可能仍然可以控制知识和智慧的提取,但是也许我们可以更好地呈现信息,而不仅仅是数据。

30
tardate

我知道您已经选择了一个答案,但是我想提出一个我认为非常重要的内容:数据与信息。最近我一直在考虑很多,所以这已经成为我关注的重点。

您正在做的是显示数据。这很原始,看起来似乎很重要,但实际上大多数人不需要查看数据。他们真正需要的是根据数据生成的信息。您在其中一项评论中提到,用户可以“将鼠标悬停在该行上时看到图表”,我认为这是倒退的。原始数据应按需提供,但默认视图应分析数据并显示结果信息。

这并不是说图形是正确的选择,而是对所有这些数据的主要发现进行交替显示可能是更明智的选择。从概念上讲,这很难开发,但是它将使最终产品更多地成为有用的工具,而不仅仅是查找内容的地方。要问用户的问题是“当您查看此屏幕时,您想知道什么?”

26
Tim Sullivan

我们要做的基本上是将屏幕分为两部分。上半部分显示有关当前所选项目的详细信息,下半部分显示带有可用项目页面列表的网格。

选项卡控件用于显示我们称为嵌套详细信息/集合的详细信息/集合视图。这些是由外键关系形成的。

希望这对您有所帮助。 mockup

14
JochemKempe

我能想到的一个例子可能是 MLB.com的排名页面 ,这是一个表格,其中的列太多了,但是自定义界面立即直观(对我而言,它并不是针对技术人员)。当然,您可能不希望MLBAM对可以拥有的最大列数进行任意限制。

列隐藏的最大UI问题通常是找回隐藏的列-除非他们最近已修复,否则在Excel中很难找到“取消隐藏”。

12
Richard Gadsden

令我有些惊讶的是,还没有人提出过“ Master-Detail”模式。

我们在自己的几种产品中都存在完全相同的问题:屏幕上没有足够多的列,但是,每条信息在某些用例中都是相关的。

实际上,我们决定做您要排除的工作:将可见列的默认数目减少到大约5-6个经过精心选择的属性,以覆盖90%的用例。但是,对于选定的行,我们在屏幕右侧的属性窗格中显示所有属性。用户在表中看到尽可能多的行的最重要的属性,并在属性窗格中看到所选行的尽可能多的属性。

如果用户认为其他列比我们选择的列更重要,则用户仍可以从表中添加/删除表中的列,就像Windows资源管理器中一样,甚至可以忽略属性窗格并诉诸于水平滚动(如果用户认为她真正想要的。

属性窗格的引入具有一些漂亮的优点:

  • 如果要编辑数据,则可以提供更有意义的编辑UI
  • 通常,您可以比在表格单元格中更适当地显示数据。想像一下员工拍摄的照片,在地图上显示一组GPS坐标,可能性无穷无尽。

请原谅标签是德国的,但是应该可以使想法更广:

enter image description here

11
Chris

硬件肯定可以,但是我建议使用商用多显示器设置。与宽表或电子表格一起使用时,两个19“与单个24”相比非常引人注目。

此外,对关键列进行模糊化/标准化(向用户表明需要执行进一步分析以及可能需要采取进一步措施的列)。按那些模糊值分组。

另一个技巧可能是合并“固定”列,以便在用户向左或向右滚动时,固定列会根据滚动方向拖到屏幕的另一端。

7
JustinC

我认为您需要就此事与老板谈一谈。显示所有列和所有行将使屏幕混乱,无法使用。这就像要求将卡车停在乘用车停车位上一样。对于卡车和停车位,效果不佳。

您应该问自己和客户的是用户要采取哪些步骤来评估所有数据。首先是基于什么决定,然后是需要检查的决定。由此您可以开始了解用户将如何使用您的应用程序。一旦知道可以简化数据并将其显示在可管理的报告中。

从我在您的示例中所看到的,整体数据无法在一个视图中捕获。这意味着用户将不得不在两个比较空间之间来回移动。这可能会导致错误的决定,因为数据读取错误。您工作的业务中的错误可能会花费很多钱。通过告诉您的客户他可能会理解您需要通过绘制更清晰的图像来避免这些错误。

选项:如果要比较数据行,我建议在概述中使用最少的数据,然后选择一对要比较的数据,将创建一个报告,其中包含所有适当比较的数据(图形,数字或任何其他视觉辅助工具)。

备选方案:去找老板,说您会按自己的方式做,但要在桌子上放另一种设计。当时间到了,成群愤怒的用户在他家门口时,你会提醒他,您创建了替代设计。技术政治从来都不是我的最爱。但有时只是需要!

5
yopefonic

也许您可以将低值列(即[0..100范围内的值])分组为子列。

代替:

| Description | Count | Mean | Sum | Foo    | Bar   |
| Lorem ipsum |     1 |    2 |   3 | $ 1.00 | +0.2% |

呈现为:

| Description | Totals    | Foo    | Bar   |
|             | C / M / S |        |       | 
| Lorem ipsum | 1 : 2 : 3 | $ 1.00 | +0.2% |

其中“:”是子列分隔符,C/M/S表示“ Count/Mean/Sum”(或此处显示的任何数据)。

如果数据的绝对值不重要,则可以将百分比转换为堆叠的条形图标。

如果某列是另一列的百分比,则可以将目标列的背景用作进度条。实际上,根据数据域的种类,单元格的背景可以指示其包含的值,并删除货币前缀和/或多余的格式。

5
Romulo AB

我不知道是否允许您这样做,但是不使用表又如何呢?显示项目列表,这是电影列表的示例:

* Movie title 1 *
Cast: actor a, actor b
Year: 2000       Runtime: 100 min       Rating: 75%

* Movie title 2 *
...
3
fhucho

这里有一些想法:

真正的问题是:用户实际上需要查看哪些数据?是否所有行都填充数据中的所有列?我的不是,但它与“稀疏”矩阵形式的显示相去甚远。

1)鱼眼视图
是否想到过鱼眼镜头?很难找到一个好的javascript解决方案,但是Java小程序很容易找到。

2)悬停提示
只显示简洁的数字数据(根据范围以不同的精度)并在悬停时显示列标题吗?您可能希望/需要突出显示感兴趣的单元格,然后让用户将鼠标悬停在它们上方以查看它们是哪一列

3)分组
将具有相似列的项目归为一组,并创建多个具有类似项目的表,从每个表中删除未填充的列。您实际上不必知道先验的如何将它们分组...您可以创建一个位图或散列,该行的散列是为每一行填充的,然后将行排序/聚类为公共列集。另一种算法是简单地按填充的列数进行排序。我发现这可以很好地工作,并且可以帮助轻松地识别分组,并且很好地揭示了较小的不一致之处。

3
ericslaw

通常,您不应该随心所欲。以适当而有效的方式汇总大量数据的方式来重新构想他们的需求是您的专业工作。计算机擅长收集大量数据,而人类则不擅长解释数据。竭尽全力将未格式化,未汇总的表转储到屏幕上。

考虑在Google上进行搜索-大多数搜索通常会返回数百万次匹配。但是,您是否曾经浏览过首页?如果您最喜欢,几乎不会。如果在首页上找不到答案,该怎么办?您将重新表述您的问题并缩小结果范围,直到目标DOES显示在第一页上。

考虑您的应用程序时,请执行Google搜索练习。仅很少列出适当的未过滤记录转储。

另一个示例-考虑iPhone上的联系人或音乐曲目。如果您没有立即点击右侧的字母滚动条并跳到按字母顺序排列的部分,我将感到非常惊讶。完整,完整的记录清单对糖果(显示手机的可滚动性)比什么都重要。

现在,所有这些都可以应用于水平显示的数据(列数)。找出一种新颖,直观的方式来汇总数据。要钉上一个额外的好处是,这些都是使应用程序易于使用的东西。添加足够的这些周到的调整和改进,该应用程序甚至变得“有趣”起来使用。

至少您正在考虑这个问题;这比大多数开发人员走得更远。祝好运!

3
xanadont

尽管这个问题太老了,我只需要在这里投入两分钱。

如果您拥有一堆对于用户做出决策来说是所有必要的数据,那么显然存在基于该数据的决策过程。您可能不应该专注于解决如何以对用户更有用的方式来处理原始数据,而不是让用户承担根据原始数据做出这些决策的责任。

例如,如果您有A,B,C,D和E列,并且当B和C小于D但大于E时需要更新A,则无需向用户显示所有这些列,显示该条件当前是否为真的单个列。

您无需建立大量使用数据的业务逻辑层,而不必用数据淹没用户。它不仅会大大简化GUI的复杂性,而且您的用户很可能会非常感谢您使他们的生活更加轻松。您应该始终尝试确定对计算机而言比对人而言更容易执行的任务,并将这些任务的责任转移给计算机。

2
Isochronous

由于我们不知道为什么用户必须查看所有列,或者您为什么老板认为他们希望查看所有列,因此您将摆脱一些列解决方案。这是我的。用户可以通过一种方式选择,订购和保存他们想要的列的首选项。我确定有大量用户只希望看到5列。真正的问题是他们都不想看到相同的人。最终,它们将有很多列,以致出现水平滚动条。我的猜测是这些“电子表格迷”不会介意。他们会感到宾至如归。

2
JeffO

首先想到的是可调整大小的列。既然您说所有列都应该可见,并且数据必须采用表格式。列名称可以成45度角,因此可以轻松识别它们,同时占用更少的空间。

1
Bojan Gavrovski

通过控制显示哪些列然后使用智能默认值来使其动态。一个很好的例子就是Google的 外部关键字工具 ,您可以在其中随意添加/删除/排序列。使用动态列,您可以吃蛋糕,老板可以吃。

1
Virtuosi Media

我同意Erwin关于图表的观点。迷你图可能是合适的。

爱德华·塔夫特(Edward Tufte)的网站上对这种事情进行了精妙的讨论:

http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=00002r&topic_id=1

1
njivy

我遇到了这个确切的问题,有25列以上。所有文本数据,所以没有数字。基本上,它的大量库存可用于许多领域。

当前,向上和向下箭头键仍然选择行,但是向左和向右键隐藏和取消隐藏列,以便整个表格向左移动。

加上真正不错的搜索,这种解决方案还不错。

当然,默认视图是完全可由用户定制的。

0
vener

实际上,我们也遇到了这样的问题,即表中显示的数据过多,用户需要直接查看更多列,而不是水平滚动。

我知道可能的解决方案以及我们在设计中也尝试过的方法:

  • 尝试缩小列宽,如简短的措词或值。
  • 带有扩展选项的简要视图,允许用户在必要时查看更多详细信息。但可以乍看之下查看必要的信息。
  • 显示主要详细信息,首先显示简要视图,下面或旁边显示详细信息视图以显示更多信息。

有人有更多特殊的解决方案或想法吗?

0
OneSeven