Fast Food Functionality: The Hamburger Menu — Design Trends that Effect UX #NHUXPA

Click here to load reader

  • date post

    15-Aug-2015
  • Category

    Design

  • view

    530
  • download

    0

Embed Size (px)

Transcript of Fast Food Functionality: The Hamburger Menu — Design Trends that Effect UX #NHUXPA

  1. 1. What is Fast Food Functionality? U X PATTER N S TH AT: Are fast and easy Look good Are very familiar Can leave you bloated Should be taken in moderation could kill you.
  2. 2. Now ServingHamburger Navigations Meet the Hamburger Icon The icon indicates a list. It can come in various shapes and sizes. It likes to morph into Xs when you touch it.
  3. 3. Now ServingHamburger Navigations The icon allows users to view a hidden list, menu, or block of content. The menu is hidden due to screen real estate...right?
  4. 4. Now ServingHamburger Navigations in some cases, yes However
  5. 5. Now ServingHamburger Navigations Its become a UI designers dirty closet For hiding content in the name of clean design.
  6. 6. I blame Dieter Rams Now ServingHamburger Navigations Good design is as little design as possible
  7. 7. Now ServingHamburger Navigations Now we have photo galleries pretending to be websites tied together with 30px icons that mean nothing to anyone but the designer WTF?!
  8. 8. Now ServingHamburger Navigations So prettybut what the hell do you do now?
  9. 9. Now ServingHamburger Navigations Get attacked by a robot
  10. 10. Now ServingHamburger Navigations Become a mannequin...
  11. 11. Now ServingHamburger Navigations Develop Insomnia
  12. 12. Now ServingHamburger Navigations Shit, this logo animation is awesome. But
  13. 13. Now ServingHamburger Navigations There needs to be a goal and a purpose in design or its not design, its decoration. Here are some UX Patterns that can make your navigation pretty enough to not be banished from the screen.
  14. 14. Now ServingHamburger Navigations 1. Headroom Hides the menu until you need it; scroll up, hover the top, or swipe down.
  15. 15. Now ServingHamburger Navigations 2.Anchor Points Hide your nav upon scrolling to a specific point on the page.
  16. 16. Now ServingHamburger Navigations 3.Add Extra Features Leaves the main navigation visible, and gives the user a reason to explore.
  17. 17. Now ServingHamburger Navigations So which one works best? Youll have to A/B test to find out. Nothing works 100% of the time. But hiding important content works 0% of the time.
  18. 18. Now ServingHamburger Navigations ..and hamburger navs can be a great idea. Just like when youre about to pull into McDonalds, or Wendys, or Five Guys, or BK, or Sonic, or KFC, or Taco Bell, orshit Im hungry. Follow me on the twitters: @jesserandgd