Wayfinding for the Mobile Web

Transcript

1. Wayfinding for the
   Mobile Web
   2015 IASummit #ias15 #wayfinding
   Dennis Kardys @dkardys
   

   View Slide

2. A story about
   wayfinding
   

   View Slide

3. this is the real world
   we design for…
   

   View Slide

4. When wayfinding
   goes awry
   1. You blame yourself
   2. You feel anxious, frustrated
   3. You resent the system
   

   View Slide

5. even the possibility of
   becoming lost is enough to
   trigger anxiety.
   

   View Slide

6. View Slide

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

   View Slide

8. 800x600 1024x768 1280x960
   

   View Slide

9. SCREEN SIZE
   CONTENT
   

   View Slide

10. The Responsive Conundrum
    we want simple
    mobile interfaces...
    

    View Slide

11. The Responsive Conundrum
    we design really
    complicated sites.
    

    View Slide

12. View Slide

13. View Slide

14. View Slide

15. 192 clickable
    elements
    4.7”
    

    View Slide

16. You can do it!
    

    View Slide

17. …but should you?
    

    View Slide

18. “Most designers approach
    solutions to signing and
    wayfinding through the door of
    visual composition rather
    than information”
    -Boyd Morrison
    

    View Slide

19. the cognitive and perceptual
    tools we use to navigate
    through physical space
    also help us navigate
    virtual space.
    

    View Slide

20. 1. wayfinding basics
    2. concepts in action
    3. mobile UI
    

    View Slide

21. Wayfinding Basics
    “all the ways people and animals orient
    themselves in physical space and
    navigate from place to place.”
    

    View Slide

22. Where am I?
    How did I get here?
    Is my destination nearby?
    Where do I go from here?
    

    View Slide

23. Information Processing
    Survey environmental for cues & options
    Decision Making
    Come up with a plan (satisfice)
    Decision Executing
    Transform intention to behavior
    

    View Slide

24. We only see glimpses
    of the whole, each
    window a new vantage
    point.
    

    View Slide

25. ( Memories )
    ( Past Experiences )
    

    View Slide

26. cognitive maps reflect
    our understanding of our
    surroundings, and
    enable route planning
    

    View Slide

27. Concepts in
    Action
    Circulation Systems Landmarks
    Edges Signs
    

    View Slide

28. Circulation
    Systems and Paths
    enable people to move
    through cities
    

    View Slide

29. View Slide

30. View Slide

31. Paths should be
    visibly exposed
    and identifiable
    

    View Slide

32. Through paths,
    people should be able
    to discern the system.
    

    View Slide

33. Hierarchical
    Structure
    

    View Slide

34. Nested Doll
    funnels user toward content,
    along a linear path
    

    View Slide

35. Hub and
    Spoke
    A central anchor
    screen, that directs
    you to independent
    site sections
    

    View Slide

36. Bento Box
    A dashboard that pulls
    in multiple sets of data
    or content
    

    View Slide

37. Filtered
    View
    good for browsing
    a single data set
    from different
    views
    

    View Slide

38. View Slide

39. 2. Landmarks
    memorable visual cues within a
    space (or interface) that helps users
    orient themselves.
    Creative Commons: https://flic.kr/p/aCoFo5
    

    View Slide

40. © Creative Commons
    Landmarks can give a 

    space identity

    

    View Slide

41. Landmarks can also act as
    route markers.
    

    View Slide

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

    View Slide

43. for the sake of

    multiscreen behavior
    design for continuity
    

    View Slide

44. View Slide

45. “…as long as you don’t mess

    with the quicklinks.”
    —a client word of warning
    More familiar users rely more heavily on
    landmarks.
    

    View Slide

46. 3. Edges and
    Regions
    

    View Slide

47. View Slide

48. View Slide

49. Recognizable with
    Clearly defined target areas
    Register Now
    Register Now
    Register Now
    

    View Slide

50. Use touch friendly tap targets,
    surrounded by inactive buffers.
    Register Now Registe
    MINIMUM TARGET SIZE 8-9MM
    9mm 9mm
    

    View Slide

51. CC License https://flic.kr/p/3FugBN davidbenito
    Signs:
    Text & Symbols
    

    View Slide

52. CC License https://flic.kr/p/b2HhCk SpirosK Photography
    Donate Now!
    Apply Now!
    

    View Slide

53. “information at the wrong
    place, is as good as no
    information at all”
    -Arthur & Passini, Wayfinding Design
    

    View Slide

54. Environmental
    Perception is based
    on scanning and
    glancing
    

    View Slide

55. 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/
    

    View Slide

56. ICONS VS. TEXT!
    

    View Slide

57. Icons can be ambiguous and have dual or
    different meanings across sites and platforms
    

    View Slide

58. 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.”
    

    View Slide

59. View Slide

60. 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?
    

    View Slide

61. 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/
    

    View Slide

62. View Slide

63. Menu
    

    View Slide

64. Hamburgers!
    

    View Slide

65. View Slide

66. • 146 things clickable elements.
    • Lots of people’s faces.
    • 116 requests, 1.2mb, 29.926s
    

    View Slide

67. Simplify:
    Organize
    Reduce
    Optimize
    Photo by @lapideo CC license https://flic.kr/p/9egBCu
    

    View Slide

68. Organize (SLIP)
    Sort
    Label
    Integrate
    Prioritize
    

    View Slide

69. Alabama Campus
    Arizona Campus
    Atlanta Campus
    Bay Area Campus
    Chicago Campus
    Colorado Campus
    Kansas Campus
    Miami Campus
    Northwest California
    Pasadena Campus
    Sacramento Campus
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

74. Reduce
    (shrink, hide, embody)
    

    View Slide

75. Shrink: Remove Unnecessary UI
    

    View Slide

76. Tap to Reveal (Hidden)
    • Minimal UI Saves space
    • Trigger words hidden
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

81. EMBODY: Content as Interface
    GUI
    NUI
    

    View Slide

82. Without indirect
    manipulation we must
    be more cognizant of
    reach and proximity of
    interface controls.
    NUI
    

    View Slide

83. Optimize Performance
    “savings in time feels
    like simplicity”
    

    View Slide

84. in summary…
    

    View Slide

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

    View Slide

86. Thanks!
    Dennis Kardys

    Design Director | WSOL
    [email protected]
    mobile-web-triage.com
    robotregime.com
    @dkardys
    #ias15 #wayfinding
    

    View Slide