usability best practices for adopting responsive design
Post on 06-May-2015
1.482 Views
Preview:
DESCRIPTION
TRANSCRIPT
Usability Best Practices
for Adopting Responsive Design
Cari A. WolfsonPrincipal User Experience ConsultantFocus on U!cariwolfson@usabilityfocus.com
Jennifer SmithWeb Content SpecialistDanya Internationaljsmith@danya.com
Joanne McGovernUSA.gov Content Team LeaderGeneral Services Administrationjoanne.mcgovern@gsa.gov
Moderated by:
Sanjay KoyaniDeputy Director, CommunicationsCenter for Tobacco Products, FDAsanjay.Koyani@fda.gov
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANTCARIWOLFSON@USABILITYFOCUS.COM 2
DESIGNING A RESPONSIVE USER EXPERIENCE
CARI A. WOLFSONPRINCIPAL USER EXPERIENCE CONSULTANTCARIWOLFSON@USABILITYFOCUS.COM
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANTCARIWOLFSON@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 CONSULTANTCARIWOLFSON@USABILITYFOCUS.COM 4
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANTCARIWOLFSON@USABILITYFOCUS.COM 5
Develop once, view anywhere
WWW
URL
ONE URL SINGLE CONTENT
+ + + =ONE CODE
HTML5MEDIA
QUERIESMULTIPLE DEVICES
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANTCARIWOLFSON@USABILITYFOCUS.COM 6
NOT TECHIES
Don’t ask us about:
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANTCARIWOLFSON@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 CONSULTANTCARIWOLFSON@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 CONSULTANTCARIWOLFSON@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 CONSULTANTCARIWOLFSON@USABILITYFOCUS.COM 10
Mobile and tablet traffi c is predicted……to overtake desktop traffic by
2015Source: International Data Corporation
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANTCARIWOLFSON@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 CONSULTANTCARIWOLFSON@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 CONSULTANTCARIWOLFSON@USABILITYFOCUS.COM 13
What is the norm?
Mixed ApproachFixed width for large and mediumFluid width for small
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANTCARIWOLFSON@USABILITYFOCUS.COM 14
Designing for responsive…
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANTCARIWOLFSON@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 CONSULTANTCARIWOLFSON@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 CONSULTANTCARIWOLFSON@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 CONSULTANTCARIWOLFSON@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 CONSULTANTCARIWOLFSON@USABILITYFOCUS.COM 19
Think of content in chunks
› Examine› Prioritize› Reduce
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANTCARIWOLFSON@USABILITYFOCUS.COM 20
Consider responsive patterns
http://bradfrost.github.io/this-is-responsive/patterns.html
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANTCARIWOLFSON@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 CONSULTANTCARIWOLFSON@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 CONSULTANTCARIWOLFSON@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 CONSULTANTCARIWOLFSON@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 CONSULTANTCARIWOLFSON@USABILITYFOCUS.COM 25
Present navigation differently: Off Canvas
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANTCARIWOLFSON@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 CONSULTANTCARIWOLFSON@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=Feed%3A+FunctioningForm+%28LukeW+Ideation+%2B+Design%29
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANTCARIWOLFSON@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=Feed%3A+FunctioningForm+%28LukeW+Ideation+%2B+Design%29
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANTCARIWOLFSON@USABILITYFOCUS.COM 29
Design for touch screens: Swiping
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANTCARIWOLFSON@USABILITYFOCUS.COM 30
Design for touch screens: Paging vs. Swiping
CARI A. WOLFSON | PRINCIPAL USER EXPERIENCE CONSULTANTCARIWOLFSON@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. WolfsonPrincipal User Experience ConsultantFocus on U!cariwolfson@usabilityfocus.com
Jennifer SmithWeb Content SpecialistDanya Internationaljsmith@danya.com
Joanne McGovernUSA.gov Content Team LeaderGeneral Services Administrationjoanne.mcgovern@gsa.gov
Moderated by:
Sanjay KoyaniDeputy Director, CommunicationsCenter for Tobacco Products, FDAsanjay.Koyani@fda.gov
top related