Downplaying Empty States in Design

From the craquelures, at us are looking traits of an unseen creation. It is exciting and really weird, to say the least. What is a black cover over that old painting? It’s an empty space. Is it meaningful? All of a sudden, it is. The potential of everything the underlying painting could possibly be is what makes it exciting.

Empty states in interfaces

Designers are skilled in designing substance. The whole thing revolves around the ensemble of visual elements which along with words and navigation patterns, shape the experience. We do our best to follow visual trends, build value through meaningful words and animations.

Designers are taught to rely on meaning in its initial form, the first-sight impression of the designs they create. That’s why they push lucidity, clarity, “less is more”, and brevity.  

So if all the tangible and visible objects are identifiable and capable of conveying information, where do blank spots fit in design?

Empty states are commonly known as first use states, user cleared fields and panes, 404s, and error messages. Typically, they do not carry a lot of meaning through what they showcase visually, but they serve as shells for the meaning behind those states.

These states are parts of the user journey which makes them fully functional elements that can also be designed in a better way so that the UI could benefit from them. Empty states can boost engagement, build consent, educate, delight, and entertain users.

These often-neglected pieces of interaction can convey a lot of subtleties though. Properly designed and written, empty states offer a bunch of opportunities to engage users unlike using the stock stubs.

The main types of empty states in UX are:

• Initial interactions. The first user/application encounters.
• Accomplishments. The situations where user actions lead to clear states.
• Errors. The barriers users meet while performing the tasks.

Developers tend to be more aware of the spots where empty states may appear than designers who rely more on significant parts of UX interactions. Developers have to implement all the states and in-between.

If designers pay more attention to those in-betweens, this might give their prototypes an extra kick.

First impression

Before a user becomes familiar with the functionality and the features every web/mobile app has to offer, they will go through an acquaintance process. There is an opinion that most users these days know how to operate a website/app and in that case they do know why they opened/downloaded the app.

However, that might not always be the case and we should not neglect the portion of first-time users and shy them away because of the weak first impression.

For data-based applications, it is crucial to get the user going and not lose them.

This can be done through extensive A/B testing to figure out the priorities and emphasize the right pathways. For example, this YugaByte prototype offers two options: action through a set of consecutive operations for intuitive users, and the “more info” option for those ready to explore first. In any case, we should offer equally engaging ways to lead the user and make every step meaningful even before any decision is made on the part of a user.

Or if you are going to say something, make it memorable.

This is how the essentially empty screens can become the vehicles of further UX progression.

The dones, okays, and yays

Every design has to have some sort of user-originated empty spaces. Either as a result of task completion or lack of content for a specific state, these user-cleared areas have to be taken care of.

At no point are we allowed to lose them and stare into the depths of a white slate.

The goals of anything you design for this empty state of accomplishment are:

• Let them know that their actions led to great success.
• Guide/prompt them to what’s next.

Green ticks usually get the job done for the first part but require something different for the second one. If the goal is to create a flowing UX, the feedback has to be wholesome as well.

A nicely placed encouragement can boost user confidence tremendously and also help work out user’s expectation for what’s coming.

Let’s see why using okay or done is not the best option. In my opinion, they give zero appreciation for a user to complete another task. Okay is a way to express a bunch of reactions. What’s the okayest? Same way, anything can be done… including the customers done using your web/mobile app. 

With that said, part of the award for accomplishing a task may be a bit of a free roam. The open-world video games are perfect with that. They constantly pitch you various content but it’s always up to you to decide which step to take next.

Or perhaps it makes sense to remind your users there is life going on outside.

In any case, appreciation (at least a reaction) has to be present for every achievement made. Apart from the yay! There has to be the next thing to do peeking through some element of the UI or a delightful perspective of enjoying yourself after the task is finished.

404 – the undiscovered country from whose bourn no traveler returns…

Unfortunately, sometimes things can go wrong. Not every outcome can be predicted and not every action can call out a congratulatory response.

The empty state describing an error, has to be a part of the UX design, as it deals with a subtle matter of user dissatisfaction, and thus, must be taken care of.

There is no way around errors when we involve direct user input. Along with that, there is a chance of technical issues, connectivity issues, and generally something coming from the service’s end.
The 404 is a perfect example of an empty erroneous state.

It’s uncomfortable to say that something a user came for to your website, is not there.

There is some ingrained sense of guilt connected with that. You can just go and say “whoopsies, page not found” like it is, or turn it into an engaging little interaction.
This one is brilliant. It has it all, the statement that something is not working out, the instructions to follow, the consolation award, and just a chuckle-invoking artwork.

There is a low-key competition going on among UI/UX designers about specifically, 404s. For quite some time already, designers have been acutely aware of the opportunities, ‘page not found” states present.

If we are leaving a user frustrated by the fact that there is no page they are looking for, there has to be something given instead of it. The design and microcopy here can add a bit of personality and dilute the potential frustration.

Empty out responsibly

Design is all about user retainment. People stick to what they like or what makes them feel special/different among a gazillion of other choices. If your web or mobile app is too complicated, chances are users won’t get past the initial screen which is usually sign up or log in. It is important to establish some sort of a meaningful connection right away.

If there is no core functionality revealed on the first encounter, we have to make the encounter alone an event.

However, we should remember to keep the standards high and not turn into a pawn shop window. Everything worthwhile takes a little pain to achieve. The real challenge for initial interaction design is to get a user into the right mindset.

Display as much personality as you do usability. Be clear, be real, and don’t dumb it down.

While the first impression is important, users still opt out a lot once they start actually using the product. For that not to happen, make sure you are:

• Motivating and encouraging users to do more and get further.
• Persuading them through thoroughly pitched benefits.
• Guide them without losing at any point including the non-existent pages.

Downplayed empty states are wasted opportunities.

The hardest part about design is it has to be balanced in terms of the information it provides and the action it requires. Empty states are what lies in between those. And what’s cool is we can make them work for us simply by paying attention.