SlideShare a Scribd company logo
1 of 32
Download to read offline
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
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
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
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
ONE URL SINGLE
CONTENT
+ + + =
ONE CODE
HTML5
MEDIA
QUERIES
MULTIPLE
DEVICES
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
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
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
“
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
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
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
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
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
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
• 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
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…
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/
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
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
19
Think of content in chunks
› Examine
› Prioritize
› Reduce
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
20
Consider responsive patterns
http://bradfrost.github.io/this-is-responsive/patterns.html
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.
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).
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.
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.
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANT
CARIWOLFSON@USABILITYFOCUS.COM
25
Present navigation differently: Off
Canvas
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/
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
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
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 vs.
Swiping
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.
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

More Related Content

Viewers also liked

Usability & User Experience 101 - #UX101
Usability & User Experience 101 - #UX101Usability & User Experience 101 - #UX101
Usability & User Experience 101 - #UX101Become Customer-Centric
 
Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...Tania Schlatter
 
User Interface Testing | Best Practices
User Interface Testing | Best Practices User Interface Testing | Best Practices
User Interface Testing | Best Practices David Tzemach
 
Forms usability design best practices experience dynamics web seminar
Forms usability design best practices  experience dynamics web seminarForms usability design best practices  experience dynamics web seminar
Forms usability design best practices experience dynamics web seminarExperience Dynamics
 
Mobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best PracticesMobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best PracticesOXD
 
India Presentation
India PresentationIndia Presentation
India Presentationanujfun
 

Viewers also liked (6)

Usability & User Experience 101 - #UX101
Usability & User Experience 101 - #UX101Usability & User Experience 101 - #UX101
Usability & User Experience 101 - #UX101
 
Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...Visual Usability: principles & practices for designing great web and mobile a...
Visual Usability: principles & practices for designing great web and mobile a...
 
User Interface Testing | Best Practices
User Interface Testing | Best Practices User Interface Testing | Best Practices
User Interface Testing | Best Practices
 
Forms usability design best practices experience dynamics web seminar
Forms usability design best practices  experience dynamics web seminarForms usability design best practices  experience dynamics web seminar
Forms usability design best practices experience dynamics web seminar
 
Mobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best PracticesMobile UI Design – User Centered Design and UI Best Practices
Mobile UI Design – User Centered Design and UI Best Practices
 
India Presentation
India PresentationIndia Presentation
India Presentation
 

Similar to Usability Best Practices for Adopting Responsive Design

Wid boston october 2012 webinar email marketing best practices, leveraging em...
Wid boston october 2012 webinar email marketing best practices, leveraging em...Wid boston october 2012 webinar email marketing best practices, leveraging em...
Wid boston october 2012 webinar email marketing best practices, leveraging em...ASI
 
An Introduction to Usability - Chris Burke: for Barcamp Orlando 2010
An Introduction to Usability - Chris Burke: for Barcamp Orlando 2010An Introduction to Usability - Chris Burke: for Barcamp Orlando 2010
An Introduction to Usability - Chris Burke: for Barcamp Orlando 2010Chris Burke
 
Layar January 29th Webinar - Get More Out of Interactive Print
Layar January 29th Webinar - Get More Out of Interactive PrintLayar January 29th Webinar - Get More Out of Interactive Print
Layar January 29th Webinar - Get More Out of Interactive PrintLayar
 
Whatusersdo - Conversion Conference 2012
Whatusersdo - Conversion Conference 2012Whatusersdo - Conversion Conference 2012
Whatusersdo - Conversion Conference 2012WhatYourUsersDo
 
Little Things Mean a Lot - The Importance of Usability Testing
Little Things Mean a Lot - The Importance of Usability TestingLittle Things Mean a Lot - The Importance of Usability Testing
Little Things Mean a Lot - The Importance of Usability TestingTop Floor Technologies
 
Profitability of Accessibility WordPress Accessibility Day 2020
Profitability of Accessibility WordPress Accessibility Day 2020Profitability of Accessibility WordPress Accessibility Day 2020
Profitability of Accessibility WordPress Accessibility Day 2020Sumner M. Davenport
 
The Why and How of Usability and User Experience (UX) Testing
The Why and How of Usability and User Experience (UX) TestingThe Why and How of Usability and User Experience (UX) Testing
The Why and How of Usability and User Experience (UX) TestingTechWell
 
Layar March 5th Webinar - Get More Out of Interactive Print
Layar March 5th Webinar - Get More Out of Interactive PrintLayar March 5th Webinar - Get More Out of Interactive Print
Layar March 5th Webinar - Get More Out of Interactive PrintLayar
 
The Future of Accessibility - presented at Build the Perfect Council Website ...
The Future of Accessibility - presented at Build the Perfect Council Website ...The Future of Accessibility - presented at Build the Perfect Council Website ...
The Future of Accessibility - presented at Build the Perfect Council Website ...AbilityNet
 
20 Tips for High Performance Responsive Design that the Pros Won’t Tell You
20 Tips for High Performance Responsive Design that the Pros Won’t Tell You20 Tips for High Performance Responsive Design that the Pros Won’t Tell You
20 Tips for High Performance Responsive Design that the Pros Won’t Tell YouPatrick Collins
 
Design your website with your mission in mind
Design your website with your mission in mindDesign your website with your mission in mind
Design your website with your mission in mindMichael Beahm
 
Designing for Multiple Channels
Designing for Multiple ChannelsDesigning for Multiple Channels
Designing for Multiple ChannelsJulie Guinn
 
10 Webdesign Trends for 2014 by Vanksen
10 Webdesign Trends for 2014 by Vanksen10 Webdesign Trends for 2014 by Vanksen
10 Webdesign Trends for 2014 by VanksenVanksen
 
Doron Reuveni - The Mobile App Quality Challenge - EuroSTAR 2010
Doron Reuveni - The Mobile App Quality Challenge - EuroSTAR 2010Doron Reuveni - The Mobile App Quality Challenge - EuroSTAR 2010
Doron Reuveni - The Mobile App Quality Challenge - EuroSTAR 2010TEST Huddle
 
Evaluating your Website - FDL ACU presentation by BrownBoots Interactive
Evaluating your Website - FDL ACU presentation by BrownBoots InteractiveEvaluating your Website - FDL ACU presentation by BrownBoots Interactive
Evaluating your Website - FDL ACU presentation by BrownBoots InteractiveBrownBoots Interactive, Inc.
 
Erase and Rewind - Open Web Camp 2015
Erase and Rewind - Open Web Camp 2015Erase and Rewind - Open Web Camp 2015
Erase and Rewind - Open Web Camp 2015Christian Heilmann
 
Get More Out of Interactive Print - May 2014
Get More Out of Interactive Print - May 2014Get More Out of Interactive Print - May 2014
Get More Out of Interactive Print - May 2014Layar
 
Responsive Website Design for Ecommerce - Guiding Principles - PRWD - Convers...
Responsive Website Design for Ecommerce - Guiding Principles - PRWD - Convers...Responsive Website Design for Ecommerce - Guiding Principles - PRWD - Convers...
Responsive Website Design for Ecommerce - Guiding Principles - PRWD - Convers...PRWD
 
Web Design Trends 2017
Web Design Trends 2017Web Design Trends 2017
Web Design Trends 2017Lewis Lin 🦊
 

Similar to Usability Best Practices for Adopting Responsive Design (20)

Wid boston october 2012 webinar email marketing best practices, leveraging em...
Wid boston october 2012 webinar email marketing best practices, leveraging em...Wid boston october 2012 webinar email marketing best practices, leveraging em...
Wid boston october 2012 webinar email marketing best practices, leveraging em...
 
An Introduction to Usability - Chris Burke: for Barcamp Orlando 2010
An Introduction to Usability - Chris Burke: for Barcamp Orlando 2010An Introduction to Usability - Chris Burke: for Barcamp Orlando 2010
An Introduction to Usability - Chris Burke: for Barcamp Orlando 2010
 
Layar January 29th Webinar - Get More Out of Interactive Print
Layar January 29th Webinar - Get More Out of Interactive PrintLayar January 29th Webinar - Get More Out of Interactive Print
Layar January 29th Webinar - Get More Out of Interactive Print
 
Whatusersdo - Conversion Conference 2012
Whatusersdo - Conversion Conference 2012Whatusersdo - Conversion Conference 2012
Whatusersdo - Conversion Conference 2012
 
Little Things Mean a Lot - The Importance of Usability Testing
Little Things Mean a Lot - The Importance of Usability TestingLittle Things Mean a Lot - The Importance of Usability Testing
Little Things Mean a Lot - The Importance of Usability Testing
 
Profitability of Accessibility WordPress Accessibility Day 2020
Profitability of Accessibility WordPress Accessibility Day 2020Profitability of Accessibility WordPress Accessibility Day 2020
Profitability of Accessibility WordPress Accessibility Day 2020
 
The Why and How of Usability and User Experience (UX) Testing
The Why and How of Usability and User Experience (UX) TestingThe Why and How of Usability and User Experience (UX) Testing
The Why and How of Usability and User Experience (UX) Testing
 
Layar March 5th Webinar - Get More Out of Interactive Print
Layar March 5th Webinar - Get More Out of Interactive PrintLayar March 5th Webinar - Get More Out of Interactive Print
Layar March 5th Webinar - Get More Out of Interactive Print
 
The Future of Accessibility - presented at Build the Perfect Council Website ...
The Future of Accessibility - presented at Build the Perfect Council Website ...The Future of Accessibility - presented at Build the Perfect Council Website ...
The Future of Accessibility - presented at Build the Perfect Council Website ...
 
20 Tips for High Performance Responsive Design that the Pros Won’t Tell You
20 Tips for High Performance Responsive Design that the Pros Won’t Tell You20 Tips for High Performance Responsive Design that the Pros Won’t Tell You
20 Tips for High Performance Responsive Design that the Pros Won’t Tell You
 
Design your website with your mission in mind
Design your website with your mission in mindDesign your website with your mission in mind
Design your website with your mission in mind
 
Designing for Multiple Channels
Designing for Multiple ChannelsDesigning for Multiple Channels
Designing for Multiple Channels
 
10 Webdesign Trends for 2014 by Vanksen
10 Webdesign Trends for 2014 by Vanksen10 Webdesign Trends for 2014 by Vanksen
10 Webdesign Trends for 2014 by Vanksen
 
Doron Reuveni - The Mobile App Quality Challenge - EuroSTAR 2010
Doron Reuveni - The Mobile App Quality Challenge - EuroSTAR 2010Doron Reuveni - The Mobile App Quality Challenge - EuroSTAR 2010
Doron Reuveni - The Mobile App Quality Challenge - EuroSTAR 2010
 
Evaluating your Website - FDL ACU presentation by BrownBoots Interactive
Evaluating your Website - FDL ACU presentation by BrownBoots InteractiveEvaluating your Website - FDL ACU presentation by BrownBoots Interactive
Evaluating your Website - FDL ACU presentation by BrownBoots Interactive
 
Erase and Rewind - Open Web Camp 2015
Erase and Rewind - Open Web Camp 2015Erase and Rewind - Open Web Camp 2015
Erase and Rewind - Open Web Camp 2015
 
Umn012513
Umn012513Umn012513
Umn012513
 
Get More Out of Interactive Print - May 2014
Get More Out of Interactive Print - May 2014Get More Out of Interactive Print - May 2014
Get More Out of Interactive Print - May 2014
 
Responsive Website Design for Ecommerce - Guiding Principles - PRWD - Convers...
Responsive Website Design for Ecommerce - Guiding Principles - PRWD - Convers...Responsive Website Design for Ecommerce - Guiding Principles - PRWD - Convers...
Responsive Website Design for Ecommerce - Guiding Principles - PRWD - Convers...
 
Web Design Trends 2017
Web Design Trends 2017Web Design Trends 2017
Web Design Trends 2017
 

More from UXPA International

UXPA 2023: Start Strong - Lessons learned from associate programs to platform...
UXPA 2023: Start Strong - Lessons learned from associate programs to platform...UXPA 2023: Start Strong - Lessons learned from associate programs to platform...
UXPA 2023: Start Strong - Lessons learned from associate programs to platform...UXPA International
 
UXPA 2023: Disrupting Inaccessibility: Applying A11Y-Focused Discovery & Idea...
UXPA 2023: Disrupting Inaccessibility: Applying A11Y-Focused Discovery & Idea...UXPA 2023: Disrupting Inaccessibility: Applying A11Y-Focused Discovery & Idea...
UXPA 2023: Disrupting Inaccessibility: Applying A11Y-Focused Discovery & Idea...UXPA International
 
UXPA 2023 Poster: ESG & Sustainable UX
UXPA 2023 Poster: ESG & Sustainable UXUXPA 2023 Poster: ESG & Sustainable UX
UXPA 2023 Poster: ESG & Sustainable UXUXPA International
 
UXPA 2023 Poster: The Two Tracks of UX Under Agile: Tactical and Strategic
UXPA 2023 Poster: The Two Tracks of UX Under Agile: Tactical and StrategicUXPA 2023 Poster: The Two Tracks of UX Under Agile: Tactical and Strategic
UXPA 2023 Poster: The Two Tracks of UX Under Agile: Tactical and StrategicUXPA International
 
UXPA 2023: Data science and UX: Smarter together
UXPA 2023: Data science and UX: Smarter togetherUXPA 2023: Data science and UX: Smarter together
UXPA 2023: Data science and UX: Smarter togetherUXPA International
 
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden Insights
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden InsightsUXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden Insights
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden InsightsUXPA International
 
UXPA 2023 Poster: Are virtual spaces the future of video conferencing?
UXPA 2023 Poster: Are virtual spaces the future of video conferencing?UXPA 2023 Poster: Are virtual spaces the future of video conferencing?
UXPA 2023 Poster: Are virtual spaces the future of video conferencing?UXPA International
 
UXPA 2023: Learn how to get over personas by swiping right on user roles
UXPA 2023: Learn how to get over personas by swiping right on user rolesUXPA 2023: Learn how to get over personas by swiping right on user roles
UXPA 2023: Learn how to get over personas by swiping right on user rolesUXPA International
 
UXPA 2023 Poster: Pocket Research Guide - Empower your Solution and Foster Cu...
UXPA 2023 Poster: Pocket Research Guide - Empower your Solution and Foster Cu...UXPA 2023 Poster: Pocket Research Guide - Empower your Solution and Foster Cu...
UXPA 2023 Poster: Pocket Research Guide - Empower your Solution and Foster Cu...UXPA International
 
UXPA 2023: Experience Maps - A designer's framework for working in Agile team...
UXPA 2023: Experience Maps - A designer's framework for working in Agile team...UXPA 2023: Experience Maps - A designer's framework for working in Agile team...
UXPA 2023: Experience Maps - A designer's framework for working in Agile team...UXPA International
 
UXPA 2023 Poster: Atomic Research in Practice: Using a Feedback Repository to...
UXPA 2023 Poster: Atomic Research in Practice: Using a Feedback Repository to...UXPA 2023 Poster: Atomic Research in Practice: Using a Feedback Repository to...
UXPA 2023 Poster: Atomic Research in Practice: Using a Feedback Repository to...UXPA International
 
UXPA 2023 Poster: Leveraging Dial Testing To Measure Real-Time User Frustrati...
UXPA 2023 Poster: Leveraging Dial Testing To Measure Real-Time User Frustrati...UXPA 2023 Poster: Leveraging Dial Testing To Measure Real-Time User Frustrati...
UXPA 2023 Poster: Leveraging Dial Testing To Measure Real-Time User Frustrati...UXPA International
 
UXPA 2023: UX Enterprise Story: How to apply a UX process to a company withou...
UXPA 2023: UX Enterprise Story: How to apply a UX process to a company withou...UXPA 2023: UX Enterprise Story: How to apply a UX process to a company withou...
UXPA 2023: UX Enterprise Story: How to apply a UX process to a company withou...UXPA International
 
UXPA 2023: High-Fives over Zoom: Creating a Remote-First Creative Team
UXPA 2023: High-Fives over Zoom: Creating a Remote-First Creative TeamUXPA 2023: High-Fives over Zoom: Creating a Remote-First Creative Team
UXPA 2023: High-Fives over Zoom: Creating a Remote-First Creative TeamUXPA International
 
UXPA 2023: Behind the Bias: Dissecting human shortcuts for better research & ...
UXPA 2023: Behind the Bias: Dissecting human shortcuts for better research & ...UXPA 2023: Behind the Bias: Dissecting human shortcuts for better research & ...
UXPA 2023: Behind the Bias: Dissecting human shortcuts for better research & ...UXPA International
 
UXPA 2023 Poster: Facilitating fun - How UX helps teams collaborate and have ...
UXPA 2023 Poster: Facilitating fun - How UX helps teams collaborate and have ...UXPA 2023 Poster: Facilitating fun - How UX helps teams collaborate and have ...
UXPA 2023 Poster: Facilitating fun - How UX helps teams collaborate and have ...UXPA International
 
UXPA 2023 Poster: Improving the Internal and External User Experience of a Fe...
UXPA 2023 Poster: Improving the Internal and External User Experience of a Fe...UXPA 2023 Poster: Improving the Internal and External User Experience of a Fe...
UXPA 2023 Poster: Improving the Internal and External User Experience of a Fe...UXPA International
 
UXPA 2023 Poster: 5 Key Findings from Moderated Accessibility Testing with Sc...
UXPA 2023 Poster: 5 Key Findings from Moderated Accessibility Testing with Sc...UXPA 2023 Poster: 5 Key Findings from Moderated Accessibility Testing with Sc...
UXPA 2023 Poster: 5 Key Findings from Moderated Accessibility Testing with Sc...UXPA International
 
UXPA 2023: Lessons for new managers
UXPA 2023: Lessons for new managersUXPA 2023: Lessons for new managers
UXPA 2023: Lessons for new managersUXPA International
 

More from UXPA International (20)

UXPA 2023: Start Strong - Lessons learned from associate programs to platform...
UXPA 2023: Start Strong - Lessons learned from associate programs to platform...UXPA 2023: Start Strong - Lessons learned from associate programs to platform...
UXPA 2023: Start Strong - Lessons learned from associate programs to platform...
 
UXPA 2023: Disrupting Inaccessibility: Applying A11Y-Focused Discovery & Idea...
UXPA 2023: Disrupting Inaccessibility: Applying A11Y-Focused Discovery & Idea...UXPA 2023: Disrupting Inaccessibility: Applying A11Y-Focused Discovery & Idea...
UXPA 2023: Disrupting Inaccessibility: Applying A11Y-Focused Discovery & Idea...
 
UXPA 2023 Poster: ESG & Sustainable UX
UXPA 2023 Poster: ESG & Sustainable UXUXPA 2023 Poster: ESG & Sustainable UX
UXPA 2023 Poster: ESG & Sustainable UX
 
UXPA 2023 Poster: The Two Tracks of UX Under Agile: Tactical and Strategic
UXPA 2023 Poster: The Two Tracks of UX Under Agile: Tactical and StrategicUXPA 2023 Poster: The Two Tracks of UX Under Agile: Tactical and Strategic
UXPA 2023 Poster: The Two Tracks of UX Under Agile: Tactical and Strategic
 
UXPA 2023: Data science and UX: Smarter together
UXPA 2023: Data science and UX: Smarter togetherUXPA 2023: Data science and UX: Smarter together
UXPA 2023: Data science and UX: Smarter together
 
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden Insights
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden InsightsUXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden Insights
UXPA 2023: UX Fracking: Using Mixed Methods to Extract Hidden Insights
 
UXPA 2023 Poster: Are virtual spaces the future of video conferencing?
UXPA 2023 Poster: Are virtual spaces the future of video conferencing?UXPA 2023 Poster: Are virtual spaces the future of video conferencing?
UXPA 2023 Poster: Are virtual spaces the future of video conferencing?
 
UXPA 2023: Learn how to get over personas by swiping right on user roles
UXPA 2023: Learn how to get over personas by swiping right on user rolesUXPA 2023: Learn how to get over personas by swiping right on user roles
UXPA 2023: Learn how to get over personas by swiping right on user roles
 
UXPA 2023: F@#$ User Personas
UXPA 2023: F@#$ User PersonasUXPA 2023: F@#$ User Personas
UXPA 2023: F@#$ User Personas
 
UXPA 2023 Poster: Pocket Research Guide - Empower your Solution and Foster Cu...
UXPA 2023 Poster: Pocket Research Guide - Empower your Solution and Foster Cu...UXPA 2023 Poster: Pocket Research Guide - Empower your Solution and Foster Cu...
UXPA 2023 Poster: Pocket Research Guide - Empower your Solution and Foster Cu...
 
UXPA 2023: Experience Maps - A designer's framework for working in Agile team...
UXPA 2023: Experience Maps - A designer's framework for working in Agile team...UXPA 2023: Experience Maps - A designer's framework for working in Agile team...
UXPA 2023: Experience Maps - A designer's framework for working in Agile team...
 
UXPA 2023 Poster: Atomic Research in Practice: Using a Feedback Repository to...
UXPA 2023 Poster: Atomic Research in Practice: Using a Feedback Repository to...UXPA 2023 Poster: Atomic Research in Practice: Using a Feedback Repository to...
UXPA 2023 Poster: Atomic Research in Practice: Using a Feedback Repository to...
 
UXPA 2023 Poster: Leveraging Dial Testing To Measure Real-Time User Frustrati...
UXPA 2023 Poster: Leveraging Dial Testing To Measure Real-Time User Frustrati...UXPA 2023 Poster: Leveraging Dial Testing To Measure Real-Time User Frustrati...
UXPA 2023 Poster: Leveraging Dial Testing To Measure Real-Time User Frustrati...
 
UXPA 2023: UX Enterprise Story: How to apply a UX process to a company withou...
UXPA 2023: UX Enterprise Story: How to apply a UX process to a company withou...UXPA 2023: UX Enterprise Story: How to apply a UX process to a company withou...
UXPA 2023: UX Enterprise Story: How to apply a UX process to a company withou...
 
UXPA 2023: High-Fives over Zoom: Creating a Remote-First Creative Team
UXPA 2023: High-Fives over Zoom: Creating a Remote-First Creative TeamUXPA 2023: High-Fives over Zoom: Creating a Remote-First Creative Team
UXPA 2023: High-Fives over Zoom: Creating a Remote-First Creative Team
 
UXPA 2023: Behind the Bias: Dissecting human shortcuts for better research & ...
UXPA 2023: Behind the Bias: Dissecting human shortcuts for better research & ...UXPA 2023: Behind the Bias: Dissecting human shortcuts for better research & ...
UXPA 2023: Behind the Bias: Dissecting human shortcuts for better research & ...
 
UXPA 2023 Poster: Facilitating fun - How UX helps teams collaborate and have ...
UXPA 2023 Poster: Facilitating fun - How UX helps teams collaborate and have ...UXPA 2023 Poster: Facilitating fun - How UX helps teams collaborate and have ...
UXPA 2023 Poster: Facilitating fun - How UX helps teams collaborate and have ...
 
UXPA 2023 Poster: Improving the Internal and External User Experience of a Fe...
UXPA 2023 Poster: Improving the Internal and External User Experience of a Fe...UXPA 2023 Poster: Improving the Internal and External User Experience of a Fe...
UXPA 2023 Poster: Improving the Internal and External User Experience of a Fe...
 
UXPA 2023 Poster: 5 Key Findings from Moderated Accessibility Testing with Sc...
UXPA 2023 Poster: 5 Key Findings from Moderated Accessibility Testing with Sc...UXPA 2023 Poster: 5 Key Findings from Moderated Accessibility Testing with Sc...
UXPA 2023 Poster: 5 Key Findings from Moderated Accessibility Testing with Sc...
 
UXPA 2023: Lessons for new managers
UXPA 2023: Lessons for new managersUXPA 2023: Lessons for new managers
UXPA 2023: Lessons for new managers
 

Recently uploaded

UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 

Recently uploaded (19)

UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 

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