0
Usability Best Practices
for Adopting Responsive Design
Cari A. Wolfson
Principal User Experience Consultant
Focus on U!
c...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
2
DESIGNING A RESPONSIVE USER EXPERI...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
3
RESPONSIVE DESIGN
• whole web desi...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
4
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
5
Develop once, view anywhere
URL
ON...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
6
NOT TECHIES
Don’t ask us about:
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
7
You can’t talk about responsive
de...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
8
Why Responsive?
Not every mobile d...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
9
Facebook…
“… we actually have more...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
10
Mobile and tablet traffic is pred...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
11
Mashable
2013: The year of respon...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
12
Let’s take a step back…
Fluid: Us...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
13
What is the norm?
Mixed Approach
...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
14
Designing for responsive…
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
15
Consider a Mobile First approach
...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
16
…prioritize content and then work...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
17
But if you must…
…here are some t...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
18
Designing for responsive
…just a ...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
19
Think of content in chunks
› Exam...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
20
Consider responsive patterns
http...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
21
Present navigation differently: D...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
22
Present navigation differently: D...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
23
Present navigation differently: F...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
24
Present navigation differently:
A...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
25
Present navigation differently: O...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
26
Design for touch screens: Size of...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
27
Design for touch screens: Placeme...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
28
Design for touch screens: Placeme...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
29
Design for touch screens: Swiping
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
30
Design for touch screens: Paging ...
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
31
Test often and iteratively
› Cons...
Usability Best Practices
for Adopting Responsive Design
Cari A. Wolfson
Principal User Experience Consultant
Focus on U!
c...
Upcoming SlideShare
Loading in...5
×

Usability Best Practices for Adopting Responsive Design

1,660

Published on

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.

Published in: Design, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,660
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
45
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Usability Best Practices for Adopting Responsive Design"

  1. 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. 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. 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. 4. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT CARIWOLFSON@USABILITYFOCUS.COM 4
  5. 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. 6. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT CARIWOLFSON@USABILITYFOCUS.COM 6 NOT TECHIES Don’t ask us about:
  7. 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. 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. 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. 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. 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. 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. 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. 14. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT CARIWOLFSON@USABILITYFOCUS.COM 14 Designing for responsive…
  15. 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. 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. 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. 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. 19. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT CARIWOLFSON@USABILITYFOCUS.COM 19 Think of content in chunks › Examine › Prioritize › Reduce
  20. 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. 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. 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. 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. 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. 25. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT CARIWOLFSON@USABILITYFOCUS.COM 25 Present navigation differently: Off Canvas
  26. 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. 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. 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. 29. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT CARIWOLFSON@USABILITYFOCUS.COM 29 Design for touch screens: Swiping
  30. 30. CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT CARIWOLFSON@USABILITYFOCUS.COM 30 Design for touch screens: Paging vs. Swiping
  31. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×