Home / Tech Tips / Xcelsius End User / UI/UX Series – Empty States
ui-title

UI/UX Series – Empty States

<Part of the UI / UX series

The focus of our first blog post in the UI / UX series is something called “Empty States”.  This is  considered very important in website and application development, but is not something you see a lot of in dashboard and BI content development.  We are usually more focused on how to display and structure large amounts of data, and neglect to consider how to display no data.

According to Google’s design specification:

 

Empty states occur when the regular content of a view can’t be shown. It might be a list which has no items, or a search which returned no results. Although these states aren’t typical, they are important opportunities for good design to avoid user disappointment or confusion

 

So what does that mean?  Well let’s look at a generic twitter based iPhone application.  The app has opened but there are no tweets found.  Rather than showing a blank screen, a holding message is shown:No Tweets Found

This is an example of a basic empty state screen.  It is a way to show the user that the app is working, but there is just nothing to display.

This in itself it isn’t very helpful.

It doesn’t help the user understand how to find data, or what they can do to see the data.  This is where empty states and “Calls to Action” merge to create really strong User Experiences.

 

 

 

Let’s look at an example of a strong empty state screen.  This is from an app that allows you to build new websites, and then track visitor counts etc on a dashboard:

That button must be important

Again there is no data to see in the dashboard, however rather than a blank screen, or even just a basic empty state.  They have introduced a call to action.  The design is leading the user and helping them.  There is little doubt on what you need to do to create a new website.

Now let’s consider this from a BI perspective.  How can you leverage empty states in dashboards and reports?

Here is a very simple dashboard that allows you to select a region and a year to display the years revenue.


North for 2015 has revenue to show, and the chart is populated.  However if I now select 2016

There is no data to display.  It’s not clear whether I need to wait for data to load, or if there is nothing to display or whether the dashboard has broken.

Now if I add an empty state to educate the user on what’s going on:

By designing the dashboard in this way the  user is advised that  there is no data for North in 2016 and to search again.  If the dashboard was waiting for data to load then I could use the empty state message to advise this too.

Dashboards, just as with websites and applications, will function and work without empty states.  However a well thought out and designed empty state gives a more rounded and complete user experience.

In our next blog we will explore “context” and “enclosure” when visualising your data.

About Rich Harvey

Richard Harvey is a Business Intelligence Consultant for InfoSol Ltd in Europe. With more than a decade’s experience in IT, he has worked in a variety of report and data management roles. Richard has been developing with SAP Dashboards (formally Xcelsius) since 2006 and combined with his data management experience has produced a number of innovative online and offline dashboards. Richard joined InfoSol Ltd from a leading UK financial services organisation where he had been heading up their Business Intelligence project team.

Check Also

Tech Tip: Customize the Reset Functionality in SAP Dashboards/Xcelsius

Reset is a built-in functionality provided in SAP Dashboards. The standard functionality is achieved by ...