Your boss has an iPhone, so of course he wants an app. But does an app really make business sense? Or is a responsive design website enough? And with hundreds of thousands of apps out there, what will make people choose and use yours? What makes a good mobile user interface? And how can you make sure your company actually delivers one? Responsive design might make sense if you've got a content driven website. But how should your web team work together when every web page they are making needs to work at any width and resolution? And can you get the content under control to make pages that really make sense on small screens and big ones?

1. Phil Barrett | April 2013
Mobile UX

2. 47,000 smartphones
sold during this talk
That’s 2.25 million a day
207.7 million in Q4 2012

3. Gartner
1.82 billion
browser-equipped, enhanced phones by 2013,
1.78 billion
PCs by 2013.

4. So mobile is now without a doubt
really, really important.

5. It’s also changing really, really
fast. So we’re discovering lots of
stuff all the time.

6. And it’s like the wild west.
Rules keep changing. Lots of fights.

7. And it’s like the wild west.
Rules keep changing. Lots of fights.

8. Two “mysteries” that puzzle me
1. Your boss wants
an iphone app
2. The trunk test
does not apply

9. 1
Your boss wants
an iPhone app

10. Your boss
wants an
iphone app

11. Your boss
wants an
iphone app
Why?

12. He knows mobile is growing faster than any ICT before it
Growing faster than any technology ever
Morgan Stanley mobile Internet report

13. And that it’s
just getting
started

14. He has an iphone
0
13
25
38
50
<$25k $25k-$50k $50k-$75k $75k-$100k >$100k
iPhone Android
Income
%ofowners
Comscore

15. He sees that
“everyone else”
has got an app
already
775 000 iOS apps
and counting

16. BI Intelligence/Nielsen
And if he’s really
smart he’s
noticed that apps
are addictive...

17. The app system is addictive?
The app store offers novelty
...a guaranteed antedote to habituation (just like fashion).
Finding apps yields dopamine rewards
Unpredictability makes it more powerful.
Owning an app makes you like it more
And it makes you like apps more (endowment effect and
self herding).
We hoard apps
Giving up an app makes us uncomfortable (loss aversion).

18. And with an app your brand
owns a spot on their homescreen

19. But he hasn’t noticed that
Android is outselling iPhone
My Broadband

20. And he hasn’t noticed that in SA,
Blackberry outsells them both by a mile
My Broadband: Vodacom’s figures, Aug 2012

21. And with this much
competition, how
will you stand out?

22. To launch an app that has impact...
Ship the app for multiple platforms
And it has to be useful, easy and delightful on each
one
And you have to ship updates
And run additional marketing campaigns to get
people to know of the app’s existence
...Which may be more of a commitment than
he had in mind.

23. iPhoneAndroid
Designers are trying
to re-use the
iphone design to
the max. It’s
cheaper!
Same for Instagram,
Facebook...
Converging designs reduces costs a little bit

24. But, the million dollar question...

25. Does his idea
make sense as an
app anyway?

26. "Telkom recently unveiled its app on the Apple App Store, but there
have only been around 2 500 downloads in the two weeks since
launch." - Duncan Alfreds news 24
"What's the point?", wrote a user named PierreQ77.

27. Perhaps a responsive website
is all you need...

28. 80% apps

29. 80% apps
31 minutes per day for
the average American.

30. For the right kind of
content, an app and
an app store is a
barrier.
If someone wants to
see a tweeted story,
it’s annoying to have
to download a whole
app.
App.ft.com

31. Top 5 =
Amazon, Best Buy,
eBay, Target and
Walmart
US mobile
shoppers prefer
responsive Web

32. App or responsive?
User context
determines
which way to go

33. Context: Frequency of use
Frequency of use
Several times a day Occasional Rare
Native app might be good
Web might be better

34. Context: Time
Time kill
I haven’t got much to do at the moment
Time shift
I’ve got time to do this task at, so I might as well
Time (or location) critical
I must do this now because it’s urgent
or because I am in the right place

35. Urgency + frequency
Kill Shi& Cri)cal
Rarely
O&en
Flipboard
News
Facebook
Email
Messaging
Game
News or blogs
In-store price
comparisonBanking
Research
A
To-do list
W
A A
A
A
A
A A
W
W
Get restaurant
address
W

36. Urgency + frequency
Kill Shi& Cri)cal
Rarely
O&en
Flipboard
News
Facebook
Email
Messaging
Game
News or blogs
In-store price
comparisonBanking
Research
A
To-do list
W
A A
A
A
A
A A
W
W
Get restaurant
address
W
Because of tight OS
integration

37. So responsive design makes lots of
sense for all kinds of infrequently
used content.
(There’s nothing wrong with beng
part of the 31 minutes).

38. Like this.

39. All the factors
Responsive HTML5
Easy to update
Low barrier to
engagement
Cross platform
Native app
Secure
Easy to monetise
Fast, smooth, OS-
integrated
Discovery via app
store

40. All the factors
Responsive HTML5
Easy to update
Low barrier to
engagement
Cross platform
Native app
Custom build for
multiple platforms
Requires a
“permanent” user
commitment for
transient content

41. Responsive design

42. Responsive design

43. Responsive design
“Phablet” TV

44. Mobile
context has
changed

45. No feature
left behind

46. Perfect!
Well not quite...

47. Responsive
design isn’t
“finished” yet

48. Fluid images are not elegant
(or even functional?)
<link rel="stylesheet" type="text/css”
media="screen and (max-device-width:
480px) and (resolution: 163dpi)”
href="shetland.css" />
<img src="birds.jpg" alt="" />
The image tag is still just for one picture, regardless of device.
Big file = Big downloads = bad.
Yay!
Boo!

49. And older browsers don’t support
anything much
Samsung E250:
“The AK47 of
mobile phones”
So that means you need to do RESS (REsponsive + Server Side).
Detect smaller handsets by type and serve them HTML and
images they can handle.

50. Making the
change to a
lightweight
responsive site
can be hard
when you have a
giant legacy of
thousands of fat
pages.

51. Content choreography is a new skillset
Mostly fluid Column drop
Layout shifter Off canvas
Kudos:
Luke
Wroblewski

52. And it needs a new workflow
§ Need to design each wireframe at multiple sizes
§ But even then you can’t predict: you have to build the
HTML and test it at different sizes, then add “break
points” at sizes where the page breaks.
§ This means: design, build, review, design, build...
Imagekudos:TrentWalton

53. So this isn’t so clear cut
(was it ever?)
Time
Development
Interaction design
UX evaluation

54. So this isn’t so clear cut
(was it ever?)
Time
Development
Interaction design
UX evaluation

55. So this isn’t so clear cut
(was it ever?)
Time
Development
Interaction design
UX evaluation

56. So this isn’t so clear cut
(was it ever?)
Time
Development
Interaction design
UX evaluation
Refinement of
responsive page designs
needs to happen right
as the page gets built.

57. New tools to help designers
design responsive
Easel.io

58. Proty (protytype.com)

59. But what about the final frontier:
Responsive web apps?

60. Responsive web apps
Kill Shi& Cri)cal
Rarely
O&en
Flipboard
News
Facebook
Email
Messaging
Game
News or blogs
In-store price
comparisonBanking
Research
A
To-do list
W
A A
A
A
A
A A
W
W
Get restaurant
address
W
Useful, infrequent, and
doesn’t require special
performance

61. HTML5 apps
• Reduces the update and the cross platform
problems
But...
• HTML 5 performance will always lag
• 22 Seven, Facebook have both concluded
that HTML5 wasn’t for them.
• And no app store discovery

62. But if you’re really determined you can get
good results for certain kinds of app.

63. Eg. Take-away delivery service
Eg. A unit trusts portfolio
Yes!
A niche for responsive web apps in future?
• As the responsive Web starts to get people used to
more browser-based mobile functionality,
• As HTML5 reaches a critical level of power and
speed

64. 50% of all online sales for mothers day
2012 came from mobile devices - Google
E-commerce leads the way...

65. 2
With apps, the trunk test
does not apply

66. Steve Krug's trunk test
If you were locked in the “trunk” of a car and dropped off at
a random webpage, you should be able to tell where you
are because all pages should have...
Site ID
Page Name
Sections and Subsections
Local Navigation
“You Are Here” Indicators
Search
Trunk

67. But if you put all
this on a mobile
app, it's going to
be so cluttered
that you’ll
struggle to use it.

68. Too much navigation complexity

69. Too much navigation complexity

70. Too much navigation complexity

71. Too much navigation complexity

72. App greatness seems to be inversely
proportional to clutter...

73. clear

74. And also...
rise

75. Paper by 53. iPad App of the year 2012.

76. Krug's signposting is there so you can resume
easily if you're interrupted.
And mobile is supposed to be a high
interrupt environment.
But apps seem to work better when we take
the signposts out.
Why?

77. Reducing furniture works in apps because...?
• People tend to adopt apps that perform a limited
function in a simple way
• Less on each screen, easier to remember where
you are
• Your phone offers fewer distractions at once
than your PC
• When you're doing something important on a
mobile phone, your concentration is actually
quite intense.

78. The hamburger and the monolith
Monolithic app
But nav drops
away when you’re
focussing on
something

79. The hamburger and the monolith
Monolithic app
But nav drops
away when you’re
focussing on
something

80. Ride the complexity curve

81. Ride the complexity curve
Time
Complexity

82. Ride the complexity curve
Time
Complexity

83. Ride the complexity curve
Time
Complexity

84. Oliver
Wendell
Holmes-- Oliver Wendell Holmes Jr
“I would not give a fig for the
simplicity on this side of complexity
but I would give my right arm for the
simplicity that lies on the other side
of complexity.

85. “
To get to simplicity: iterate
Iterative design, with its repeating cycle of design and
testing, is the only validated methodology in existence that
will consistently produce successful results.
If you don’t have user-testing as an integral part of your
design process you are going to throw buckets of money
down the drain.
Bruce Tognazzini
Founder of Apple’s Human Interface Group

86. Path’s journey to simplicty
Dave Morin
“True simplicity takes a lot of time. And in
mobile that’s especially true.”
Path 2.0 was simplified; the team spent 20
iterations or more on the home view, trying to
figure out how to fit everything in without
cluttering it.
Path looked at the quantitative data — features
used, daily active users, monthly active users —
and correlated it with extensive ethnographic
observations of what people were actually
doing.
Venturebeat.com

87. Prototyping on iOS is easy
Also...
• Fieldtestapp.com
• FluidUI (also
android)
• Tumult Hype
• Axure 6.5 for
heavy duty stuff
• Phonegap (also
android)
ipro.to/tap_iphone

88. Stroke, don’t poke
In our research, we see that
people love making gestures on
apps. Why?
Poking is quite an unnatural
gesture. We don’t do it that often
in life.
Swipes, drags and flicks seem to
fit better with what humans
(evolved to) do.

89. Gestures are hard to
discover. But a joy to
perform.
It looks like tutorials are
the price we pay for
now. If you keep it
simple, it might not be
too high a price.

90. Gestures are hard to
discover. But a joy to
perform.
It looks like tutorials are
the price we pay for
now. If you keep it
simple, it might not be
too high a price.

91. So...
Make your next website responsive.
Don’t make websites into apps when they are used
infrequently and won’t benefit from OS integration.
Go see when responsive apps make sense and
report back.
When designing apps, make the app do as little as
possible.
Then remove as much of the chrome as you can
contemplate.
Then user test it, and realise that you can still
remove more.

92. There’s no substitute for running it on actual handsets
Devicelab.co.za
Free!

93. Thanks for listening.
Reading list for this talk
http://readlists.com/b4e06725/