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.

Transcript

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.
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
 coming
 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%
 60%
 4%
 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.
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 Page
42. MIT Dome: wikipedia http://en.wikipedia.org/?title=Wikipedia:Featured_picture_candidates/MIT_Dome Aim for continuity of landmarks across breakpoints and devices.
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
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 menus?
55. Hamburgers!
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
62. Simplify: ! Organize Reduce Optimize Photo by @lapideo CC license https://flic.kr/p/9egBCu
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 clever” 
 -Des Traynor
 http://aycl.uie.com/virtual_seminars/vs93_microcopy
85. Thanks! ! Dennis Kardys Design Director | WSOL ! ! dkardys@wsol.com @dkardys @wsolhq