---

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

---

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.

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:

---

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

Second example

---