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

Navigating the Mobile Web (eduweb '14)

Dennis Kardys
August 05, 2014

Navigating the Mobile Web (eduweb '14)

What do you do when your website must serve multiple audiences such as prospective students, current students, faculty, and alumni, and you want to make sure all of them can easily get to where they need to go? Add more links! But while wide screens afford plenty of space to pack links into compartments on the page, statistics scream that small screen use is rapidly on the rise. When your visitors' screens fit in the palm of their hand, how on Earth do you translate all that navigation to mobile?

As you add more navigation, your site increases in size and complexity. So does the challenge of translating it to different size devices. It becomes more and more difficult to help people find what they're looking for. The design choices you make and the navigation conventions you rely on impact how people process information and find content. Each time your design adapts to different screen sizes, you create a new landscape your users must familiarize themselves with. Done right, this can lead to more seamless multiscreen, multichannel experiences. Done poorly, and your users will be left frustrated and disoriented. This dissection of mobile UI and IA best practices will help you make it easier for your visitors to find their way around your site ?no matter what size screen they're on.

Dennis Kardys

August 05, 2014
Tweet

More Decks by Dennis Kardys

Other Decks in Design

Transcript

  1. Navigating the
    Mobile Web
    eduWeb Conference 8.5.14 #eduweb14
    Dennis Kardys @dkardys #mobilenav

    View Slide

  2. The Responsive Conundrum
    !
    we want simple
    mobile interfaces...

    View Slide

  3. The Responsive Conundrum
    !
    we design really
    complicated sites.

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. 192 clickable elements
    4.7”

    View Slide

  10. You can do it!

    View Slide

  11. http://bradfrost.github.io/this-is-responsive/patterns.html
    http://tympanus.net/codrops/

    View Slide

  12. …but should you?

    View Slide

  13. a few lessons from
    Information
    Architecure
    CC license: @prettydaisies https://flic.kr/p/2jNx92

    View Slide

  14. !
    Cognitive Load
    !
    Usability

    View Slide

  15. Why are people

    coming

    to your site?
    Photo by Louis Vest, CC license: https://flic.kr/p/6aHLTJ

    View Slide

  16. People want to:
    • Find something.
    • Do something.
    • Kill a little time.

    View Slide

  17. You want:
    • Internal and external audience
    satisfaction.

    • Better lead generation (tours, online
    applications).

    • Increase donations.

    View Slide

  18. How do people
    hunt for
    information?
    Photo by Wild Lens, CC license: https://flic.kr/p/7WpXRX

    View Slide

  19. Four Ways Users Seek Information
    • Known Item Search
    • Exploratory Seeking
    • Don’t Know What I need to know
    • Re-finding

    View Slide

  20. 65%
 60%
 4%

    source: Think With Google, “The New Multi Screen World” - http://bit.ly/Qivs98
    The majority of online
    search begins on mobile.

    View Slide

  21. How many kinds of
    navigation are there
    really?

    View Slide

  22. Three Types of Navigation
    1. Structural Navigation
    2. Associative Navigation
    3. Utility Navigation

    View Slide

  23. What are the different
    ways I can organize
    my content?

    View Slide

  24. Classification Schemas
    • Geographic
    • Alphabetical
    • Time
    • Institutional/Org 

    Structure
    • Format
    • Audience
    • Subject/Topic
    • Task

    View Slide

  25. Let’s look at an
    example!

    View Slide

  26. Edu Sites
    • Structural Navigation (topic)
    • Associative Navigation (audience based)
    • Utility Navigation (login/external)

    View Slide

  27. Structural Nav
    Associative Nav

    View Slide

  28. Utility Nav

    View Slide

  29. Know your roles!

    View Slide

  30. • Current Students
    • Future (prospective) Students
    • Staff/Faculty
    • Alumni and Friends
    • Community

    View Slide

  31. The Problem with Roles
    • Content can not always be clearly divided
    • Some people associate with multiple roles
    • Some people associate with no roles
    • Not scalable

    View Slide

  32. Audience-specific landing
    pages can aggregate
    targeted, role relevant
    content from across your
    site (or other sites).

    View Slide

  33. Wayfinding
    http://photography.nationalgeographic.com/photography/photo-of-the-day/shanghai-highways/

    View Slide

  34. Edges

    View Slide

  35. Edges create distinct boundaries
    between zones and elements.

    View Slide

  36. View Slide

  37. Where do tap targets

    begin and end?
    !
    Make sure buttons are
    recognizable as buttons.
    Campus News Campus News Campus News

    View Slide

  38. Landmarks

    View Slide

  39. Landmarks are memorable visual
    cues within a space (or interface)
    that helps users orient themselves.
    MIT Dome: wikipedia http://en.wikipedia.org/?title=Wikipedia:Featured_picture_candidates/MIT_Dome

    View Slide

  40. MIT Dome: wikipedia http://en.wikipedia.org/?title=Wikipedia:Featured_picture_candidates/MIT_Dome
    Landmarks build identity, which in
    turn helps users identify (or recall)
    their relative position within a site.

    View Slide

  41. Global
    Logo
    Nav icon/menu
    Breadcrumbs
    Local
    Section banner
    Slideshow
    Calendar Page

    View Slide

  42. MIT Dome: wikipedia http://en.wikipedia.org/?title=Wikipedia:Featured_picture_candidates/MIT_Dome
    Aim for continuity of
    landmarks across
    breakpoints and devices.

    View Slide

  43. View Slide

  44. Signage

    View Slide

  45. CC License https://flic.kr/p/3FugBN davidbenito

    View Slide

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

    View Slide

  47. Less is more.

    View Slide

  48. Do graphic symbols
    work better than text?

    View Slide

  49. Icons vs. Text

    View Slide

  50. View Slide

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

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

  53. Menu

    View Slide

  54. Do people understand the
    “hamburger” icon used for
    mobile navigation menus?

    View Slide

  55. Hamburgers!

    View Slide

  56. View Slide

  57. View Slide

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

    View Slide

  59. • 483 clickable elements
    !
    • 63 requests | 721k | 12.139 sec

    View Slide

  60. View Slide

  61. View Slide

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

    View Slide

  63. Organize (SLIP)
    Sort
    Label
    Integrate
    Prioritize

    View Slide

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

  65. Bay Area Campus
    Northwest California
    Pasadena Campus
    Sacramento Campus
    !
    Chicago Campus
    Colorado Campus
    Kansas Campus
    Tulsa Campus
    !
    Atlanta Campus
    Alabama Campus
    Miami Campus
    Sort

    View Slide

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

    View Slide

  67. West Coast Campuses
    Bay Area 

    Northwest California
    Pasadena
    Sacramento
    !
    Midwest Campuses
    Chicago
    Colorado
    Kansas
    Tulsa
    !
    Southeast Campuses
    Atlanta
    Alabama
    Miami
    Integrate

    View Slide

  68. Main Campus Location
    Bay Area 

    Northwest California
    Pasadena
    Sacramento
    !
    Midwest Campuses
    Chicago
    Colorado
    Kansas
    Tulsa
    !
    Southeast Campuses
    Atlanta
    Alabama
    Miami
    Prioritize

    View Slide

  69. REDUCE
    (shrink, hide, embody)

    View Slide

  70. Grids vs.
    Lists
    For mobile navigation, image
    grids should be saved for
    deeper IA levels where visual
    differentiation between menu
    items is critical, as they
    increase page load times,
    create longer pages, and cause
    more scrolling.
    source : http://www.nngroup.com/articles/image-vs-list-mobile-navigation/

    View Slide

  71. Shrink: Remove Unnecessary UI

    View Slide

  72. Hide: Tap to Reveal

    View Slide

  73. EMBODY: Content as Interface
    GUI
    NUI

    View Slide

  74. EMBODY
    Indirect Manipulation of
    content through use of
    metaphors: Windows, Icons,
    Menus, Pointing devices
    Direct Manipulation
    of content through touch,
    gestures and other natural
    interactions
    GUI NUI

    View Slide

  75. Optimize Performance
    !
    “savings in time feels
    like simplicity”

    View Slide

  76. A 1 second delay in load time
    - 7% CONVERSIONS
    KISS Metrics
    http://blog.kissmetrics.com/loading-time/

    View Slide

  77. 1. Decrease cognitive load
    2. Define your navigation types
    3. Choose an organizational schema
    4. Use landmarks, edges and signs
    5. Design ergomically
    6. Organizing, reducing, and optimize
    Tips to Remember:

    View Slide

  78. 1. too many links
    2. role based content categorization
    3. over reliance on icons
    4. hover interactions
    5. hidden menus and concealed trigger words
    6. slow-loading pages
    Watch Out for:

    View Slide

  79. What YOU can do to
    start improving
    your navigation…
    http://photography.nationalgeographic.com/photography/photo-of-the-day/shanghai-highways/

    View Slide

  80. Card Sorting

    View Slide

  81. Card Sorting
    !
    1. Write titles of content on index cards.
    2. Have groups sort the cards into logical piles.
    3. They decide on titles for each pile of cards.
    4. Find the patterns that emerge.
    !

    View Slide

  82. Usability Testing

    View Slide

  83. Simple Usability Testing
    !
    1. User leads you on site walkthrough
    2. Observe and take notes as they think aloud.
    3. Ask users to attempt some scripted tasks.
    4. Observe and take notes as they think aloud.
    !
    !

    View Slide

  84. !
    “You have to be clear before

    you can be clever”

    -Des Traynor

    http://aycl.uie.com/virtual_seminars/vs93_microcopy

    View Slide

  85. Thanks!
    !
    Dennis Kardys
    Design Director | WSOL
    !
    !
    [email protected]
    @dkardys @wsolhq

    View Slide