10 painful UI fails (and what you can learn from them)

Good user interface design improves overall user experience. It
makes the user’s interaction with an app or site simple,
intuitive, efficient and fluid, so much so that you when it works
well, the user might not even notice it’s there. 

Many a team appreciates the apparently effortless simplicity of
Trello’s lists to manage their pipelines, fantasy sports fans can
attest to the easy digestibility of a huge amount of information in
the ESPN Fantasy Sports app, and
Artsy
’s sleek lines and colour palettes make great design for
a small handheld device look easy. 

But when it goes wrong, that’s when people really notice. Bad
UI can dissuade, or directly prevent, users from continuing their
experience. The ten bloopers below, some comical, some just plain
annoying, can all teach us something, even if it’s just what to
avoid.

It should also be noted that Bad UI is also often linked to a
lack of testing – see our list of the best
user testing
software for our favourite testing tools.

01. Want 120 eggs with that?

A fundamental of UI design is to choose the right tool for the
job, which should normally mean respecting existing conventions and
employing control elements in a way that users are already familiar
with. So perhaps you’re training like Rocky Balboa and really do
want to add an extraordinary number of eggs to your order, but
checkboxes? The legend appears to prohibit the ordering of 120
eggs, because of course that would be ridiculous, but the fact that
they’ve had to say that demonstrates that perhaps the wrong tool
has been used. 

Checkboxes are used for when we can mark more than one option,
and radio buttons for when only one choice is allowed, although
perhaps here a plus and minus button may have worked better. Either
way, we’re even more disappointed that there’s no discount for
ordering 15 eggs.

02. Change your phone number to use our service

UI design fails: Flyfair website

Get a new number [Image: flyflair.com]

There are cases when you may want to cater solely to users from
one geographical region with its own specific formatting
conventions, but the website of an airline operating out of several
international airports is probably not one of them. In this example
from Canada’s Flair Airlines,
if you’re from a country where phone numbers have more or fewer
than 10 digits, you have no choice but to enter a false number.
Although, since there’s no field for a country code, they won’t
be able to call you anyway. 

When designing a UI for anything that will have – or could
gain – users from multiple regions, make sure use isn’t
constrained by local naming and numbering conventions. Adapt to
users rather than forcing them to adapt to your interface.

03. How do you say ‘switch language’ in Chinese?

UI fails: Mozilla website

Mozilla’s website in Chinese [Image: Mozilla]

So you go online during a trip abroad and you’re greeted by

something like this
. Where do you look first? Top right?
Nothing there. Top left? Nope. Your third guess might have you
scroll all the way down to the bottom in search for anything that
looks like a dropdown menu, and in this case, that’s where
you’ll find the language option. But considering that changing
the language is the first thing you’re going to want to do if you
end up on a site that you can’t read, it probably makes sense to
make that option as easy to find as possible, and ideally
selectable before having to perform any other action such as
logging in. 

A globe icon or the
language icon designed by Farhat Datta
may help people find the
option. Whatever you do, just
don’t use flags to represent languages
unless you want to
upset an awful lot of people. 

04. When clarification obscures

We’re all perfectly used to marking checkboxes to add things,
and clicking checkboxes to say we don’t want things is by no
means beyond us, so on the face of it, there shouldn’t be much
room to mess this up, but here, Homeburger’s attempt to
explain the process just leaves us baffled. You have to uncheck the
thing you don’t want in order to not get it? Beware of ambiguity,
but also beware of attempts to avoid it that just make things more
complex. 

05. Can we fit anything else in here?

UI fails: iTunes

iTunes’ cluttered UI will be missed by few [Image: iTunes]

There’s nothing like a cluttered interface to make a user feel
from the outset that they’re in for a painful experience, and
unfortunately, there’s no shortage of examples of big players
with overly busy UI design that hurts the eyes and takes too long
to navigate. 

Few people are mourning the death
of Apple’s iTunes
, while many big name online stores
(including Amazon) continue to throw in everything and the kitchen
sink on to their shopfront in a way that hardly facilitates
navigation. Even the application of colour
theory
and wise use of contrast can do little to make an overly
cluttered UI look more appealing, so make sure you pare it back.
But don’t go too far, there’s also danger in going to the other
extreme of absolute minimalism. The options still need to be
findable.

06. Death by dropdown

UI fails: Boden

This dropdown menu that makes anyone less than a knight feel
inadequate [Image: Boden]

Everyone hates dropdowns, so it’s perhaps strange that some UI
designers still haven’t realised this. When it comes to filling
in online forms, there are few things more frustrating than having
to find your country if it’s at the bottom of the list, or choose
your year of birth rather than simply type it in, which just seems
a perverse form of torture for the young or old, and one that’s
no more likely to prevent someone from making a mistake.

This example from Boden
is at least entertaining, if a little deflating to anyone lacking a
fancy title – there’s not option of Mx we notice. Perhaps the
broader lesson in this example is that sometimes you have to stop
and ask, is this even necessary? Just pity all the wing commanders
out there who have to scroll all the way down the bottom of the
list.

And if you want to know more about designing forms, see our post
on
6 form patterns and when to use them
.

07. Waiting around

UI fails: iFly50

KLM’s iFly50.com looks very nice but underestimates the reader’s
patience [Image: iFly50]

Animation and novel ways of interaction have been heralded as a
way of producing a delightful experiences, but let’s make sure
they don’t become an excuse for designers to show off. Remember
that while look and feel is important, the core of a great UI is
function: Even something as innocent as Twitter’s ‘like’ button
animation earned vitriol for being annoying and childish, and while
a playful loading icon can raise a smile first time round, it will
have people hating it if they have to see it too often. 

Any unnecessary interaction that creates friction in using the
UI can be just as irksome. KLM’s iFly50.com showcase
of 50 travel destinations has some great imagery but is anyone
really going to hold down a button for several seconds each time
they want to see more information? Avoid adding friction unless the
point is to put users off performing an action. 

08. Say what?

Bright, and even fluorescent colours have become a bit of a
trend in UIs and they can be very effective in making content look
sharp and stand out, but remember that text needs to readable.
Teamweek‘s mint green looks a
treat, but it’s not so easy to read white text on a mint green
button. 

Colour isn’t the only cause of readability fails. The trend
towards lower contrast may aim to be easier on the eye, but it
doesn’t help if you have to strain to read the type, while fine
fonts and unresponsive sites can also hurt users’ eyes. Check
text is easy to read, and check it can be read on different
devices.

And if you are looking for your dream font, then don’t miss our
list of
free fonts
.

09. Thinning out content

UI fails: the grit

The Grit has a lot to say about itself [Image: The Grit]

Is someone really going to want to enter separately into ‘about
us’, ‘our values’ AND ‘our mission’? These might be separate
concepts in the eyes of the company but it seems unlikely that a
user would want to enter to one of them specifically, and why make
the user go through five clicks to get the whole story? This
example from The Grit
immediately looks like thin content that would be better merged
together, otherwise a user may not read any of it. 

10. Shame on you!

UI fails: paleo flourish

Paleo Flourish makes you feel bad for turning down an offer
[Image: Paleo Flourish]

Confirmation shaming is not big and it’s not clever. This
example from Paleo
Flourish
is one of the more aggressive in a trend of shaming
website modals. Occasionally, it can be done in a humorous way, but
in general insulting your target audience by forcing them to choose
between ‘Go on then’, or  ‘No, I prefer to remain a sad, lonely,
loser, thanks’ is no way to win them round.

Read more:

Source: FS – _Marketing
10 painful UI fails (and what you can learn from them)