DESIGN

Designing around the choice of a single option

Image for post
Image for post

When you design an interface for the selection of multiple options, you should give some thought to how it will look when there is only one option to choose from.

How do users continue?

When you present the user with a number of things to choose from, you often don’t need to tell them to select one of them. It’s just obvious. There are a number of options, so the user concludes that one of them needs to be selected.

When the list of options is reduced down to one, then the design needs to work a bit harder.

Let’s take an example I’ve seen in user research sessions. Below is the results page of a flight search on Ryanair. There are 3 flights to choose from in this example.

In order to continue, it’s relatively clear you’d need to select one of them. Nowhere does it say to select anything. But there are 3 flights, so users tend to know they need to choose one of the flights when they see this screen.

Image for post
Image for post
It’s relatively clear that one of these flights need to be selected to continue

But when that same screen offers only one choice then it’s not necessarily clear what they need to do.

Image for post
Image for post
When there is only one flight to choose from then it’s not so clear how to continue.

I’ve repeatedly seen people using this screen and not know what to do when there is only one flight available. I’m sure the team at Ryanair have too. I’ve seen this same problem elsewhere also.

Usability issues often surface when a number of weaknesses in a design combine at the same time. In addition to being asked to make a selection from a list of one thing, there are three more design weaknesses which are exposed

  • Flat design sucks. The button to select the flight doesn’t look like a clickable thing. It can be easily overlooked as a highlight around the price rather than something the user needs to click.
  • There is no action label on the button to select the flight. Instead the button uses the price as its label. So the flat button which doesn’t look like a button, also doesn’t ask the user to do anything.
  • The continue button is inactive and doesn’t give the user any help if they try to click it. It should give the user some advice when they click it.

There are other ways to get around the issue of course. They are mostly all tactics to make it more clear that the interface is expecting a selection. For example a heading saying ‘Choose your flight’ would be one way of steering the user in this scenario. But a better design would make such a heading unnecessary.

Another option is to bypass selection when there isn’t a choice. Your engineers will probably vote this option down however.

Was this useful?

I’m trying to write some practical stuff you can apply to your own design work because I don’t believe there is enough stuff like this being shared.

Here are a some more practical posts I’ve written aimed at improving your ability and understanding as a designer, user researcher or product manager.

Image for post
Image for post

Written by

Independent UX consultant | www.upux.biz

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store