why "mobile first" isn't enough - developing a better user experience
DESCRIPTION
"Mobile first," is a concept that serves us well as a design tool, putting constraints on our messaging, layout, etc. But to use "mobile first" as a complete mobile strategy can lead to some dangerous lines of thought. There's a bigger picture that needs to be seen, and it's what we've always done when developing experiences for the web. We need to put the "Experience First." Then we can think about "mobile", "desktop", "lean-back", and whatever other technologies are released in the next several years. It's not about devices, it's about users and experiences. Presentation first given at BarCamp Nashville in October of 2011.TRANSCRIPT
Why “Mobi e First”
isn’t enough: Developing a better user experience.
view full presentation
#bcn11expfirst@kevinmpowell
1. What is “mobile first”?
2. The dangers of “mobile first” thinking.
3. How should we approach “mobile”?
4. The challenges & the challenge
What is “mobile first”?
12 3
?
Luke Wroblewski
Blogger
Author
Speaker
Former Chief Design Architect at Yahoo!
“Mobile First.”
Luke Wroblewski - http://www.lukew.com/ff/entry.asp?933
Why “Mobile First”?
Heavy mobile data users are projected to triple to one billion by 2013.
Mobile internet adoption has outpaced desktop internet adoption by eight times.
Smartphone sales will surpass worldwide PC sales by the end of 2011.
Over half of Android and iPhone users spend more than 30 minutes per day using mobile applications.
Internet Usage*
*chart not “scientifically accurate”
MobileDesktop
Luke Wroblewski - http://www.lukew.com/ff/entry.asp?933
“Mobile forces you to focus”
Luke Wroblewski - http://www.lukew.com/ff/entry.asp?933
Luke Wroblewski - http://www.lukew.com/ff/entry.asp?933
“Mobile extends your capabilities”
GPS, Accelerometer,
Compass, Cheese Grater
i has teh interwebz
“Mobile First” has gotten BIG
The book comes out next week
Even the big guys are on board
“Mobile first in everything.”
- Eric SchmidtGoogle Chief Executive
#1!
Helpful as a design tool
MOBILE FIRST!!!
Is this our battle cry?
The dangers of “mobile first” thinking.
!
“Mobile First” forces us to focus on a device.
It’s all about me!!!
My “mobile”
His “mobile”
Her “mobile”
His “mobile”
Her “mobile”
His “mobile”
really?!!!
His “mobile”?
There is no one “mobile.”
Are you sure? I am an iPhone
“Mobile First” causes us to isolate our websites.
This is bad.
Mobile Desktop
separate codebases
separate teams
twice the work
out of sync with each other
Bad technologically,
Tablet?
doesn’t scale.
But more importantly, it’s bad for our users.
Alexa’s top 100 US sites.The adventures of
and the perils of isolation.
Both screenshots taken at the same time.
*click*, I mean *tap* - This is not the iPhone I’m looking for...
Separate “mobile” and “desktop” sites make it easy for content to get out of sync.
Not to mention the missed sales opportunities...
Welcoming to prospective customers.
Prominent log in for existing customers.
Allows users to transition from direct mail marketing to a conversion on the site.
Assumes I’m already a member.
Offers me an option to find a branch / ATM location.
Gives me an option to download a native app for my phone.
MobileAssumes I’m already a member.
Gives me an option to download a native app for my phone.
DesktopWelcoming to prospective customers.
Prominent log in for existing customers.
Allows users to transition from direct mail marketing to a conversion on the site.
Offers me an option to find a branch / ATM location.
Desktop
We wouldn’t do this in a bricks and mortar store.
Mobile
Are all mobile users already members?
Are all mobile users already members?
“Mobile First” leads to user context stereotypes.
“in a hurry”
“on a slow connection”
“only interested in quick interactions”
Mobile users are:
relaxed
Wi-Fi
Very quick and
hurried task?
86% of mobile internet users are using their devices while watching TV.
http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html
14%
86%
unrelated
37% of those are browsing the internet (content unrelated to the show) while they watch
http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html
Mobile users aren’t always on the go.
Mobile users aren’t always impatient.
Mobile users aren’t alwayson a slow connection.
When we stereotype user context we create experiences that serve that stereotype.
Not what you wanted? Click this little link and have fun pinching and zooming the rest of our site!
And we seem aware that these experiences are insufficient.
“Mobile First” yields incomplete experiences.
Let’s play a game!Let’s make a purchase on Walmart’s mobile site. Imagine you’re the one going through this experience, and raise your hand if at any point you would abandon the process.
Raise your hand if you would abandon the process.
DemoVideo
“The study by e-commerce agency Screen Pages looked at more than 1.5m visitors to 30 non-optimised websites, and found that conversion rates were an average of 41% lower on mobile.”
http://econsultancy.com/us/blog/8096-mobile-accounts-for-10-of-e-commerce-visits-but-converts-at-half-the-rate
http://econsultancy.com/us/blog/8096-mobile-accounts-for-10-of-e-commerce-visits-but-converts-at-half-the-rate
25% conversion
vs.
15% conversion
Users don’t want to jump from this, to this.
The dangers of “Mobile First” thinking.
Forces us to focus on a device.
Causes us to isolate our websites.
Leads to user context stereotypes.
Yields incomplete experiences.
“Mobile First” is not enough.
How should we approach “mobile”?
I’m still here and I brought my friends.
“Experience First”we need to focus on
Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
Talking about this.
Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
Unintentional Design
Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
Self Design
Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
Genius Design
I’m theexpert.
Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
Activity Focused Design
Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
Activity Focused Design
Research & categorize users.Build the features they want.
sound familiar?
Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
Experience Focused Design
“Experience focused design looks at discrete activities and all of the things that happen in between those discrete activities.”
- Jared Spool
Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152
We’re back here now.
“Experience First”How does
apply to “mobile”?
Forces us to focus on a device.
“Experience First”Forces us to focus on the experience
It’s not about a device.
http://vimeo.com/28926711
“Experience First”encourages a common experience
Causes us to isolate our websites.
one set of URLs
mobile.yoursite.com
view full site
m.yoursite.commobile.yoursite.comyoursite.com/mobile
External Ads
Email CampaignsTweets
Facebook Posts
yoursite.com
Bookmarks
Shared Links
Leads to user context stereotypes.
“Experience First”Leads to context-aware dynamic
experiences.
Cater to actual user context.
Where are they?Home, work, in your store?
Are they relaxed or in a hurry?How long are they spending on each page?
What types of content are they viewing?
Note: these have nothing to do with device.
Yields incomplete experiences.
“Experience First”Delivers the complete experience
Another Alexa top 100 site.
“Experience First”Forces us to focus on the experience.
Encourages a common experienceyoursite.com
Detects and adapts dynamically to user context
Delivers the complete experience
What do I want my users to experience?
“Mobile First” Design
Responsive DesignMedia Queries Geolocation
Social Media Integration
“Experience First”Tailoring the experience
The Challenges&
The Challenge
A lot of factors affect an experience.
User Context
User Traits
User Preferences
Bandwidth Available (3G, Wi-Fi, dialup)
Location (home? work? at your business?)
Patience level (in a hurry, relaxed, etc.)
Prior experience with your site/application
Proficiency with technology (power user vs. novice)
Name
Age
Gender
Language
Disabilities
Favorites (color, restaurant, wish lists)
Locale
Device CapabilitiesPortability
Display Size
Display Resolution
Location Awareness (GPS)
Battery Life
Bandwidth Capacity
Input Type (touch/keyboard/other)
Camera
Flash Support
Orientation Awareness (Accelerometer)
Directional Awareness (Compass)
Browser CapabilitiesJavascript capable
CSS version/supported features
HTML version/supported features
File system accessibility
Device feature accessibility
Content
It’s time-consuming and expensive.
If you do “experience first” well, much of your effort will go unnoticed.But they’ll notice when you don’t!
You have to sell this concept to: clients, stakeholders, designers, developers, that guy who has to approve everything.
Feeling overwhelmed yet?
But start small.
It won’t happen overnight.
You don’t have to rebuild your entire website.
Though that does make things easier.
Change your thinking.
No longer,
“mobile” “desktop”vs.
just
experiences
and
users
Experience First.
Resources“Mobile First”Luke Wroblewskihttp://www.lukew.com/ff/entry.asp?933Book - http://www.abookapart.com/products/mobile-first
“Responsive Web Design”Ethan Marcottehttp://www.alistapart.com/articles/responsive-web-design/Book - http://www.abookapart.com/products/responsive-web-design
“Pragmatic Responsive Design”Stephanie Riegerhttp://www.slideshare.net/yiibu/pragmatic-responsive-design
“Adaptation”Bryan Riegerhttp://www.slideshare.net/yiibu/adaptation-why-responsive-design-actually-begins-on-the-server
Modernizrhttp://www.modernizr.com/
Flickr - Awesome pics for presentations!http://www.flickr.com/
Thanks
The Dave Ramsey Web Team
Nick at ModerNash
My amazing wife, Sara.
Luke at FoxyCart
Experience First.
Kevin PowellUX Consultant / Developer
@kevinmpowell
underthebedstudios.com
#bcn11expfirst