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.

enter image description here

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.

  • Can you say a bit more about when/how you need information from more than one of these tables at the same time? – James Crook Mar 24 '11 at 22:04
  • @James: I don't think users necessarily need information from more than one table at the same time. Their use of it is really as a launching pad, to get to things that matter. For instance, they can right click one of the project rows in the MyProjects section and it gives a context menu for editing the project, working on the budget, access to frequently used project reports, etc. The who charged is to provide quick access to who charged on their projects so they can keep close track of every charge and make sure the right people are charging and that they are not overcharging. (to be cont.) – richard Mar 24 '11 at 22:13
  • The alerts section is neat. For instance, in the shot I gave above, they would click on the one that says "1 Project that needs some sort of attention". It would expand down and show that project row, and they could click on it to launch directly into editing the project. If that row had said "5 Projects that need some sort of attention", and they clicked it, it would show all 5 project rows and they could launch to each project by clicking it. – richard Mar 24 '11 at 22:14
  • Missing timesheets basically helps them act as police to make sure people do their timesheets so that they know their project effort is accurate to the day. I'm sorry if I am giving too much or irrelevant information. I am a developer by experience, and am just learning about design and layout, so I am not sure how to answer your question, so I am just giving all the info I can. – richard Mar 24 '11 at 22:16

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:

Dashboard with more graphical elements

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.
  • did you use balsamiq for those example images? – richard Mar 24 '11 at 20:14
  • @Richard Yes - but I 'cheated' and used (empty) buttons that I stretched for the bar chart bars. – James Crook Mar 24 '11 at 22:02
  • In balsamiq, that sort of cheating is par for the course I think! It's the look that counts, methinks, not necessarily that you used a control called "Bar chart". :-) I just started using Balsamiq and it has made a world of difference in focusing me on what matters. – richard Mar 24 '11 at 22:17
  • 2
    As nice as it looks, make sure this is something the regular users actually want, because it leaves out lots of information that advanced users might need. It is a UI that is targeted at first-time or low intensity users, and I would suggest that if you test, be sure to include regular users, and let them work with it for a while. I think it looks very nice, but I would not prefer this interface for regular work, and have encountered various customers that also prefered more details, even when it makes for a more cluttered and dense interface. – Inca Mar 25 '11 at 18:26

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.

  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)

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.


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.

Your Answer

