$30 off During Our Annual Pro Sale. View Details »

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

More Decks by Dennis Kardys

Other Decks in Design


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

    @dkardys #mobilenav
  2. The Responsive Conundrum ! we want simple mobile interfaces...

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

  4. None
  5. None
  6. None
  7. None
  8. None
  9. 192 clickable elements 4.7”

  10. You can do it!

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

  12. …but should you?

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

  14. ! Cognitive Load ! Usability

  15. Why are people
 to your site? Photo by Louis

    Vest, CC license: https://flic.kr/p/6aHLTJ
  16. People want to: • Find something. • Do something. •

    Kill a little time.
  17. You want: • Internal and external audience satisfaction.
 • Better

    lead generation (tours, online applications).
 • Increase donations.
  18. How do people hunt for information? Photo by Wild Lens,

    CC license: https://flic.kr/p/7WpXRX
  19. Four Ways Users Seek Information • Known Item Search •

    Exploratory Seeking • Don’t Know What I need to know • Re-finding
  20. 65%
 source: Think With Google, “The New Multi

    Screen World” - http://bit.ly/Qivs98 The majority of online search begins on mobile.
  21. How many kinds of navigation are there really?

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

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

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

 Structure • Format • Audience • Subject/Topic • Task
  25. Let’s look at an example!

  26. Edu Sites • Structural Navigation (topic) • Associative Navigation (audience

    based) • Utility Navigation (login/external)
  27. Structural Nav Associative Nav

  28. Utility Nav

  29. Know your roles!

  30. • Current Students • Future (prospective) Students • Staff/Faculty •

    Alumni and Friends • Community
  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
  32. Audience-specific landing pages can aggregate targeted, role relevant content from

    across your site (or other sites).
  33. Wayfinding http://photography.nationalgeographic.com/photography/photo-of-the-day/shanghai-highways/

  34. Edges

  35. Edges create distinct boundaries between zones and elements.

  36. None
  37. Where do tap targets
 begin and end? ! Make sure

    buttons are recognizable as buttons. Campus News Campus News Campus News
  38. Landmarks

  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
  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.
  41. Global Logo Nav icon/menu Breadcrumbs Local Section banner Slideshow Calendar

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

    breakpoints and devices.
  43. None
  44. Signage

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

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

  47. Less is more.

  48. Do graphic symbols work better than text?

  49. Icons vs. Text

  50. None
  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?
  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.”
  53. Menu

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

  55. Hamburgers!

  56. None
  57. None
  58. • 146 things clickable elements. • Lots of people’s faces.

    • 116 requests, 1.2mb, 29.926s
  59. • 483 clickable elements ! • 63 requests | 721k

    | 12.139 sec
  60. None
  61. None
  62. Simplify: ! Organize Reduce Optimize Photo by @lapideo CC license

  63. Organize (SLIP) Sort Label Integrate Prioritize

  64. Alabama Campus Arizona Campus Atlanta Campus Bay Area Campus Chicago

    Campus Colorado Campus Kansas Campus Miami Campus Northwest California Pasadena Campus Sacramento Campus
  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
  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
  67. West Coast Campuses Bay Area 
 Northwest California Pasadena Sacramento

    ! Midwest Campuses Chicago Colorado Kansas Tulsa ! Southeast Campuses Atlanta Alabama Miami Integrate
  68. Main Campus Location Bay Area 
 Northwest California Pasadena Sacramento

    ! Midwest Campuses Chicago Colorado Kansas Tulsa ! Southeast Campuses Atlanta Alabama Miami Prioritize
  69. REDUCE (shrink, hide, embody)

  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/
  71. Shrink: Remove Unnecessary UI

  72. Hide: Tap to Reveal

  73. EMBODY: Content as Interface GUI NUI

  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
  75. Optimize Performance ! “savings in time feels like simplicity”

  76. A 1 second delay in load time - 7% CONVERSIONS

    KISS Metrics http://blog.kissmetrics.com/loading-time/
  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:
  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:
  79. What YOU can do to start improving your navigation… http://photography.nationalgeographic.com/photography/photo-of-the-day/shanghai-highways/

  80. Card Sorting

  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. !
  82. Usability Testing

  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. ! !
  84. ! “You have to be clear before
 you can be

 -Des Traynor
  85. Thanks! ! Dennis Kardys Design Director | WSOL ! !

    dkardys@wsol.com @dkardys @wsolhq