Why you should avoid offering “hidden” interactive features

The second installment in the series regarding the 5 most common design mistakes for Qlik Sense, we talk about a flaw that can literally go unnoticed, for you and your user.

This oversight certainly has a negative impact on your dashboard’s end user experience.

Keep reading to learn more about the importance of flagging interactive features for good usability.

Error #2: Offer “hidden” interactive features

Most BI dashboards are interactive, that is, they offer their users the possibility to take actions through interaction with screen elements.

These elements can be buttons, tabs, filters, menus, etc.

For an interactive resource to fulfill its function well, it is very important that its look and feel helps the user understand its purpose.

For example, when you see a button, you understand that by clicking on it an action is triggered.

This is because everyone who is familiar with the digital environment already has an idea of what a button looks like and what its function is.

By identifying a visually similar element we quickly associate it with that known function.

When we offer some interactive feature that does not make its function clear through its shape, we make it difficult or even impossible to use.

Let’s illustrate with an example. Below we have a dashboard that offers a few interaction possibilities. Can you tell what they are just by looking at the screen?

Some interactive elements give us clues as to what their function is, such as the menu, the “Time Filters” and the “Brand View >>” links.

But one of the main interaction options that this page offers is hidden at first glance.

There are few visual cues that help the user discover that it is possible to perform this action.

Notice that there is an area with a light blue background that indicates that some data is related to each other.

From the visual grouping, we understand that the “Specialty Contribution” data refers to the brand “ProtoQlik”.

What gets harder to figure out is that by clicking on the block with the gray background, we select the brand “Qlikatan” and the data below becomes related to this set of data instead.

There is no text, link or visual change when you hover the mouse over the clickable block that signals this interaction.

This makes it very unlikely that a user will actually find and understand this information. And a lot of important data may not reach its final destination as a result of this poor design choice.

The solution: Clearly signal your interactive features

If your dashboard offers some kind of interactive feature, a good exercise is to look at each one of these interactions and ask yourself how clear its function will be conveyed to someone who has never seen your dashboard before.

Don’t forget that what is obvious to you, may not be obvious to someone who is not familiar with that visualization.

So it’s even better if you can observe your users using the dashboard or even ask them to perform some actions on it.

Some important questions to consider:

• Does the look and feel of my interactive element say something about its function? Does a link look like what is commonly known as a link?
• Do I use text that explains the expected action? Does my clickable icon have a label that helps understanding its meaning?
• When I place the mouse cursor over some interactive element, does any visual change happen? Does my button change color? Does the cursor change?
• Do I always identify elements with the same function in the same way? Whenever I show a button, does it have the same color and style throughout the panel?

Below we bring an example to showcase good practices when it comes to communicating interactive features effectively.

This is Cluster App, Cluster’s automated mashup generator designed to provide a great user experience across desktop and mobile contexts, with no implementation effort required.

It runs inside NewHub, our Qlik Sense app centralizer and organizer. Learn more about our products on the website.

The first tip is to use visual and cursor changes when hovering the mouse over interactive elements.

This feature is well known and therefore easily associated with actionability.

Also, any movement or visual change is one of the most effective ways to get the user’s attention (blinking advertisements are quite annoying, but we have to agree that it is almost impossible not to see them).

Notice that in addition to the subtle change of the background color on the buttons, the cursor icon changes from having an arrow pattern to a hand indicating the click.

Another good practice is to use text inside the clickable elements whenever possible, as you can see in the example under “Favorite filters” and “All filters”.

Icons are great allies to make your panel more attractive, but nothing beats a clear label to relay information accurately.

When space is too restricted and it is not possible to add text, a useful resource you will always have are tooltips: they are small balloons with information that appear only when you stop the mouse over an element.

Below you can see examples of how tooltips can be used to give more clarity to interactive elements.

Another very important aspect to reduce user effort is consistency.

This means that everything that has a similar functions should be displayed in the same way throughout your dashboard.

Being consistent helps usability because it reduces the need for the user to learn new conventions.

Once you understand the function of an element, you won’t need to learn it again when you see a similar one in a different space.

Notice in the example below how the buttons keep the same style in different contexts of the dashboard.

Lessons learned:

• Make sure that you marked all interactive features in some way
• Use known standards for interactive elements. A button should look like a button, a tab should look like a tab
• Whenever possible use text to reinforce actions, either in an apparent form or with tooltip aids
• Use features such as visual and cursor changes when you hover the mouse over interactive elements
• Be consistent in the use of visual standards throughout your dashboard
• Test your dashboard with your users to validate that the intended communication is clear

Don’t be afraid to be redundant and remember: what is obvious to me is not always obvious to you.

Put a lot of effort into signaling the interactive elements of your dashboard and help your analyst perform all the actions he needs.

Did you like this content? See more posts in this series:

Common Qlik Sense design mistakes: Not contextualizing data

Content written by Silvia Cardoso Pereira, UI/UX Designer at Cluster