Design can send confusing signals when elements on the screen seem to contradict each other, or when they don’t follow expected standards.
When I go to turn on wireless on my laptop, I get this screen:
At first glance, it appears my wireless is already on: the most prominent feature on the screen (next to the bright red icon which turns out not to be an icon, but only a graphic) is the glowing green button labeled Radio On. But were I to assume the wireless is on, I’d be wrong: the current status is indicated by text under the word Status immediately to the left.
Furthermore, when I click the icon labeled Radio On, I get this screen:
This one’s even more confusing: I’d intended to turn the wireless on, and after doing so, I get a button that says Radio Off. However, it’s still glowing green as opposed to grey. I can’t tell immediately if the state hasn’t changed, or if wireless really is on, even though it says Radio Off.
To add to the confusion, if I accidentally hover my mouse over one of the other icons at the bottom of the screen, the green glow moves. I haven’t changed wireless status, but now the button in the main section looks even more like wireless is off.
It turns out the green glow simply indicates which button is active when one presses the Enter key on the keyboard. And that brings up the final confusion: the green wireless tower on the far left looks like a graphic because of its placement on the screen and its two-dimensional style. But it turns out that it also indicates wireless state: green if it’s on, grey if it’s off (see the first image above).
Is this screen impossible to figure out? Of course not. After using it a few times and experimenting a little, I know what the buttons do and how to read the current state. Essentially I filter out everything on the screen as noise except for simple text under the word Status. If I want to change the status, I click the button to the right, ignoring its color and text.
But should it have been that hard? Should I have had to puzzle over the elements on the screen or mentally filter out confusion? Probably not.
The examples below show how the screens could be simplified to eliminate much of the confusion. If wireless is on, the following screen could be displayed:
And if it’s off, this screen could be displayed:
- The new screen title is clearer.
- The icon-that-isn’t-an-icon has been removed.
- The state is unambiguously indicated with the tower icon and accompanying text.
- The possible action to take is clearly indicated by adding a verb: e.g., “Turn Radio Off” instead of just “Radio Off.”
- The confusing green glow on the buttons has been eliminated. If I were actually going to put this screen into production, I’d take the time to make one final improvement: I’d use a white glow on the buttons to indicate which is active for the Enter key, so it was clear the glow had nothing to do with wireless state.
Removing ambiguity can go a long way toward making a design more usable.