State Design and You

Websites have evolved into some of the most advanced in-browser applications on the market over recent years. Information is accessible instantly and as a result, users are conditioned to have practically zero tolerance for waiting around to absorb it. I know this because I have fallen victim to it myself.

Habit forming tech

This “zero-tolerance for waiting” policy is a result of a habit from which we all suffer.

How many times a day do you pick up your phone and check for updates or emails?

How many apps do you fire up to see what is happening on your favorite news feed(s)?

When text-messaging someone do you wait in anticipation to see a status of the user on the other end typing a reply?

When you binge watch a Netflix series and the next episode is in the queue but there is a small loading time, do you begin to panic?

My guess is this all hits home for most of us.

We live in a world where the state of things are increasingly important. Our daily activities revolve around getting a reply from a text or even a form being submitted to our financial institution’s website. We aren’t satisfied until we get answers. You could say as a human race we are down right spoiled.

medium create new post screenshot
Here’s the interface when creating a new post on medium.com where there’s not much happening but luckily there are clues to get started.

State design is highly relevant in today’s world. You need to find a way to predict certain outcomes your users will most certainly face and design for them accordingly. A good user experience offers a way out of any state.

State design, in my own words, can be summarized by the ideas I have outlined below.

State design

Nothing is happening

In the beginning, nothing is happening. Sure, the application may be functioning correctly but it requires some form of user invoked action to begin appeasing you. There is a bit of a puzzle for the user to solve. If designed well, this state should be easy to overcome with little wait.

Something is happening

No one likes to wait, but sometimes loading time is necessary as code takes some time to process and render. A user needs to know this state is taking place. If executed correctly, the user will typically have enough patience to wait unless the wait time exceeds their own perceived limit(which is hard to estimate).

Loading screenshot of Slack messaging application
Something is definitely happening when firing up your Slack application. The handy loading animation tells you something big is coming shortly.

Where is my data?

When there’s no data the app is rendered useless even though it’s fully functioning. This is a good opportunity to entice your users act with a helpful hint or reward.

When uploading work to Dribbble, the upload page gives you helpful hints on what to do next.
When uploading work to Dribbble, the upload page gives you helpful hints on what to do next.

Oh look, there is data now

All systems go. Your application has data, it gives you details and insight of said data and allows you to continue creating, editing, deleting, moving, and so on depending on your app.

screenshot of a dashboard filled with data
Dashboard Web App Product UI Design: Job Summary
from Mason Yarnell

There is too much data

Pagination is a tried and true method for displaying an overabundance of data. Modern websites will sometimes use new tactics like infinite scrolling or lazy loading. Others make use of pagination which is just as effective but requires loading a new page. How you handle displaying a lot of data should never be at the expense of the user experience. Be sure to put yourself in the shoes of your users to figure out the best method.

screenshot of table design for cPanel
New table layout for latest visitors inside cPanelfrom Corey Haggard

You did bad

When something doesn’t go right your users need to know so they can change something. Give them good visual cues and a hand in resolving the error issue(s). Never assume users will input data they way you hope. Tie into their data dynamically, with JavaScript or something equivalent, by displaying it the way you need rather than them doing the heavy lifting. This all goes back to attention span. Don’t make it hard.

screenshot of errors on tumblr signup form
Tumblr’s errors aren’t super prominent but they did cover their tracks. Here I entered and email but no password.

You did well

Reward users when they make progress. Tying into the empathetic role with your users will all each of them to feel a sense of accomplishment. Getting work done no matter how minute keeps your users coming back for more. Reward them!

success prompt

You’re finished

You reached the end! This is another state that deserves reward and validation. Tell your users visually they have reached the end and are successful in their journey.

congrats-card

You find these states everywhere. They are repeated in many sign-up, login, and data capturing(forms) processes across all applications.

Designing in such a way that makes each state intuitive for the user is the hardest challenge to overcome. If done well, a user will have a pleasant experience and not be overwhelmed by pitfalls of the journey.

I suggest limiting the number of actions it takes for a user to achieve any goal where possible. Harness state design by predicting the many outcomes a user may face. By achieving this, your users won’t be persuaded to opt out and go elsewhere.

Note: Web-crunch is in no way affiliated by Netflix as it appears in the featured image