1.
W hy“Mobi e First” isn’t enough: Developing a better user experience.#bcn11expfirst@kevinmpowell view full presentation

2.
1. What is “mobile first”?2. The dangers of “mobile first” thinking.3. How should we approach “mobile”?4. The challenges & the challenge

3.
1 ? 2 3What is “mobile first”?

4.
Luke Wroblewski Blogger Author SpeakerFormer Chief Design Architect at Yahoo!

5.
“Mobile First.”Luke Wroblewski - http://www.lukew.com/ff/entry.asp?933

6.
Why “Mobile First”? rnet Usage* InteHeavy mobile data users are projectedto triple to one billion by 2013.Mobile internet adoption has outpaceddesktop internet adoption by eight times.Smartphone sales will surpassworldwide PC sales by the end of 2011.Over half of Android and iPhone usersspend more than 30 minutes per dayusing mobile applications. Desktop Mobile *chart not “scientificallyLuke Wroblewski - http://www.lukew.com/ff/entry.asp?933 accurate”

7.
“Mobile forces you to focus”Luke Wroblewski - http://www.lukew.com/ff/entry.asp?933

8.
“Mobile extends your capabilities” GPS, i has teh Accelerometer, Compass, Cheese interwebz GraterLuke Wroblewski - http://www.lukew.com/ff/entry.asp?933

9.
“Mobile First” has gotten BIG

10.
The book comes out next week

11.
Even the big guys are on board “Mobile first in everything.” - Eric Schmidt Google Chief Executive

12.
#1!Helpful as a design tool

13.
MOBILE FIRST!!!Is this our battle cry?

14.
!The dangers of “mobile first” thinking.

15.
“Mobile First” forces us tofocus on a device. It’s all about me!!!

16.
My “mobile”

17.
His “mobile”

18.
Her “mobile”

19.
His “mobile”

20.
Her “mobile”

21.
His “mobile” really ?!!!

22.
His “mobile”?

23.
There is no one“mobile.” Are you sure? I am an iPhone

24.
“Mobile First” causes us to isolate our websites.

25.
This is bad.

26.
Bad technologically, separate codebases separate teamsMobile Desktop twice the work out of sync with each other

27.
doesn’t scale. Tablet?

28.
But moreimportantly, it’sbad for ourusers.

29.
The adventures of Alexa’s top 100 US sites. and the perils of isolation.

30.
Both screenshotstaken at the sametime.

31.
*click*, I mean *tap* -This is not the iPhoneI’m looking for...

32.
Separate “mobile” and“desktop” sites make iteasy for content to get outof sync. Not to mention the missed sales opportunities...

33.
Welcoming to prospectivecustomers.Prominent log in for existingcustomers.Allows users to transition fromdirect mail marketing to aconversion on the site.

34.
Assumes I’m already a member.Offers me an option to find abranch / ATM location.Gives me an option todownload a native app for myphone.

35.
Mobile DesktopAssumes I’m already a Welcoming tomember. prospective customers.Offers me an option Prominent log in forto find a branch / ATM existing customers.location.Gives me an option to Allows users to transitiondownload a native app from direct mail marketingfor my phone. to a conversion on the site.

36.
Mobile DesktopWe wouldn’t do this in a bricks and mortar store.

37.
Are all mobile users alreadymembers?

38.
Are all mobile users alreadymembers?

39.
“Mobile First” leads to user context stereotypes.

40.
Mobile users are: “in a hurry”“on a slow connection”“only interested in quick interactions”

41.
Wi-Fi laxedre ka nd yq uic Ver ta sk? hurried

42.
86% of mobile internet users are usingtheir devices while watching TV. 14% 86% http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html

43.
37% of those are browsing the internet(content unrelated to the show) while they watch unrelate d http://advertising.yahoo.com/article/the-role-of-mobile-devices-in-shopping-process.html

44.
Mobile users aren’t always on the go.

45.
Mobile users aren’t always impatient.

46.
on a slowMobile users aren’t always connection.

47.
When we stereotype usercontext we createexperiences that serve thatstereotype.

48.
And we seem aware that theseexperiences are insufficient.Not what you wanted? Click this little link and have funpinching and zooming the rest of our site!

49.
“Mobile First” yieldsincomplete experiences.

50.
Let’s play a game!Let’s make a purchase on Walmart’smobile site. Imagine you’re the one goingthrough this experience, and raise yourhand if at any point you would abandonthe process.

51.
Raise your hand if you would abandon the process.DemoVideo

52.
“The study by e-commerce agency Screen Pages lookedat more than 1.5m visitors to 30 non-optimisedwebsites, and found that conversion rates were anaverage 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

53.
25% conversion 15% conversion vs. http://econsultancy.com/us/blog/8096-mobile-accounts-for-10-of-e- commerce-visits-but-converts-at-half-the-rate

54.
Users don’t want tojump from this, to this.

55.
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.

56.
“Mobile First”is not enough.

57.
How should weapproach “mobile”? I’m still here and I brought my friends.

58.
we need to focus on“Experience First”

59.
Talking about this.Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152

60.
Unintentional Design Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152

61.
Self Design Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152

62.
Genius Design I’m the expert. Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152

63.
Activity Focused Design Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152

64.
Activity Focused Design Research & categorize users. Build the features they want. sound familiar? Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152

65.
Experience Focused Design“Experience focused design looks atdiscrete activities and all of the thingsthat happen in between those discreteactivities.” - Jared Spool Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152

66.
We’re back here now.Jared Spool - Anatomy of a design decision - http://vimeo.com/20881152

67.
How does“Experience First” apply to “mobile”?

68.
Forces us to focus on a device.“Experience First”Forces us to focus on the experience

69.
http://bostonglobe.com

70.
It’s not about a device. http://vimeo.com/28926711

71.
Causes us to isolate our websites.“Experience First”encourages a common experience one set of URLs

72.
mobile.yoursite.com view full site

73.
m.yoursite.commobile.yoursite.comyoursite.com/mobile

74.
ook Po stsFa ce b Email Cam arks paignsB oo km Tweets na lA ds ShareExte r d Lin ks yoursite.com

75.
Leads to user context stereotypes.“Experience First”Leads to context-aware dynamic experiences.

76.
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.

77.
Yields incomplete experiences.“Experience First”Delivers the complete experience

78.
Another Alexa top 100 site.

79.
“Experience First” Forces us to focus on the experience.yoursite.com Encourages a common experience Detects and adapts dynamically to user context Delivers the complete experience

80.
What do I want my users to experience?

81.
“Experience First” Tailoring the experience “Mobile First” Design Responsive DesignMedia Queries Geolocation Social Media Integration

82.
The Challenges &The Challenge

83.
A lot of factorsaffect an experience.

84.
Content User Traits NameDevice Capabilities Age Portability Gender Display Size Language Display Resolution Locale Location Awareness (GPS) Disabilities Directional Awareness (Compass) Proficiency with technology (power user vs. Battery Life novice) Bandwidth Capacity Input Type (touch/keyboard/other) User Context Bandwidth Available (3G, Wi-Fi, dialup) Camera Location (home? work? at your business?) Flash Support Patience level (in a hurry, relaxed, etc.) Orientation Awareness (Accelerometer) Prior experience with your site/applicationBrowser Capabilities Javascript capable User Preferences CSS version/supported features Favorites (color, restaurant, wish lists) HTML version/supported features File system accessibility Device feature accessibility

85.
It’s time-consumingand expensive.

86.
If you do “experiencefirst” well, much ofyour effort will gounnoticed.But they’ll notice when you don’t!

87.
You have to sell thisconcept to: clients,stakeholders, designers,developers, that guy whohas to approve everything. Feeling overwhelmed yet?

88.
But start small.

89.
It won’t happen overnight.

90.
You don’t have to rebuildyour entire website.

91.
Though that does make things easier.

92.
Change your thinking.

93.
No longer,“mobile” vs. “desktop”

94.
just users and experiences

95.
ExperienceFirst.

96.
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-serverModernizrhttp://www.modernizr.com/Flickr - Awesome pics for presentations!http://www.flickr.com/

97.
ThanksThe Dave Ramsey Web Team Nick at ModerNash Luke at FoxyCart My amazing wife, Sara.

98.
ExperienceFirst.#bcn11expfirstKevin PowellUX Consultant / Developer kevin@underthebedstudios.com underthebedstudios.com @kevinmpowell