Introduction
Effective data dashboard design is a balancing act between form and function. The best dashboards are ones that are visually appealing and convey the right amount of information to the viewer without being overwhelming and confusing.
Purpose of this document
Visual consistency is important in any user interface design. Multiple related dashboards with no visual consistency can appear chaotic and be confusing to the viewer. Visual consistency in dashboards can increase usability and improve message communication. The purpose of this document is to outline methods to help the visual consistency in all University of Southern Indiana dashboards designed for official business and reporting purposes.
Layout
Branding
The University logo should be placed on the top left hand side of the dashboard. Logos may be obtained from the University Brand website. You will need to store the logos in your Common Tableau Repository. Although block and stacked logos are available to use, the preferred logo to use is the horizontal one (USIAcad-WdmkHoriz-4C). The size of the logo should be in balance with the size of the dashboard.
Dashboard Size
- All dashboards should be printable on one-page.
- If the dashboard is going to be published on the University website, it will need to fit within the constraints on the web page content area.
- For information about Umbraco, the University web content management tool, please contact University Web and Digital Content.
Dashboard Title
Dashboard titles should be located in the top right hand side of the dashboard. They should be no more than two lines and the height of the title should correspond to the height of the University logo.
Dashboard Description
Each dashboard should have a short description (no more than two lines) of the contents of the dashboard.
Number of Visualizations
- A dashboard should have between 3 and 6 graphs/charts to ensure that the content is interesting, but the space is clean and uncluttered.
- The primary focus of the dashboard (the most important chart) should be placed as close to the top and left as possible. When a user looks at a web page or dashboard, this is generally where the eyes focus first.
- If the dashboard is to go on the website, horizontal scrolling and vertical scrolling should be avoided.
Filters
- Filters should be located across the top or down the left hand side.
- There are no limits to the amount of filters you can use, but the filter area should not be cluttered. There should be no more than two rows of filters.
- The width of filters should be similar.
- If possible, each filter should be wide enough so the filter text is visible when selected.
- Most filters should be applied to every visualization on the dashboard. If not, the user should be informed of this.
- Filter results should be summarized in the dashboard, either in the title of each visualization or in a footnote at the bottom of the dashboard.
Mobile
- If you anticipate users needing to refer to your dashboard on mobile devices, use the Tableau Device Preview tool to create mobile versions of your dashboard.
- When the dashboard is embedded in the web page, a width of 100% needs to be set in the CSS. If not, the dashboard will not be responsive to the different widths of mobile devices.
Colors
The USI Color Palette contains nine colors that coordinate with the University brand. These colors should be used in all visualizations unless
- There is a concern about the accessibility of the dashboard. Then the color blind palette should be used or
- There are not enough colors for all of the dimensions in the graph. In this case, the standard Tableau color palette may be used.
Since the color red in charts and graphs traditionally has a negative connotation, the use of red should be limited to highlighting pieces of the visualization that indicate a deficit or negative trend.
The usage of other background colors or accent colors should be kept to a minimum. If using row banding in a text table, choose a light shade of gray.
The hexadecimal codes for the colors in the USI Color Palette are as follows:
- #002856
- #cf102d
- #7491a3
- #867970
- #aaa099
- #e9c2a6
- #3d3e3f
- #b1b1b2
- #A45A52
You will need to store the USI Color Palette in the Preferences file in your Common Tableau. (Setting up the Preferences File) After that it should be available from the Tableau marks card. If you cannot find the USI Color Palette in your marks card, you may need to redirect your repository.
Typography
- Standard font is Arial.
- Standard color is black. USI Blue (#002856) may be used for visualization titles.
Images
An information icon may be used to include instructions or explanations about the dashboard. (See Creating an Information Icon)
There are other standard icons that may be used.
- Help Icon – how to use and read the dashboard
- Arrow Icon – directs the user to another dashboard
- Refresh Icon – clears the filters
Icon images are located on the USI Website. You can download them and add them to your Tableau Repository (Adding Images to Your Custom Shape Folder)
Images besides University logos and icons may be used if the image conveys information, but should not be used for purely decorative purposes.
Footnotes
- On Worksheets - Footnotes on individual worksheets within a dashboard should be kept to a minimum. Information like this should be included in the Information Icon for the dashboard. The exception to this is if the dashboard is expected to be printed out and the information in the footnote is needed to understand the graph.
- On Dashboards – A footnote may be used on a dashboard to show what filters have been applied to the dashboard.
Best Practices
- Every dashboard should note the source and date of the data usually in the information icon.
Example: Source: University Records as of 7/2/2017
- Limit unnecessary color and decoration.
- Make sure tooltips are easy to read and understand.
- Every dashboard should have an email for questions and concerns.
Example: For questions, please contact opra@usi.edu.
