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

20

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

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

What is Fast Food Functionality?

UX PATTERNS THAT:

Are fast and easy

Look good

Are very familiar

Can leave you bloated

Should be taken in moderation

…could kill you.

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

Now Serving…Hamburger Navigations

Meet the Hamburger Icon

The icon indicates a list.

It can come in various shapes and sizes.

It likes to morph into X’s when you touch it.

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

Now Serving…Hamburger 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?

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

Now Serving…Hamburger Navigations

in some cases, yes

However…

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

Now Serving…Hamburger Navigations

Its become a UI designer’s dirty closetFor hiding content in the name of “clean” design.

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

I blame Dieter Rams

Now Serving…Hamburger Navigations

“Good design is as little design as

possible”

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

Now Serving…Hamburger Navigations

Now we have photo galleries pretending to be websites tied

together with 30px icons that mean nothing to anyone but the

designer…

WTF?!

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

Now Serving…Hamburger Navigations

So pretty…but what the hell do you do now?

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

Now Serving…Hamburger Navigations

Get attacked by a robot…

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

Now Serving…Hamburger Navigations

Become a mannequin...

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

Now Serving…Hamburger Navigations

DevelopInsomnia…

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

Now Serving…Hamburger Navigations

Shit, this logo animation is awesome. But…

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

Now Serving…Hamburger Navigations

There needs to be a goal and a purpose in

design or it’s not design, it’s decoration.

Here are some UX Patterns that can make your navigation “pretty” enough to not be banished from the screen.

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

Now Serving…Hamburger Navigations

1. Headroom Hides the menu until you need it; scroll up,

hover the top, or swipe down.

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

Now Serving…Hamburger Navigations

2. Anchor Points Hide your nav upon scrolling to a specific

point on the page.

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

Now Serving…Hamburger Navigations

3. Add Extra Features Leaves the main navigation visible, and

gives the user a reason to explore.

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

Now Serving…Hamburger Navigations

So which one works best?

You’ll have to A/B test to find out.

Nothing works 100% of the time.

But hiding important content

works 0% of the time.

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

Now Serving…Hamburger Navigations

..and hamburger navs can be a great idea.Just like when you’re about to pull into McDonalds, or Wendys, or Five Guys, or BK, or Sonic, or KFC, or

Taco Bell, or…shit I’m hungry.

Follow me on the twitters:

@jesserandgd