Full day training course

Scaling User Interfaces

Usability for responsive web design and other approaches to designing websites for multiple devices and screen sizes

What This Seminar Is About

In this day-long seminar we discuss unifying usability guidelines that apply regardless of device (smartphone, tablet, or desktop), as well as how to enhance and tailor user experiences by device. We also analyze the usability of popular responsive, adaptive, and mobile design patterns.

Why You Should Care About the Topic

In today’s multidevice world, customers access sites on smartphones, tablets, and desktop computers. Whether using responsive design, adaptive design, or creating separate site experiences, organizations need to support user tasks and create usable designs regardless of device. So how do you make a website that is usable, no matter what device your customers have in front of them?

What’s important when adapting designs for different devices, screen sizes, input styles, output styles, and contexts of use? What content makes sense? How should navigation change across screens? What should be the same and what should be different?

"Highlights the need to be strategic in approaching web design for the multi device world we live in. Great do's and don'ts."

Andrew Morris
Hope Media

What We Don't Cover

This seminar focuses on the user experience of sites that work across devices: 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 create these designs.

What We Cover

What We Cover

  • What is the same and what differs among devices: desktop, tablet, and phone
    • Input
    • Screen size
    • Portability
    • Context of use
    • User behaviors and usage patterns
    • Why it matters to the user experience
  • Responsive, adaptive and device-specific design
    • Advantages of each approach
    • Desktop-first  or mobile-first approaches
  • Unified usability guidelines that hold on any device
    • Cross-platform principles
    • Platform-specific principles and constraints:
      • How to apply cross-platform principles to specific devices
    • Opportunity and interaction costs: how they vary across devices
  • Content strategy: What content to include, add, or remove
    • Importance of content prioritization
    • Should content priorities vary by device or not?
    • Using data, analytics, and business goals to prioritize content
    • Layout and page priorities
      • Information foraging: The importance of what’s at the top of the page
      • Why the fold is still relevant
  • How layout changes impact content prioritization
    • Use of templates and their effect on content priorities
    • Tools for dealing with layout change while preserving content priorities across devices
      • Accordions, menus, links
  • Presenting content across devices
    • Tools for helping readers find information on a long page
    • Adaptive content
    • Scaling  comparison tables and large data across devices
    • Images and graphics
    • Maintaining context on large and small screens
  • Designing for different input types: mouse vs. touch
    • Designs that work for touch and mouse
    • Hover states and translating them to touchscreen
    • Horizontal navigation and swiping
    • Supporting scrolling on touchscreen devices
    • Advantages and pitfalls of lightboxes, modals, and overlays across devices
  • Navigation across devices
    • Content-to-chrome ratio
    • Should the navigation structures and the information architecture be the same across devices?
    • Primary navigation
    • Hidden navigation: hamburger and other menus
      • Strengths and weaknesses
    • Secondary navigation:
      • Submenus, category landing pages, in-page navigation
    • Footers and breadcrumbs
  • Interaction flows across devices
    • Form design
    • Search
      • Search placement and presentation
      • The search icon

Format

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

Participant Comments

Participant Comments

"Extensive, clear, concise and insightful. The course reinforced approaches we should take, alerted us to consequences of other design solution as well helped build confidence by confirming decisions we've made on the fly when technology throws us a curve ball."

Michelle Narayan, Greenstone Financial Services

"I love that Amy shows the real-deal UX testing studies. That’s gold...and memorable!"

Justin Brylski, E- Learning Developer

"This was the perfect course to help me with responsive design/adoptive design concerns when I return to work. Thank you!"

Sarah Davies, Lexmark International

"This course gave language to the design principles we practice daily. It not only reinforced the known best practices but opened my eyes to use or customer behaviors I might not have expected. The comparison of desktop and handheld examples was very illuminating."

Bernadette Inzary, Velvet Hammer

  • More Participant Comments
    "Great course, good pacing and a nice variety of examples of good mobile/tablet design."

     

    "Amazing amount of insight and content, expertly presented in a day. Opened up the mind to more possibilities and solutions."

     

    "I actually really liked it…..great material and good presentation — presenter allowed too many crowd interruptions and opinions which snowballed a bit — I would recommend telling them to hold their questions more."

    Jim Bull, Phoenix Contact

    "A must-take coure if you are designing websites for both desktop and mobile devices."

    Hugh Quach, Alberta Gaming and Liquor Commission

    "Great content on the subject matter — and thorough examples were fun to watch and useful for reference."

    Saffron Davis, The Regional Municipality of York

    "High quality content. Great examples are shown to help us understand better. And great discussions in class."

    Ellie Xu, Intel

Instructors

Instructors

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.

Raluca Budiu

Raluca Budiu is a Director of Research with Nielsen Norman Group. At NN/g she consults for clients from a variety of industries and presents tutorials on mobile and tablet usability, cognitive psychology for designers, and principles of human computer interaction. She coauthored the NN/g reports on tablet usability, mobile usability, iPad usability, and the usability of children's websites, and the book "Mobile Usability". Raluca also served as a judge for GSMA Global Mobile Awards 2012-2016 and Tabby Awards 2013. She holds a Ph.D. from Carnegie Mellon University. Read more about Raluca.