confoo 2012-03-01 - building mobile experiences that don't suck

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:

print

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

fredh@microsoft.com

@fharper

http://webnotwar.ca

http://outofcomfortzone.net