How To Fix a Bad User Interface

Every screen you interact with has multiple personalities: blank state, loading state, partial state, error state and ideal state. How To Fix a Bad User Interface highlights strategies to avoid awkward and confusing UIs with the UI Stack, carefully designing personalities for every screen. By Scott Hurff.

Five States of User Interface #

We start with the ideal state. It’s the zenith of your product's potential. We then explore the error state, when things go wrong, with unexpected problems, error messages and input validation UX. From there on, we move to the partial state — when the page is sparsely populated. Our job here is to prevent people from getting discourage and giving up on our product.

In the loading state, when users are waiting for an update to come through, we must avoid frustrating rage taps/clicks and allow users to set filters and sorting and search by being mindful on how we represent situations when we're fetching data. We need to avoid an entire page takeover, but rather lazy load content panes or use inline loading.

Finally, we can improve the blank states by using skeleton screens where we show the structure and layout of the page early, or optimistic actions where we assume access by default and hence reduce the perceived speed of uploading data. If it goes unexpectedly wrong, we flag an error and ask users for their input.

Personally, I often start exploring errors and recovery flows early because they often leave users frustrated and disappointed. Looking into "broken" state helps you also figure out how you communicate to your users, your tone and voice, and hence the messaging.

A great reminder that UX is not just what happens when everything goes as planned. It’s also what customers experience when things break unexpectedly.

Further Reading #

• Designing For Different States in The UI, by Shane Doyle

• The Nine States of Design, by Vince Speelman

• All The User-Facing States, by Eric Bailey