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

Small Screen Navigation: ConvergeSE, 2014

Avatar for Ben Callahan Ben Callahan
May 02, 2014
Design
1
640

Small Screen Navigation: ConvergeSE, 2014

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

Avatar for Ben Callahan

Ben Callahan

May 02, 2014
Tweet

More Decks by Ben Callahan

See All by Ben Callahan
Design System Culture (Smashing Meets, 2022)
Avatar for Ben Callahan bencallahan
3
120
Design System Culture
Avatar for Ben Callahan bencallahan
2
240
Building a Human-Centered Culture
Avatar for Ben Callahan bencallahan
2
1.1k
Lessons Learned
Avatar for Ben Callahan bencallahan
0
230
Letting Go of Workflow Baggage
Avatar for Ben Callahan bencallahan
5
1.3k
Small Screen Navigation: Front-End Design Conference, Portland, 2014
Avatar for Ben Callahan bencallahan
16
1.2k
Small Screen Navigation: BD Conf: Nashville, 2014
Avatar for Ben Callahan bencallahan
7
720
Workflow on RWD Projects
Avatar for Ben Callahan bencallahan
10
2.3k
Dissecting Design
Avatar for Ben Callahan bencallahan
5
1.4k

Other Decks in Design

See All in Design
kintone Style Book
Avatar for kintone kintone
5
5.3k
21 Ways to Call American Airlines Customer Care Full Guide USA
Avatar for Sonny americanhub
0
300
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
Avatar for インクルーシブデザインスタジオCULUMU culumu
1
480
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
Avatar for akatsuki174 akatsuki174
1
320
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
Avatar for 株式会社ログラス loglass2019
1
2.9k
Figmaレクチャー会Part1 基本のき編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
0
130
「UXとUIの違い」v2
Avatar for Shirasu3 shirasu3
0
280
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
0
260
アクセシビリティに取り組むメリット
Avatar for Rikiya Ihara / magi magi1125
2
280
【MIXI MEETUP！ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏：デザイナーが語るプロダクト誕生秘話
Avatar for MIXI DESIGN mixi_design
PRO
0
160
街・都市という眼差し。まちづくりにおける規範と実践
Avatar for S.SAKAMON sakamon
0
190
【最新】マズロー安達の弟子実績（1期-6期の37人分）
Avatar for マズロー安達 maslow_akkun
0
3.4k

Featured

See All Featured
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
54k
Scaling GitHub
Avatar for Zach Holman holman
463
140k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
379
70k
Navigating Team Friction
Avatar for Lara Hogan lara
190
15k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.2k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
7.9k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
33k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k
Writing Fast Ruby
Avatar for Erik Berlin sferik
630
62k

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