Data visualization

Dashboards

In order to delight our customers, all DRG dashboards need to be easy-to-understand, professional looking and performant.


Before you start

  • Familiarise yourself with DRG’s design principles
    Everything we put together at DRG needs to follow our core design principles:
    • Customers come first
      Keep the end-user’s persona in mind and the problems that you are trying to solve for them with the dashboard.
    • Clarity from complexity
      Do not overwhelm users with too much information. Limit the number for views on a dashboard to the most common user-cases and allow them to dive-deep if required.
    • Consistency is key
      A lot of dashboards compliment other DRG products and services that a customer might use. To help give a unified user experience make sure that your dashboard follows all the guidelines outlined in this site.
  • Think about performance – it should not be an after-thought
    Having a clean, consistent dashboard with the right information is one thing, but if it is slow to load and hard to use, users will soon get frustrated. Take as much care with designing your data and back-end structure as to what it looks like. You can read some specific tips on performance for Tableau dashboards.
  • Consult the UX Team if you need design help
    If the dashboard you are putting together is complex, then the UX Team can help give you guidance and quick lo-fidelity wireframes. Email the UX Team at ux@teamdrg.com
  • Consult with Development Team about entitlement, hosting and publishing
    The development team have put together a site creation guide to get your started with creating a dashboard with Tableau.
  • Factor in time for testing
    Always test your dashboard for usability. After you build a prototype, ask your audience how they’re using the dashboard and if it helps them answer their pressing questions. Use the UX Team to do a proper user research program. 

Size

Each dashboard should provide an optimal viewing experience, whatever the screen size it is viewed on. We recommend making the width of a dashboard variable, so that it always fills the full width of the screen. The height can be fixed, which means that the user will be able to scroll if everything does not fit on the particular screen they are viewing on.

Sizing Tableau dashboards

  1. Choose ‘Range’ in the dashboard size options.
  2. Set the minimum width to 100 and the maximum to 9999. This will make the width always stretch to the full available space.
  3. Set the minimum and maximum height to the whatever the height you need you dashboard to be. Make sure that these are always the same value.

If you are embedding a dashboard into another platform, the iFrame width should be set to 100% and the height should be the same as the minimum/maximum height that was set for the Tableau dashboard. For example:

<iframe src="dashboard-url.com" width="100%" height="1600"></iframe>

Layout

1

Branded header
Include the official DRG header at the top of each dashboard – the development team can help with this as part of your site creation. If the dashboard will be embedded into a platform, the header should always be excluded.

2

Page title and filters
The page title and any global filters – ones that manipulate all data on a page – should always be placed at the top of the page. Filters that only effect a single chart should be positioned inside the relevant card.

3

Use cards to separate the data
Put each vizualisation in it’s own separate card and arrange them in a sequence to tell an overall story. Always position the most important take-away information towards the top of the page.


Spacing

Embrace whitespace. It is Ok to have space between content areas so the user can scan the page easily. Be consistent with the spacing between each element on the page. We recommend to use 32px margin and padding as outlined in the diagram below.


Color

The user interface of your dashboard should be kept deliberately neutral so the most important information – the charts and data – are the focus of the attention. Use the following colors for your dashboard user interface.

Cards

RGB

255, 255, 255

HEX

#FFFFFF

Background

RGB

245, 245, 245

HEX

#F5F5F5

Borders & lines

RGB

229, 229, 229

HEX

#E5E5E5

Text

RGB

50, 62, 72

HEX

#323e48

For charts, please ensure you following the guideline as outlined here.


Fonts

As per our typography guidelines, please use the Avenir Next font family on your dashboard where possible. In some cases, such as Tableau dashboards, this might be problematic. So use the Arial font family instead.


Cards

Cards should be used on dashboards to separate each data element. Using cards will help improve the scannability of the dashboard, as users should be able to quickly see the information they are looking for by scanning card headers or the prominent card content. The structure of your cards should be consistent, as outlined below:

1

Always include a title
Don’t assume that user will know what your visualisation is showing. Always include a title at the top of the card to explain the data.

2

Position filters above data
Include any filters specific to the card above the chart or data. Always include a label above the filter so the user knows what it represents.

3

Have clear labels
Labels need to be short and succinct. Abbreviate long numbers or names to keep charts clean and clear.


Performance

Poor choice in dashboard design is the most common cause of poor dashboard performance. Performance is not an after-thought. The following tips apply to dashboards created in Tableau.

  • General tips
    • Refresh the data and visualizations only after the user hits “Apply” and not just on selection of filters. 
    • Design choices correlate to performance. 
    • Make sure the design and structure of the backend queries into the data is optimal. 
    • Use the Performance Recorder to test the performance of the dashboard. Read More 
  • Marks
    Use Marks when possible. In Tableau, the Marks card provides you with control over how the data is displayed in the view. Minimize the number of marks. Don’t retrieve data you don’t need.Don’t render data you can’t see.
  • Zones
    • Each data driven zone is one backend query. Hence, minimize the number of zones. 
    • Minimize the complexity of each zone. Keep worksheets as simple as possible and avoid:  
      • Large, enumerated filters, parameter lists and legends  
      • Large, high resolution images  
      • Complex embedded web parts 
  • Updates
    Minimize the scope and impact of updates. Be conscious of the impact of:  
    • Global filters  
    • Filters that apply to all sheets on a dashboard  
    • Filters with “show relevant values” 
  • Caches
    Maximize the effectiveness of caches. Set dashboards and stories to fixed size use client-side rendering where possible 
  • Data elements
    Minimize data type casting. Convert at the data source if possible.
  • Filters
    • Use the most appropriate type of filters 
      • Discrete vs. ranged  
      • Enumerated vs. non-enumerated  
      • Aggregate vs. row level  
      • Dates 
      • Slicing filters  
      • Sets 
      • Cross data source  
      • Customize > show “Apply” button 
    • Use “Only Relevant Values” feature sparingly 
    • Consider filtering from smaller data source – Apply to >> All Using Related Data Source 
  • Calculations
    • Consider efficiency of your calculations 
    • Use native features over calculations 
      • Groups  
      • Sets  
      • Bins  
      • Custom date fields  
      • Combined fields  
      • Aliases  
      • Reference lines  
      • Analytics (clustering, trend lines, forecasts) 

Examples

First example

Before following guidelines

  • Header inconsistent with DRG products
  • Very little padding and spacing
  • Blocks of color for titles
  • Inconsistent filter sizes and positioning
  • Cluttered and hard to scan

After following guidelines

  • Header consistent with DRG products
  • Consistent padding and spacing
  • Data grouped in clearly titled cards
  • Consistent filter sizes and positioning
  • Clean and easy to scan

Second example

Before following guidelines

  • Doesn’t fill the available width
  • A DRG header displays despite it being embedded in another platform
  • Global filters are scattered all over the page
  • There is no clear distinction between each of the charts
  • Cluttered and hard to scan

After following guidelines

  • Fills the available width
  • No DRG header is visible in the dashboard because the platform already has one
  • Global filters are organised consistently at the top of the page
  • Each chart is clearly grouped within its own card
  • Clean and easy to scan