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.
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!
Answer
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.)
No comments:
Post a Comment