Updated: Oct 19, 2022
The following blog by Jacqui Moore was originally published on Do Mo(o)re With Data March 23 , 2022 and is cross-posted here with permission. Jacqui is a Tableau Social Ambassador and a Senior Data Analytics and Viz Consultant for Cleartelligence.
How and when I use design tools in my dashboard development process
You may have heard people talk about Figma or Illustrator, or maybe you’ve heard people talking about wireframes or prototypes. Perhaps you’ve seen dashboards with custom backgrounds. Some questions seem to come up often: What do you use Figma for? What are wireframes? Do I need prototypes? Should I use background images in my dashboards? Are these tools just something to use for flashy dashboards for Tableau Public? Why wouldn’t you just do your mockup in Tableau?
These are all really good questions to be asking, especially if you haven’t used these tools in your work before. In this installment of the “It Depends” series, I’ll unpack how and when I use design tools in my dashboard development process.
Just a quick note to say, I might talk about Figma a lot here, but this post isn’t about Figma specifically. There are other tools that you can use to accomplish similar things to varying degrees. Plenty of people use PowerPoint, Google Slides, and Adobe Illustrator just to name a few. Autumn Battani hosted a series on her YouTube channel that demonstrates this very well (link). If you want to see how different tools can accomplish the same task, give them a watch!
Why would I use design tools?
In my mind, it boils down to two reasons to use a design tool like Figma in your process:
Create design components such as icons, buttons, overlays, and background layouts, or
Create wireframes, mockups, and prototypes
So, let’s get into when and why you might use these…
For business dashboards, it’s usually best to try to keep external design components to a minimum, but when used effectively, they can improve your dashboard’s appearance and the user’s experience.
Icons and Buttons
Icons can be a nice way to draw the user’s eye or convey information in a small space. Custom buttons and icons can add polish to your dashboard’s interactivity. But, they can also be confusing to the user if they’re not well-chosen. So, what are some considerations that can help ensure your icons are well-chosen?
Is the meaning well understood?
While there are no completely universal icons, stick to icons that commonly have the same meaning across various sites, applications, operating systems, and regions.
For example, nearly every operating system you use will use some variation of an envelope to mean “mail”. They might look different, but we can usually figure out what they mean.
Are they simple and easy to recognize?
Avoid icons with a lot of details and icons that are overly stylized. Look for a happy medium. Flat, lower detail icons are generally going to be easier to recognize and interpret. Once you’ve chosen an icon style, use that style for all icons.
In this example below, the first icon is a very detailed, colorful mail icon, the second is a stylized envelope, and the third is a simple outline of an envelope. The third icon is going to be recognizable for the most people.
Is there a text label or will you include alt-text and tooltips?
Text labels and alt-text are not only important for accessibility, they can help bridge any gaps in understanding and clarity.
Does it improve the clarity or readability of the visualization?
Avoid icons that distract or are unnecessary. Using icons strategically and sparingly will ensure they draw the eye to the most important areas and reduce visual clutter.
This quote from the Nielsen Norman Group is a good way to think about using icons in your designs:
“Use the 5-second rule: if it takes you more than 5 seconds to think of an appropriate icon for something, it is unlikely that an icon can effectively communicate that meaning.” Nielsen Norman Group
Some places to use icons:
Including an information icon can be a great way to use a small amount of real estate and a recognizable symbol to give users supplemental information about a dashboard without cluttering the dashboard
Hiding infrequently used filters in a collapsible container can reduce clutter on the dashboard while still providing what is needed
Show/Hide alternate or detailed views:
An icon to allow the user to switch to an alternate view such as a different chart type or a detailed crosstab view, or to show a more detailed view on demand
Background designs can help create a polished, slick, dashboard. Something you might use for marketing collateral, infographics, and executive or customer-facing dashboards. A nicely designed background can elevate a visualization but they do come with trade-offs.
Does it improve the visual flow of information?
Backgrounds can be used to add visual hierarchy, segmentation, and to orient or guide the user.
Does it distract from the information being presented?
When backgrounds are busy or crowded, they take away from rather than elevate the data being visualized.
Does it affect the maintainability of the dashboard?
Custom background images need to be maintained when a dashboard is changed, so they should be included thoughtfully.
Does it adhere to your company’s branding and marketing guidance?
Background images that are cohesive with other areas will feel more familiar to your users which can make your solution feel more friendly
Does it have text?
Whenever possible, use the text in Tableau as it will be easier to update and maintain, and is available to screen readers. If you need to put the text in the background image for custom fonts, you can use alt-text or hidden text within Tableau.
If you’re looking for a place to start with designing layouts, I suggest checking out Chantilly Jaggernauth’s blog series, “Design Secrets for a Non-Designer“, and conference presentation of the same name.
Look at Tableau Public, websites you find easy to use, product packaging. Take note of what works well (and what doesn’t).
Of course, it’s not just the data-art and infographic style dashboards that can benefit from this. If you peruse Mark Bradbourne‘s community project #RWFD on Tableau Public, you’ll see plenty of examples using the same concepts to improve business dashboards. Don’t underestimate the impact of good design on usability and perception… It matters.
*Tip: When you use background layouts, you usually have to use floating objects— Floating a large container and tiling your other objects within that container can make it easier to maintain down the line #TeamFloaTiled
Overlays can be used to provide instructions to users at the point where they need them. They provide a nice user experience, allow users to answer their own questions, and can save a lot of time in training and ad hoc questions.
Can instructions be embedded in the visualization headings or tooltips effectively?
Overlays are fantastic for giving a brief training overview to users, but they are not usually necessary. Instructions are usually most helpful if 1) the user knows they exist and 2) the information is accessible where it will be needed.
Does the overlay improve clarity, and reduce the need for the user to ask questions?
Overlays should help the user help themselves. If the user still needs training or hands-on help, then it might not be the right solution, or it might need to be changed to help improve the clarity. Sometimes the users just need to be reminded of how to find the information.
Is your dashboard too complex?
Sometimes dashboards need to be complex or they have a lot of hidden interactivity, and there’s nothing wrong with that. However, if you feel like you need to provide instructions it’s always a good idea to step back and consider if the solution is more complex than necessary, or if you can make the design more intuitive. Sometimes complexity isn’t a bad thing, but it’s always worth asking the question of yourself.
Will it be maintained?
Similar to background layouts, overlays will need to be changed whenever the dashboard is changed. Make sure there is enough value in adding an overlay, and that if needed, it will be maintained going forward.
Wireframes, Mockups, and Prototypes
Wireframes, mock-ups, and prototypes are a staple of UX design, and for a good reason. They help articulate the requirements in a way that feels more tangible, they force us to ask questions that will inevitably arise during the development process, and they help solidify the flow and structure. In dashboard design, they can get early stakeholder buy-in, ownership, and feedback. They also help us get clearer requirements before investing in data engineering and dashboard development (and having to rework things later — Tina Covelli has a great post on this subject here). You can talk conceptually about what they need to see, how it needs to work, and the look and feel earlier so it can save time on big projects. I’m a big fan of this process.
So, what’s the difference between wireframes, mockups, and prototypes, and when might you use them?
Wireframes are rough sketches of the layout and components. They can be very low fidelity — think whiteboard drawings of a dashboard. These are great very early on in your process.
They can also be a slightly higher fidelity wireframe that starts to show what the dashboard components will be. These are the bones of a dashboard or interface, but can help articulate the dashboard design and move forward the requirements discussion.
Even if your stakeholders never see the wireframe, sketching out what your dashboard and thinking about what the layout, hierarchy, interactivity will look like helps organize your thoughts before you get too far or get locked in on a specific idea.