Webinar to the Maine Public Relations Council on how to understand mobile devices and how people use them to effectively incorporate mobile communications into an overall strategy.
4. plein air interactive
An interactive agency for museums...
Online communications strategy
Bulletproof design/branding
Easy content management
Mobile tours/apps/sites
e-commerce
pleinairinteractive.com
5. Questions...
How many of you have a computer?
Smartphone?
Tablet?
pleinairinteractive.com
6. Questions...
Do you already offer an optimized
mobile experience?
Are you planning on doing so in the
next 6 months?
pleinairinteractive.com
7. Today’s Agenda
Mobile User Experience (what’s different?)
Keys to a successful mobile user experience
Designing for the mobile user experience
Mobile Strategy Tips
Resources
Q&A
pleinairinteractive.com
8. Why care about mobile?
Professional communicators need to know how
people use mobile devices so that they are
prepared to effectively present their messages
and create understanding.
pleinairinteractive.com
10. Why care about mobile?
25B downloads from Apple Store; 1B/month
Tablet ownership: 10% > 20%... 20% > 29%
(Pew)
More mobile users than PC users by 2015
More m-commerce than e-commerce by 2015
(Gartner)
15M iPads, 4M Kindle Fire’s sold during
Holiday period
pleinairinteractive.com
11. Why care about mobile?
12.6 Million iPhone users visit Google Maps
every day (7.6 Million Android users)
60% of of smartphones run Android, 34% run
iOS (source: Canalys) -- but iPhones account
for half the traffic
40% of mobile searches are for local places
or things
pleinairinteractive.com
19. Computer - Tasks
Build a website
Write a book
BUY
CREATE
pleinairinteractive.com
20. Tablet - Tasks
View a website
Read a book
BUY
CONSUME information
pleinairinteractive.com
21. Smartphone - Tasks
Its “killer app”: killing time
Check in: foursquare, email, call, Facebook, Twitter
Communicate immediately: Facebook, Twitter,
Instagram, Pinterest
Gather data about a location
BUY?
CONSUME + CONNECT
pleinairinteractive.com
22. Games
Weather
Social networking
Maps, navigation, search
Music
News
Entertainment
Most frequent
Video, movies
Shopping/retail
mobile tasks
Dining/restaurant
Sports
Productivity
Communication
Travel
pleinairinteractive.com
29. Who buys?
Tablets:
67% of men
39% of women
Smartphones:
39% of men
23% of women
- JumpTap/comScore
pleinairinteractive.com
30. Who buys?
iPhones + iPads = 92% of all mobile purchases
during the 2011 Holidays
Average purchase is higher with iOS devices: $123
vs. $101 for Android devices
- RichRelevance
pleinairinteractive.com
31. Native or Web?
Only 4% of consumers said they prefer to use
a company’s (native) app - Zmags survey
25% of all native apps are used just once
(Localytics)
People prefer b/c they can more easily
comparison shop
pleinairinteractive.com
32. (not) Going Native
Expense will increase (more devices to test)
HTML5 will improve capabilities
Better integration with the full web
For now, build native apps.
Eventually, though, apps will move from “the store” to the Web
- Jakob Nielsen, http://www.useit.com/alertbox/mobile-sites-apps.html - 2/13/12
pleinairinteractive.com
33. 6 keys to a successful
mobile user experience
Do a mobile task analysis
Define your strategy for mobile UX
Adopt mobile style guidelines
Use prototypes to validate mobile UX
Build in mobile accessibility
Test on target devices
pleinairinteractive.com
34. Mobile Task Analysis
What do you want people to do?
Where will they be when they are doing it?
(what’s the context)
When will they be doing it?
Create personas and write up use cases
pleinairinteractive.com
35. Define
Describe your target audience’s needs,
context - understand them
Outline their tasks - and how you’re app helps
them accomplish them
Define the architecture (getting
started...messages...context-
sensitivity...accessibility)
List target mobile devices
pleinairinteractive.com
36. Typical Mobile Tasks
Managing Deadlines
Rapid Change
Business Information (reference)
Directions (location)
Public transportation
Emergencies
Communication (checking in)
pleinairinteractive.com
38. Touch
Press
Tap
Drag
Flick Touch Terms
Slide
Swipe
Pinch
Rotate
Zoom
- Luke Wrobleski, http://www.lukew.com/ff/entry.asp?1071
pleinairinteractive.com
39. Mobile Messages - signals
Getting started
Tour
Progress
Demo (examples)
Friendly error messages
Confirmation messages (but not too many)
pleinairinteractive.com
42. Detect and Direct
Detect the device and show custom mobile site:
Feed a different set of templates/HTML (at
same URL)
Feed a different style sheet (but use same
markup) at same URL
Redirect to a mobile site “m.mysite.com”
pleinairinteractive.com
43. Examples - detect and direct
www.pleinairinteractive.com
www.walkerart.org
mobile.boston.com
www.imamuseum.org/mobile
pleinairinteractive.com
44. Responsive Web Design
Use a single codebase to render a site:
Media queries
Fluid grids
Flexible images and media, through dynamic
resizing or CSS
pleinairinteractive.com
45. Responsive Web Design
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px) and
(resolution: 163dpi)"
href="shetland.css" />
pleinairinteractive.com
46. Examples - Responsive Web Design
www.happycog.com
www.crushlovely.com
curator.pleinairinteractive.com
pleinairinteractive.com
47. Mobile Usability
“Design for mobile first.” - Luke Wrobleski
“If in doubt, leave it out.” - Jakob Nielsen
“Make it tapworthy.” - Josh Clark
pleinairinteractive.com
49. Make the most of small screens
Make tasks obvious
Reduce words - be a ruthless editor
Plan for partial attention
Design to focus on critical content
pleinairinteractive.com
50. Provide what they need
when they need it
“Progressive Disclosure”
Quick access to easy/common tasks
pleinairinteractive.com
51. Minimize typing
Include defaults
Compute field values
Drop-downs, not text boxes
Auto-complete
Allow for typoes
Make text boxes big enough
Provide error recovery and confirmation
(“undo”, “are you sure?”)
pleinairinteractive.com
52. Consider ergonomics
Phones are used with one hand, standing up
Tablets are used with two hands, sitting down
pleinairinteractive.com
53. Consider context
Who will be using this app?
What will they be doing?
Where will they be?
When will they be doing it?
Why will they be doing it?
pleinairinteractive.com
54. Design the tappable area
Space between touchpoints
Size of touchpoint:
Apple: 44x44 pixels (“fingertip size”)
Microsoft: 38x38
Google/Android: density-dependent,
enables scaling
pleinairinteractive.com
55. Trends to watch
Augmented reality
Artificial intelligence
Image recognition
Biometrics
Transactions
HTML5
Native >> Web
pleinairinteractive.com
56. Strategy
Create: Digital Engagement
pleinairinteractive.com
57. Strategy
Know your audience
Analyze your audience
You need a mobile-friendly website
Editorial response plan for social media
Have a dashboard to improve awareness +
response time
Use a smartphone (iPhone) like a boss
pleinairinteractive.com
62. Tools/Apps
Buffer - bufferapp.com - scheduled posting
to Twitter, FB, LinkedIn and analytics
Twylah - twylah.com - increases engagement
Tumblr - tumblr.com - post images,
messages from mobile devices
Instagram - instagram.com - Post photos,
cross-post to Facebook, Twitter
Foursquare - foursquare.com - check ins
pleinairinteractive.com
63. Must-read books
Mobile First - Luke Wrobleski
Alertbox - Jakob Nielsen (mobile usability)
UIE.com - Jared Sprool (mobile articles,
webinars)
Tapworthy: Designing Great iPhone Apps -
Josh Clark
eBooks: Ann Rockley, Charles Cooper
pleinairinteractive.com
64. Resources
Luke Wrobleski - ideation and design: http://www.lukew.com/ff/
Mobile first: http://www.abookapart.com/products/mobile-first
Alertbox: http://www.useit.com/alertbox/
eBooks 101: http://www.ebooks101book.com
Responsive Web Design: http://www.abookapart.com/products/
responsive-web-design
Touch gesture reference guide, stencils: http://www.lukew.com/ff/
entry.asp?1071
User Interface Engineering - webinars, articles: http://www.uie.com/
pleinairinteractive.com