How to "mobilize" your website
-
Upload
bradley-orego -
Category
Design
-
view
167 -
download
0
Transcript of How to "mobilize" your website
How to "mobilize" your website
UXMad4/18/13
Schedule
Tonight's Meetup
● Socializing/Mingling● Intros/Announcements
○ Jobs○ Sponsorship
● Brief Presentation○ Challenge of Mobile○ Understanding Mobile○ Heuristics of Mobile Design
● Workshop!● Afterparty?
About Me
Brad Orego
[email protected]@bradorego
B.S. in Computer Science, B.A. in PsychologyFreelance UX Designer/Web DeveloperUXMad Meetup Co-Organizer
Dancer, Curler, Ultimate-er, Cyclist, Beer-batter pancake blogger
Challenge of Mobile
Challenge of Mobile
● Use is increasing○ ~15% of internet traffic○ Growing "66% year over year"!
● Screen sizes are small○ But growing! And bigger screens -> more web use
● Many form factors○ Tablets now outpace smartphone web use○ iPhone vs Android vs Phablets
Challenge of Mobile
Understanding Mobile
Understanding Mobile
● Users are distracted○ Walking, Talking, Driving, Watching TV, etc.
● Use is intermittent○ ~3-5 minutes. Likely to get interrupted
● Use varies greatly○ Where are they?○ What else are they doing right now?○ What are they trying to accomplish?○ What device are they on? What're its capabilities?
What do we do about it?
A Loose Heuristic for Mobile Design
1. Simplicity is a requirement2. Understand, then optimize, your core value3. "Where" is more important than "who"4. Assume terrible dexterity5. Footer == dead zone6. Assume distracted, disrupted, intermittent
use7. Good experience is a subset of performance8. Provide an escape route9. Test on as many devices as possible
I. Simplicity is a Requirement
"It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away"
- Antoine de Saint-Exupery
http://en.wikipedia.org/wiki/File:11exupery-inline1-500.jpg
I. Simplicity is a Requirement
● Mobile Design is inherently constrained○ Screen size, bandwidth, hardware○ Time, focus, mental energy○ Budget?
● Every element matters○ Every visual element adds strain○ Every option is another decision
I. Simplicity is a Requirement
Simplicity as the balance between Comprehension and Brevity
○ Comprehension - providing enough information to fully understand the interface
○ Brevity - providing the
absolute minimum information
http://www.uxbooth.com/articles/a-loose-heuristic-for-mobile-design/
II. Understand, then optimize, your Core Value Proposition
● Mobile users are different○ Want different features○ Want different content○ Thus, a different core value prop
● Think about urgency○ Even if your site/app/product/problem isn't urgent
● How can we make it as efficient as possible?
What do people do on Wikipedia while on the go?
Why would anyone go to NHL.com on their smart phone?
If I'm on my mobile device, what information about a restaurant do I want?
III. "Where" is more important than "Who"
● Environmental Psychology● Optimize for setting, not for user type● Most common?
○ Home○ Transit○ Bars○ ...Toilet?
● "When" also kinda matters...○ Morning? Lunch? Evening? 3am?
"Environmental Psychology"...?
IV. Assume terrible dexterity
● Give enough space● Make them big enough
○ Apple suggests 44px x 44px minimum● Hampton suggests giving it to....
IV. Assume terrible dexterity
Or, if you're lucky...
V. The footer is a dead zone
When's the last time you actually scrolled all the way to the bottom of a mobile site?
Was there anything worthwhile down there?
I'm sorry.
VI. Assume distracted, disrupted, and intermittent use
● Average use is 70 mins/day on mobile web○ Usually in doses of 3-5 minutes○ While doing something else
● Easily interrupted○ By real-world events○ By digital events○ By connectivity issues
● Visibility of System Status○ Let users quickly recover
● Persistence of state○ Session variables, user profiles, etc.
VII. Experience is a subset of performance
● Performance matters. Especially on mobile○ Remember: limited resources
● Excellent design is meaningless if it's slow○ It can be beautiful, but nobody will see it○ Remember: simplicity
● Keep an eye/mind on technology○ CSS? HTML? JS?
■ How much? 1 KB? 10 KB? 100 KB?○ Flash?
■ Lol
VII. Experience is a subset of performance
Plenty of information/guides...
VIII. Provide an escape route
● Sometimes people want the desktop version○ Inertia○ Power Users○ Capability they know has been stripped out of mobile
● Respect the back button○ HTML5 History
● Two choices○ Be self-righteous○ Be accommodating
● Minimize frustration○ Always
VIII. Provide an escape route
IX. Test on as many devices as possible
● Idiosyncrasies○ Android vs. iOS○ Android manufacturers○ Native browser vs. Chrome vs. Firefox vs. Opera
● Test smart○ Impossible to test them all○ Find what's popular, what's common, what's unique○ Know what to test
IX. Test on as many devices as possible
A Loose Heuristic for Mobile Design
1. Simplicity is a requirement2. Understand, then optimize, your core value3. "Where" is more important than "who"4. Assume terrible dexterity5. Footer == dead zone6. Assume distracted, disrupted, intermittent
use7. Good experience is a subset of performance8. Provide an escape route9. Test on as many devices as possible
Me!
Brad [email protected]@bradorego
B.S. in Computer Science, B.A. in PsychologyFreelance UX Designer/Web DeveloperUXMad Meetup Co-OrganizerEntrepreneur
Dancer, Curler, Ultimate-er, Runner, Cyclist, Musician, Homebrewer, Martial Artist, Spanish Speaker, Painter, Writer, Beer Pancake Blogger, Gamer, Boy, American, Human
Now what?
Tonight's Meetup
● Socializing/Mingling● Intros/Announcements
○ Jobs○ Sponsorship
● Brief Presentation○ Challenge of Mobile○ Understanding Mobile○ Heuristics of Mobile Design
● Workshop!● Afterparty?
Workshop!