ممکن است شما هم با من هم عقیده باشید که طراحی واکنش‌گرا برخلاف ظاهر دوست داشتنی و منعطف‌اش، حاوی چالش های پنهانی نهفته‌ای است که گاهی دردآور است و روند اجرای کار را کند می کند. در مقابل این چالش‌ها بجای اینکه به اختراع دوباره چرخ فکر کنیم؛ کافی است نگاهی به الگوهای حاضر بیاندازیم. نویگیشن‌ها یکی از این چالش‌های موجود است. در این ارائه به تعیین اولویت‌ها و ترتیب محتوا که مهم ترین بخش تصمیم گیری در واکنش‌گرا کردن نویگیشن‌ها ست، خواهیم پرداخت. همینطور نقش همبرگرمنو، مزایا و معایب استفاده از آن را شرح می دهیم. در بخش دیگر به بررسی تجربه کاربری نویگیشن‌ها در طراحی واکنش‌گرا پرداخته و در انتها جدیدترین الگوهای نویگیشن‌ در طراحی واکنش‌گرا را معرفی می‌کنیم.

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