Confoo 2012-03-01 - Building mobile experiences that don't suck

building mobile experiences
that don’t suck

Frédéric Developers Evangelist
Harper 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


motivations
Every mobile use case can derive
from 3 basic motivations

i’m microtasking

i’m local

i’m bored


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.


i’m local

phones are devices of
convenience and
context and local is a
context.


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.


stating the obvious

≠


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)


what a desktop app looks like


what we think mobile experiences looks like


what mobile experiences really look like


the app we’re thinking of building


the app our users need


but there are times when this is appropriate


desktop and web application “mullet”

business on the front,
party in the back

<translation>
controls on the top,
content at the bottom

</translation>


phone (and most tablet) apps are the “reverse
mullet”

party

business


drinking our own koolaid
in windows phone 7.5 platform, we changed the position of the url textbox to the
bottom.

wp7 wp7.5


under my thumb…


comfort zones


case study: foursquare for windows phone 7


hey – down in the front!


may we suggest a simple fix…

Hockey and mullets go hand in
hand


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


fitt’s law, translated

𝐷
𝑇 = 𝑎 + 𝑏 ∙ 𝑙𝑜𝑔2 (1 + )
𝑊
the bigger and closer a target is, the easier it
is to hit.
well, duh.


so, how big is a finger, anyway?

26 pixels / 7mm
44 pixels / 7mm (wp7 exceptional
(iPhone minimum) minimum)
34 pixels / 9mm
(general wp7 minimum)


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


outside of genetics, cloning is boring

≠ ≠ ≠

∴ ≠ qed


differentiate your experience
panorama in wp7
shallow experience
expansive
artistic

pivot in wp7

deeper experience
data-driven
informational


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


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


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


experience informs gestures

etch-a-sketch: shake Compass/spirit level: guitar simulator:
to clear canvas roll device in various multi-finger for
directions chords


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


paving the cowpaths

design gesture interactions
according to patterns people
already follow

watch for:

unsuccessful gesture
attempts

Repetitive, time-
consuming actions


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.


making users awesome in the moment


remember the three motivations

i’m multitasking

i’m local

i’m bored


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


mobile means personal


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!


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.


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!


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


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

fredh@microsoft.com
@fharper

http://webnotwar.ca
http://outofcomfortzone.net

Confoo 2012-03-01 - Building mobile experiences that don't suck

More Related Content

What's hot (20)

Similar to Confoo 2012-03-01 - Building mobile experiences that don't suck (20)

More from Frédéric Harper (20)

Recently uploaded (20)

Confoo 2012-03-01 - Building mobile experiences that don't suck