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!

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.
–
DexterWSep 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 RdzSep 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
–
JasonSep 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 McElhaneySep 14 '10 at 17:37

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.

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.
–
JasonSep 15 '10 at 14:40

34

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.
–
xanadontSep 15 '10 at 20:09

7

@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.
–
JasonSep 16 '10 at 19:33

6

If it's so important perhaps the default approach would be computer analysis of the data instead of human analysis?
–
Oskar DuvebornOct 5 '10 at 16:36

5

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 DuvebornOct 5 '10 at 16:48

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.:

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.

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

19

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 McElhaneySep 14 '10 at 19:15

4

@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 :)
–
JasonSep 15 '10 at 14:44

5

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

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.

+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

8

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

2

@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)...
–
scunliffeSep 15 '10 at 12:02

4

@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.
–
xanadontSep 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.
–
JasonSep 16 '10 at 21:19

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.

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?"

+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 DuvebornOct 5 '10 at 16:43

6

+1, that is a great question to ask your users.
–
Travis JApr 25 '12 at 21:14

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.

+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 DuvebornOct 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.
–
e100Sep 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 JApr 25 '12 at 21:12

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!

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.

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.

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!

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.
–
JasonSep 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 DuvebornOct 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.
–
xanadontOct 5 '10 at 22:52

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.

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.

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.

I just have to throw in my two cents here, despite the fact that this question is so old.

If you have a bunch of data that is ALL necessary for the user to make decisions, then obviously there's a decision-making process that's based on that data. Rather than putting the onus on the user to make those decisions based on raw data, what you should probably focus on instead is figuring out how to process that raw data in a way that's more useful to the user.

For example, if you have columns A, B, C, D, and E, and A needs to be updated when B and C are less than D but greater than E, then instead of showing your users all of those columns, just have a single column that displays whether or not that condition is currently true.

Instead of swamping your users with data, you need to establish a layer of business logic that USES that data. Not only will it greatly simplify the complexity of your GUI, but your users will most likely be incredibly grateful to you for making their lives easier. You should always attempt to identify tasks that are easier for computers than for people, and offload the responsibility for those tasks to the computer.

thanks. good point for sure, although not applicable in this case. if i recall, he literally needed to see every field. the problem wasn't that he couldn't see or interpret all the data, but that i simply didn't have enough real estate to show everything and was looking for clever ways to save real estate.
–
JasonDec 10 '14 at 23:24

Gotcha. As someone with a good bit of UX design experience, though, I will just mention that many times what users ask for is not, in fact, what they really want. Whoever asked you to do this may have just described a problem and asked you to implement the only solution HE could think of, but that doesn't necessarily mean that what he thought of was the BEST solution. Many times you can stick a design in front of a user who asked for something completely different, but once they understand WHY you suggested an alternative solution, they'll be all for it. Not always the case, but worth a try
–
IsochronousDec 11 '14 at 21:46

i was asked, specifically, to make a UI that explicitly showed a very carefully chosen, specific set of data. many people on here have said, "oh well maybe he didn't know what he really wanted," and i'm telling you, yes, he knew exactly what he wanted and tasked me with building it for him in that exact way.
–
JasonDec 14 '14 at 3:10