Dashboards that shimmer 'n' shine
Tags: dashboards, design, ux
Published: 2019-06-26 20:45:48

---
title: Dashboards that shimmer 'n' shine
published: true
description: Designer Dashboards 101 
tags: dashboards, design, ux
---

<!-- wp:paragraph -->
<p>(CAUTION: The word “Journey” is used throughout this post)</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<B>What am I wittering on about today?</B>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Design.&nbsp; There was a time I didn’t even consider the design of a dashboard as something separate from the actual build/development. Didn’t think about it at all.&nbsp; &nbsp;I got the requirements, heroically fought with the data sources and made a brilliant dashboard (in my opinion). I must be good at it, afterall, I built dashboards for a living.&nbsp; Maybe not a lucrative living but it allowed me to buy life’s little luxuries like bread and shoes. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If design was considered at all it was usually after all the main components had been built.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>With hindsight, I’d been guilty of focusing on the "grand finale" rather than the whole show.&nbsp; Perhaps you have too!</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<b>When did I realise I was doing it wrong?</b>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Well, not really “wrong” and it wasn’t exactly
an epiphany.&nbsp; But the more I was exposed
to KPIs and dashboards and how they looked, the more I began to think about the
design; how a user navigates (or is led) and how subtle feedback can improve their
experience. &nbsp;Even a good dashboard can
crash and burn if the consumers don’t like its behaviour.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<b>So what do I do now then that’s so special?</b>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Nothing.  I'm just a bit more aware of the overall “package” I, as a developer, can provide when building a product.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The most important thing is communication. Talking to the users to find out about how they perceive the
challenges.&nbsp; Draw up their “journey”;
e.g. when seeking an answer, where do they start, what do they do, what’s their
end point?&nbsp; From this you can work out
the flow of your dashboard and any bits of data plumbing required. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Even better - storyboard it.  Create a user story that involves the issues they face.  They might want to know the attrition rate in a specific department
(<em>end point</em>) and need to traverse the
rugged barren plains of &nbsp;4 or 5 spreadsheets
(<em>starting point</em>) just to get a
parameter to pass into another system before exporting a dataset that they then
dump into excel for more manipulation before they find their answers (journey).</p>
<!-- /wp:paragraph -->

<b>Wire-frame and scaffolding </b>

<!-- wp:paragraph -->
<p>Once everyone agrees on the initial “look” you can start to
wire-frame it with the images/objects you might use in the final dashboard –
this lets the users see something beginning to take shape based on their input.
It’s also important since the objects/images you create for this can be used in
the final product.&nbsp; Regular meetings like
this help build up a level of ownership with the users and improve the chances
of your product being successful.  Even better, if your doing regular demos with groups,  they'll be familiar with how the dashboard looks and feels even before it's officially released. Sneaky eh? </p>

<!-- /wp:paragraph -->


<B>Intuitive Feedback</B>
<!-- wp:paragraph -->
<p>Giving feedback <strong>TO</strong>
the user.&nbsp; This is a bit more subtle and refers
to the visual cues that your dashboard provides.&nbsp; A lot of the concepts for design are based
around Gestalt principles - <em>“The whole is other than the sum of the
parts.” — Kurt Koffka.</em> &nbsp;You can find out more about it here:&nbsp; <a href="https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/">https://www.smashingmagazine.com/2014/03/design-principles-visual-perception-and-the-principles-of-gestalt/</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It’s an interesting read and you’ll definitely start to
think more about design.&nbsp; </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Anyway… </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Things like grouping, size, distance and colour are all
techniques that impart information to the users.&nbsp; Are certain functions/buttons grouped
together?&nbsp; Do similar dimensions/objects
have the same colour or are the same size?&nbsp;
</p>
<!-- /wp:paragraph -->

<!-- /wp:paragraph -->


<!-- wp:paragraph -->
<p>Use of recognisable icons such as the disk icon (save),  house (home) etc.&nbsp; A user knows intuitively what these do without any further knowledge of how they work.&nbsp; I click on the house icon and I’ll go back the main “home” page.&nbsp; I click on the disk icon and it’ll save my work. &nbsp;Many graphics are universal and can be used to help navigate around a dashboard.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Buttons</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>When clicking a button does the users see the button being “pressed”?&nbsp; If so,  that's a visual feedback for the user.&nbsp; If not, the user may not be aware that the button has carried out it’s function and press it again leading to frustration. By simply showing the button as “pressed” the user knows their action has registered and will wait for the outcome.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Menu’s</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Are menu items grouped accordingly?&nbsp; Does the menu behave the same across all
pages?&nbsp; Is it always in the same place
(Left or Top).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>All of these little features help the users find answers
quicker.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To summarise - &nbsp;visual
cues give information to the user indirectly and the user behaves accordingly. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->

<!-- /wp:paragraph -->

<!-- wp:heading -->
<b>So?</b>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>So, I went from simply putting together a dashboard where
the attention was on the end result (<strong>show
me my data!) </strong>&nbsp;through to developing a
more rounded solution; showing the data but using design principles for a better
overall experience.&nbsp; Thinking about the
design throughout a project has meant I’ve created better more “rounded” dashboards.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So, next time you’re carefully throwing together your BI Reports,
take a step back and think about how the users interacts with it and how you can help them along the way.&nbsp; They’ll
love you for it.&nbsp; Maybe not love.&nbsp; Maybe they’ll treat you with mild indifference,
but it’ll be an improvement and you’ll get a warm glow knowing you did
something that helps them find bad news faster.</p>
<!-- /wp:paragraph -->