How to design screens & dashboarding

Center of Excellence

1. Abstract

Screen and dashboard design can at times make or break an application – if screens are poorly designed or unintuitive user engagement can be compromised from the off.

There are many factors to consider when determining what constitutes a good design - from layout and ease of navigation to the amount of content to include in a single screen and the type of chart to use to communicate key information. We will cover the main ones in this article.

2. Content

2.1 Basic Principles

2.1.1 Consistency

One of the most important principles in screen and dashboard design is consistency – decide on your basic layout and your colour scheme up front, design your screen masks accordingly and use these to keep a consistent look and feel for all your screens and dashboards.

A consistent look and feel gives a better user experience and helps avoid the disorientation of navigating from a screen to a screen which looks entirely different and is differently laid out.

2.1.2 Clarity

Another important principle in screen and dashboard design is clarity – the purpose of the screen or dashboard should be clear to the user from the off, as should things like navigation (including whereabouts in the system the user currently is if screen navigation is nested multiple layers deep), current selections and any intended actions or behaviours.

2.1.3 Simplicity

Anybody who has encountered screens which are over-cluttered with content can tell you that it makes them a lot less clear and a lot less usable.

Where possible avoid making screens too busy with different objects – correct usage of container components such as Tabs and Transitions can make a huge difference here.

The use of pre-defined drills to avoid showing the most granular level of data up front while still allowing interrogation of detailed data where required can also help by simplifying the data the user is initially confronted with, plus it will often improve the load time of your screen.

2.2 Deciding on Your Design

2.2.1 Screen Layout

One of the first decisions you will want to take when deciding on your design is the basic screen layout you are going to use – will you go with a classic approach of navigation across the top and selectors on the left (Figure 1), both navigation and selectors at the top (mainly used where it’s considered more important to retain available screen real estate width wise than height wise) or something else?

Whichever you choose, it is important to ensure that you have sufficient room for the different components you will need to fit on your screens – for example when setting aside the space for your selectors and pagers, make sure to consider the maximum number you might need on a screen, to ensure you do not get caught out with insufficient room down the line and have to retrofit a design change.

Similarly, whether you are going to be using menus or another navigation method, try and plan and forecast how much space you might need down the line when allocating an area for it - with a menu this is generally less of a risk due to the ability to nest screens to limit the number of first level options, but it should still be considered.

2.2.2 Colour Scheme

Another decision you will likely want to make early on to avoid rework is your basic colour scheme – often this might be dictated by corporate branding standards, but even here a degree of choice is normally involved.

In general, your base colour scheme should use no more than three (ideally complementary) colours, ideally, these should be relatively muted shades to avoid screen fatigue (nobody wants to be staring at a garishly hued screen for extended periods).

This colour scheme should retain some consistency throughout the solution – however, this does not mean all screens have to be identical.

In some cases, the use of different colours can aid in clarifying to the user which part of the system they’re currently in.

For large systems with a lot of screens, it can be easy for a user to step away from their screen, come back and have forgotten whereabouts in the system they were, in this case, use of a different (but still consistent) colour scheme for different key areas of the system can aid in quickly identifying the current section.

Even in this instance care should be taken to maintain consistency and avoid jarring changes between screens or sections, changing the colour of one key component (for example the blue navigation bar in the examples above) should suffice.

2.2.3 Screen Masks

One of the best ways to ensure consistency between your screens and to minimise unnecessary repetition of work is to use screen masks.

Screen masks are templates for your screens, they cannot contain layouts (so no charts, data views, etc.) but they can contain all other visual components. This means that you can set up a standard background, dividing your screen into the different sections you’ll use for selections, navigation, content, etc. and reuse it for all relevant screens.

Screen masks also set the screen size for the screens using them, using the correct screen size for the type of monitor the end user will most commonly be using helps in ensuring that your screens are appropriately sized and don’t require the user to scroll the screen itself either horizontally or vertically.

You can set up multiple screen masks – for example, you might want one for any pages which do not have selectors on them (your home page, any header pages you might use for sub-sections of a larger system), typically two or three masks should suffice however if well designed.

To associate an existing screen with a mask, go to the main Masks section (Figure 3).

You will see a list of the masks you have created and on the right any screens associated with each mask, to associate an existing screen with a mask, click on that mask, and you will then see a list of screens not currently associated with a mask.

To associate the available screens with the mask simply drag and drop them from the list on the right to the grey box on the left.

Note that to associate a screen with a different mask, you need to first disassociate it from its existing mask, using the same approach as above but dragging from left to right. The screen will then appear in the available list for the mask with which you wish to associate it.

2.2.4 Content

When creating screens and dashboards you should generally have a pretty good idea of what you are intending to include in them, what may be less clear is how to divide content between screens (or even within the same screen) to avoid over-cluttering the screen and making the screen’s purpose less clear.

2.2.4.1 Splitting Content between Screens

One of the first rules of dashboards is to ensure they have a single, clear purpose.

The temptation when creating a dashboard can be to try and combine multiple similar data sets in the name of convenience, however, a dashboard which seeks to answer multiple questions typically answers neither question as well as two dedicated dashboards would have done.

The first thing to do before developing your screens and dashboards is to decide on what each needs to contain and what the level of logical separation therefore is, also consider your audience and whether it makes sense to have different versions for different target audiences (upper management vs. the sales team for example).

2.2.4.2 Use of Containers

Something which can be very useful when fitting a significant amount of content into a single screen without overcrowding is the use of containers – these allow you to divide content up in a logical manner on a single screen, allowing you to fit more content into the screen without compromising on the size of each component and without making the screen seem too busy.

By far the most popular container for this purpose is the Tab, this allows you to put a variety of charts and layouts into a single space with clearly labelled tabs at the top for switching between them (Figure 5).

A tab layout can be particularly useful if most visitors to a screen will want to see a particular chart or data view and only occasionally will they want to see the others, in this way, we can use the Tab container to put the most used object front and centre for the user, with the option of then checking the other tabs should they need to.

With the addition in Board 12 of the ability to specify that only the first tab of a Tab object should be refreshed by default, with subsequent tabs only being refreshed when opened, we can also keep the initial load time of the screen quick even with numerous charts or data views to refresh.

It should be remembered that containers are not only useful for dividing up screen content, but they can also be used to give more space for selectors where required or to add a tab showing the user’s current selection (Figure 6).

The example shown uses a Panel container nested inside a Tab container, this allows us to have multiple components displayed in a single tab as shown – care must be taken when using nested containers not to make the interface confusing or crowded; the best practice is to have no more than one level of nesting.

2.2.4.3 Use of Drills

The use of drill methods is covered at greater length in a separate article; however, it would be remiss to not mention it when discussing screen design and the optimal use of screen real estate.

To those moving from Excel-based solutions or similar to Board, the temptation can be to try and replicate the same layouts used previously, in some cases, this might be valid but, in others, it risks failing to leverage one of Board’s great strengths, its drill capabilities.

Imagine we’re creating a dashboard analysing sales for the year, chances are we initially only want to see a high-level picture of performance – the important trends and any areas which look like they might bear further investigation, what we probably won’t want (initially at least) is a granular report detailing every aspect of both performance and the drivers behind it.

This is where the correct usage of drill functionality can be the difference between an easy-to-digest report which gives us what we need at a glance as well as allows us to drill down to study the details, and a bloated-looking report which contains so much detail that it’s difficult to identify the overall trends.

Deciding what level of detail to include in your initial layout is no easy task at times, but it is worth spending some time on to make sure you get it right, it really can make or break a dashboard.

It is best practice to design your custom drills correctly since they can make a huge difference to the user experience.

If the vast majority of users will want to use the same drill path, setting that as the default drill so that simply double-clicking the line or node in the report that they’re interested to see a correctly formatted drill of the information they need, greatly encourages proper insight into the data.

In some cases, where it makes sense to have a high-level report or dashboard to understand the overall trends, but then also be able to narrow the focus to a particular customer, product, etc. but with more than one layout, you might want to consider using Drill to Screen, this allows us to have a company or region dashboard that gives us an at-a-glance summary of high-level performance, but to then also potentially drill a particular point of interest and open up a whole new dashboard designed specifically for proper analysis at that level (please refer to the “Drill To vs Go To Screen” article).

2.3 Types of Visualisation

We have already discussed the importance of our screens and dashboards having a singular, clear purpose and being tailored to the intended audience, however as well as what we include, how we include it can also make a big difference to how useful it is.

2.3.1 Data Views

Data views are your classic tables of information in a columnar or tabular format, however, even here there are design decisions we can take which will affect how easy the data contained is to digest.

It is best practice not to exceed 3 entities on the vertical axis; more than that can make a layout confusing to the viewer and negatively affects the loading time of the screen.

If your data view contains two or more entities on the vertical axis by default it will be displayed as grouped data, you can then choose whether those groups should be expanded or collapsed by default, which you choose depends on which the user is likely to want to see at first glance, which can be a bit of a judgement call.

When you have multiple entities on your vertical axis it starts to become even more important to have the right design, while the default will be that all but the last entity will be displayed as groups, you might want to consider flattening your layout to reduce the number of nested groups – more than two layers of grouping can make a layout confusing to the viewer.

It is best practice for the top axis to not use more than 3 entities typically, any more will normally make your data view overly busy.

Common sense would suggest that for the horizontal axis, it is preferable to avoid scrolling to display all column information unless it is functionally necessary; it is advisable to adapt the columns to the width of the data view object.

2.3.2 Pie Charts

Pie charts can be an excellent way of visualising the split of a metric between a smaller number of categories (for example sales by product category or region), however, they are at their most effective when used for a split into between around 3 and 10 categories, any more than that and they will normally become harder to read and less impactful as a result.

For larger numbers of categories, you will probably want to either have the chart at an aggregated level and then drill to the lower level or use a different type of visualisation such as a bar chart.

2.3.3 Cartesian Charts

Cartesian charts are a broad topic as they cover line, area, bar, and point charts (or any combination of the above).

Used correctly a cartesian chart can be a great way to understand trends, particularly trends over time, as mentioned before they can also be useful for a comparison between categories where the categories are too numerous to fit usefully into a pie chart.

It is worth remembering that Board allows you to use multiple types of cartesian series in a single chart, a line chart overlaid over an area chart can be particularly effective when comparing current year sales vs. prior year for example.

As with any chart, the key thing with a cartesian chart is to avoid overcrowding it, too many different series on any chart will make it difficult to read, and too many nodes on the X-axis will make it seem cramped.

2.3.4 Gauges

Gauges are one of those things that people tend to either love or hate; although they can be useful in the right circumstances, care must be taken to ensure that what they communicate is clear.

Usually, a gauge is most useful when displaying a percentage, with a percentage everybody typically knows what they are looking at and minimal context should be needed to ensure what the gauge displays are meaningful and not open to misinterpretation.

The basic rule is, if somebody who did not create the screen can look at the gauge without being given any additional context to that displayed on the screen and infer the right conclusion then the gauge is doing its job, if not it might be better to consider a change or an alternative option.

2.4 Common Mistakes

We have already covered many of the most common mistakes in the different sections above, but to summarise some of the most common mistakes made:

2.4.1 Lack of consistency

Lack of consistency can be a particular problem if more than one person works on a capsule, if this is the case it is important to agree upfront on what the basic design principles will be:

• Screen size
• Font style and size
• Colour scheme
• Screen layout
• Navigation
• Formatting of components

All these things need to be consistent for a capsule to provide a good user experience, changes in any of these between screens can provide a disjointed and confusing user experience and detract from the overall effectiveness of the capsule.

2.4.2 Lack of clarity

As stated at the start of this article, clarity is also very important in screen and capsule design – the purpose of a screen should be immediately apparent to a user, the message communicated by a dashboard should be clear and easy to interpret without significant prior knowledge, and navigating your capsule should be clear and easy to understand even for a first-time user.

2.4.3 Overcrowding

The most effective screens and dashboards are the ones which have a singular, clear purpose. The easiest and most common way to reduce the effectiveness of a dashboard is to try and cram too much in and in the process make it cluttered and confusing.

Think clearly about the purpose behind each screen and make full use of the methods discussed above for segregating content –

• Effective use of containers.
• Appropriate use of drills to limit the granularity of your base layout.
• Thinking beforehand about the best way in which to split your content between different screens.

If you keep these basic principles in mind, you should find that your capsules and screens are easier to use, more effective and more engaging for the end user.

Center of Excellence

Thanks @Robert Barkaway for the insights on this article!