mobile ux campdc2012
TRANSCRIPT
5 TIPS FOR RESPONSIVE DESIGNLessons from the trenchesSeptember 15, 2012
Intros
Forum One Communicationshttp://www.forumone.com
Forum One Communicationshttp://www.forumone.com
Forum One Communicationshttp://www.forumone.com
Staff
Founded
Experience
Exper2se
50 staff in Alexandria, Sea9le, San Francisco
1996 by 3 policy analysts and web enthusiasts
More than 1,500 projects for more than 500 clients
Web strategy, User Experience, Open Source Development, Mobile, Support and Growth
h"p://www.charitywater.org
1970
1971
1974
1976
1979
1981
1985
1994
2001
2007
2011
1969
20082009
Seoul
London
NYC
DC
Sea9le
Rabat
Hanoi
Yay!
h"p://www.charitywater.org
Hanoi.5 year
1 yearRabat
London9 years
7 yearsNYC
DC6 years
Sea9le8 mo.
18.5 yearsSeoul
Architecture9 years
User Experience7 years
Web Strategy5 years
Teaching3 years
Web Dev2 years
Non-profit1 year
Urban Design1 year
What did I miss?
h"p://www.prospectmagazine.co.uk/2009/11/diary-‐5/
h"p://www.kylebean.co.uk/por@olio/#mobileevoluCon
Photo: Nam So-‐Yoen, Allmynews.com
h"p://www.boston.com/bigpicture/2011/11/egypt_erupts_with_fresh_protes.html
14
Mobile data traffic 2011 is 8 2mes the total internet traffic in 2000
Source: Cisco -‐ Global Mobile Data Traffic Forecast Update, 2011–2016
flickr: sidpicky CC BY-‐NC 2.0
More iPhones are sold each day than babies born
Source: h"p://www.lukew.com/ff/entry.asp?1506
In 2012 there will be more cellphones than people in the world
Source: Cisco -‐ Global Mobile Data Traffic Forecast Update, 2011–2016
flickr: slickimages CC BY 2.0
In 2013 globally more people will access the internet through mobile
than desktop PCs
Source: Morgan Stanley Research
55% of US adults owns a smartphone
Source: Neilsen / July 2012 -‐ h"p://blog.nielsen.com/nielsenwire/online_mobile/young-‐adults-‐and-‐teens-‐lead-‐growth-‐among-‐smartphone-‐owners/
flickr: Ed Yourdon CC BY-‐NC-‐SA 2.0
This is not a phone.
Mobile Difference
23Credit: flickr -‐ MeganMorris / CC License: BY-‐NC-‐SA
24Credit: flickr -‐ shareski / CC License: BY-‐NC-‐SA
25Credit: flickr -‐ Yourdon / CC License: BY-‐NC-‐SA
Hardware
Interac+onEnvironment
Time2(peak)User2Focus
Orienta+onSensors
Desktop
big$screenpower$supplyconsistent$networkkeyboard$and$mousesi5ng$(chair$and$desk)work$and$home8am$:$7pmextended$tasksmul=:taskfixedno
Tablet
medium&screenba-eryinconsistent&networkdirect&touchrelaxedhome5pm&8&10pmshort&taskssingle&taskportrait&and&landscapeyes
Smartphone
small%screenba+eryinconsistent%networkdirect%touchon%the%gohome,%idling,%workall%dayshort%taskssingle%taskportrait%and%landscapeyes
Credit: flickr -‐ Xavier Encinas / CC License: BY-‐NC
Being Responsive
5 Lessons from the trenches
Optimize layout and functionality.1
Optimize layout and functionality.
Optimize layout and functionality.
Optimize layout and functionality.
Navigation for touch. 2
Navigation for touch.
Navigation for touch.
Googlehttp://freedomhouse.org/
Web Page Title
Navigation for touch.
Navigation for touch.
Forms... Ugh.3
Forms... Ugh.h"p://contribute.barakobama.comh"p://cgap.org/content/contact-‐cgap
Little things matter. 4
Little things matter.
Little things matter.
Little things matter.
Little things matter.
3rd party plugins, ain’t no party.
5
3rd party plugins, ain’t no party.
3rd party plugins, ain’t no party.
3rd party plugins, ain’t no party.
Epilogue: Testing bites.
Device Fragmentationh"p://opensignalmaps.com/reports/fragmentaCon.php
Device Fragmentationh"p://opensignalmaps.com/reports/fragmentaCon.php
Responsinator.com
Adobe Shadowh"p://labs.adobe.com/technologies/shadow/
Proty
Proty
Proty
THANK YOU!Any questions?Nam-ho Park | [email protected]