Building mobile apps and experiences that don't suck

Mobile experiences that don’t suck
Susan
Ibach
Technical evangelist
Microsoft Canada
Sibach@microsoft.com
@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”

Building mobile apps and experiences that don't suck

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de CTE Solutions Inc.

Mais de CTE Solutions Inc. (20)

Último

Último (20)

Building mobile apps and experiences that don't suck