Let’s talk about buttons. They seem like ordinary, insignificant part of user interface that we see everyday and we’re so used to. But still, there is quite a lot to talk about and there are some ground rules and best practices that every designer should know and follow. In today’s article I’ll try to introduce you to some of them.

 

Call To Action

Call To Action (CTA) in design and UX is an element of UI that prompts user to perform some specific action. Call to action buttons should be easy to notice and designed in a way that the user can’t resist clicking on it. In report or dashboard design, a CTA button can be for example a button placed on a report landing page that enables users to move to the main part of the report.

  • CTA buttons should be visible straight away – in order to achieve that use strong colors that have strong contrast relative to the background
  • It shouldn’t be perceived by the users as static element – they should know that this is a button and it can perform an action
  • There isn’t place for any confusion – It should be clear what does the button do

 

Navigation strategies

When designing a report there are several ways in which we can enable user to navigate between report pages. When using Power BI, we can just use built-in tabs that user will use to switch pages in Power BI Service, but I am strong advocate of creating custom navigation buttons inside report when possible. This approach has some strong advantages:

  • User can use report in fullscreen mode and focus on it entirely
  • We have a lot of flexibility in storytelling and guiding users through report by button placement
  • Reports are more appealing and look more like well-designed webapps rather than simple Power BI reports

 

Top navigation bars

Placing navigation buttons on the top bar is well established practice. There are several advantages of that approach:

  • It doesn’t take much space on the screen
  • Users are used to navigation buttons in that place of the interface

However, in case of many report pages  there can be simply not enough space left on the top bar. In that case you should consider side bar navigation.

 

Example of top bar navigation in a report

 

Sidebar navigation menus

If there aren’t lot of slicers in your report, you can consider placing navigation buttons on the left side of the screen. This is another well known approach to navigation used in many apps. Like in top bar navigation, remember about indicating what page is active.

 

Example of sidebar navigation menu

 

Button anatomy

Buttons can be designed in simple or quite fancy and complicated way, but they always have similar anatomy. Each button needs to convey the message about action it performs so it must contain text or an icon. When creating a text button remember that communique should be simple and straightforward – there isn’t place for elaborates and long explanations. Keep it simple. You can always put additional explanation in a tooltip if needed (actually, in Power BI you have to do it every time you create a new button).

When creating an icon based button, use shapes that have well defined meaning and that won’t confuse the user. For example, left arrow usually means “go back” so it should be used only in that context.

 

Button states

There are 6 main button states:

  • Enabled – this state communicates that button can be interacted with
  • Hover – communicates when user has placed coursor over a button (not applicable in mobile apps)
  • Activated – communicates highlighted destination
  • On and off – two states of a toggle button for example; each state communicates a toggle between two options
  • Pressed – not as important in desktop apps; this state communicates a user tap or click
  • Disabled – communicates that the button doesn’t work in specific context

Enabled state example

 

Hover state example

 

Activated, enabled and hover button states in top navigation bar

 

 

On/off states example

 

Pressed state example

 

Disabled state example

 

 

Button usage

Besides simple page navigation, we can use buttons for many different actions. For example, we can use them for clearing filter/slicer selection, applying a bookmark, switching to highlight mode or navigating to drillthrough page. The possibilities are endless and this only shows how important element of a user interface a button is.

 

Button styling

There are several ways you can style your buttons, but you should be smart about it. Ask yourself some questions: How important is this button? How often it will we used by the user? Does it perform crucial action?

If button is typical CTA button it should have strong contrast relative to the background. It’s always a good idea to use saturated, strong color – you should also be consistent with your “action” color – stick to one, in order not to confuse the user.

For navigation tabs, make sure to show which tab is currently selected – a typical way to do it, is by using line underneath the text or changing color of the button background or text.

For less important buttons it’s a good idea to use text-only button or outline instead of fill – you can use such buttons for clearing filters for example.

Michał Stryjczak

 

Read more:

Advantages and disadvantages of charts in data visualization

Business Value of UX/UI Design

Understanding layout to build user friendly BI reports