The Uber Art of Dashboards

The “art of dashboards”? Sounds trite and a stretch, but let the Dashboard Spy explain. We’ve heard it said that art is the expression of ideas, right? That it is a form of communication between people. One in which the artist understands and uses to his or her advantage the sensibilities of the audience to both inform opinion and shape ideas.

Well, that certainly sounds like what we do every day with business intelligence, doesn’t it? Business dashboards have the ability to not only to report metrics and KPIs, but to do so in a manner that shapes opinion, influences action and strikes varying tones of urgency. BI metrics may be cut and dry (and that is a debatable statement), but the communication of the meaning of the metrics is an art.

Business dashboarding is a highly visual medium. One that relies on basic human perceptions and principles of cognition. It is also an information-dense medium, in which the nuances of information presentation are tied closely with the ability of the dashboard designers to competently capture and express the metrics and their meaning. A screen full of icons, red/green/yellow indicators, pie charts, bar graphs, blinking alerts and data tables may only obfuscate the true message when presented wrong. We’ve all seen poorly designed dashboards that assault the business user to the point of numbness.

The reason I’m on this riff on the art of dashboards is because of some very interesting materials that a Dashboards By Example reader shared with me. Want to see some artifacts of a dashboard design team that clearly knows the art of expression through a business dashboard? Thanks to Andres, the solution architect at UberBI, a start-up company that produces business dashboards, we have this look at some wireframes, screenshots and even an interactive demo.

Take a look at this great hand-drawn wireframe:

business dashboard wireframe from Uber

And here’s an example of a final look and feel of the interface:

Sales Dashboard - Flash Dashboards from Uber

Gorgeous work, isn’t it?

We’ll detail some of the project infromation but first, let’s take a look at more project artifacts:

Here is another wireframe. This shows another screen that the user gets after clicking on a top level tab.

Wireframe Mockup for a business dashboard

I think you’ll agree that even these sketches are beautiful in themselves. They capture requirements and show clarity of layout arrived after much discovery of the client’s needs. I can feel the “art of the dashboard” when I study these mockups.

Here is another final dashboard screenshot:

Sales Metrics BI Dashboard

Note that the hover-over text on the map portlet shows the region and the corresponding amount.

The UberUI demo can be found at http://demo.uberbi.net. Try it and you’ll see that it is a flash-based dashboard.

Here is some additional project info that came with the submission of this dashboard to The Dashboard Spy:

UberUI: Our dashboard design process starts with a storyboard from our design team, then our developers prepare the wireframes and we present diferent options to a focus group and some external advisors from Fortune 500 companies.
About the technology, it’s a mix from straight html, some CSS, JavaScript and flash.

Attached you’ll find the first storyboard of one of our projects. This storyboard was made during a meeting with one of our clients, and received by our design team to start the process.

We are a start up company located in Mississauga, Ontario. UberBI’s vision is to provide highly interactive dashboard solutions to small and mid market organizations. We are currently in the process of developing several add-ins for SMB ERP solutions, the objectives is to create a business logic layer that will include ETL processes and Vertical KPI libraries that can be easily replicated from client to client.

All our components are 100% user experience oriented, about the back office technology, the data sources can be from MS SQL to SAP and the front end from a intranet dashboard to a hosted solution.

I wish these guys luck. With design deliverables like these examples, they certainly have a grasp of what it takes to design a slick looking dashboard.

Additionally, however, let’s all remember that the “art of the dashboard” lies not only in the look and feel, but in capturing the nuances of communication within the organization. That includes the principles of usability, graphic design and information visualization clarity.

Dashboard Spy readers: Would you like to show me your wireframes? Send them in.

Tags: Dashboard Design, Wireframes, mockups, storyboards, The Art of the Dashboard, Business Dashboards

PS. Seems like quite a heated discussion is brewing. Take a look at the Dashboard Spy reader comments below.

20 thoughts on “The Uber Art of Dashboards

  1. In the graphic for ABC Company, there are three dial gauges at the top of the dashboard. Dial gauges in general are not a good choice, and these are even worse than usual. If I simply look at the left hand gauge, inventory for HL Mountain Rim, below 600 is red, 600 to 1800 is green, and above 1800 is again red. Does this mean that between 600 and 1800 is good, but outside that range is bad? Probably not, but it “looked nice” to some infoviz-ignorant designer.

    In the last dashboard, there’s a stacked pyramid graphic showing sales by category. The top two items are Bikes 12.46K and Components 10.64K. To me the thicknesses of the two blocks are roughly the same, not proportional to the values displayed. The volume of the Components block is obviously much much larger than that of the Bikes block, so the graphic is at best uninformative, and at worst misleading.

  2. Hi Jon,

    Thank-you for your feedback, very much appreciated.
    In regards to the dial gauges, inventory numbers outside of 600 and 1800 are meant to be red. This was actually requested by one of our clients in a previous implementation as they needed to monitor under and over stock metrics.

    In regards to the stacked pyramid graphic, we agree with you as it was probably not the best choice to represent the data.

    Thanks
    Andres
    http://www.uberbi.com

  3. Cool. I really like the look of the dashboards. You guys can argue about what displays to use for what purpose, but in my experience, this will really wow the users and project sponsor. Eye candy is definitely needed on BI dashboard projects whether you like it or not.

    Plus, the fact that it is Flash means that is can be “played with” – the user can drop things down, push buttons, etc. All good things.

    I know you will argue, but believe me that the average user will not care if the blocks are not accurate to their values.

    Love this dashboard “art”!!! Show me more.

    Dashboarder

  4. Andres – So all three of the dials intentionally have ±45° boundaries between green and red regions? This is what I was getting at, the falseness of the displays. Dials are really a terrible graphic element for a dashboard. They take up a lot of space, they show only one piece of data (where a line chart could show a nice trend with one or more series), but they give the false impression to a data-phobe that he’s looking at something important.

    Rogers – Wow. Your average user shouldn’t be trying to make important business decisions based on such eye candy. He would be better suited to sweeping the floors.

  5. Pingback: PTS Blog » Bad Graphics - Stacked Pyramid Chart

  6. Jon – So at first the issue was that the dial gauges were misleading because they have red regions on both side and you assumed it was decided by some “infoviz-ignorant designer”. Clearly showing your lack of understanding of the retail/distribution industry (overstock is as bad as understock) and one of the main reasons why many dashboards implementations fail… Know your customers business so you can add value.

    So now the problem is the 45 degree boundaries and the falseness of the displays? And I guess your solution is to replace everything with Lines and Perspective charts to squeeze as much information as possible with excel/VBA as the front end. Then identify the users that are adopting your tool and offer them C-Level positions… For the ones that are not adopting the tool, they should be sweeping the floor.

    This is another common mistake as you are building your solutions for power users that like to see trends and lots of information. By doing this; you are putting your solution to compete against great alternatives like OLAP implementations that leverage graphical MDX editors to gather insight. C-level, Management, Sales and Marketing don’t care about 45 degree boundaries; they just want to have a simple way to represent their KPI.

    Which brings me to my next point; we believe that dashboards are meant to increase data consumption and provide decision making data to as many people as possible; they are also great tools to communicate organization’s objectives in a very effective manner.
    “Data Consumption” is the key word here, a successful dashboard implementation becomes the starting point of the decision making process; one that people check on constantly in order to quickly understand the health of the business (i.e. the executive that checks daily in the morning a simple inventory gauge, to quickly understand the status of his department’s inventory. Not trends or analysis but just a simple question… Am I understock/overstock?)

    There is a huge need in the market for graphical, interactive and portable BI Dashboard solutions to increase the distribution of data insight. BI Vendors have failed to deliver such of solution and as smartphones and UMPC devices become more and more mainstream, having a flash/html based tool will be a great asset. We are betting big time on this and I guess only time will tell who is right.

    It’s clear that we both have very different opinions and targeted different audience/organizations so I am not sure how constructive this conversation could be. Feedback is always welcome as long as it’s constructive, it would be interesting to see your proposed implementation for this type of solutions so we can talk about the advantages and disadvantages.

    Thanks
    Andres

  7. I must say that I agree wholeheartedly with the principles Jon is putting forward (and which are also put forward by experts in the communication of information such as Stephen Few).

    I like that Uber BI are trying to produce something which is attractive and accessible – I commend them for that as much of the “un-misleading” BI looks fairly unattractive, however they have gone far too far.

    Personally I took issue with the 3-D content, none of which actually represented that many dimensions.

    The cylinders – do you measure from the top of the upper ellipse, the bottom or the middle? Likewise the cuboids – these were examples of poor practice and 2-D charts would have made far more sense. I think their designer has talent for making things look approachable, and would love to see what they could do with 2-D content.

    The true crime was the pyramid (as Jon already pointed out).

    This took one dimensional data and incorrectly represented it in three – my reading of the chart is that the actual data values solely impact the height of the chart segment. To make it three dimensional was bad enough as that suggests a relationship of volume rather than just height, but to taper it as well makes it particularly misleading.

    To add some positives – I think the map and line charts are excellent – whilst keeping things simple, they are attractive enough that people who really don’t care about this stuff might still use them!

    In summary – I think Uber-BI have great potential. If I were in their position, I would think very carefully about the story that each gadget tells and ensure that the battle between prettiness and truth is brought back into balance. I would consider retaining somebody like Jon or Stephen to ensure the dashboards tell the truth whilst working to make them accessible to all.

  8. Quick correction.

    This:

    I like that Uber BI are trying to produce something which is attractive and accessible – I commend them for that as much of the “un-misleading” BI looks fairly unattractive, however they have gone far too far.

    Should have read …attractive… rather than …unattractive…

  9. First off, these dashboards, so common in many products, have what I would call “one time impact.” That is to say, the first time you show one to your boss, she’ll be impressed. However, the novelty of all the dazzle wears off quickly when he/she actually tries to interpret the data and has to filter out the same visual distractions month after month. Been there, done that.

    Let me be more specific about the problems with the given dashboards:
    1) Gauges are ok for monitoring real-time or near real-time data (e.g. PI/KPIs monitored 24/7) but are not good for dashboard reports. On dashboard reports, they often show a single historical value and take up a lot of space to do so. Do real gauges commonly show historical values? Does your speedometer show your speed as of the end of last month? Does your tachometer show last week’s rpm? How many gauges in an airplane cockpit display yesterday’s, last week’s or last month’s values?

    The other problem with gauges is lack of scalability. In the particular example shown, suppose you need to show the top ten and bottom ten inventory items by value? Assuming that you can fit the 20 gauges on a page, there’ll probably be little, if any room left to display anything else.

    Yet another problem with gauges is that the reader has to work really hard to read them. For just three gauges, to read the data you have scan from the left all the way to the right of the display area.

    The bullet graph, invented by Stephen Few, addresses ALL of the above issues. Because bullet graphs occupy much less space than gauges, you can show the three values in the example in a single area of the screen, without forcing the reader to scan the entire field across the screen. Furthermore, you can show top ten and bottom ten values without hijacking the entire display area. Each bullet graph would show the areas of low, acceptable and high inventory values (just like the gauges) and in addition show a “target” value. In this context, a target value could be a reorder point. Lastly, the bullet graphs can be arranged to show inventory values in, say, ascending order. This may not be required, but you get this info for free (i.e. without adding any additional complexity to the dashboard display). Nuff said.

    2) Line graphs. The line graphs are a good choice because they show trend over time. However, in the dashboard, they include unnecessary distractions. For example, what additional value or information do the shadows and gridlines add to the display? Answer: no value at all. On the shadows I can think of an analogy in photography. Except for very specific compositions where they are the emphasis of the composition, shadows distract from the main subject. Usually, one would set up strobes, use bounce flash, a reflector or reposition the subject in natural light to avoid harsh and very distinct shadows. Why would one deliberately want to add this type of distraction to a chart, except to detract from the message the chart is conveying? If the gridlines are necessary to better interpret the values on the right side of the chart, they need to be toned down considerably.

    3) Cylinder charts. Ever heard of Occam’s Razor? Here we use an elaborate contraption to deliver a simple message. Why not just use another gauge? Are the cylinders used for the sake of variety? At least with the gauge you can read the actual value. One cylinder is labeled Sales Goal. What’s the actual goal, the top of the cylinder? Another obvious distraction is the reflection on each cylinder. What meaning does the reflection convey? Answer: none. I can think of another parallel with photography. If I were taking a picture with elements displaying such harsh reflections, either I’d reposition the subject, reposition the camera, reposition the lighting, use a polarizer (if I thought it would help) or some combination of the foregoing. So why on earth would I deliberately add such an annoyance to my charts, except to obscure the message? A simple 2-D bar graph can be used for Accounts Receivable and Payable and a bullet graph for Sales Goal (perhaps renamed to Total Sales and showing goal as a target on the bullet graph).

    4) Sales by Salesperson 3-D bar chart. A 2-D bar chart is far easier to read – period. Also, since the value is shown on each bar, the vertical axis is unnecessary, as are the gridlines. These elements add unnecessary distractions to the chart. A bullet graph is another useful alternative, if you need to show both value and sales target for individual salespeople.

    5) Sliced pyramid chart. As John McEnroe would say: “You cannot be serious.” If the volume of the slices represented actual values, then that would be bad enough because we humans are terrible at comparing volumes, not to mention that parts of the slices are obscured. However, given that the largest value is represented by one of the smallest slices (it might actually be the smallest slice, but it’s hard to tell if the large but skinny base is bigger or smaller in volume), it’s obvious that volume doesn’t convey the values. The values don’t correspond to the thickness of the slices either, so what exactly is this pyramid’s relation to the actual values? This is even worse than the cylinder in taking a simple message and conveying the data in meaningless visual display.

    6) Salesman Last 3 months. Same hard to interpret 3-D charts as before. In this particular instance, a series of side-by-side line charts (one for each salesperson) with a common vertical axis and each chart having a month category axis would be better than even a 2-D bar chart. This way, you can compare performance over time, which is usually desirable with time-based data.

    In summary, the dashboards shown here are complete abominations that violate EVERY principle of good charting as exemplified by the data visualization researchers and expert practitioners in the field. It’s just plain arrogance to believe that we know better than these folks. Suggesting that all the chartjunk in these dashboards constitute “best practices” and are representative of “the art of dashboarding” is just plain incorrect and conveys the wrong message to folks interested in creating truly meaningful dashboards.

    I apologize for the long post.

  10. There’s a lot of energy here and I applaud that. Let me weigh in and remark that people tend to view these matters from their own perspective and never mind the other side. I’ve seen this argument lots of times before. Eye candy, information design best practice blah blah blah.

    Here’s my opinion as a user interface designer – The user is king and their opinion rules. What “looks” pretty to the user is what counts. While it may be “wrong” from an info viz perspective, it may be exactly the “feel good” that the user wants.

    Who pays the bill for the app?

    Final argument:

    The internet really took off when it became graphical with the web browser. Yes, it was slower than the text-based internet. Yes, it was silly how all these newbies did the wrong things according to the net purists. But the visual interface won out because of popularity.

    These “pretty” dashboards are what will win users over and tip the balance for business intelligence.

    Guys – these dashboards don’t have to be “right” – they just have to be used.

  11. Quite.

    Although the users don’t pay the bill, the IT or Finance Director does, and will often make the final decision.

    My point is this:
    The dashboards are pretty
    The dashboards are very misleading

    If they can address the latter point, then they can actually add value.
    If they can address the latter point whilst retaining (or keeping in balance) the former, then they have the potential to do very well indeed.

    It is easy to say that UberBI can do well regardless of how poor their product is simply because it is pretty, but that ignores an already saturated market.

    The truth is that there are a lot of products out there which have a great reputation for facilitating good decision making and which have also got some pretty hot graphic designers, i.e. they are already learning how to both pass on good information and to make it visually appealling.

    Uber BI must up their game.

  12. <<Here’s my opinion as a user interface designer – The user is king and their opinion rules. What “looks” pretty to the user is what counts. While it may be “wrong” from an info viz perspective, it may be exactly the “feel good” that the user wants.<<

    This statement ignores the fact that a pile of research has been done to determine how and what is required to effectively communicate data visually. It is part science and part art. It is in the user’s interest to understand the basic principles involved and apply these principles in his/her work. I disagree that the user rules, unless the user is the sole consumer of the message. The same applies to any form of communication. You have to know your audience and fashion your message accordingly. Have you never listened to a speech or read a report from a poor communicator? In both the foregoing cases, to be truly effective, the communicator must learn to deliver a speech or write an effective report.

    <<These “pretty” dashboards are what will win users over and tip the balance for business intelligence.<<

    The problem is that you see the world only from the creator’s perspective and not the consumer’s perspective. Alan Cooper wrote a book called “The Inmates are Running the Asylum.” The book details the poor decisions designers routinely make in UI design that results in applications that are difficult to use. These designers are similar to the unrestrained chart creators that you champion. Designers make decisions that make sense to them but not necessarily to the consumers of their applications. Microsoft spends millions of dollars in a lab designed to test how well users can navigate and perform actions in their apps and then they modify the apps IUs accordingly (it’s true that Microsoft sometimes get things wrong but the point is that they appreciate the need for such tests). The notion that willy-nilly laying effect upon effect on a chart makes that chart somehow “better” is simply wrong.

    <<Guys – these dashboards don’t have to be “right” – they just have to be used.<<

    Yes, they’ll get used by the dashboard creators but not the dashboard consumers. And then we’ll see a backlash against all these silly apps, which are driven purely by marketing and not good science.

  13. Thank-you all for the comments (negative and positive); at the end it shows the amount of people who feel passionate about this subject and wants to improve the industry. We are Startup Company so every feedback is welcome; I must say that we feel confident of our vision and like I mentioned in previous posts, only time will tell who is right.

    In regards to all the critics around the demo, let’s keep things in perspective and remember that it’s a demo. Somebody called it a “One time impact” well it is a marketing tool and that is what it supposes to do. I think the original point of the post was to talk about the platform and how to translate business requirements into insight instead of a gauge’s degree.

    For the persons that are quoting books and presenting themselves as expert on the subject, just a word of advice from someone who has implemented many dashboards, I will be very careful around best practices in the BI business as every customer is completely different.

    Since we are in the move of posting quotes, here is one of my favorite “Your Opinion, although interesting, is irrelevant” – We have done a lot of work with usability groups and test our solutions many times so our direction is not based on opinions but on facts.

    I wish I could share some of the latest projects that we have done with a Fortune 100 Company (Can’t due to privacy), this solution includes interesting graphical component (Lines, Bars, Pie, Maps etc) merged with OLAP Browsers and drill down capability that provides great insight to both Power and Standard users.
    We were called to replace an Access/Excel/VBA solution that has been in place for 8 months, the number of users accessing the tool (at least 1 time per week) was 23. We installed our solution 3 months ago, the number of users accessing the tool (at least 1 time per week) and therefore getting insight = 127; over 5x lift and the number just keep growing. We just recently got the contract to expand the solution to a couple of European subs so we must be doing something right.

    So let’s talk based on facts instead of assumptions, please let us know your proposed solutions or else “Your Opinion, although interesting, is irrelevant”

    Thanks
    Andres

  14. Whoa there, slow down, cowboy!

    A couple of comments.

    1) Let’s not get into a “my dashboard is bigger than your dashboard” contest. Different dashboards appeal to different audiences – end of story. What one group pays for is simply their taste and interest, not necessarily a blanket endorsement from the whole BI community.

    2) Remember that we are in a dashboard buying rush. Dashboards are hot right now. Lots of dashboards are being built – some by very talented people and others by not so talented people. Getting contracts from companies (Fortune 100 and otherwise) is not a guarantee of being “right” in terms of one’s opinion of business intelligence dashboarding best practices. Besides, bragging about contract awards is, well, gauche.

    3) You’ve got some great looking dashboards and an open mind about what’s appropriate or not in terms of information visualization. That’s great. Let’s not be combative.

    4) I’m enjoying these discussions. Thanks all.

  15. Love the look and feel.
    But am I the only one having to ignore 30+ script errors??

  16. I think it’s one thing to say “Thank-you all for the comments”, but it sounds a little insincere when you repeatedly say “Your Opinion, although interesting, is irrelevant”.

    That’s a phrase I struggle with as the comments related to the content presented – surely very relevant.

    Also, whilst I appreciate this is a one off demo, if the likes of pyramid charts are not part and parcel of the ongoing offering then why are they in the demo.

    My challenge is this:
    Name one occasion in which this sort of chart is actually useful.

  17. BI Veteran – I agree with you and your comments are right on the money, we need to maintain the conversation productive. Also, my point about the Fortune 100 company was meant to illustrate how there are all sort of clients looking for all sorts of solutions which is why one cannot claim to have a silver bullet solution. If it sounded arrogant I apologize as it wasn’t my intention.

    Mr Tom – We do appreciate everyone’s comments, in fact; the Pyramid was taken off the Demo the second day the post came out based on everyone’s comments.

    We have used the pyramid in a couple of implementation and customers seem to like it a lot (One to show Audience Distribution and product qty distribution in another occasion). I agree that is misleading (as mentioned on my first comment in this post) but telling the customer that he needs to read the chart from top to bottom seems to be enough for them.

    In Regards to my quote, the point I was trying to illustrate was simple; we need to move on and start talking about alternative and solutions instead of criticizing for the sake of criticize. I admitted at the beginning of the post that I was not a big fan of the Pyramid but a couple of people just kept talking about it. Then I explained thoroughly why gauges make sense for some implementation and the reaction was similar so the conversation was not being constructive.

    This posts are very interesting and I am sure we can all learn from each other; but we seem to be the only ones willing to expose their work so everyone can talk about it. If one feel so passionate about their implementation, let’s look at some example, talk about the pros and cons and their experience/results with customers.

    Thanks
    Andres

  18. Pingback: Xcelsius Present Dashboards Bashed

  19. Pingback: If your sales dashboard tells you that sales are down, but not why, you don’t have a dashboard « Data Driven: Data Analytics, Dashboard Design

Leave a Reply