14 mobile ui mistakes

to avoid at all costs

j o e n ato l i
introduction fa i l i n g s m a l l i s a v e ry b i g d e a l

Small-screen failures loom much larger

than their big-screen counterparts.
Getting a users attention, loyalty and/or business is a taller
order today than its ever been. Competition is fierce, and
mobile has become users first choice for Internet use.

If youre building an app, youre standing shoulder-to-shoulder

with approximately 4 million-plus apps competing for users
hearts, minds and wallets.

If youre developing a mobile website, approximately 80% of

your user base will form their first impression of you there.

Mastering the mobile experience has never been easy, and

the rate of technological change doesnt help matters much.
Small screens in particular present wicked design challenges,
not the least of which is how the hell to fit all that required
stuff on the screen!

Add in shrinking attention spans and the knowledge that we

as consumers have nearly unlimited choice, and designing an
experience that attracts, delights and keeps users is tough.

j o e n at o l i u x fa i l : 1 4 m o b i l e u i m i s ta k e s t o av o i d at a l l c o s t s 2017 give good ux | t wofold llc. all rights reserved. 1

introduction fa i l i n g s m a l l i s a v e ry b i g d e a l

Mobile websites that dont load quickly or work properly are

abandoned from the home page. Smartphone apps rarely
get a second chance if you can even convince a user to
download it in the first place.

Poor design affects usability; poor performance affects

popularity. And in my experience, the majority of those failures
fall under one of the 14 categories were about to explore.

I hope these examples make it easier for you to spot these

issues for your clients and employers and help you avoid
making these same mistakes in your own work.

Above all else, I hope they help you GIVE GOOD UX!

j o e n at o l i u x fa i l : 1 4 m o b i l e u i m i s ta k e s t o av o i d at a l l c o s t s 2017 give good ux | t wofold llc. all rights reserved. 2

1 n ot d e s i g n i n g fo r co nte x t o f us e .

Why do we enter events in our

calendar apps?
So we dont forget them.

This is the overriding context of use for entering

a calendar event. So it stands to reason that
everything on the screen at first glance
should serve that context.

So why is it that the alert option is nowhere to

be found in the visible space here?

The first set of options shown do serve our

context when the event occurs, how often it
occurs, whether or not travel is involved.

The next logical, contextual step is make sure

I dont forget about this after all, thats the
reason youre entering it into the calendar in
the first place!

j o e n at o l i u x fa i l : 1 4 m o b i l e u i m i s ta k e s t o av o i d at a l l c o s t s 2017 give good ux | t wofold llc. all rights reserved. 3

2 n ot d e s i g n i n g fo r us e r fo cus .

Focus is enabled
(or disabled) by the
Law of Similarity.
Simply put, it says that things
which are related should look
visually similar; things which are
unrelated should look different.

Essentially, everything on this

screen looks the same equal
visual weights of the typography,
equal contrast used between all
elements, equal visual treatment
of both the area of focus (track
now playing) and supporting,
secondary interaction options
and information (playlist items).

The unrelated notification at the

top blends in as well, further
confusing focus.

j o e n at o l i u x fa i l : 1 4 m o b i l e u i m i s ta k e s t o av o i d at a l l c o s t s 2017 give good ux | t wofold llc. all rights reserved. 4

3 s pe a ki n g l a n g uag e us e rs d o n t u n d e rs ta n d.

Whats the point of an error

message users cant understand?
Error messages are usually the last thing on the
product teams UX list, if its on the list at all.

The result? Long-winded, contradictory messages

like this one, which assume non-technical people
will understand the complexity of whats happening.

In the example here, its suggested that the user

go back and try again but at the same time is
told that using the browsers back button may be
the cause of the error!

So if thats the case, why not provide a link that

takes the user back properly?

Or at least a link to contact the admin in order to

follow the instructions on the second screen?

Your error message is going to be shown to a

person so it should be written as if you were
having a conversation with that person.

j o e n at o l i u x fa i l : 1 4 m o b i l e u i m i s ta k e s t o av o i d at a l l c o s t s 2017 give good ux | t wofold llc. all rights reserved. 5

4 h i d i n g e v i d e n ce o f s tate ch a n g e s .

Is this thing on?

While this example isnt mobile, its important.
When I invoke Apples Spotlight search feature, I
get a search field as shown here at top right.

I proceed to enter my search term, in this case

feedback, and....nothing.

No indication whatsoever that the state has

changed. No clue that anything is taking place,
that my search is actually being executed.

For approximately 10 seconds, the image on the

middle right is all I see.

In the previous version of OS X, the same spinning

wheel animation used in iOS (iPhone, iPad) told
me that something was happening, that Spotlight
was looking for matches.

Here, Im left to wonder if theres something wrong

with my machine until a result finally appears.

j o e n at o l i u x fa i l : 1 4 m o b i l e u i m i s ta k e s t o av o i d at a l l c o s t s 2017 give good ux | t wofold llc. all rights reserved. 6

5 n ot co m m u n i c ati n g e r ro r c aus e + co r r ec ti o n .

If an error message isnt

understandable or helpful,
it serves no purpose.
This common Excel error is a source of frustration
for an untold number of users (Google it for proof).

What happens is that once this error appears, the

software gets stuck in a loop.

You can click OK, but you cannot take any other
action including attempting to quit Excel
without it appearing again.

You dont know what it means.

You dont know why it happened.

You dont know what particular piece of data in

the spreadsheet is causing the error.

So how are you supposed to fix it?

j o e n at o l i u x fa i l : 1 4 m o b i l e u i m i s ta k e s t o av o i d at a l l c o s t s 2017 give good ux | t wofold llc. all rights reserved. 7

6 n ot le v e r ag i n g us e rs le a r n e d b e h av i o rs .

Use depends on interaction consistency.

Like it or not, your app is part of a larger family meaning everything
else on the users device.

Lets say you use an iPhone. Consistency across the interactive

behavior in each app makes you feel like theyre all easy to use. For
the most part, they work in ways youre already familiar with.

The overriding point of reference for these interactions are the

default behaviors of iOSs native apps. In the example on the right,
the expectation set by Apples Mail app is that either a full swipe left
will delete the message, or a partial swipe left will reveal options.

As you can see, thats not what happens in the Gmail app.

You need to remember that this difference will be jarring to the brains
cognitive processes every time it happens. Your brain cannot ignore
the difference any more than it can stop comparing the two.

Multiplied over repeated instances, this seemingly small difference

becomes a source of frustration.

And its a safe bet that when something frustrates us, were a lot less
likely to continue using it.

j o e n at o l i u x fa i l : 1 4 m o b i l e u i m i s ta k e s t o av o i d at a l l c o s t s 2017 give good ux | t wofold llc. all rights reserved. 8

7 pl aci n g o b s tacle s to va lu e .

Every obstacle is an
invitation to quit.
The only thing interstitial ads really
succeed in doing is halting a users
progress (and frustrating them).

And Google doesnt like this either;

it actually punishes websites that
use interstitial ads.

When I land on this screen to read

the article Ive chosen, an ad blocks
the content I came to see. The
example here adds insult to injury;
the ad is poorly executed in a way
that obscures all content, hiding
the pages value.

If users cant even get a glimpse of

what might be available, they wont
stick around to uncover it.

j o e n at o l i u x fa i l : 1 4 m o b i l e u i m i s ta k e s t o av o i d at a l l c o s t s 2017 give good ux | t wofold llc. all rights reserved. 9

8 fa i li n g to e x p os e va lu e a n d s i g n a l p ro g r e s s .

Every click or tap should deliver value

or signal progress.
Everyones heard the 3-click rule the idea that nothing
should be more than 3 clicks away. Thats inaccurate.

The real rule is that unless each click or tap delivers

something the user wants or expects or presents
evidence that theyre moving closer to their desired
outcome people will abandon the task (and the site/
app/system) altogether.

You can see evidence of this in the Overdrive app shown

here and on the following page. The app allows users to
check out e-books from their local library.

Here, a user has to tap three times before finding anything

resembling a sign in link. Which makes little sense, since
you have to sign in before you can check out a book.

Sign in should be the first and only action at launch.

All along the way, theres no sense of (a) finding what you
came for or (b) moving closer to your desired result.

j o e n at o l i u x fa i l : 1 4 m o b i l e u i m i s ta k e s t o av o i d at a l l c o s t s 2017 give good ux | t wofold llc. all rights reserved. 10

j o e n at o l i u x fa i l : 1 4 m o b i l e u i m i s ta k e s t o av o i d at a l l c o s t s 2017 give good ux | t wofold llc. all rights reserved. 11
9 cre ati n g u n n ece s s a ry s te ps i n a p ro ce s s .

Users need visible evidence that the

task they came to perform exists.
Multi-step processes like the one on the preceding
page arent necessarily a problem IF those screens
tell the user visually and verbally that:

4 Theyre in the right place

4 The multiple steps are necessary

4 E
 ach step is clearly moving them toward
their goal, their desired outcome.

This workflow from my healthcare provider does none

of that so I pick up the phone and call them instead.

Why is that a problem them?

Because each phone call costs roughly 1,000x more

than the cost of handling requests via the app.*

* Ive worked with 6 healthcare organizations that struggled with this same
issue; they spent a lot of money on an app that was supposed to take a $20
phone transaction and reduce it to $.02. Same problem you see here; people
picked up the phone and called instead ;-)

j o e n at o l i u x fa i l : 1 4 m o b i l e u i m i s ta k e s t o av o i d at a l l c o s t s 2017 give good ux | t wofold llc. all rights reserved. 12

j o e n at o l i u x fa i l : 1 4 m o b i l e u i m i s ta k e s t o av o i d at a l l c o s t s 2017 give good ux | t wofold llc. all rights reserved. 13
j o e n at o l i u x fa i l : 1 4 m o b i l e u i m i s ta k e s t o av o i d at a l l c o s t s 2017 give good ux | t wofold llc. all rights reserved. 14
10 pri o ritizi n g r eg i s tr ati o n i n s te a d o f a d o p ti o n .

Do you want registration or adoption?

Thats a trick question. You want adoption. If nobody
uses your app, neither they nor you benefit.

Far too many apps (and sites), however, focus on

registration. Instances where users are forced to create
an account before they can see or use anything.

Bad idea.

Multiple studies have shown that the majority of

prospective users in some cases 85% of them
will kick an app to the curb if they cant get a taste of it
before giving up their info.

They fully expect to be able to skip registration and

continue as a guest or preview in some way, in order
to determine whether or not the app is valuable.

This becomes particularly important when the value of

the app is based on its content like this older version
of Soundcloud, which provides streaming music.

j o e n at o l i u x fa i l : 1 4 m o b i l e u i m i s ta k e s t o av o i d at a l l c o s t s 2017 give good ux | t wofold llc. all rights reserved. 15

11 a s ki n g to r ece i v e w ith o ut g i v i n g .

Users wont give anything if its

unclear how doing so benefits them.
Heres what this screen says, in a nutshell:

Give us your personal information.

Its all get, no give. A one-way exchange, an ask that

does nothing to answer the critical question people
form immediately in response:

Why should I?

Klout says I can be known for what I love.

OK, that sort of sounds reasonable.

But, uh.... why do I want that?

How does it benefit me?

In what way?

j o e n at o l i u x fa i l : 1 4 m o b i l e u i m i s ta k e s t o av o i d at a l l c o s t s 2017 give good ux | t wofold llc. all rights reserved. 16

12 m a ki n g a s lo ppy f i rs t i m p r e s s i o n .

Visual and functional flaws

breed user mistrust.
When items overlap each other and obscure content,
as in this example, the immediate impression people
form is essentially what a mess.

When you immediately prompt people to chat before

theyve had a chance to figure out whats on offer
here or it its right for them, youre being pushy.
Disrespecting their desire to go at their own pace.

And when functionality fails and the user cant close

the chat window...they go somewhere else.

Lost opportunity.

If your UI is cluttered and disorganized and people

have no way of clearing the clutter that becomes
their impression of the business as well.

That experience now becomes their understanding

of your brand: cluttered, disorganized, pushy and
hard to use.

j o e n at o l i u x fa i l : 1 4 m o b i l e u i m i s ta k e s t o av o i d at a l l c o s t s 2017 give good ux | t wofold llc. all rights reserved. 17

13 n ot te s ti n g th o ro u g h ly e n o u g h .

Test, test, test and test AGAIN

across multiple devices.
This is an anti-pattern Ive seen recently in both
mobile apps and mobile sites: you enter data into
a field and some of it disappears.

Looking at the example here, theres more than

enough space for a much larger field. But when
I type 48, I only see 4.

The vast majority of people will not realize that

there is misapplied padding inside that field
obscuring their text theyll simply assume its
not accepting what theyre entering.

In other words, theyll assume its broken.

And that will lead them to abandon both the site

and the company and get a quote elsewhere.

Test everything. Multiple times. Across multiple

devices, platforms and screen resolutions.

j o e n at o l i u x fa i l : 1 4 m o b i l e u i m i s ta k e s t o av o i d at a l l c o s t s 2017 give good ux | t wofold llc. all rights reserved. 18

14 s e rv i n g th e w ro n g pa rt y s p ri o rit y.

The UI should respect and enable what

the user came here to do.
The presentation, visual priority and functionality of
every item on a given screen should serve the reason
the user is there in the first place.

If I come to Quora, Im doing so to ask a question. That

is my reason for being there.

But once I register to use it, the first thing it wants me

to do is complete my profile. This serves them, not me.

The label on the top field Ask Quora signals that this
is where I ask my question. But instead, I get a dropdown
list of dynamic search choices. Its really a mechanism
for searching, and should be labeled as such.

The What is your question block at the bottom is really

the primary content here, so it should be front and
center and have the highest visual priority.

Instead of complete Your Profile I should see a large

text field where I enter my question and submit.

j o e n at o l i u x fa i l : 1 4 m o b i l e u i m i s ta k e s t o av o i d at a l l c o s t s 2017 give good ux | t wofold llc. all rights reserved. 19

easily integrate ux into Scrum/Agile
( and ensure your requirements give good UX )

Seriously fantastic course and so worth it.I was able to take my

choices and run them through Joes process to make decisions Im really
confident about, and Ive definitely quoted him or used his way of explain-
ing something to higher ups. It gives you everything... I went though this
course using a project I had to get done and it progressed perfectly.

h e at h e r m ay b e

SAVE 30% TODAY

when you enroll using this coupon code: GIVEGOOD30

learn.givegoodux.com/courses/ux-requirements-made-simple

Change the way you, your team and your managers

see UX and product requirements. 4L
 ifetime access to 23 lectures
In the time it takes to watch a great movie, Ill walk you through my time- special price
for UX FAIL 4Q
 &A with Joe
tested methods for integrating user research, persona development and
readers

67
UX-focused requirements into an existing development process. With- 4 Learn
 a simple way to get managers to
out asking for more time, more budget or more people, youll be able to: $ listen to your UX recommendations
4C
 onvince executives and managers who think UX is a waste and act on them
of time and money to change direction and include UX all the sAVE $30!
Get a clear, solid sense of what users
4 
way back at project estimating meetings.
really need even if you have no
4D
 eliver a massive increase in both the quality of UX and the budget for user research
efficiency of execution across sprints.
Replace cumbersome, formal tools
4 
4 Quickly figure out what tasks, features and functionality to with clear, simple exercises that
focus on (and what to ignore) and how to know when youve uncover true UX needs and get
got a handle on what people truly need. everyone on the same page
Proven, step-by-step methods
and clear, jargon-free advice
for working with teams, managers
and clients to deliver excellent
products and stellar UX.
Softcover and eBook formats available

R e a d e x c e r p t s + l e a r n m o r e g i v eg o o d u x .co m/ th i n k- f i rs t