Small Screen Navigation: ConvergeSE, 2014

Slide 1

Slide 1 text

SMALL SCREEN NAVIGATION @bencallahan

Slide 2

Slide 2 text

The Maze

Slide 3

Slide 3 text

amazon.com

Slide 4

Slide 4 text

amazon.com

Slide 5

Slide 5 text

amazon.com

Slide 6

Slide 6 text

amazon.com

Slide 7

Slide 7 text

amazon.com

Slide 8

Slide 8 text

amazon.com

Slide 9

Slide 9 text

Congratulations! In celebration of all your hard work and discipline, as a reward for all the risk you’ve taken to reach this point, we’re quite pleased to present you with…YOUR CONTENT! ! Keep up the good work! ! ~ The Management

Slide 10

Slide 10 text

A Taxonomy ‣ Trigger Indicators ‣ Reveal Patterns ! ‣ Interaction Indicators ‣ Interaction Patterns

Slide 11

Slide 11 text

Trigger Indicators

Slide 12

Slide 12 text

What is a Trigger?

Slide 13

Slide 13 text

Trigger Indicators ‣ Words ‣ menu, main menu ‣ nav, navigation ‣ site specific  (sections, topics,  products, etc.) ‣ Icons ‣ plus ‣ hamburger ‣ arrows ‣ “x”

Slide 14

Slide 14 text

TRIGGER INDICATORS Words

Slide 15

Slide 15 text

TRIGGER INDICATORS Icons Plus Hamburger Down Arrow

Slide 16

Slide 16 text

TRIGGER INDICATORS Other & Combinations

Slide 17

Slide 17 text

Trigger Indicators ‣ Words ‣ menu, main menu ‣ nav, navigation ‣ site specific  (sections, topics,  products, etc.) ‣ Icons ‣ plus ‣ hamburger ‣ arrows ‣ “x”

Slide 18

Slide 18 text

Reveal Patterns

Slide 19

Slide 19 text

Reveal Patterns ‣ Always Available ‣ Anchor to Footer ‣ Select Element ‣ Make Room ‣ Cover Up ‣ Off Canvas ‣ Priority + ‣ Full Screen Takeover

Slide 20

Slide 20 text

REVEAL PATTERNS: ALWAYS AVAILABLE

Slide 21

Slide 21 text

REVEAL PATTERNS: ANCHOR TO FOOTER

Slide 22

Slide 22 text

REVEAL PATTERNS: SELECT ELEMENT

Slide 23

Slide 23 text

iOS 7 REVEAL PATTERNS: SELECT ELEMENT

Slide 24

Slide 24 text

REVEAL PATTERNS: SELECT ELEMENT Chrome on OS X

Slide 25

Slide 25 text

REVEAL PATTERNS: MAKE ROOM

Slide 26

Slide 26 text

REVEAL PATTERNS: COVER UP

Slide 27

Slide 27 text

REVEAL PATTERNS: OFF CANVAS

Slide 28

Slide 28 text

REVEAL PATTERNS: PRIORITY +

Slide 29

Slide 29 text

REVEAL PATTERNS: FULL SCREEN TAKEOVER

Slide 30

Slide 30 text

Reveal Patterns ‣ Always Available ‣ Anchor to Footer ‣ Select Element ‣ Make Room ‣ Cover Up ‣ Off Canvas ‣ Priority + ‣ Full Screen Takeover

Slide 31

Slide 31 text

Interaction Indicators

Slide 32

Slide 32 text

INTERACTION INDICATORS Icons

Slide 33

Slide 33 text

Interaction Indicators ‣ Icons ‣ plus ‣ dash ‣ “x” ‣ various arrows

Slide 34

Slide 34 text

Interaction Patterns

Slide 35

Slide 35 text

Interaction Patterns ‣ List ‣ Accordion ‣ Paging

Slide 36

Slide 36 text

INTERACTION PATTERNS: LIST

Slide 37

Slide 37 text

INTERACTION PATTERNS: ACCORDION

Slide 38

Slide 38 text

INTERACTION PATTERNS: PAGING

Slide 39

Slide 39 text

Interaction Patterns ‣ List ‣ Accordion ‣ Paging

Slide 40

Slide 40 text

Takeaways

Slide 41

Slide 41 text

Takeaways ‣ Architecture ‣ Focus ‣ Behavior ‣ JavaScript ‣ Usability ‣ Prioritization

Slide 42

Slide 42 text

TAKEAWAYS: ARCHITECTURE

Slide 43

Slide 43 text

TAKEAWAYS: ARCHITECTURE

Slide 44

Slide 44 text

TAKEAWAYS: FOCUS

Slide 45

Slide 45 text

TAKEAWAYS: BEHAVIOR Multi Open

Slide 46

Slide 46 text

TAKEAWAYS: BEHAVIOR Single Open

Slide 47

Slide 47 text

TAKEAWAYS: BEHAVIOR Single Open

Slide 48

Slide 48 text

Auto Scroll TAKEAWAYS: BEHAVIOR

Slide 49

Slide 49 text

Takeaways ‣ JavaScript ‣ Visible by Default ‣ Anchor to Footer ‣ Single DOM

Slide 50

Slide 50 text

mediaCheck, by @robtarr

Slide 51

Slide 51 text

Takeaways ‣ Usability ‣ User Expectations ‣ Plan for the Worst ‣ Teach Use

Slide 52

Slide 52 text

Prioritization

Slide 53

Slide 53 text

Prioritization

Slide 54

Slide 54 text

Prioritization

Slide 55

Slide 55 text

Prioritization

Slide 56

Slide 56 text

Prioritization

Slide 57

Slide 57 text

Prioritization

Slide 58

Slide 58 text

If you’re going to make a website, you better make it easy to get to the content.

Slide 59

Slide 59 text

THANKS! @bencallahan