small screen navigation (ben callahan)
TRANSCRIPT
@bencallahan
SMALL SCREEN NAVIGATION
The Maze
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
Your users are not stupid
A Taxonomy
‣ Trigger Indicators ‣ Reveal Patterns
‣ Interaction Indicators ‣ Interaction Patterns
Trigger Indicators
What is a Trigger?
Trigger Indicators
‣Words ‣menu, main menu ‣ nav, navigation ‣ site specific
(sections, topics,products, etc.)
‣ Icons ‣ plus ‣ hamburger ‣ arrows ‣ “x”
TRIGGER INDICATORS
Words
TRIGGER INDICATORS
IconsPlus Hamburger Down Arrow
TRIGGER INDICATORS
Other & Combinations
Trigger Indicators
‣Words ‣menu, main menu ‣ nav, navigation ‣ site specific
(sections, topics,products, etc.)
‣ Icons ‣ plus ‣ hamburger ‣ arrows ‣ “x”
Reveal Patterns
Reveal Patterns
‣Always Available ‣Anchor to Footer ‣ Select Element ‣Make Room ‣ Cover Up ‣Off Canvas ‣ Priority + ‣ Full Screen Takeover
REVEAL PATTERNS: ALWAYS AVAILABLE
REVEAL PATTERNS: ANCHOR TO FOOTER
REVEAL PATTERNS: SELECT ELEMENT
iOS 7/8
REVEAL PATTERNS: SELECT ELEMENT
REVEAL PATTERNS: SELECT ELEMENT
Chrome on OS X
REVEAL PATTERNS: MAKE ROOM
REVEAL PATTERNS: COVER UP
REVEAL PATTERNS: OFF CANVAS
REVEAL PATTERNS: PRIORITY +
REVEAL PATTERNS: PRIORITY +
REVEAL PATTERNS: PRIORITY +
REVEAL PATTERNS: FULL SCREEN TAKEOVER
Reveal Patterns
‣Always Available ‣Anchor to Footer ‣ Select Element ‣Make Room ‣ Cover Up ‣Off Canvas ‣ Priority + ‣ Full Screen Takeover
Interaction Indicators
INTERACTION INDICATORS
Icons
Interaction Indicators
‣ Icons ‣ plus ‣ dash ‣ “x” ‣ various arrows
Interaction Patterns
Interaction Patterns
‣ List ‣Accordion ‣ Paging
INTERACTION PATTERNS: LIST
INTERACTION PATTERNS: ACCORDION
INTERACTION PATTERNS: PAGING
INTERACTION PATTERNS: PAGING
Interaction Patterns
‣ List ‣Accordion ‣ Paging
A Taxonomy
‣ Trigger Indicators ‣ Reveal Patterns
‣ Interaction Indicators ‣ Interaction Patterns
So, what can we learn from all of this?
Content First
Content First
Make sure you’re building the right navigation
Priority
Priority
Priority
Priority
Context
Context
Context
Focus
Focus
Behavior
Multi Open
Single Open
Single Open
Auto Scroll
Usability
Most users don’t expect the trigger
Can you navigate your site, without the navigation?
Teach Use
Familiarity breeds usability
Familiarity breeds usability
Collaboration
I cannot do timelesswork on my own
Design without testing is guesswork
You & Your Client
You & Your Users
You & your client working without your users is guesswork
Design without testing is guesswork
Collaborate
Not just with your client, but also with real users
@bencallahan
THANKS!