Navigating the Mobile Web (eduweb '14)

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

The Responsive Conundrum ! we design really complicated sites.

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

192 clickable elements 4.7”

Slide 10

Slide 10 text

You can do it!

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

…but should you?

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

! Cognitive Load ! Usability

Slide 15

Slide 15 text

Why are people  coming  to your site? Photo by Louis Vest, CC license: https://ﬂic.kr/p/6aHLTJ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

You want: • Internal and external audience satisfaction.  • Better lead generation (tours, online applications).  • Increase donations.

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

How many kinds of navigation are there really?

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

What are the diﬀerent ways I can organize my content?

Slide 24

Slide 24 text

Classiﬁcation Schemas • Geographic • Alphabetical • Time • Institutional/Org   Structure • Format • Audience • Subject/Topic • Task

Slide 25

Slide 25 text

Let’s look at an example!

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Structural Nav Associative Nav

Slide 28

Slide 28 text

Utility Nav

Slide 29

Slide 29 text

Know your roles!

Slide 30

Slide 30 text

• Current Students • Future (prospective) Students • Staﬀ/Faculty • Alumni and Friends • Community

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Wayﬁnding http://photography.nationalgeographic.com/photography/photo-of-the-day/shanghai-highways/

Slide 34

Slide 34 text

Edges

Slide 35

Slide 35 text

Edges create distinct boundaries between zones and elements.

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

Where do tap targets  begin and end? ! Make sure buttons are recognizable as buttons. Campus News Campus News Campus News

Slide 38

Slide 38 text

Landmarks

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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.

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

Signage

Slide 45

Slide 45 text

CC License https://ﬂic.kr/p/3FugBN davidbenito

Slide 46

Slide 46 text

CC License https://ﬂic.kr/p/b2HhCk SpirosK Photography Donate Now! Apply Now!

Slide 47

Slide 47 text

Less is more.

Slide 48

Slide 48 text

Do graphic symbols work better than text?

Slide 49

Slide 49 text

Icons vs. Text

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

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?

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

Hamburgers!

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Organize (SLIP) Sort Label Integrate Prioritize

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

REDUCE (shrink, hide, embody)

Slide 70

Slide 70 text

Grids vs. Lists For mobile navigation, image grids should be saved for deeper IA levels where visual diﬀerentiation 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/

Slide 71

Slide 71 text

Shrink: Remove Unnecessary UI

Slide 72

Slide 72 text

Hide: Tap to Reveal

Slide 73

Slide 73 text

EMBODY: Content as Interface GUI NUI

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

Optimize Performance ! “savings in time feels like simplicity”

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

1. Decrease cognitive load 2. Deﬁne 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:

Slide 78

Slide 78 text

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:

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

Card Sorting

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

Usability Testing

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

! “You have to be clear before  you can be clever”   -Des Traynor  http://aycl.uie.com/virtual_seminars/vs93_microcopy

Slide 85

Slide 85 text

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