Chapter 6: How to use actions and text widgets

To help your end users navigate across your Application, actions and text widgets are really effective to use on top of all your data visualization. Let’s see how to best utilize them.

Actions Widgets

1. Make it look like what it does

On an interface, users have baseline expectations of what an interactive element should look like and how it should behave. In user experience, this is called affordance. When the UI elements doesn’t look like what it will do, either the user will interact and get confused or the user simply won’t click it.

It’s important to respect the following rules to increase the chances of your user understanding how your Application works.

To link to a Board or an external link

It’s preferable to use cards. This is a familiar pattern used on website and web applications. To avoid users confusing them with a KPI, display an icon and add a button.

To trigger an import or an API request

Make sure to display an actual buttons. As opposed to links and redirection,, people expect to click on an actual button for actual actions.

Write explicit labels

To emphasize the fact that this element is an action, use verbs in the label. With a simple “Go to ...” we can explain that this action will link somewhere and let users know what to do.

2. Hierarchy and consistency

Actions are a functional element which need to be easily identified across your entire Application.

To avoid frustrating users, define a styling for the primary, secondary, and tertiary actions and keep it consistent across all Boards.

Don’t: Use too many different button styles

Each time a new styling is used, users have to re-learn how the system works and can’t use it intuitively.

Do: Create a button system and stick with it

Use a dark color for primary actions and a light color for secondary. This visual system is the industry standard.

3. Organise your links

To guide your end users, you can set up a Homepage that will automatically open up when they enter their Application.

When designing those Boards, we recommend leveraging text widgets to create sections and create an intuitive navigation.

Don’t: Add lots of buttons beside each other

Having all buttons beside each other makes it extra hard for a user to focus on a single element.

Do: Organize buttons in different sections and add content

Organizing buttons in section and sub-section help users identify the content they’re looking for.

Text Widgets

1. Reduce the amount of styling

Don’t: Use lots of styling options

Each time a new styling is used, users have to re-learn how the system works and can’t use it intuitively.

Do: Use a single option to make some information stand out

Use a dark color for primary actions and a light color for secondary. This visual system is the industry standard.

2. Build a hierarchy

Not every piece of information is at the same level. Take advantage of headings to organise the content on your page.

3. Leverage backgrounds to organise content

Guide your users eyes by adding a background color to instructions.

Next up

Discover a series of Board inspiration