Slides from a presentation/workshop given at the April 2013 UXMad meetup.

1. How to "mobilize"
your website
UXMad
4/18/13

2. Schedule

3. Tonight's Meetup
● Socializing/Mingling
● Intros/Announcements
○ Jobs
○ Sponsorship
● Brief Presentation
○ Challenge of Mobile
○ Understanding Mobile
○ Heuristics of Mobile Design
● Workshop!
● Afterparty?

4. About Me

5. Brad Orego
me@bradorego.com
@bradorego
B.S. in Computer Science, B.A. in Psychology
Freelance UX Designer/Web Developer
UXMad Meetup Co-Organizer
Dancer, Curler, Ultimate-er, Cyclist, Beer-batter pancake blogger

6. Special Thanks to Hampton
@hcatlin

7. Challenge of Mobile

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

9. Challenge of Mobile

10. Understanding Mobile

11. 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?

12. What do we do about it?

13. A Loose Heuristic for Mobile Design
1. Simplicity is a requirement
2. Understand, then optimize, your core value
3. "Where" is more important than "who"
4. Assume terrible dexterity
5. Footer == dead zone
6. Assume distracted, disrupted, intermittent
use
7. Good experience is a subset of performance
8. Provide an escape route
9. Test on as many devices as possible

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

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

16. 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/

17. 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?

18. 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?

19. 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?

20. "Environmental Psychology"...?

21. IV. Assume terrible dexterity
● Give enough space
● Make them big enough
○ Apple suggests 44px x 44px minimum
● Hampton suggests giving it to....

22. IV. Assume terrible dexterity
Or, if you're lucky...

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

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

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

26. VII. Experience is a subset of performance
Plenty of information/guides...

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

28. VIII. Provide an escape route

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

30. IX. Test on as many devices as possible

31. A Loose Heuristic for Mobile Design
1. Simplicity is a requirement
2. Understand, then optimize, your core value
3. "Where" is more important than "who"
4. Assume terrible dexterity
5. Footer == dead zone
6. Assume distracted, disrupted, intermittent
use
7. Good experience is a subset of performance
8. Provide an escape route
9. Test on as many devices as possible

32. Me!
Brad Orego
me@bradorego.com
@bradorego
B.S. in Computer Science, B.A. in Psychology
Freelance UX Designer/Web Developer
UXMad Meetup Co-Organizer
Entrepreneur
Dancer, Curler, Ultimate-er, Runner, Cyclist, Musician,
Homebrewer, Martial Artist, Spanish Speaker, Painter, Writer, Beer Pancake Blogger, Gamer, Boy, American, Human

33. Now what?

34. Tonight's Meetup
● Socializing/Mingling
● Intros/Announcements
○ Jobs
○ Sponsorship
● Brief Presentation
○ Challenge of Mobile
○ Understanding Mobile
○ Heuristics of Mobile Design
● Workshop!
● Afterparty?

35. Workshop!