Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Small Screen Navigation: ConvergeSE, 2014

Fe8510ee8e06c36d02799dbf8f934b9c?s=47 Ben Callahan
May 02, 2014
Design
1
470

Small Screen Navigation: ConvergeSE, 2014

The deck from my “Small Screen Navigation” presentation at ConvergeSE in Columbia, South Carolina.

Fe8510ee8e06c36d02799dbf8f934b9c?s=128

Ben Callahan

May 02, 2014
Tweet

More Decks by Ben Callahan

See All by Ben Callahan
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
2
600
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
0
130
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
5
840
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
16
700
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
7
320
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
10
1.8k
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
5
990
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
7
610
Fe8510ee8e06c36d02799dbf8f934b9c?s=48 bencallahan
6
1.9k

Other Decks in Design

See All in Design
Acb24b2e81f0f7c3d6e7eda5e0a70be8?s=48 alvieave
1
130
37228dc025342eeadeb18bf1c2976a7a?s=48 fixel_admin
0
230
6c0a17fd6d961b18cc9b3ee58f021407?s=48 phantaleung
0
2.1k
E1e5be595b41fe3cf014cab6b2ef2a85?s=48 geoffreydorne
1
140
C017f3b100cbaa3127ac95d9544c70d9?s=48 maxsbow
1
210
708e6c194dd71ae3c73b01b60366c83e?s=48 fiqryr
0
140
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
1
170
3d895659a74acee6d37b3674f6f7b650?s=48 heewon
3
330
5f6c384e6fa98248221e93b31697aeb9?s=48 kaiart
1
1.6k
D4ad7f4022b9b86c2da92a718df3aeba?s=48 doyung
0
200
Aa19e202c24c51a41415206e7742c098?s=48 maslow_akkun
0
7k
3c75ad9ccb3cca4b81b9b887ba6101bb?s=48 ray110
1
700

Featured

See All Featured
44b54d2ffcb7857004071cc6795dde11?s=48 cassininazir
350
20k
C620790ae5bf5b50c245b2e0ef95f338?s=48 deanohume
294
28k
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
128
22k
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
55
3k
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
209
11k
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
482
150k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
67
4.4k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
148
20k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
364
63k
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
84
3.6k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
55
4.7k
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
15
1k

Transcript

  1. SMALL SCREEN NAVIGATION @bencallahan

  2. The Maze

  3. amazon.com

  4. amazon.com

  5. amazon.com

  6. amazon.com

  7. amazon.com

  8. amazon.com

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

  10. A Taxonomy ‣ Trigger Indicators ‣ Reveal Patterns ! ‣

    Interaction Indicators ‣ Interaction Patterns

  11. Trigger Indicators

  12. What is a Trigger?

  13. Trigger Indicators ‣ Words ‣ menu, main menu ‣ nav,

    navigation ‣ site specific
 (sections, topics,
 products, etc.) ‣ Icons ‣ plus ‣ hamburger ‣ arrows ‣ “x”

  14. TRIGGER INDICATORS Words

  15. TRIGGER INDICATORS Icons Plus Hamburger Down Arrow

  16. TRIGGER INDICATORS Other & Combinations

  17. Trigger Indicators ‣ Words ‣ menu, main menu ‣ nav,

    navigation ‣ site specific
 (sections, topics,
 products, etc.) ‣ Icons ‣ plus ‣ hamburger ‣ arrows ‣ “x”

  18. Reveal Patterns

  19. Reveal Patterns ‣ Always Available ‣ Anchor to Footer ‣

    Select Element ‣ Make Room ‣ Cover Up ‣ Off Canvas ‣ Priority + ‣ Full Screen Takeover

  20. REVEAL PATTERNS: ALWAYS AVAILABLE

  21. REVEAL PATTERNS: ANCHOR TO FOOTER

  22. REVEAL PATTERNS: SELECT ELEMENT

  23. iOS 7 REVEAL PATTERNS: SELECT ELEMENT

  24. REVEAL PATTERNS: SELECT ELEMENT Chrome on OS X

  25. REVEAL PATTERNS: MAKE ROOM

  26. REVEAL PATTERNS: COVER UP

  27. REVEAL PATTERNS: OFF CANVAS

  28. REVEAL PATTERNS: PRIORITY +

  29. REVEAL PATTERNS: FULL SCREEN TAKEOVER

  30. Reveal Patterns ‣ Always Available ‣ Anchor to Footer ‣

    Select Element ‣ Make Room ‣ Cover Up ‣ Off Canvas ‣ Priority + ‣ Full Screen Takeover

  31. Interaction Indicators

  32. INTERACTION INDICATORS Icons

  33. Interaction Indicators ‣ Icons ‣ plus ‣ dash ‣ “x”

    ‣ various arrows

  34. Interaction Patterns

  35. Interaction Patterns ‣ List ‣ Accordion ‣ Paging

  36. INTERACTION PATTERNS: LIST

  37. INTERACTION PATTERNS: ACCORDION

  38. INTERACTION PATTERNS: PAGING

  39. Interaction Patterns ‣ List ‣ Accordion ‣ Paging

  40. Takeaways

  41. Takeaways ‣ Architecture ‣ Focus ‣ Behavior ‣ JavaScript ‣

    Usability ‣ Prioritization

  42. TAKEAWAYS: ARCHITECTURE

  43. TAKEAWAYS: ARCHITECTURE

  44. TAKEAWAYS: FOCUS

  45. TAKEAWAYS: BEHAVIOR Multi Open

  46. TAKEAWAYS: BEHAVIOR Single Open

  47. TAKEAWAYS: BEHAVIOR Single Open

  48. Auto Scroll TAKEAWAYS: BEHAVIOR

  49. Takeaways ‣ JavaScript ‣ Visible by Default ‣ Anchor to

    Footer ‣ Single DOM

  50. mediaCheck, by @robtarr

  51. Takeaways ‣ Usability ‣ User Expectations ‣ Plan for the

    Worst ‣ Teach Use

  52. Prioritization

  53. Prioritization

  54. Prioritization

  55. Prioritization

  56. Prioritization

  57. Prioritization

  58. If you’re going to make a website, you better make

    it easy to get to the content.

  59. THANKS! @bencallahan