UXPA 2013 Annual Conference July 10, 2013 3:00 - 4:00pm ET by Janice Nall, Cari Wolfson, Jennifer Smith
The ever-changing consumer-driven digital landscape presents government agencies an opportunity to exceed expectations and a challenge to ensure those expectations are met anytime, anyplace and anywhere for everyone. Join our panel of experts to learn the key elements of usability and best practices in the realm of responsive design and app development for government agencies.
Usability Best Practices for Adopting Responsive Design
1. Usability Best Practices
for Adopting Responsive Design
Cari A. Wolfson
Principal User Experience Consultant
Focus on U!
cariwolfson@usabilityfocus.com
Jennifer Smith
Web Content Specialist
Danya International
jsmith@danya.com
Joanne McGovern
USA.gov Content Team Leader
General Services Administration
joanne.mcgovern@gsa.gov
Moderated by:
Sanjay Koyani
Deputy Director, Communications
Center for Tobacco Products, FDA
sanjay.Koyani@fda.gov
2. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
2
DESIGNING A RESPONSIVE USER EXPERIENCE
CARI A. WOLFSON
PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
3. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
3
RESPONSIVE DESIGN
• whole web design
• one site that works for every screen
• one web
• responds to available screen size
• optimal display no matter the size
• device independent
• develop once, view anywhere
• design responds to the user’s behavior and environment
4. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
4
5. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
5
Develop once, view anywhere
URL
ONE URL SINGLE
CONTENT
+ + + =
ONE CODE
HTML5
MEDIA
QUERIES
MULTIPLE
DEVICES
6. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
6
NOT TECHIES
Don’t ask us about:
7. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
7
You can’t talk about responsive
design….
… and not mention Ethan Marcotte and The Boston Globe
Image from: http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
http://alistapart.com/article/responsive-web-design
8. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
8
Why Responsive?
Not every mobile device
will have your app on it,
but every mobile device
will have a browser. ”
-- Jason Grigsby
“
9. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
9
Facebook…
“… we actually have more people on a
daily basis using mobile web
Facebook than we have using our iOS
and Andoid apps combined.”
Source: Mark Zuckerbug at Disrupt 2012
10. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
10
Mobile and tablet traffic is predicted…
…to overtake desktop traffic by
2015
Source: International Data Corporation
11. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
11
Mashable
2013: The year of responsive design
http://mashable.com/2012/12/11/responsive-web-design/
30% of traffic is mobile, may
exceed 50% by end of the year
12. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
12
Let’s take a step back…
Fluid: Uses percentages to scale up or down
Fixed: Doesn’t change or scale as pixels are set
Adaptive: Changes to fit a predetermined set of
screens
Responsive: Changes fluidly & responds to any
screens
13. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
13
What is the norm?
Mixed Approach
Fixed width for large and medium
Fluid width for small
14. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
14
Designing for responsive…
15. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
15
Consider a Mobile First approach
• optimize for most challenging viewing experiences—a
small screen and a slow connection
• analyze content and performance metrics to determine
what content is being utilized
• prioritize content for where, when and how it will be used
on each device
• zero-in on what matters most to users
• eliminate unnecessary content and images, which can
impact the user experience and speed
16. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
16
…prioritize content and then work on layouts.
…as well as all of your design decisions.
…device agnostic.
Let content determine your
breakpoints…
Think of content devoid of an
interface…
Breakpoints should be…
17. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
17
But if you must…
…here are some targets as a place to start:
› 320px
› 480px
› 600px
› 768px
› 900px
› 1200px
http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
18. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
18
Designing for responsive
…just a few tips
› Think of content in chunks
› Consider responsive patterns
› Present navigation differently
› Design for touchscreens
› Follow best practices for readability
› Ensure content is usable
› Test often and iteratively
› Need for more best practices and research
19. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
19
Think of content in chunks
› Examine
› Prioritize
› Reduce
20. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
20
Consider responsive patterns
http://bradfrost.github.io/this-is-responsive/patterns.html
21. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
21
Present navigation differently: Drop
downs
Starbucks uses a X
to replace the
menu button with
a close button.
22. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
22
Present navigation differently: Drop
downs
The Earth Hour
(French)
website uses a
down arrow
and then
replaces the
down arrow
with a close
button (X).
23. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
23
Present navigation differently: Fly In
On the Sony website, the
title appears in all caps in a
slightly darker shade of
gray and the sub-items
appear in a slightly lighter
shade of gray.
24. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
24
Present navigation differently:
Accordions
On the Microsoft website,
the navigation is basically a
list of nested accordion
menus.
25. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
25
Present navigation differently: Off
Canvas
26. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
26
Design for touch screens: Size of
Targets
• Apple recommends 44 x 44 points (~59 x 59 pixels) for
target sizes (Approximate size of average adult fingertip)
http://uxdesign.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/
27. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
27
Design for touch screens: Placement of
Targets
http://www.lukew.com/ff/entry.asp?1649&utm_source=feedburner&utm_medium=feed&utm_campaign=Fee
d%3A+FunctioningForm+%28LukeW+Ideation+%2B+Design%29
28. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
28
Design for touch screens: Placement of
Targets
http://www.lukew.com/ff/entry.asp?1649&utm_source=feedburner&utm_medium=feed&utm_campaign=Fee
d%3A+FunctioningForm+%28LukeW+Ideation+%2B+Design%29
29. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
29
Design for touch screens: Swiping
30. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
30
Design for touch screens: Paging vs.
Swiping
31. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
31
Test often and iteratively
› Consider the major breakpoints: Smartphone, small
tablet, large tablet
› Consider the orientation that users hold their devices
› Ensure users use their own devices
› Need more comparative evaluations to help us
guide standards, guidelines, conventions and best
practices.
32. Usability Best Practices
for Adopting Responsive Design
Cari A. Wolfson
Principal User Experience Consultant
Focus on U!
cariwolfson@usabilityfocus.com
Jennifer Smith
Web Content Specialist
Danya International
jsmith@danya.com
Joanne McGovern
USA.gov Content Team Leader
General Services Administration
joanne.mcgovern@gsa.gov
Moderated by:
Sanjay Koyani
Deputy Director, Communications
Center for Tobacco Products, FDA
sanjay.Koyani@fda.gov