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.
- Customers come first
- 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

- Choose ‘Range’ in the dashboard size options.
- Set the minimum width to 100 and the maximum to 9999. This will make the width always stretch to the full available space.
- 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
- Use the most appropriate type of filters
- 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