Usability: living up to a user's expectations

Flashback 15 years, and Flash websites were quite common – not only that, but also desired. But with a blank canvas at the developer’s feet, unique navigation and interface elements were implemented – and at times, left web visitors trying to decipher non-standard navigation techniques. Even with the demise of Flash on the web, some web developers still like to do something different, with little to no regard for the user’s experience, responsiveness, mobile devices or accessibility.

Compromising the usability for the sake of design is a self-indulgent approach, and shows a lack of understanding of your actual end users.

But it is not just the web that’s guilty of unexpected navigation. Blu-ray menus are another prime culprit. While studios like Universal and Sony have their (relatively) bland and consistent menu systems across titles, it at least places emphasis on usability, rather than unique navigation from title to title. 

One of the biggest usability issues on home video menus is the reliance on colour only to indicate a highlighted option – which can make sense when there are multiple buttons, but when there are just two options, and colour is the sole highlight, how do you know which is actually selected? Similarly, when menus (such as Universal’s) that rely on icons only which never have labels or clear illustrations as to what they are. Apparently an asterisk is for ‘special features’.

Is that what you would expect?

Surely it makes more sense to implement menus and navigation systems that are clear, expected and intuitive to use? In recent years, especially on the 4K discs, Sony has hit the nail on the head. A bit animated at times, but consistently designed (yet still branded movie-to-movie), and clear labels – it just makes so much sense.

While on a 10 hour road trip for Christmas, there was time to also see that usability issues extend to cars too.

In my car, there’s a button – it’s labelled Sync. It is on the driver’s side, and when pressed, makes the dual-zone climate control be in sync – the button has a small orange LED that tells you it is “on”. As the driver changes their temperature, the passenger side changes too.

It’s a really neat feature – especially when you’re the sole driver of the car – but given it is a button, what would you expect if you press the button again?

Turn Sync off, right?

Well, GM thought otherwise – pressing “Sync” again does nothing. It keeps the Sync mode on – that orange LED stays on. But that’s not what you’d expect with a button that lights up like this. If it were a switch, you would expect that binary action – on and off – but as a button lit up (suggesting a toggle), we are accustomed to expecting it to behave as a toggle – press to enable, and press to disable.

Want to know how you actually disable the Sync? The passenger climate control temperature needs to be adjusted – that’s the only way to remove the Sync. Because that makes sense, right?

If you give the user a button, make sure that button behaves as expected.

Through day to day life, we inherit a certain level of expectations. When we turn a tap on, water comes out. When we turn the tap off, water stops.

When we press a button and it lights up to signify its “on”state, we expect that when we press it again, it would turn off.

That’s our expectation. So why change that?

Shifting away from expected results decreases usability - whether you’re building a website, a 4K Blu-ray menu or a car – when an action behaves in an unexpected way (or lacks clarity in its intended function or is just too darn hard to find), then you’re impacting the speed and ease at which your users can interact with your implementation.

In the case of web design, this doesn’t mean you need to keep it boring, but follow those expectations – make navigation easy to find, avoid implementing unique or out-of-the-ordinary scrolling requirements, and ensure buttons have context – with a combination of accessible tool tips, clear labels and meaningful highlights. 

This isn’t just for a stock-standard website, but any web-based application too. We have the tools to develop any interface element we want – but follow those best practice components that fulfil a user’s expectations to ensure your project remains easy to use. Make toggles do just that – toggle. Buttons have a clear action. Select boxes and date pickers behave as expected (and take advantage of OS-specific pickers, where suitable). If you need to be developing a new interface component, think of your end users and what their expectations of your components is. When your visitors easily find what they’re looking for, you’re a let to increase the success rate for your calls to action and boost conversions.