Perfect your Google Data Studio dashboards with 7 laws of UX

There is no reason why dashboard developers should not want to create a report that looks pleasing, and more importantly, is easy to use. A visual display of data is after all a complex item to digest by the reader.

Creating a dashboard in Data Studio that considers user experience (UX) will make it easier for your audience to understand the data and your viewpoint. If it’s spot on, your client will think better of the value you provide.

More so than ever, with the arrival of Data Studio, you have the chance to craft a dashboard well beyond the restrictions of spreadsheet cells. There really should be no excuses for a poorly designed report.

To find exactly how user experience can be applied to a Data Studio dashboard, this post will explore the laws of UX as outlined by Jon Yablonski and interpret how these laws can be applied to improve usability. Some laws impact visual design while others impact functionality and structure.

1. Fitts Law

’The time to acquire a target is a function of the distance to and size of the target’

This law is a fairly straight forward in that the nearer and larger a target is the easier it is to get to.

Data Studio implication: Position your key observations in an prominent area of the user interface. Take into account typical reading patterns which reveal where and in what order your content will be seen. Your dashboard could show your agreed KPI in this area or along the main lines of focus.

The example below was designed with a Z pattern in mind. The users focus starts at point 1 and zig zags down the page.

The title and the date range should be the first items to be seen on your page. Placing an important item after these two key bits of information is ideal for any highlight you want to emphasize.

2. Jakob’s Law

’Users spend their time on other interfaces. This means that users prefer your interface to work the same way as all other interfaces they already know’

While creativity is important, a certain degree of familiarity needs to remain. Don’t be too radical with design. Progress is steady.

Data Studio implication: If you’ve been in the industry long enough you should be familiar with how other Data studio reports look and feel. If not, head over to the Data Studio Report Gallery.

As a consequence your report should be roughly on the same lines. These are often common sights on Data Studio reports:

• Date range selector placed in the top right on the dashboard
• Logo dropped in top left corner
• Filters / controls selectable within header

You can create familiarity in your report by creating a template header.

This adds clarity and consistency to your reports and should make your audience feel at home.

3. Law of Pragnanz

’People will perceive and interpret ambiguous or complex images as the simplest form possible, because it is the interpretation that requires the least cognitive effort of us’

Your audiences interpretation will be the barrier between what you want them to take from the report and what they already think of your report before they even look at it.

Data Studio implication: Interpretation can be built upon experience, commonality, and environment. In user interfaces, it would be wise to leverage interpretation. As interpretation can be based on simple understandings, it’s not too tricky to adhere to.

If you want to make it clear that trend is bad or good, your would typically use colour to assist this. Green being the positive indicator and red being the negative indicator.

If you include icons in your report, you wouldn’t hesitate to use a mobile phone outline to indicate a mobile only report. For instance, the Supermetrics’ Facebook Page Report template uses icons to assist interpretation of key metrics.

Speak on your audiences terms and keep your designs interpretation friendly.

4. Gestalt laws of grouping

’Humans naturally perceive objects as organized patterns and objects’

In simple terms, items that are near, similar, or connected are perceived by the audience as grouped. The laws of grouping can be interpreted through 4 areas; proximity, similarity, focal point, and common region.

To demonstrate the implications of these areas I will develop a ‘KPI card’ that will progress with each rule. A trend line, period on period change indicator, and a total for the date range will be included.

Proximity

Placing related elements together will make them easier to be interpreted as related.

Considering the importance of proximity we must decide what elements need to be interpreted together. In the case of a dashboard this could include multiple items relating to one KPI — a graph or a table — that will inform the user of an outcome.

If you want to tie up ‘the need to know’ factors for one metric, place a scorecard close to the accompanying trend graph.

It goes without saying the reverse of this — placing the trend graph miles from the scorecard — would be an illogical approach to displaying data.

And yes — start your designs in greyscale! See rule 2.

Similarity

Apart from distance, symmetry and patterns will help items to be interpreted as ‘grouped’. A well thought out visual hierarchy and colour scheme will help the user identify a pattern that reveals a path to digesting the data.

Advancing on our KPI card example used above, if we add colour to show the linkage between the KPI scorecard and the trend line this strengthens the link between the two.

Focal point

The laws of grouping suggest that an element of interest needs to stand apart. In Data Studio, there is one stand out feature that sets it apart from other basic reports; the date range selector. This is where I would be tempted to use a contrast colour and a defined region. We want our viewer to interact with the report and the data range selector is key interaction.

For our KPI card example, we’ll add a button that takes the user to the next step on your dashboard.

Common region

Enclosing elements within a clear boundary will make it clear what needs to be grouped together by the user. Designing elements into ‘Card’ boundaries have been widely used to achieve this.

When these factors are taken into account, your overall report should be easier to interpret, especially if you want to display more than one metric:

Data Studio implication: Consistency of visual arrangement helps create a complete picture. Metrics that are related need to be grouped visually together. Use borders or background tiles to do this.

Among other elements on the page, fading elements and using page transitions can be used to assist interpretation through grouping. Below is an example of a dashboard where GEO context is important to the user:

5. Miller’s Law

‘The average person can only keep 7 (plus or minus 2) items in their working memory’

Data Studio implication: With drop and drag functionality in Data Studio, it is tempting to compile all of your graphs and tables on to one page. However, spreading out your report across more than 1 page into individual topics (i.e., Demographics, campaigns, content) will make it easier for you to group and spread your analysis.

It’s often pronounced that users will not want to scroll. In fact, it’s often the first instinct for the user to move through an interface in order to find what interests them the most. The temptation of scouring through content to find the next big thing is what makes Twitter and Facebook comparable to an addition.

To make it clear that your Data Studio report has more than one page, select ‘Left’ in the navigation position option in the Layout and theme sidebar. This will create a contents page that sits on the left side of the page:

Better yet, install Google Analytics tracking on your Data Studio report to analyse how users interact with your pages. To enable this, go to File -> Report Settings and copy your tracking ID.

In Google Analytics the most useful data to look at will be in the content section under behaviour. Select Page Title as the primary dimension to get a view of time page views, time spent on page, and exit rate. The page title will be compiled by your report title + the page title you assign per page; UX report > Detail page 2.

6. Serial position effect

‘Users have a propensity to best remember the first and last items in a series’

As per a narrative, a beginning, middle, and end is observed in a user interface.

Data Studio implication: Your report should be structured to include important data and KPIs within the first few pages or back end of your report.

Employ a funnel structure that starts with the top level insights and then looks at more granular insights page by page.

A diagram of navigation could be utilised to remind the user as to their current position in the report. A progression bar or ‘tube line map’ could foot the bill:

This gives your report reader a guide to their own progress through the report.

7. Hick’s Law

‘The time it takes to make a decision increases with the number and complexity of choices’

Give a dog a choice of two bones and the deal is swift. Give a dog a choice of 6 bones and we’re here all afternoon.

Data Studio implication: this law could be applied to what your report conveys to the user. For instance, data can be interpreted from different angles and perspectives. Your analysis needs to be summed up in a format that is easy to break down.

If your target audience isn’t actively involved with the work your doing, you will need your report to give them a concise and summarised view of progression. Don’t submerge your reader in data. Be selective about what you need to portray in order to support your view.

One way to achieve this is to position your KPIs clearly while illustrating how other ‘secondary’ metrics influence them. A trusty funnel diagram or a more subtle indication of metric dependencies can be applied:

What we learnt earlier about grouping and similarity has been used in the example above to show progression to the main outcome.

Pulling all this together

The laws of UX illuminate our understanding of perception, interpretation, and how an interface should appear. A particular challenge of this is producing an end product that is balanced for each of these laws. Careful planning will avoid any imbalance which will fail to adhere to one or two laws and could leave your audience alienated.

Explore these laws in your design and you will be one step closer to creating the perfect Data Studio report.

In applying these laws my own Data Studio report look notably less cluttered. There was more indication to the user in terms of what they were looking at and how they could interact with the report:

Whatever these laws do to help your dashboard design, validate your design by gathering direct feedback from your client. Design is human centred afterall!

This article was updated on July 8th 2019 and originally published on July 17th 2018.

About Stephen Dawson

Stephen Dawson is an optimisation strategist. He leads research and experimentation initiatives at Fingo. The Fingo team embraces a data informed culture to produce effective digital experiences. You can find him on LinkedIn.