Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Wayfinding for the Mobile Web

Wayfinding for the Mobile Web

IA Summit 2015: http://www.iasummit.org/node/171

As we attempt to map larger, more complex systems to smaller screens, it becomes more and more challenging to help people find what they're looking for. Learn how lessons from architectural wayfinding can guide how you structure your navigation and improve the ease with which your users can explore your site—regardless of what device they're on.

We'll dissect a number of mobile and responsive UI patterns, covering concepts like circulation systems, spatial cues and route visibility. By better understanding the cognitive and perceptual decision making processes that determine how people navigate their environments, you'll be better equipped to build seamless experiences across a multitude of screens and devices.

Dennis Kardys

April 24, 2015

More Decks by Dennis Kardys

Other Decks in Design


  1. When wayfinding goes awry 1. You blame yourself 2. You

    feel anxious, frustrated 3. You resent the system
  2. 61% of mobile users said they’d quickly move onto another

    site if they didn’t find what they’re looking for right away. https://www.thinkwithgoogle.com/research-studies/what-users-want-most-from- mobile-sites-today.html
  3. “Most designers approach solutions to signing and wayfinding through the

    door of visual composition rather than information” -Boyd Morrison
  4. the cognitive and perceptual tools we use to navigate through

    physical space also help us navigate virtual space.
  5. Wayfinding Basics “all the ways people and animals orient themselves

    in physical space and navigate from place to place.”
  6. Where am I? How did I get here? Is my

    destination nearby? Where do I go from here?
  7. Information Processing Survey environmental for cues & options Decision Making

    Come up with a plan (satisfice) Decision Executing Transform intention to behavior
  8. 2. Landmarks memorable visual cues within a space (or interface)

    that helps users orient themselves. Creative Commons: https://flic.kr/p/aCoFo5
  9. Global Unique, globally accessible elements EXAMPLES Logo Menu icon Breadcrumbs

    Footer links Local Page or flow-specific memorable modules EXAMPLES Section banner Slideshow Calendar Widget Call to action
  10. “…as long as you don’t mess
 with the quicklinks.” —a

    client word of warning More familiar users rely more heavily on landmarks.
  11. Use touch friendly tap targets, surrounded by inactive buffers. Register

    Now Registe MINIMUM TARGET SIZE 8-9MM 9mm 9mm
  12. “information at the wrong place, is as good as no

    information at all” -Arthur & Passini, Wayfinding Design
  13. Glare and Contrast 2.0/W3C Minium Color Contrast Guidelines for Mobile

    Small text: 4.5:1 Large text: 3:1 http://www.w3.org/TR/mobile-accessibility-mapping/
  14. source: http://www.uie.com/brainsparks/2009/06/28/old-news-about-icons/ “The speed at which the average user can

    deduce an icon’s function from the image is directly proportional to the speed at which the design team can agree on what the ideal image for that function should be.”
  15. 1. Text + image works best 2. Text only 3.

    Image only source: http://www.uie.com/brainsparks/2009/06/28/old-news-about-icons/ Text or image?
  16. Grids vs. Lists graphic grids help with visual differentiation and

    detail vs. lists for efficiently surveying easy to distinguish options. image source : http://www.nngroup.com/articles/image-vs-list-mobile-navigation/
  17. Alabama Campus Arizona Campus Atlanta Campus Bay Area Campus Chicago

    Campus Colorado Campus Kansas Campus Miami Campus Northwest California Pasadena Campus Sacramento Campus
  18. Bay Area Campus Northwest California Pasadena Campus Sacramento Campus Chicago

    Campus Colorado Campus Kansas Campus Tulsa Campus Atlanta Campus Alabama Campus Miami Campus Sort Groupings of 3 or 4 items can be better read in single glances. Flush left alignment for lists is easier to scan than center or right aligned.
  19. West Coast Bay Area
 Northwest California Pasadena Campus Sacramento Campus

    Midwest Chicago Campus Colorado Campus Kansas Campus Tulsa Campus Southeast Atlanta Campus Alabama Campus Miami Campus Label Labels add context to the packet of information. Also helps for assessing relevance.
  20. West Coast Campuses Bay Area 
 Northwest California Pasadena Sacramento

    Midwest Campuses Chicago Colorado Kansas Tulsa Southeast Campuses Atlanta Alabama Miami Integrate Additional information in the titles may seem redundant on larger screens, but can introduce clarity and reduce the need to rely on memory in small viewports.
  21. Main Campus Location Bay Area 
 Northwest California Pasadena Sacramento

    Midwest Campuses Chicago Colorado Kansas Tulsa Southeast Campuses Atlanta Alabama Miami Prioritize Establishing visual hierarchy helps draw attention and focus to the most salacious information.
  22. Off-Canvas (Hidden) • Minimal UI Saves space • Trigger words

    hidden • When used in conjunction with multi-level off-canvas, can result in confusion between link area and reveal more trigger.
  23. Multi-toggle (Visible) • Top level trigger words visible • Can

    create result in confusion between what is the active link area, vs. what is the toggle trigger.
  24. Skip to Bottom (Visible) • Top level trigger words visible

    • Easy to access from top of page • Doesn’t leave the user at a dead end (or require them to swipe back up) when they reach the end of the page
  25. Visible: Fixed/Sticky Navigation • Takes up a perpetual amount of

    screen space • Can obstruct too much of the screen in landscape orientation • Fixed positioning has less the stellar support
  26. Without indirect manipulation we must be more cognizant of reach

    and proximity of interface controls. NUI
  27. Remember that people are fallible, so don’t let visual composition

    trump information…provide them with clear orientation cues so they can make sense of the system, maybe by progressively revealing navigation and keeping your paths visible…or by creating continuity across screens and devices, and clearly defining screen regions and tap targets; also focus on legibility and always simplify (sensibly).