Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

Thanks!

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!

share|improve this question
5  
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. –  DexterW Sep 13 '10 at 21:13
1  
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. –  Pam Rdz Sep 13 '10 at 21:28
    
@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 –  Jason Sep 14 '10 at 16:36
1  
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 McElhaney Sep 14 '10 at 17:37
    
@patrick for this application, unfortunately yes. –  Jason Sep 14 '10 at 17:54
show 2 more comments

20 Answers

up vote 70 down vote accepted

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.

share|improve this answer
9  
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. –  Jason Sep 15 '10 at 14:40
23  
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 Sep 15 '10 at 20:09
5  
@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. –  Jason Sep 16 '10 at 19:33
5  
If it's so important perhaps the default approach would be computer analysis of the data instead of human analysis? –  Oskar Duveborn Oct 5 '10 at 16:36
4  
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... –  Oskar Duveborn Oct 5 '10 at 16:48
show 1 more comment

The first thing that comes in mind is resizable columns. Since you say that all the columns should be visible, and the data must be in a table format. The column names can be in an 45 degrees angle so they would be easily identifiable and at the same time would take up less space.

share|improve this answer
    
The 45 degree angle idea is pretty good. Fortunately, the size of the data is bigger than the size of the column header, so this isn't the source of the problem. –  Jason Sep 14 '10 at 16:34
1  
Nor is your data the source of the problem. –  xanadont Sep 15 '10 at 20:22
    
+1, Resizable columns, although not that out of the ordinary in a desktop app, really sounds interesting to do in a web app! This could definitely save some space. –  Travis J Apr 25 '12 at 21:24
add comment

You can try displaying multiple lines per record, e.g.:

alt text

You can also go a step further by making each row a summary view that can be expanded so that the user can see the complete record, e.g.:

alt text

In the pic above, the user is interested in Mary Jane's complete info, so she clicks on the triangle next to her name to see the complete record.

Also, I disagree with your premise that "column hiding is somewhat out of the question". If there really is that much information, the user is going to want to hide something. You may want to have them all visible by default initially; but there should be a way for the user to hide some columns as she goes.

share|improve this answer
7  
What kind of reason for anything is "because the boss says so"? Why does he say so? –  Rahul Sep 14 '10 at 17:01
5  
@Jason no offense, but I wouldn't just do what my boss says if he ordered me to do something wih no reason; I'd get a different job. If you're working for this guy (as a UI designer?), why does he not let you do your job? Arbitrary orders like what you're describing don't suggest an atmosphere of trust to me. –  Rahul Sep 14 '10 at 18:12
16  
I find that when I approach my superiors with humility and ask them to explain their reasoning (as a student would ask a teacher) my questions tend to be well received. –  Patrick McElhaney Sep 14 '10 at 19:15
2  
@rahul i didn't ask a question on here on how i should talk to my boss about something. i have a problem with certain constraints that i am to work within and was wondering if anyone had any ideas on a creative solution. telling me to try to change the constraints isn't what i'm looking for. it's like telling a person dying of thirst in the desert to just go buy a bottle of water :) –  Jason Sep 15 '10 at 14:44
3  
I'd say it's more like asking the person dying of thirst in the desert why he went into the desert in the first place, but I get your point. –  Rahul Sep 15 '10 at 14:59
show 3 more comments

This sounds a lot like the case where the customer/product manager wants everything on the main screen vs. everything you need on the main screen.

IMHO, a dashboard screen should give the user an overview of everything... but to get details on a portion of that (e.g. the 275% increase in sales this week) the user should "drill-down" into the data to see the table(s) of info on where the sales came from.

Over-complicating the "main" view to try and show lots and lots of information ends up failing as the user gets lost in a swath of data. The examples below are just random things I found on Google, but in screen A you can hardly even decide where to start - vs. Screen B where content is neatly organized into overviews.

example of overwhelming data: alt text

example of simple, easy to digest data: alt text

share|improve this answer
9  
+1. The insight here is that the customer doesn't necessarily know what she wants or what's best in a given situation. That's the job of the interaction designer! Trust us. We know what we're doing. ;) –  Rahul Sep 14 '10 at 10:07
6  
Jason, it's hard for us to help you when you give reasons like "because that's the way it is". If you could try explaining why you need to see all the columns, we might be able to come up with some other ideas. The fact that scunliffe's answer is getting upvoted suggests the community feels that this is the best answer based on the information you've given us. –  Rahul Sep 14 '10 at 17:00
1  
@Jason - I feel your pain, but from what you've noted in the comments and the screenshot you added, it appears that you are essentially rendering a "spreadsheet" on screen. There's nothing wrong with a spreadsheet, if that is what the user really needs, but just like in MS Excel - you will only be able to get 12-15 meaningful columns on screen and to see the rest you will need to scroll horizontally. My advice would be to reduce each column's header to provide enough info, but not overly exceed the width of the data in that column. (see next comment)... –  scunliffe Sep 15 '10 at 12:02
3  
@Jason The user really must edit data inline? Yeah? NO! The user should not be editing data in a table. Sorry, that's just plain, bad design. The designers are thinking like programmers and that's precisely why you're in this predicament. Editing the record should be pulled out into a details view. Oh, but the table lets you see other records. First the users probably don't need to see the other records. But, if they really do, allow multiply opened details views, cloning, and / or other functions. Anything to get that damned table out of my view. –  xanadont Sep 15 '10 at 20:18
2  
@xanadont i disagree with what you think is bad design. while it may be bad design for some applications, for this application it is absolutely necessary. the user is looking intensely at a lot of data that is changing in near real time. for him to be whisked away to another screen to make a tiny change and then sent back again would be bad design. also, his changes are relevant to all the other data around him, so pulling out into a details view is distracting. –  Jason Sep 16 '10 at 21:19
show 5 more comments

I don't know if you are allowed to do this, but what about not using a table? Show a list of items, here's an example of a movie list:

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

* Movie title 2 *
...
share|improve this answer
    
But do include some kind of sorting. –  rightfold Jun 1 '11 at 18:04
add comment

Make it dynamic in that you control which columns are displayed and then use intelligent defaults. A good example of this is Google's External Keyword Tool, where you can add/remove/sort columns at will. With dynamic columns, you can have your cake and the boss can eat it.

share|improve this answer
add comment

I think you need to have a talk with you boss about this one. displaying all the columns and all the rows will clutter the screen beyond usable. It's like asking to park a truck on a passenger car parking spot. Does not end well for the truck and the parking space.

What you should ask yourself and the client is what steps the user is going to take to evaluate all the data. What is the decision based on first, then what needs to be checked. From that you can begin to understand how the user will be using you application. Once you know that you can streamline the data and present them in a manageable report.

from what I see in you example the overall data cannot be caught in one view. this means the user will have to go back and forth between the two comparing space. This can result in a wrong decision because the data is read wrong. errors in the business you are working for can cost a lot of money. by telling your client that he will probably understand that you need to avoid those errors by painting a clearer image.

OPTION: If you are comparing data rows I suggest minimal data in the overview and selecting a couple to compare will create a report with all the data properly compared (graphs, numbers or any other visual aid).

ALTERNATIVE OPTION: Go to your boss, say that you will do it his way but put an alternative design on the table. When time comes and the hordes of angry users are at his doorstep you remind him that you created an alternative design. politics in technology are never my favorite. but it is sometimes just needed!

share|improve this answer
add comment

If the columns are out-growing the rows, you can try to put the rows as columns

alt text

share|improve this answer
    
ha! very creative... won't work for my application (mostly numeric data) but an interesting solution nonetheless :) thanks! –  Jason Sep 15 '10 at 14:46
    
It could work for You, but requires a huge change and I bet You don't want to have to rewrite ;) IMHO it's the best idea here. Vertical scrolling is good. –  naugtur Sep 16 '10 at 9:02
1  
@naugter it is definitely a good idea, but doesn't work for comparing numeric data. and yes, it would be a bitch to rewrite. –  Jason Sep 16 '10 at 21:21
add comment

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.

share|improve this answer
6  
Actually, please just print the entire DB to hardcopy so I can mark it up in highlighter and have my "IT guy" merge in my changes directly. –  xanadont Sep 15 '10 at 20:21
1  
You could go even farther by implementing a UI device which directly feeds the binary stream into the back of your head. –  Travis J Apr 25 '12 at 21:23
add comment

I agree with Erwin regarding graphs. Sparklines may be appropriate.

Here's a pithy discussion of this sort of thing on Edward Tufte's site:

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

share|improve this answer
    
Sparklines are for ranges of data, particularly over time spans. From the question & the comments the data appear to be a snapshot in time –  John Ferguson Sep 15 '10 at 22:12
    
we actually use sparklines in the cells.. they aren't visible in the screen shot because those rows have no data :) –  Jason Sep 16 '10 at 19:40
add comment

Perhaps you can group low-valued columns (i.e.: values in the range [0..100)) into sub-columns.

Instead of:

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

Present as:

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

Where ":" is a sub-column separator, and C / M / S means "Count/Mean/Sum" (or whatever data is displayed there).

If the absolute values of the data aren't important, you may transform percentages into stacked bar icons.

If a column is the percentage of another column, you may use the target column's background as a progress bar. In fact, depending of the variety of data domains, the cell's background can indicate what value it contains, and drop currency prefix and/or superfluous formatting.

share|improve this answer
    
interesting ideas here. thanks! –  Jason Sep 16 '10 at 19:41
add comment

Here are a few ideas:

The real question is this: what data does the user actually need to see? Do all the rows populate all the columns in your data? Mine does not, but it is far from a 'sparse' matrix kind of display.

1) fisheye view
Ever think of a fisheye view? Hard to find a good javascript solution, but java applets are easy enough to find.

2) hover tips
Just show the concise numeric data (at varying precision based on range) and expose the column titles on hover? You may want/need to highlight cells of interest and let the user hover over them to see what column they are

3) grouping
Group items with similar columns populated into groups, and create several tables with simlar items, leaving out the non-populated columns from each table. You need not actually have to know apriori how to group them... You can create a bitmap or hash of which columns are populated for each row and then sort/cluster the rows into common column sets. An alternate algorithm is to simply sort by number of columns populated. I have found this to work quite well and helps identify groupings easily, and exposes minor inconsistencies pretty well.

share|improve this answer
add comment

As a rule you should not be at the whim of your users' every desire. It's your job as a professional to reimagine their needs in a way that appropriately and efficiently summarizes the masses of data. Computers are great at gathering hords of data and humans are bad at interpreting that data. Resist, with all your might, dumping unformatted, unsummarized tables to the screen.

Consider searching on Google - most searches typically return millions of hits. But do you ever navigate beyond the first page? If you're like most, hardly ever. What do you do if you can't find your answer on the first page? You'll rephrase your question and narrow the results until your target DOES appear on the first page.

Go through the Google Search exercise as you think about your app. Only rarely is listing an unfiltered dump of records appropriate.

Another example - consider the contacts or music tracks on your iPhone. I would be very surprised if you didn't immediately tap the letter-scroller on the right and jump to the alphabetized section. The full, complete listing of records is there more for candy (show off the phone's scrollability) than anything else.

Now, all this can also be applied to the data that you show horizontally (number of columns). Figure out a creative and intuitive way to summarize that data. An added benefit to nailing this is these are the things that make an app enjoyable to use. Add enough of these thoughtful tweaks and polishes and the app even becomes "fun" to use.

At the very least you're thinking about the problem; this is farther than most devs go. Good luck!

share|improve this answer
    
thanks for this answer. in response: the data isn't unfiltered by any means. there are plenty of filters and sorts in place that i just cropped out of the screen shot. the problem isn't getting the correct data, it's fitting all the data into one place. also, i don't, nor ever will, own an iPhone. your google example is interesting, but is a bit like apples and oranges for my application. my users need all the data available to them so they can edit and make decisions extremely quickly as seconds can mean thousands of dollars. this is why i need everything there all at one time. –  Jason Sep 16 '10 at 19:45
    
It sounds like you need configurable automatic algorithms to make those decisions for your users while they oversee the process? Or if there's so much money in it, get a long row of screens for each user - problem solved. –  Oskar Duveborn Oct 5 '10 at 16:47
2  
Wow, just wow. I would hate to be a user of this app. Staring at a screen all day and if I miss one thing it's going to cost my employee thousands of dollars. That's stressful physically (eye strain) and mentally. I'm now more convinced than ever your manager is clueless. –  xanadont Oct 5 '10 at 22:52
add comment

One example I can think of that might inspire something is MLB.com's standings page, which is a table with way too many columns, but the customization interface is instantly intuitive (to me - and it's not aimed at a techie audience). You probably don't want MLBAM's arbitrary limit on the maximum number of columns you can have, of course.

The biggest UI problem with column hiding is usually getting the hidden column back - unless they've fixed it recently, "unhide" is really hard to find in Excel, for example.

share|improve this answer
    
+1 this is also the type of answer i was looking for. this is a very creative solution that i will present. thanks for this link! –  Jason Sep 16 '10 at 19:37
    
i wish i could accept two answers, because this one is great. it's gotten preliminary approval by other devs and should probably be approved by el jefe. thanks so much! –  Jason Sep 16 '10 at 19:52
add comment

Hardware for sure, but I would suggest commodity multi monitor setup. Two 19" compared to asingle 24" is dramatic when working with wide tables or spreadsheets.

Additionally, fuzzify/normalize critical columns (columns that indicate to the user that further analysis needs to be performed, and possibly further action). Group by those fuzzy values.

The other trick might be to incorporate 'pinned' columns so that as a user scrolls left or right the pinned columns trail to the opposite end of the screen based on scroll direction.

share|improve this answer
2  
+1 Buy more screens - if the wish is to have more columns visible than fits a screen, then get more screens - bolt them to the wall and have 10 of them in a row - now you can fit a lot of data for review ^^ –  Oskar Duveborn Oct 5 '10 at 16:40
    
Deserves more upvotes. If all the data is genuinely needed all the time -- and Jason's reponses to other options seem clear on this -- then making the display bigger is the only option. It sounds like a financial markets app, and if it is, then multimonitor setups are very common. –  e100 Sep 16 '11 at 17:45
    
lol this is a funny answer. I agree with e100 that multimonitor setups in financial applications are common. However, I do not believe that if a technical problem arises it should be solved with this type of solution. Very hacky. I have done some trading in my time, and it is possible to have the whole verbose interface on one screen. In fact, it is almost a requirement for many online trading brokerages (eTrade, Charles Schwab, ScottTrade, TDAmeritrade - to name a few). Usually multiple screens are used for multiple applications, not just for one unsightly one. –  Travis J Apr 25 '12 at 21:12
add comment

What we do is devide the screen basically in two parts. The upper half shows details about the currently selected item, the lower half shows the grid with paged list of items available.

The tabcontrols are used to display detail / collection views of what we call nested details/collections. These are formed by foreign key relationships.

Hope this helps you somewhat. mockup

share|improve this answer
    
+1, I like how your foreign key relations are mapped to the tabs. –  Travis J Apr 25 '12 at 21:07
add comment

Since we don't know why the users have to see all the columns or why you boss thinks they want to see all the columns, you're going to get the get rid of some colums solutions. Here's mine. Have a way for users to select, order & save their preferences for the columns they want. I'm sure there is a significant number of users that would like to only see 5 columns. The real problem is they all don't want to see the same ones. Eventually, they will have so many columns that a horizontal scroll bar will appear. My guess is these 'spreadsheet junkies' won't mind. They'll feel right at home.

share|improve this answer
    
we do some user preference saving already in cookies, so this has been an idea along with Richard's idea (ui.stackexchange.com/questions/1459/…). Thanks! –  Jason Sep 16 '10 at 19:54
add comment

I had this exact problem, with 25+ columns. All text data so no numbers. Basically its an huge inventory with way to many fields.

Currently, arrow keys up and down still selects row, but left and right keys hides and un-hides a column so that the entire table moves the the left.

Coupled with a really nice search, this solution is not bad.

Of course the default view is fully user customizable.

share|improve this answer
add comment

Table is a good way to present large amount of data. However, with more than 5 columns, tables quickly become unreadable. If your data is changing in real time as you say it, the user most likely won't be able to make his decision in time if he had to look at 15 different columns at the same time.

Google knows best that the most important consideration when looking at a large amount of data is sorting. You need to sort by its relevance to user. Every piece of data may be important, but some piece of data are more important than the others, you need to identify which piece is the most important and which pieces are not, this heavily depends on the business' goal.

Not all columns are created equal

Some columns are more important than the other:

  • some columns must be read first before data in another column becomes relevant. English speaking users reads from left-to-right, columns should be read left-to-right when possible;
  • some columns are important only in their relative order, i.e. their absolute values don't really matter, e.g. date-time. You can hide this column, and use sorting to give the sense of order;
  • some values are only important as high, medium, low. The small difference between two "high" values may not really affect decision-making by much since there are other factors that affects decision more significantly. You can use "green", "yellow", "red" icon instead of the full text to save space.
  • some columns may be read-only, or need to be edited less often than some other, there are groups of columns that are very likely to be edited together. Sort your columns so that the columns that requires editing together is grouped together;

Not all rows are created equal

A very common mistake when sorting, is to sort by some useless arbitrary order, like alphabetic order or date or numerical values. Ordering that is static and consistent is useful if you need to search values, but you should let the computer do the searching for you. Instead, in most cases you'd want to order by its relevance.

Some of these may or may not apply in your case:

  • recently updated data are more important;
  • higher values transactions or transactions in a certain range of values are more important;
  • false values or true values are not important;
  • (more complicated) false values are important only when another field has a certain value, otherwise it's true value that is important

You need to identify these goals for your users, and and do a weighted sorting of your data and columns accordingly. If you have not identified which goals are the most important for your users, then you're not really designing. After you identify which data is most important, then you can proceed to hiding some of the less important datas, or abbreviating them, or abstracting them into icons. Icons are easy to absorb, and your user don't want to spend three seconds reading a 8221 and 1463 if he can spend one-tenth of second looking at "green circle" and "red cross".

Some values are important only in certain context

Highlight interesting values. The user may only be interested in transactions with a certain value in a certain field. And the user might know he'd never touch transactions which is too high or too low for his preference; you can filter them so the user does not even need to see them. You can even hide a whole column, if the user say he doesn't have a use for the column.

share|improve this answer
2  
thank you for this well-thought out answer! –  Jason Oct 4 '10 at 16:57
1  
+10 if SE would let me –  Marjan Venema Jun 11 '13 at 21:07
add comment

I know you've selected an answer, but I wanted to bring up something that I think is pretty important: data vs. information. I've been thinking a lot about this recently, so it's at the front of my headmeats.

What you're doing is showing data. It's raw, it all seems really important, but in reality most people don't need to see the data. What they really need is information that's been generated based on the data. You mention in one of the comments that users can "see a graph when they hover over the row", and I think that's backward. The raw data should be available on demand, but the default view should analyze the data and show the resulting information.

This isn't to say graphs are the correct choice, but an alternate display of the key findings of all that data might be a wiser way to go. This is harder to develop, conceptually, but will make the end product more of a useful tool than simply a place to lookup things. The question to ask your users is "what do you want to know when you're looking at this screen?"

share|improve this answer
2  
+1 process the data (refine it) in a way that matches what human reviewers already do with the data. The ultimate top-level view would be a nice RED-YELLOW-GREEN scorecard for each section and the possibility to drill down on domain items and rules which created the score... –  Oskar Duveborn Oct 5 '10 at 16:43
2  
+1, that is a great question to ask your users. –  Travis J Apr 25 '12 at 21:14
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.