This document discusses responsive navigation patterns for websites. It addresses the use of hamburger menus on mobile sites and provides alternatives. Some key points: - The hamburger menu icon is commonly used for mobile navigation but does not provide strong "information scent" about what lies behind it. - Users may not understand what the hamburger icon represents or that it opens additional navigation options. - Alternatives include using labels for menus, breadcrumbs to show location, and ensuring the most important navigation items are visible without clicking the menu. - The primary goal of navigation should be to help users achieve their goals simply and efficiently on any device, not adhere to particular layout patterns.

1. Responsive Navigation Patterns
‫ارائه‬‫دهنده‬
‫محسن‬‫حسینیان‬
hosseinianimohsenet

2. Responsive
Navigation
Patterns

3. Users have a goal and
are on a mission.

4. The vehicle that
takes users where
they want to go

5. Responsive Navigation
is more than one
Content, Context or
Component

6. Priority Lists for
Content and
Functionality
Client’s View vs User’s View

7. The content is for
everyone:
Content Parity
You don’t have to show all content
or navigation options at once, but
they should remain accessible on
every device.

8. worldwildlife.org

9. kiwibank.co.nz

10. Priorities matter and thinking
about them up front can often
go quite a long way to help
establish a consistent,
GOOD USER EXPERIENCE

11. Show when you can and hide when you can’t

12. A lot of Navigation (Off Canvas)

13. Off Canvas (Shopping Cart)

14. Off Canvas (Filters)

15. Off Canvas (Page History)

16. www.nixon.com/us/en
Push down or Overlay

17. www.mitsubishi-motors.com.au
Skip to Footer

18. Select Menu

19. Hamburger

20. Hamburger Menu

21. Do people understand the
hamburger icon used for
mobile navigation menus?
Luke Wroblewski

22. The three line icon is used for many things

23. Google Material Guidelines

24.  Space is scarce on mobile.
 Minimal navigation gives a clean look.
 It’s a designer’s dream.
 Designers are sometimes more focused on
trends than logic.
 It’s built into everything now. (Bootstrap,
Foundation ,…)
 Unsexy news travels slowly
Why are designer using them?

25. Information scent
User look for words like cost, price, rates, fees, etc.
Client: “What if the user wants to see the pricing?”
Designer: “Oh, they can just click the menu icon
and then click ‘Pricing.’ Easy!”
This hamburger smells like…nothing

26. Out of Sight, Out of Mind

27. Out of Sight, Out of Mind

28. In Sight, In Mind

29. In Sight, In Mind

31. Visitors Conversions Results
12.684 308 7
12.660 347 +12,9%
12.900 331 +5,7%
13.017 246 -22.2%
What about variations on the hamburger?
A/B Testing Hamburger Icon
http://exisweb.net/mobile-menu-abtest

32. Understanding by age group
http://www.catalystnyc.com/2015/02/navigating-mobile-hamburger-menu-anyone-get/

33. This is not
your
grandma’s
navigation.

34. The problem wasn’t that users
were confused by the
hamburger menu, but rather
that there was never a
compelling reason to click it
in the first place.

35. But I have too many menu items!

36. The stronger information scent
would work far better than a hamburger menu
But I have too many menu items!

37. Okay, so what do we do instead?

38. Okay, so what do we do instead?

39. Don’t use hamburger menu on Desktop view,
when you have a lot of space!
squarespace.com

40. Don’t use hamburger menu on Desktop view,
when you have a lot of space!

41.  A navigation system must be simple.
Without exception.
 Users should always know their current
place in the site. (Use breadcrumbs)
 The navigation system remains consistent.
 Use Label if you should use hamburger
menu!
 Use Down/Up Arrow for Menu Label.
The Principles of Web Navigation

42. Use Back/Close button
The Principles of Web Navigation

43. The Principles of Web Navigation
Occupy menu items with only one function

44. The Principles of Web Navigation
Direct entry into sublevels / Auto Scroll to sublevels

45. The Principles of Web Navigation
Offer clear and finger-friendly links

46. Your visitors don’t give a shit if your
site is responsive. They don’t care if
it’s a separate mobile site. They don’t
care if it’s just a plain ol’ desktop site.
They do give a shit if they can’t get
done what they need to get done.
Brad Frost

47. Designing
for Humans
not Devices.

48. Design
the Priority
not the Layout!
Ethan Marcotte

49. Thanks!
You can find me at:
@imohsenet
hosseinian@gmail.com