1. building mobile experiences
that don’t suck
Frédéric Developers Evangelist
Harper Microsoft Canada
@fharper | outofcomfortzone.net

2. AGENDA
what we will talk about today
BASIC PRINCIPLES OF MOBILE APP
DESIGN
WHAT MAKES A MOBILE APP GREAT?
IDEAS: THE CURRENCY OF AWESOMENESS

3. BASIC PRINCIPLES OF MOBILE APP DESIGN
the freshman primer

4. BASIC PRINCIPLES OF MOBILE APP DESIGN
motivations
Every mobile use case can derive
from 3 basic motivations
i’m microtasking
i’m local
i’m bored

5. BASIC PRINCIPLES OF MOBILE APP DESIGN
i’m microtasking
microtasks are short idea capture is an example of microtasking.
bursts of activity, often
done between larger
tasks.
TM & © Warner Bros. Entertainment, Inc.

6. BASIC PRINCIPLES OF MOBILE APP DESIGN
i’m local
phones are devices of
convenience and
context and local is a
context.

7. BASIC PRINCIPLES OF MOBILE APP DESIGN
i’m bored
games account for the
majority of popular
paid apps across all
mobile platforms.
essentially, any app
(game or otherwise)
that can fill a time gap
addictively and with
fun is largely
successful.

8. BASIC PRINCIPLES OF MOBILE APP DESIGN
stating the obvious
≠

9. BASIC PRINCIPLES OF MOBILE APP DESIGN
pc vs mobile
you can’t think of the phone as just a scaled-down desktop – if you do, you’re
missing the point (and a lot of nuances)

10. BASIC PRINCIPLES OF MOBILE APP DESIGN
what a desktop app looks like

11. BASIC PRINCIPLES OF MOBILE APP DESIGN
what we think mobile experiences looks like

12. BASIC PRINCIPLES OF MOBILE APP DESIGN
what mobile experiences really look like

13. BASIC PRINCIPLES OF MOBILE APP DESIGN
the app we’re thinking of building

14. BASIC PRINCIPLES OF MOBILE APP DESIGN
the app our users need

15. BASIC PRINCIPLES OF MOBILE APP DESIGN
but there are times when this is appropriate

16. BASIC PRINCIPLES OF MOBILE APP DESIGN
desktop and web application “mullet”
business on the front,
party in the back
<translation>
controls on the top,
content at the bottom
</translation>

17. BASIC PRINCIPLES OF MOBILE APP DESIGN
phone (and most tablet) apps are the “reverse
mullet”
party
business

18. BASIC PRINCIPLES OF MOBILE APP DESIGN
drinking our own koolaid
in windows phone 7.5 platform, we changed the position of the url textbox to the
bottom.
wp7 wp7.5

19. BASIC PRINCIPLES OF MOBILE APP DESIGN
under my thumb…

20. BASIC PRINCIPLES OF MOBILE APP DESIGN
comfort zones

21. BASIC PRINCIPLES OF MOBILE APP DESIGN
case study: foursquare for windows phone 7

22. BASIC PRINCIPLES OF MOBILE APP DESIGN
hey – down in the front!

23. BASIC PRINCIPLES OF MOBILE APP DESIGN
may we suggest a simple fix…

24. Hockey and mullets go hand in
hand

25. Offside!

26. A simple change…

27. Much better!

28. BASIC PRINCIPLES OF MOBILE APP DESIGN
fitt’s law
𝐷
𝑇 = 𝑎 + 𝑏 ∙ 𝑙𝑜𝑔2 (1 + )
𝑊
T: Average time taken to complete the movement
a: Start/stop time of the device
b: Inherent speed of the device
D: Distance from the starting point to target center
W: Width of target, measured along axis of motion

29. BASIC PRINCIPLES OF MOBILE APP DESIGN
fitt’s law, translated
𝐷
𝑇 = 𝑎 + 𝑏 ∙ 𝑙𝑜𝑔2 (1 + )
𝑊
the bigger and closer a target is, the easier it
is to hit.
well, duh.

30. BASIC PRINCIPLES OF MOBILE APP DESIGN
so, how big is a finger, anyway?
26 pixels / 7mm
44 pixels / 7mm (wp7 exceptional
(iPhone minimum) minimum)
34 pixels / 9mm
(general wp7 minimum)

31. BASIC PRINCIPLES OF MOBILE APP DESIGN
ladies and gentlemen, introducing fittsquare!
original fittsquare
made the map
bigger
nice, big targets
for oft-used
tasks; the most
important task
gets the biggest
target

32. WHAT MAKES A MOBILE APP GREAT
engineering meets design

33. WHAT MAKES A MOBILE APP GREAT
outside of genetics, cloning is boring
≠ ≠ ≠
∴ ≠ qed

34. WHAT MAKES A MOBILE APP GREAT
differentiate your experience
panorama in wp7
shallow experience
expansive
artistic
pivot in wp7
deeper experience
data-driven
informational

35. WHAT MAKES A MOBILE APP GREAT
stay within the paradigm of the platform
every platform has its own unique “flavour” and style
consistency of experience between native activities and 3rd party
apps enjoyable for user
predictability is not a dirty word - intuitive user interfaces are
usually better suited to user experience

36. WHAT MAKES A MOBILE APP GREAT
app function bars
for main tasks, use on-screen controls
For oft-used tasks, use the app function bar
for rarer tasks, use a secondary menu

37. WHAT MAKES A MOBILE APP GREAT
gestures – packaged confusion
remember that many users are reluctant to use them
many gestures can’t be used in one-handed scenarios
consider offering single-digit alternatives to gestures
(this does not mean replace gestures in your app)
gestures need to be thumb-friendly

38. WHAT MAKES A MOBILE APP GREAT
experience informs gestures
etch-a-sketch: shake Compass/spirit level: guitar simulator:
to clear canvas roll device in various multi-finger for
directions chords

39. WHAT MAKES A MOBILE APP GREAT
separate apps, separate meaning for shake
urban spoon: shake means to randomize the result
facebook: load new content
pcalc: clear the current calculation
etch-a-sketch: clear the canvas

40. WHAT MAKES A MOBILE APP GREAT
paving the cowpaths
design gesture interactions
according to patterns people
already follow
watch for:
unsuccessful gesture
attempts
Repetitive, time-
consuming actions

41. WHAT MAKES A MOBILE APP GREAT
input – users don’t want to deal with it
text input is a pain in the best of circumstances, so give users the quickest way to
get out of it.

42. IDEAS: THE CURRENCY OF AWESOMENESS
making users awesome in the moment

43. IDEAS: THE CURRENCY OF AWESOMENESS
remember the three motivations
i’m multitasking
i’m local
i’m bored

44. IDEAS: THE CURRENCY OF AWESOMENESS
mobile is the seventh mass media
according to tomi ahonen, the seven mass media are, in chronological order of
creation:
print
sound recordings
cinema
radio
television
internet
mobile

45. IDEAS: THE CURRENCY OF AWESOMENESS
mobile means personal

46. IDEAS: THE CURRENCY OF AWESOMENESS
take an existing concept and tweak it
many social networking apps are about helping
you find out where your friends are, presumably so
you can join them
what about a social networking app that helped
you avoid people, such as your ex?
I give you…ex-factor!

47. IDEAS: THE CURRENCY OF AWESOMENESS
sometimes all you need is a disguise
here’s a dirty little secret: fighting games like street fighter and mortal kombat
are essentially rock-paper-scissors.

48. IDEAS: THE CURRENCY OF AWESOMENESS
think you could write the next solitaire?
solitaire was written to help familiarize people with
mouse technique
maybe it’s time to write a game to familiarize
people with phone gestures!

49. IDEAS: THE CURRENCY OF AWESOMENESS
the design philosophy of great apps…
…isn’t all that different across the competitive mobile platforms.
great apps:
don’t make us think about their interfaces
deal with complex tasks, but insulate us from that complexity
make accomplishing our goals easier
help users be awesome in the moment

50. IDEAS: THE CURRENCY OF AWESOMENESS
help users be awesome in the moment
think of games like rock band and dance
central, which give people the chance to be
stars
think of apps that let sports fans call up players’
stats while they’re at the game
think of the kitchen, a place typically without a
computer, but a need for info available on the
net

51. BUILDING MOBILE EXPERIENCES THAT DON’T SUCK
Question?
Frédéric Harper
Developers Evangelist @ Microsoft Canada
fredh@microsoft.com
@fharper
http://webnotwar.ca
http://outofcomfortzone.net