How To Display Too Much Data

  • We're building a web-based platform where the main dashboard shows a table of data for users to view and analyze. As we're growing this tool, we seem to be adding more and more columns and are running out of horizontal space on smaller screen resolutions (we're seeing some data wrap). It is important to the user to view all columns at once, so column hiding is somewhat out of the question, as is horizontal scrolling (per the boss's request and because horizontal scrolling sucks anyways). I was wondering if anyone knew of a clever UI for tables with many columns.

    EDIT

    Below is a screen capture of the layout of the table. Unfortunately for security purposes I had to blur out the column titles. This example has rows with practically no data in them, but in use they will have lots of data that will expand wider than their respective column titles. In response to some of the answers, it is imperative that the user see all the columns, as they are all necessary to analyze the data to make certain decisions. All the data is numeric aside from the first three columns. Thanks again for any feedback.

    alt text

    Ok so I see that uploading this image doesn't really do it justice... it takes up the full width of the screen at 1680x1050 resolution (22") and as data fills in the columns, the left column w/the text shrinks down a bit.

    EDIT 2 I just wanted to say thank you to everyone's awesome ideas. I can only select one answer, but a lot of your ideas have proven very useful and may end up in the final product. Thanks again!

    If the data doesn't have to be tabular, build graphs or visualizations that show multiple benchmarks at a quick glance. That, or completely rethink what's 'important'. Without knowing more, it's hard to give any more feedback.

    I also think you should give more information or, better, provide some visual aid. With what we know now, I don't see many alternatives.

    @greelmo, the data DOES have to be tabular and it includes "sparkline" graphs in the data cells already in addition to the capability to show larger graphs on any existing data set. @rahul, @pam i will see if i can get a SS

    Do you really need to see ALL of the columns at once? I understand you might need to compare column A with columns B, F, R, and Z. I can also understand if certain columns (particularly the first three) might need to be visible at all times. But do you really need to compare ANY given column with ANY other column?

    @patrick for this application, unfortunately yes.

    It frustrates me when people ask for things like this as if it is perfectly reasonable to fit 2,000 cubic feet of cargo into a minivan.

    Why not just have a constant stream of binary digits scroll down screen. There are no rows but related data items are color coded in shades of green. Then your boss just needs to put on his "Matrix" sunglasses.

    copy windows explorer ( where you view files and folders ) like multi rows per row, rounding , etc.

    Another frustrating thing about this question is that one of the key reasons/constraints isn't listed. In a comment to another answer, you wrote, "the user is looking intensely at a lot of data that is changing in near real time [as he edits]". This gives a key reason for both having the monster view and for editing right there in the table, though there may of course still be better ways to fulfill both contraints.

    Hiding and not hiding are two ends of a continuum; e.g. a numeric column could collapse into a clickable sliver of color / skinny icon. Lie Ryan's comments about sorting are right on and using sorting (to effectively hide rows instead of columns?) is very helpful. But if the sort order doesn't/can't show recently changed rows first, then it could help to have a real-time highlight appear on the last N cells that have changed, or on cells that have changed in the last M minutes. Maybe it would even make sense to auto-expand minified columns if anything in them (that's on-screen?) changes.

    @JonCoombs - my thoughts are similar. Once it was clarified *why* all the columns needed to be visible at once [real-time changes], then the natural solution is to make sure that anything changing is seen. Any sane solution would also find some way to use multiple rows per left-hand item. To not interfere with easy visual comparison up/down between rows, this could be done by having a second table showing the columns that did not fit in the first table. E.g. mark 3 or 4 rows you are comparing, extra info for those rows only show up in a table below. Even better, *delta* values in red/black +-

  • Since all of the data after the first three columns is numeric, you can round off so that the width of each column is as little as four characters.

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

    You might decide which version to display based on the amount of space available. Those fortunate to have larger monitors would still get everything. The presentation would degrade gracefully for smaller monitors

    Of course, when the contents of a cell are abbreviated, you should show the full value in a tool tip.


    Update: @Oskar pointed out in the comments that showing numbers with different magnitudes makes it more difficult to compare visually. So here's a variation in case comparing relative values is more important than precision.

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

    (The header in this example is wider than the data, but as others pointed out that can be solved by tilting the headers at a 45 degree angle.)

    this is the type of answer i was looking for. i talked to my boss about this and he likes this idea. thanks! this has definitely pointed me in the correct direction.

    While this helps you *cheat* squeezing in data it IS NOT the correct solution. Please go the extra mile to really understand what exactly the end-user is doing at this screen. I'd be willing to bet that either a) no, the user really doesn't need to see all those columns or b) no, the user really doesn't need to see all those rows.

    @xanadont if you were to make that bet, you would lose. please believe me when i tell you that EVERY PIECE OF DATA ON THAT SCREEN IS EXTREMELY IMPORTANT.

    @xanadont i do understand with great detail what my end user is doing, which is why i am asking this question on how to show them more data

    If it's so important perhaps the default approach would be computer analysis of the data instead of human analysis?

    When L2 added this it looked a bit neat but.. also a lot harder to size numbers against eachother at a glance... they "fixed" that by adding different colors depending on if it was raw values, K's or M's and so forth...

    Yes, all the numbers in a column should be at the same scale. If the scale is k (thousands) and some of the numbers are less than 1000 show "< 1k"

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM

Tags used