Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

نویگیشن‌ در طراحی واکنش‌گرا

707 views

Published on

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

Published in: Education
  • Be the first to comment

نویگیشن‌ در طراحی واکنش‌گرا

  1. 1. Responsive Navigation Patterns ‫ارائه‬‫دهنده‬ ‫محسن‬‫حسینیان‬ hosseinianimohsenet
  2. 2. Responsive Navigation Patterns
  3. 3. Users have a goal and are on a mission.
  4. 4. The vehicle that takes users where they want to go
  5. 5. Responsive Navigation is more than one Content, Context or Component
  6. 6. Priority Lists for Content and Functionality Client’s View vs User’s View
  7. 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. 8. worldwildlife.org
  9. 9. kiwibank.co.nz
  10. 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. 11. Show when you can and hide when you can’t
  12. 12. A lot of Navigation (Off Canvas)
  13. 13. Off Canvas (Shopping Cart)
  14. 14. Off Canvas (Filters)
  15. 15. Off Canvas (Page History)
  16. 16. www.nixon.com/us/en Push down or Overlay
  17. 17. www.mitsubishi-motors.com.au Skip to Footer
  18. 18. Select Menu
  19. 19. Hamburger
  20. 20. Hamburger Menu
  21. 21. Do people understand the hamburger icon used for mobile navigation menus? Luke Wroblewski
  22. 22. The three line icon is used for many things
  23. 23. Google Material Guidelines
  24. 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. 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. 26. Out of Sight, Out of Mind
  27. 27. Out of Sight, Out of Mind
  28. 28. In Sight, In Mind
  29. 29. In Sight, In Mind
  30. 30. 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
  31. 31. Understanding by age group http://www.catalystnyc.com/2015/02/navigating-mobile-hamburger-menu-anyone-get/
  32. 32. This is not your grandma’s navigation.
  33. 33. 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.
  34. 34. But I have too many menu items!
  35. 35. The stronger information scent would work far better than a hamburger menu But I have too many menu items!
  36. 36. Okay, so what do we do instead?
  37. 37. Okay, so what do we do instead?
  38. 38. Don’t use hamburger menu on Desktop view, when you have a lot of space! squarespace.com
  39. 39. Don’t use hamburger menu on Desktop view, when you have a lot of space!
  40. 40.  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
  41. 41. Use Back/Close button The Principles of Web Navigation
  42. 42. The Principles of Web Navigation Occupy menu items with only one function
  43. 43. The Principles of Web Navigation Direct entry into sublevels / Auto Scroll to sublevels
  44. 44. The Principles of Web Navigation Offer clear and finger-friendly links
  45. 45. 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
  46. 46. Designing for Humans not Devices.
  47. 47. Design the Priority not the Layout! Ethan Marcotte
  48. 48. Thanks! You can find me at: @imohsenet hosseinian@gmail.com

×