Usability Best Practices for Adopting Responsive Design

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

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

Develop once, view anywhere

ONE URL SINGLE CONTENT

+ + + =ONE CODE

HTML5MEDIA

QUERIESMULTIPLE DEVICES

NOT TECHIES

Don’t ask us about:

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

Why Responsive?

Not every mobile device will have your app on it, but every mobile device will have a browser. ”

-- Jason Grigsby

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

Mobile and tablet traffi c is predicted……to overtake desktop traffic by

2015Source: International Data Corporation

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

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

What is the norm?

Mixed ApproachFixed width for large and mediumFluid width for small

Designing for responsive…

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

…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…

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/

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

Think of content in chunks

› Examine› Prioritize› Reduce

Consider responsive patterns

http://bradfrost.github.io/this-is-responsive/patterns.html

Present navigation differently: Drop downs

Starbucks uses a X to replace the menu button with a close button.

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

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.

Present navigation differently: Accordions

On the Microsoft website, the navigation is basically a list of nested accordion menus.

Present navigation differently: Off Canvas

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/

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

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

Design for touch screens: Swiping

Design for touch screens: Paging vs. Swiping

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

Usability Best Practices for Adopting Responsive Design

Design

Transcript of Usability Best Practices for Adopting Responsive Design

Personal Usability Constructs: How People Construe Usability

User Experience Design Methodology - UX Team€¦ · Responsive HTML/CSS UX Assets Technical Spec Agile Development Wireframes Usability Tests A/B & Multivariate Tests Research &

USABILITY TESTING - Akendi UK · > Reasons to conduct usability testing > Types of usability testing > Pros and cons of expert vs. user-based usability evaluation > Fitting usability

Usability & Usability Testing

Geoportal Usability Evaluation Geoportal Usability Evaluation

Usability, Affordance, and Usability Principlesuser.ceng.metu.edu.tr/~tcan/se705_s0910/Schedule/se705_week2.pdf · Usability, Affordance, and Usability Principles Visual affordances

Engineering ane Mah ae 3D Moing Printing ooics · Students explore layout strategies, color theory, responsive web design, usability and visual weight and use visual style guidelines,

Website Strategies Webinar - Web Design, Content Marketing, Usability, Responsive Web Design

The Usability of Usability

Responsive Website Design | Responsive Design

An Overview of Usability Evaluation #15 1. Outline What is usability evaluation ? Why perform usability evaluation ? Types of usability evaluations.

Evaluation Assignment 4 Usability Testing Plan...1. Usability Test Plan Usability test plan is required to meet the need of proper structure of usability testing. Usability testing

Name of Adopting Entity / Fiscal Body Type of Adopting ...

Usability Testing. What is usability testing for?

Responsive Content, Responsive Documents, Responsive PDF - Innovation durch Barrierefreiheit

Usability Engineering. 2 Contents Usability Engineering Know the user Task analysis Usability metrics The usability engineering process.

Hallway Usability Testing, First Fridays Usability Program

Usability, Affordance, and Usability Principlesuser.ceng.metu.edu.tr/~tcan/se542_f1516/Schedule/week1... · 2015-09-30 · Usability, Affordance, and Usability Principles Visual affordances

What is Usability? Usability Testingsugih/courses/eecs441/f17/13-Usability… · Usability Test Prototypes • Paper • Device • Other Tools • InVision • WhatFX Accessibility

Responsive Redesign€¦ · 3 n | X Usability Redesign Where to Start: Butterick’s practical typography explains that when considering typography, it is imperative to understand