June 12, 2016
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.
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 does you wait in anticipation to see the 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 downright spoiled.
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.
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).
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.
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.
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.
You did bad
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!
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.
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 the 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