Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

A story about wayfinding

Slide 3

Slide 3 text

this is the real world we design for…

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

800x600 1024x768 1280x960

Slide 9

Slide 9 text

SCREEN SIZE CONTENT

Slide 10

Slide 10 text

The Responsive Conundrum we want simple mobile interfaces...

Slide 11

Slide 11 text

The Responsive Conundrum we design really complicated sites.

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

192 clickable elements 4.7”

Slide 16

Slide 16 text

You can do it!

Slide 17

Slide 17 text

…but should you?

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

( Memories ) ( Past Experiences )

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Concepts in Action Circulation Systems Landmarks Edges Signs

Slide 28

Slide 28 text

Circulation Systems and Paths enable people to move through cities

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Paths should be visibly exposed and identifiable

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Hierarchical Structure

Slide 34

Slide 34 text

Nested Doll funnels user toward content, along a linear path

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

© Creative Commons Landmarks can give a 
 space identity


Slide 41

Slide 41 text

Landmarks can also act as route markers.

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

for the sake of
 multiscreen behavior design for continuity

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

“…as long as you don’t mess
 with the quicklinks.” —a client word of warning More familiar users rely more heavily on landmarks.

Slide 46

Slide 46 text

3. Edges and Regions

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Environmental Perception is based on scanning and glancing

Slide 55

Slide 55 text

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/

Slide 56

Slide 56 text

ICONS VS. TEXT!

Slide 57

Slide 57 text

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

Slide 58

Slide 58 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 59

Slide 59 text

No content

Slide 60

Slide 60 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 61

Slide 61 text

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/

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

Menu

Slide 64

Slide 64 text

Hamburgers!

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

Organize (SLIP) Sort Label Integrate Prioritize

Slide 69

Slide 69 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 70

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

Slide 71

Slide 71 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 Labels add context to the packet of information. Also helps for assessing relevance.

Slide 72

Slide 72 text

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.

Slide 73

Slide 73 text

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.

Slide 74

Slide 74 text

Reduce (shrink, hide, embody)

Slide 75

Slide 75 text

Shrink: Remove Unnecessary UI

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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.

Slide 78

Slide 78 text

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.

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

EMBODY: Content as Interface GUI NUI

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

Optimize Performance “savings in time feels like simplicity”

Slide 84

Slide 84 text

in summary…

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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