confoo 2012-03-01 - building mobile experiences that don't suck
DESCRIPTION
TRANSCRIPT
building mobile experiences that don’t suck
Frédéric
Harper
Developers Evangelist
Microsoft Canada
@fharper | outofcomfortzone.net
AGENDA
what we will talk about today
BASIC PRINCIPLES OF MOBILE APP
DESIGN
WHAT MAKES A MOBILE APP GREAT?
IDEAS: THE CURRENCY OF AWESOMENESS
BASIC PRINCIPLES OF MOBILE APP DESIGN
the freshman primer
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
BASIC PRINCIPLES OF MOBILE APP DESIGN
i’m microtasking
microtasks are short
bursts of activity, often
done between larger
tasks.
idea capture is an example of microtasking.
TM & © Warner Bros. Entertainment, Inc.
BASIC PRINCIPLES OF MOBILE APP DESIGN
i’m local
phones are devices of
convenience and
context and local is a
context.
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.
BASIC PRINCIPLES OF MOBILE APP DESIGN
stating the obvious
≠
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)
BASIC PRINCIPLES OF MOBILE APP DESIGN
what a desktop app looks like
BASIC PRINCIPLES OF MOBILE APP DESIGN
what we think mobile experiences looks like
BASIC PRINCIPLES OF MOBILE APP DESIGN
what mobile experiences really look like
BASIC PRINCIPLES OF MOBILE APP DESIGN
the app we’re thinking of building
BASIC PRINCIPLES OF MOBILE APP DESIGN
the app our users need
BASIC PRINCIPLES OF MOBILE APP DESIGN
but there are times when this is appropriate
BASIC PRINCIPLES OF MOBILE APP DESIGN
desktop and web application “mullet”
business on the front,
party in the back
controls on the top,
content at the bottom
<translation>
</translation>
BASIC PRINCIPLES OF MOBILE APP DESIGN
phone (and most tablet) apps are the “reverse
mullet”
party
business
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
BASIC PRINCIPLES OF MOBILE APP DESIGN
under my thumb…
BASIC PRINCIPLES OF MOBILE APP DESIGN
comfort zones
BASIC PRINCIPLES OF MOBILE APP DESIGN
case study: foursquare for windows phone 7
BASIC PRINCIPLES OF MOBILE APP DESIGN
hey – down in the front!
BASIC PRINCIPLES OF MOBILE APP DESIGN
may we suggest a simple fix…
Hockey and mullets go hand in
hand
Offside!
A simple change…
Much better!
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
BASIC PRINCIPLES OF MOBILE APP DESIGN
fitt’s law, translated
the bigger and closer a target is, the easier it
is to hit.
well, duh.
𝑇 = 𝑎 + 𝑏 ∙ 𝑙𝑜𝑔2 (1 + 𝐷
𝑊)
BASIC PRINCIPLES OF MOBILE APP DESIGN
so, how big is a finger, anyway?
44 pixels / 7mm
(iPhone minimum)
26 pixels / 7mm
(wp7 exceptional
minimum)
34 pixels / 9mm
(general wp7 minimum)
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
WHAT MAKES A MOBILE APP GREAT
engineering meets design
WHAT MAKES A MOBILE APP GREAT
outside of genetics, cloning is boring
≠
qed
≠ ≠
≠ ∴
WHAT MAKES A MOBILE APP GREAT
differentiate your experience
panorama in wp7
pivot in wp7
shallow experience
expansive
artistic
deeper experience
data-driven
informational
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
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
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
WHAT MAKES A MOBILE APP GREAT
experience informs gestures
etch-a-sketch: shake
to clear canvas
Compass/spirit level:
roll device in various
directions
guitar simulator:
multi-finger for
chords
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
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
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.
IDEAS: THE CURRENCY OF AWESOMENESS
making users awesome in the moment
IDEAS: THE CURRENCY OF AWESOMENESS
remember the three motivations
i’m multitasking
i’m local
i’m bored
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:
sound recordings
cinema
radio
television
internet
mobile
IDEAS: THE CURRENCY OF AWESOMENESS
mobile means personal
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!
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.
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!
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
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
BUILDING MOBILE EXPERIENCES THAT DON’T SUCK
Question?
Frédéric Harper
Developers Evangelist @ Microsoft Canada
@fharper
http://webnotwar.ca
http://outofcomfortzone.net