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

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

Upload: frederic-harper

Post on 21-Jan-2015

816 views

Category:

Technology


2 download

DESCRIPTION

 

TRANSCRIPT

Page 1: 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

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

AGENDA

what we will talk about today

BASIC PRINCIPLES OF MOBILE APP

DESIGN

WHAT MAKES A MOBILE APP GREAT?

IDEAS: THE CURRENCY OF AWESOMENESS

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

BASIC PRINCIPLES OF MOBILE APP DESIGN

the freshman primer

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

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

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

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.

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

BASIC PRINCIPLES OF MOBILE APP DESIGN

i’m local

phones are devices of

convenience and

context and local is a

context.

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

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.

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

BASIC PRINCIPLES OF MOBILE APP DESIGN

stating the obvious

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

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)

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

BASIC PRINCIPLES OF MOBILE APP DESIGN

what a desktop app looks like

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

BASIC PRINCIPLES OF MOBILE APP DESIGN

what we think mobile experiences looks like

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

BASIC PRINCIPLES OF MOBILE APP DESIGN

what mobile experiences really look like

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

BASIC PRINCIPLES OF MOBILE APP DESIGN

the app we’re thinking of building

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

BASIC PRINCIPLES OF MOBILE APP DESIGN

the app our users need

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

BASIC PRINCIPLES OF MOBILE APP DESIGN

but there are times when this is appropriate

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

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>

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

BASIC PRINCIPLES OF MOBILE APP DESIGN

phone (and most tablet) apps are the “reverse

mullet”

party

business

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

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

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

BASIC PRINCIPLES OF MOBILE APP DESIGN

under my thumb…

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

BASIC PRINCIPLES OF MOBILE APP DESIGN

comfort zones

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

BASIC PRINCIPLES OF MOBILE APP DESIGN

case study: foursquare for windows phone 7

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

BASIC PRINCIPLES OF MOBILE APP DESIGN

hey – down in the front!

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

BASIC PRINCIPLES OF MOBILE APP DESIGN

may we suggest a simple fix…

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

Hockey and mullets go hand in

hand

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

Offside!

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

A simple change…

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

Much better!

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

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

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

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 + 𝐷

𝑊)

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

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)

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

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

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

WHAT MAKES A MOBILE APP GREAT

engineering meets design

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

WHAT MAKES A MOBILE APP GREAT

outside of genetics, cloning is boring

qed

≠ ≠

≠ ∴

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

WHAT MAKES A MOBILE APP GREAT

differentiate your experience

panorama in wp7

pivot in wp7

shallow experience

expansive

artistic

deeper experience

data-driven

informational

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

IDEAS: THE CURRENCY OF AWESOMENESS

making users awesome in the moment

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

IDEAS: THE CURRENCY OF AWESOMENESS

remember the three motivations

i’m multitasking

i’m local

i’m bored

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

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

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

IDEAS: THE CURRENCY OF AWESOMENESS

mobile means personal

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

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!

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

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.

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

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!

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

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

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

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

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

BUILDING MOBILE EXPERIENCES THAT DON’T SUCK

Question?

Frédéric Harper

Developers Evangelist @ Microsoft Canada

[email protected]

@fharper

http://webnotwar.ca

http://outofcomfortzone.net