Good Touch / Bad Touch: The new world of mobile.
Sevnthsin's 2011 MIMA Summit presentation focuses on the process of creating a well designed, well functioning mobile experience. Topics covered include:
• Asking the right questions in the strategy phase
• Design tips and guideline for mobile
• What teams to involve in each step of the process
• Tools for mobile development
4. 4
STRATEGY DESIGN DEVELOPMENT
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
5. 5
STRATEGY DESIGN DEVELOPMENT
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
6. 6
STRATEGY
DESIGN
DEVELOPMENT
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
7. 7
WHAT AM I
DOING HERE?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
8. 8
THINGS TO AVOID
mobile as an afterthought
“we need an app!”
STAND ALONE vs. CAMPAIGN
what is this a part of, if anything?
FUNCTION OVER FORM (KINDA)
design is important, but usability comes first
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
9. 9
STAND ALONE
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
10. 10
CAMPAIGN
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
12. 12
DEMO & PSYCHOGRAPHICS
who’s using this & what do they feel
2 MINUTES OR 2 HOURS
casual use vs. extended use
time filler vs. time waster
utility vs. entertainment
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
13. 13
2 MINUTES 2 HOURS
quick utility entertainment
female shoppers, co-ed music fans,
age 24-44, age 22-28,
ditching newspapers seeking“lean forward”
experiences
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
15. 15
YOUR AUDIENCE DETERMINES DEVICE
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
16. 16
iOS DEVICES
AUDIENCE
early adults (24-34)
college educated
creative, yet tech savvy
device chosen by desire
PROS
unified operating system
consistent hardware specs
webkit based browser
most adopted platform*
CONS
developer/development restrictions
app store over-saturation
*we’ll fight about this later
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
17. 17
ANDROID DEVICES
AUDIENCE
younger adults (18-28)
in or recently graduated college
tech savvy, yet not overly creative
device chosen by price or availability
PROS
nearly limitless options
carrier availability/price
“open” app marketplace
webkit based browser
CONS
device fragmentation
inconsistent hardware specs
OS varies from device to device
devices deprecate quickly
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
18. 18
BLACKBERRY DEVICES
AUDIENCE
adults (35-55)
full-timer, typically corporate
not overly tech savvy or creative
device supplied by employer
PROS
BlackBerry server integration*
CONS
device fragmentation
no OS consistency
dramatic decline in adoption
proprietary configuration
inferior web browser
*we had to find SOMETHING
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
20. 20
NATIVE APPS
PROS
device specific functionality
(ie: location services, local storage, app integration)
data connection not always required
great for utility functions
CONS
require new build for each platform
can get expensive fast
most updates require new app submission
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
21. 21
WEB APPS
PROS
no app store download required
can be dynamically updated
can adapt across multiple platforms
can typically be saved to home screen
significantly less expensive to build
CONS
data connection always required
no device specific functionality
often passed over for native apps
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
22. 22
MOBILE SITES
PROS
no app store download required
can be dynamically updated
can adapt across multiple platforms
significantly less expensive to build
CONS
require decent web browser
data connection always required
no device specific functionality
cannot integrate with native or web apps
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
23. 23
CREATING
THE ROAD MAP
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
24. 24
THE DESIGN SIDE
OF STRATEGY
creating user flows
wireframing
not a blueprint for design
defines hierarchy
INCLUDE YOUR DEVELOPER
inform one another during the process
develop shared terminology
be friends, always
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
25. 25
FILLING
THOSE GAPS
LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, SED DIAM NONUMMY NIBH EUISMOD TINCIDUNT
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
26. 26
DESIGN DRIVEN CONTENT
let design help inform your content direction
SHOW vs. TELL
it’s the season of doing, not making me read
bring content in engaging new ways
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
27. 27
DESIGNING
FOR THE DEVICE
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
28. 28
UNDERSTAND THE DEVICE
it’s more than just knowing the screen size
understand the expected behaviors of a device
each device & platform is different, don’t assume they’re the same
CAN YOU DO IT WHILE DRIVING?
less is more when it comes to UI
interaction should be comfortable & EASY
do I need more than one finger to do this?
buttons should be at least 44px wide
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
29. 29
USE THE AVAILABLE TOOLS
find & use GUI files online
find & use known device grid systems
find & use LiveView to preview designs on a device
http://www.zambetti.com/projects/liveview
LEGIBILITY IS ESSENTIAL
make sure you can read it
always go bigger than you think
break content into “snackable” sizes
the less I have to read, the sooner I can look back up at the road
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
30. 30
GET DESIGN
& DEV TALKING
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
31. 31
DECIDE ON FRAMEWORK
custom build
adaptive/responsive layouts
pre-existing frameworks
http://lessframework.com
DEV INFORMED DESIGN
let development influence your design (to an extent)
less sacrifice if both parties know what’s up
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
32. 32
DEVELOPING (FOR MOBILE)
IS THE BEST
010000100100100100101010111001101001010100000010101000
(WORST)
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
33. 33
KNOW YOUR LANGUAGES
what devices are built on Objective-C, Java, etc?
teams are better
spreading the load amongst a few folks can save time & money
sometimes you need both the iPhone guy AND the PHP guy
DON’T SHUT OUT DESIGN
you will have questions, don’t assume
an open line of communication means less creative feedback later
let design inform development (to an extent)
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
34. 34
EMULATORS ARE YOUR FRIEND
find the appropriate mobile device emulators
test your work in emulators early on
TEST DEVICES ARE MORE BETTER
test on as many real devices as possible
eBay has tons of cheap used phones waiting for you
mall kiosks have a lovely array of test devices as well
test on both WiFi & a cell data connection
load times are important
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com
35. 35
HAVE A LAUNCH STRATEGY
never underestimate server deployment times
prepare for the worst if your app requires approval
better safe than sorry, brace for at least two weeks
never launch on Friday
you will inevitably crash on Saturday, its science*
*we think
1121 jackson st. ne #144 minneapolis mn, 55413 @ sevnthsin yo@sevnthsin.com 612.236.1746 sevnthsin.com