Thoughtful design

Design visuals for your users and keep it simple.

Designing a public dashboard and the surrounding webpage go hand-in-hand. Use the guidance below to design your dashboard, and the webpage content guidance section to shape the page content.

For an excellent review of more general data visualization basics and best practices, review this Reader on Data Visualization, by Michael Schermann at Santa Clara University. Chapter 2 on the fundamentals of data visualization is a must-read for analysts.

Learn more about inclusive design.

📌 Using Power BI? Use the SF.gov dashboarding template in Power BI. All the guidance below is already applied to our template, so it’s easy to just plug in your data and go!

Understand what data your audience is looking for (or coming to the dashboard for).

This is perhaps the most important part of design. Build in time to talk to your audience to understand what they want. This is not optional - it’s key to your publication’s success!

Keep it very simple.

Do not assume that adding more visuals or filter menus to your dashboard gives users access to more information. In some cases, too many visuals can clutter a dashboard and reduce the usability!

Start by understanding and outlining the most important point or finding in the data. That is your key visual, which should be in the top left. That is your lead.

Channel the progressive enhancement strategy: build your dashboard so that all users can clearly and easily see the key data points and findings. Only then, add buttons or other functionalities for advanced users.

If a key stakeholder requires more specific data or a complicated chart be included, include it in the “deep dive/ enhanced” view. This means, your initial view is simple, and a clear button or toggle (or a link to the underlying data) enables those interested to go deeper.

📌 Power BI tip: Do not create a multi-page report with the expectation users will discover the bottom navigation arrows (in the grey bar).

• If you do need to use multiple pages, and they are all very closely related content, then include another way to access the subpages (like radio buttons). You will need to ensure the desktop views are the exact same dimensions.

• If the pages have slightly different content or purposes, they should be different reports and embedded as different visuals.

  • Remember in Power BI to leverage the Power BI dataset functionality to keep your data pipeline and maintenance simple.

Aim for 2-3 data visuals.

Aim for, at most, 2-3 data visuals (bar/line graphs, maps, cards, tables, etc), and 2 supporting elements (button selector, filters) per dashboard view. You may need to split your initial idea into several dashboards.

Before adding an element, consider: is this needed to understand the main purpose of this data? Is this related to the other data, or does it belong on its own dashboard?

If you have a more complex chart, it will likely need to be the only figure shown (with a table).

Walk your users through the key findings, or purpose of your dashboard.

What is important about your data? What are the key trends, or findings that are the main takeaways? These should be very clear and written out for users to read.

Because most dashboards cannot be translated into different languages, this written text may need to be on the webpage itself.

If you are publishing live-updating data and key findings may change over time, this may not be possible. Even so, offer as much of a text-based equivalent of your dashboard as possible. Read more in the accessibility section.

Example: A line chart with more than 3 lines is generally not clear or discernable for users. Even if you’re using different shapes (and not fully relying on color), it’s still difficult to see trends when lines are on top of each other.

Screenshot of over-complicated visual. Shows a line chart containing 8 different colored lines all overlapping and overlapping data labels.

The best version of this visual would be a chart that already highlights the key finding - is there a certain disparity that is important? A key trend over time? An inflection point or turning point? Instead of a chart showing all the data, curate specific charts for each finding.

If the data is live-updating, another potential solution may be using small multiples to show each trend separately (with the same scale, if comparison is important).

Screenshot of an updated dashboard using the same data from the prior image. Shows small multiples (7 small area charts with the same scale) instead of a line chart with many lines overlapping.

📌 Power BI tip: In the Power BI template, you may want to explore using the “Toggles” layout to be able to walk users through multiple insights or key findings on one dashboard.

Consistency is key.

If you are maintaining more than one dashboard, keep your dashboards as consistent as possible. Keep the formatting, color, design patterns, and common buttons/widgets/elements in the same places. You want your users to know where to go for things. This includes:

• Buttons in the top left. If you’re using buttons or toggles, keep them in the same place. The top left is preferred.

• Filters on the left hand side. Keep all the filters stylistically identical. Users should know exactly where to look to filter.

Use consistent spacing between data visuals.

Don’t place clickable data visuals and user interface elements too close together. In our template, we keep visuals 10 pixels apart, and 15 pixels from the edge.

It’s important to keep things far enough apart that a user can understand that they are different elements. However, they need to be close enough to know that they are related (in the case of UI elements).

📌 Power BI tip: Within our template, you can use the blue spacers to ensure visuals are properly spaced apart. You can also adjust the size and spacing of visuals in the Formatting -> General pane:

Image showing Power BI screenshot of how to change the position of a data visual. Select the visual, go to the formatting pane, general section, and adjust the X position, Y position, width, and height.