building mobile apps and experiences that don't suck

Mobile experiences that don’t suck

Susan

Ibach

Technical evangelist

Microsoft Canada

[email protected]

@hockeygeekgirl

Today we will talk about:

BASIC PRINCIPLES OF MOBILE APP

DESIGN

WHAT MAKES A MOBILE APP GREAT?

IDEAS: THE CURRENCY OF AWESOMENESS


DESIGN

BASIC PRINCIPLES OF MOBILE APP DESIGN

What motivates a mobile user to launch an app?

mobile use cases derive from 3 basic

motivations

i’m microtasking

i’m local

i’m bored


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.


i’m local

phones and tablets

know where you are,

they are local is a

context.


i’m bored

games account for the

majority of popular

paid apps across all

mobile platforms.

any app (game or

other) that can fill a

time gap addictively

and with fun is largely

successful.


Let’s state the obvious

≠


A mobile device is not just a small pc

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)


A desktop looks like this


Here’s what we think mobile looks like


Here’s what mobile really looks like


You might be thinking of an app like this


This might be the app your user needs


Or maybe this is appropriate, it might be


On the desktop we have controls on top

controls on the top,

content at the bottom


On mobile this is reversed

content

controls


What’s exactly is under my thumb?


Think about thumb comfort zones


Case study: foursquare for windows phone 7


Hey – down in the front!


May we suggest a simple fix…


fitt’s law

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

the bigger and closer a target is, the easier it

is to hit.

well, duh.


How big is a finger, anyway?

44 pixels / 7mm

(iPhone minimum)

26 pixels / 7mm

(wp7 exceptional

minimum)

34 pixels / 9mm

(general wp7 minimum)


Grids are good for more than mapping

dungeons in D&D


Meet the new improved 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

outside of genetics, cloning is boring

≠

qed

≠ ≠

≠ ∴


Leverage the platform

panorama in Windows Phone

pivot in Windows Phone

shallow experience

expansive

artistic

deeper experience

data-driven

informational


Don’t fight 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


Use appropriate app function bars

for main tasks, use on-screen controls

For often used tasks, use the app function bar

for rarer tasks, use a secondary menu


Be cautious with gestures

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


Make gestures natural

etch-a-sketch: shake

to clear canvas

Compass/spirit level:

roll device in various

directions

guitar simulator:

multi-finger for

chords


Context affects user expectations:

What happens when you shake?

urban spoon: shake means randomize the result

facebook: refresh content

pcalc: clear the current calculation

etch-a-sketch: clear the canvas


No-one likes typing on mobile keyboards

text input is a pain in the best of circumstances, so keep it to a minimum and help

users as much as possible


Remember the three motivations

i’m multitasking

i’m local

i’m bored


Mobile devices are personal, make

the apps personal too!


Help users learn

solitaire was written to help familiarize people with

mouse technique

maybe it’s time to write a game to familiarize

people with phone gestures!


Put a twist on a classic

here’s a dirty little secret: fighting games like street fighter and mortal kombat

are essentially rock-paper-scissors.


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


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

So there you have it!


DESIGN



Resources for mobile development

• BuildForWindows.ca – for Windows 8

• Dev.windowsphone.com – for Windows Phone

• Connecting with Microsoft Canada?

• Join the discussion on Linked In “Canadian Developer Connection”

http://www.buildforwindows.ca/

http://dev.windowsphone.com/en-us

Mobile experiences that don’t suck

Susan

Ibach

Technical evangelist

Microsoft Canada

[email protected]

@hockeygeekgirl

building mobile apps and experiences that don't suck

Education

mobile app greatleverage

mobile app greatdont

mobile app greatcontext

mobile app greatno

mobile user

mobile looks

mobile experiences

mobile app greatmake