UX Quick Tip
Applications should work like elevators
We’ll cover a UX problem that creeps into projects easily if designers and developers don’t pay attention to details. Users experience your website or mobile app through elements that they can interact with.
The problem
Imagine walking up to an elevator and pressing the button to call it. The button doesn’t light up, there’s no display to let you know on which floor the elevator is and you can’t hear it moving. You’ll probably wait but after a while you’ll have enough and take the stairs. Of course, that’s when the elevator will show up but you don’t know that. And you don’t care.
It’s the same with web or mobile user interfaces that hide their function or don’t let you know if anything’s happening once you’ve interacted with them. This can lead to user frustration and, let’s face it, closing your application or website is much easier than taking several flights of stairs.
Lesson 1
Let the user know if something’s interactive
If a part of your UI should be interacted with, let the user know. I’m talking about UI elements that inherit from the OS (like a scroll bar or plain button). I’m talking about any element that allows for interaction.
Links should always be styled different from the text surrounding them, define a hover state and use the pointer mouse cursor.
Making a link look like a button is fine too, as long as it’s clear that it is a button and it has a hover and active state.
The same rules apply to any element that’s interactive. Make it obvious that your users can use an UI element such as a link, scroll bar, button or even a surface, and they’ll gladly do so.
Lesson 2
Let the user know they’ve done something
Looking at the elevator example, it’s clear that any delay that doesn’t let the user know that everything’s still underway leads to confusion and frustration. UI elements that change state after interaction or start a background process must let the user know that something is going on.
Take a look at the next example — it’s a simple form that lets users edit the price of a product and select if they want to save the price or not. The price is saved via an AJAX request that takes around 2 seconds to complete.
By playing around with the example you can see that:
- the Edit button is prominently displayed and lets users move forward with the task of changing the price,
- cancelling changes is a no-brainer,
- saving changes displays a loader,
- a successful save turns the input border to green and displays a message,
- clicking on the input field or Edit button resets the state of the form.
If there was an error, it would be handled by coloring the input red, displaying a message and allowing users to edit the field again.
The takeaway
Never let your users wander around your UI and wonder whether the action they performed actually accomplished something.
Also, plan for the worst case scenario (a slow mobile connection or an error in your application) and make your users feel in control
No matter what happens, the user always has to feel in control. Failing to do that will make them feel uneasy about their actions and shy away from using the functions of your web site or web application.
These tips might seem obvious but it’s astonishingly easy to forget about them.
Quick Tips is a series of short articles featuring knowledge that gets passed around the office daily from seniors to juniors (and sometimes vice versa).
Articles in this UX series:
- Applications should work like elevators (this)
- The proper way of handling notifications
This article can also be found on The Capsized Eight blog.
