How to make a boring (but very functional) dashboard more interesting and appealing without cluttering it unnessesarily?

Question

I have a simple dashboard for project managers. It's intended to give very basic information, and to give them a "launching point" to get to all the most important things they need to take action on. Here is a screenshot where the data has obviously been washed, but the look is exact.

I have had a lot of people say it works great for them, but others say it's a lot of information and it kind of "washes out", i.e. they are a bit overwhelmed and it would be helpful visually if there were elements that could break up or somehow enhance the screen visually without cluttering it more.

I forgot to mention that when a user clicks into one of the dashboard sections, or clicks on the + symbols, that section expands to fit as much of the content as it can without scrolling, and the other sections contract. Also, this is all designed to fit on one page, with not "page scrolling", though there is scrolling for the grids themselves when there is more data than can be shown.

Answer 1

The psychology of a dashboard is to create an immediate feeling of being in control. As you say, it is a launching point. You need less tabular information on your dashboard, more graphs.

Put each of your important tables on a page of its own. Give each the space it needs. Make the dashboard a central control point with summary information. Use graphics to replace numerical figures.

On Stacked Tables:

Multiple full width scrolling tables stacked above each other on the one web page is bad for user interaction. Wherever I have seen them the web page has been cramming information in and ended up with more than one screen full on the page. Even experienced users of the page lose track of which table they are in. With scrollbars close to the right edge they also show momentary confusion around which vertical scrollbar (browser or table) to drag.

A good dashboard will fit on one screen, avoiding that scrollbar problem. I'm suggesting the sexing up be like this:

Key Points

• Uses bar chart for the first table. It could use multi-bars or more timeline-like display to get more information in. In any case, the More link will take you to a fuller version. We might want to call that link 'Review' to be more commanding.
• The Alerts section is centered and given more space around it. They're alerts! Alerts need to stand out. We show minimal information about the timesheets here, just a link.
• Charging information is given as pie charts with color coded key on right. One pie chart should be shown selected, and the hours reported in the table are for that one. In each pie a blank wedge is needed for uncharged hours to make using percentage display make sense. Click More or a particular time period link for a full review of charged hours for a chosen time period.

Answer 2

You said the right things when you want to enhance this page and not clutter it up, because you definitely don't want to get in the way of it's functionality to those that do use it.

Whenever I see a page like this I wonder if there is some sort of visualization of the data that could enhance those user's interpretation of it. It's a little hard to tell with the scrubbed data you've included here but for example are there some graphs that would illustrate the 4 data columns in the first table (approved contract, forecast @ completion, actual, a/r) that may help the user pick out the data needing their attention? same goes for the other tables - can something be done to show that data in a way thats easier to decipher than table cells?

If those alerts are truly alerts that need attention put them front and center and with some strength behind them to really drive people to pay attention. Is the project number really an important piece? If thats a reference point then great, but if it's just a key mostly ignored by your users then maybe it doesn't need to be the first column, that column could be something more readable like the project title. These are just some thoughts to get ideas brewing, hope it helps.

Answer 3

1. Add some "white space" - unclutter the interface
2. Add a visualization to the data.
3. Look for some inspiration - Have a look on some pretty dashboard example and data viz. examples (patterntap etc., geckoboard,infosthetics.com, smashing mag)

Answer 4

You could add tabs and/or accordions to group and hide/show different sections on the page. This will also give you room for an image above the information you want to display.

Also, add a alternate row style for the tables. It gives it a nice look.

Hope this helps.

Answer 5

As I already pointed out in my comment, there are differences between first time users and regular users. The second group might prefer more information over a less cluttered UI, because they need information density.

I think there are some things you can do to ease the UI without hiding (much) information.

1. I think the alerts definitely need to move to the top.

2. customizing the number of items in the tables. Start with a low number (5 for example), but allow users to choose a higher number. (This is something that has come up time and again. More than 5 at the start usually overwhelms people, but after a few months questions to raise it will come up.)

3. You could indicate incomplete items with a small icon or a color accent.

4. the link display: blue is a harsh color and the underline make it crowded even more. Sometimes little adaptations (using less saturation on the links, and leaving out the underline or setting a border in a lighter shape) make the difference between crowded and peaceful. And I'd rather set all-row or all-cell hover effects to click than just text links. (Except perhaps for the emailadresses.)

Visual aids and graphs may help but should be used with care. As the example you give indicate some kind of project management tool, I certainly would like to have details (the actual project and client names and such) at hand, not hidden behind clicks and buttons.