Full day training course offered at Usability Week London

Scaling User Interfaces

Usability for Responsive Web Design and Other Approaches to Designing Websites for Multiple Devices

Your website cannot be designed only for a desktop experience. But designing purely for mobile phones is just as bad. In today’s multi-device world customers access the same site on smartphones, tablets, or desktop computers and expect the user experience to be optimized for them right now, on whatever platform they’re currently using. So how do you make a website that is usable, no matter what device your customer has in front of them?

Whether you’re using responsive design (RWD) or creating variations of your site for different devices, you need to know what’s important when adapting designs for different device sizes, screen sizes, input styles, output styles, and context of use. What content makes sense? How should navigation change across different screens? What should be the same and what should be different?

In this day-long seminar we discuss design similarities and differences across platforms and analyze the usability of many popular responsive-design patterns.

What We Don't Cover

The seminar is presented from a user-experience angle: that is, how to design what users see and do. We do not discuss implementation, such as the coding techniques that may be used to make a computer run these designs.

Topics

  • Behavioral differences between devices: desktop, tablets, and phones
  • Principles of good design
    • Cross-platform principles
    • Platform-specific principles
    • Calculating opportunity and interaction costs: how they vary across devices
  • Get answers for your strategy
    • Is responsive design right for you?
    • Responsive vs. adaptive design
    • Mobile first or desktop first?
  • Determine what  content and features to include and remove in your designs
  • Designing for a continuous experience across multiple devices
    • How to scale a UI up when there’s more screen space
    • How to scale a UI down for a smaller screen
  • How to scale interaction techniques for different  devices, while maximizing consistency in the user experience
    • Mouse vs. touch screen
    • How to deal with desktop features that don’t work well on other devices
      • Lightboxes, popups, modal dialogs
      • Inline scrolling
      • Fixed layouts and positioning
      • Hover text
  • Prioritize content on the page:
    • What information goes first
    • What information should be grouped together
    • What images are necessary or helpful
    • What navigation needs to be visible
    • What calls to action are appropriate across devices
  • Responsive-design patterns and their usability
    • Page layout and scrolling: grids and fluid layout patterns
    • Navigation and search: Accordion, hamburger menu, sliding menu, multiple navigation tiers 
    • Form design
    • Maps
  • Adaptive, reusable content:
    • How to write text so that it works across devices
    • Responsive images

Format

The basis of the course is a lecture format with a few group exercises to reinforce the learned principles and guidelines.

The course also includes:

  • Findings from our own usability studies
  • Videos from usability testing of people's behavior in response to a mobile design
  • Screenshots of mobile designs that work and don’t work, and why
  • Opportunities to ask questions and get answers

Note

Cross-Channel User Experience is a related class focused on creating a seamless and usable experience across multiple channels, including the web, mobile devices, social media, email, phone, and online chat. That course touches on the topic of designing for multiple devices within the context of the larger user experience, which can include many more touch points.

Scaling User Interfaces (this course) is focused on scaling the same interface across multiple devices and screen sizes including desktops, tablets and phones.

Companion Course

Mobile User Experience is a companion course to Scaling User Interfaces. Each course can be taken independently. Mobile User Experience covers:

  • Best practices for creating user-friendly mobile interfaces for phones and tablets
  • Apps versus websites
  • Considerations for touchscreen designs

Instructor

Amy Schade

Amy Schade works with clients large and small in a variety of industries such as telecommunications, e-commerce, government, travel, automotive, music, publishing, banking, non-profit and education, including extensive work on corporate intranets. She has conducted worldwide user research, including longitudinal studies, remote studies and eyetracking research, running studies in the United States, Canada, Europe, Asia and Australia. Read more about Amy