Are Mega Menus Really Heroic?
Download as PPTX, PDF2 likes522 views
The document presents a lecture by Heather Bauer on effective website navigation and information architecture, emphasizing the importance of usability for users, including how they navigate, find information, and what they need to know. It discusses various research methods and design considerations, such as navigation types, the use of breadcrumbs, mega menus, and the challenges posed by different devices, particularly mobile. Ultimately, it aims to provide insights on organizing content in a sustainable and user-friendly way for improved navigation experience.
Are Mega Menus Really Heroic?
- 1. 25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com Are Mega Menus Really Heroic? Designing Your Site Navigation Heather Bauer Design4Drupal Saturday, August 1, 2015 – 11:00
- 2. About Me: Heather Bauer • UX Product Specialist at BioRAFT • M.S. in Human Factors in Information Design at Bentley University • Co-Organizer of Boston Service Jam 2014 • Expert in Residence for GA UXD course summer 2014 drupal.org/u/hezzieb twitter.com/hezzieb524 linkedin.com/in/heathersbauer Introduction
- 3. About BioRAFT • Enterprise safety, compliance & training software for lab scientists and those that work with them built with Drupal • SaaS, multi-site application. • WE’RE HIRING! BioRAFT.com DrupalNights.org Introduction
- 4. About You • Usability Professionals • Project Managers • Developers • Designers • Other Introduction
- 6. Agenda • Introduction • What is Information Architecture? • How to Research • Navigation Overview • Navigation Design • Things to Keep in Mind Introduction
- 7. 25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com Information Architecture
- 9. Information Architecture • Creates intuitive ways to navigate data • Makes information easy to find • Schemes must be: – Concise – Descriptive – Mutually exclusive – Possess information scent Information Architecture
- 11. Information Scent • Cues that indicate what you’re looking for is down a particular path • Informs decisions • Allows information that doesn’t seem relevant to be discarded or ignored Information Architecture
- 13. What Users Need to Know • Am I in the right place? • Does the site have what I’m looking for? • Is there anything better? • What now? Information Architecture
- 14. What Users Need to Know • Am I in the right place? – Make sure they can tell what your site is for – Every page is your home page • Does the site have what I’m looking for? • Is there anything better? • What now? Information Architecture
- 15. What Users Need to Know • Am I in the right place? • Does the site have what I’m looking for? – Use organization systems that make sense (e.g. alphabetical, by time, location, etc.) – Obvious labels – Navigation should look like navigation – You are here and you were there indicators • Is there anything better? • What now? Information Architecture
- 16. What Users Need to Know • Am I in the right place? • Does the site have what I’m looking for? • Is there anything better? – Hierarchy should be obvious – Breadcrumbs – “See also” options • What now? Information Architecture
- 17. What Users Need to Know • Am I in the right place? • Does the site have what I’m looking for? • Is there anything better? • What now? – Next steps should be obvious – Don’t hide the last step to success Information Architecture
- 18. Why Users Visit Your Site • Searching for something • Task to accomplish • Killing time • Not always mutually exclusive Information Architecture
- 19. 25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com Research
- 20. How to Do Organization • Observe people • Study the competition • Look at the search logs – what are people looking for and not finding? Research
- 21. Doing Your Research • Card Sort • Sitepath diagramming • Task analysis • Journey mapping • Sitemap Research
- 23. Card Sorting • Early stage technique • 2 types: – Open Card Sort: Can make as many groups as appropriate – Closed Card Sort: Groups pre-determined • Can be done with users or stakeholders Research
- 24. Card Sorting Tools • Sticky Notes • OptimalSort • UserZoom • UserTesting.com • Many more: www.measuringuserexperience.com/CardSort ing/index.htm Research
- 26. Sitepath Diagramming • Sketching system – determine users and their activities • Good for deciding site flow, early UI design, and workflow • Can show a process that you can design for one user and reuse Research
- 27. Sitepath Diagramming Tools • Something to draw on • Lots of colored drawing implements • Draw people (stick figures A-OK) • Personas (Optional) Research
- 28. Sitepath Diagramming How To • Draw a circle representing your system • Put types of people around the edge (obvious people in upper left) • Ways people might come to the site (lower left) • People using the site very differently (right) • Draw the scenarios within the circle Research
- 30. Task Analysis • Much more detailed than Sitepath Diagramming • A way to fill in the little pieces the scenarios may gloss over • Helps figure out design questions to be answered • Captures subtleties of each step in the process Research
- 31. Task Analysis How To • Determine task goal • Pull pieces of the scenario that relate directly • Determine subtasks • Determine sub-subtasks • Add system interaction Research
- 33. Sitemapping 4 Types • Tree Map – great for hierarchy • Comb Map – uses space better • Star Map – hierarchy isn’t strict • Tab Map – grouped by similarities instead of hierarchy Research
- 34. Sitemap considerations • Big or small? • Shallow or deep? • How important is the hierarchy? • Are there multiple ways to get to one page? Research
- 36. Journey Mapping • Identifies problem areas with workflows • Focuses on users’ emotional state at a given step • Combination of Sitepath Diagramming/Task Analysis/Sitemap and Personas Research
- 38. Forces at Play • Business • Users • Technology Research
- 39. Roadblocks • Sometimes you can put them in users’ way • Sometimes they cause more harm than good Research
- 40. 25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com Navigation
- 41. Types of Navigation • Structural Navigation: Hierarchy including global and local • Associative Navigation: Similar items that help with exploratory seeking • Utility Navigation: Sign in, user info, etc. Navigation
- 42. Types of Navigation • Global Navigation – Your big categories – Visible from every page – Gives a rough feel for what the site is about • Local Navigation – Page specific – Gets to the finer details – Allows for more specific browsing Navigation
- 43. Navigation Access Pogosticking • Have to go to a parent category before a new sub category • Usually for large, varied collections of content • Requires very clear and clickable sense of place • Hiding top level categories – easier to focus • Allows for space saving methods Navigation
- 44. Navigation Access Crabwalking • Can move between categories at the same depth • Easier error recovery • Requires everything of the same level to be visible at the same time Navigation
- 45. Faceted Classification • Good if you have items that can be classified by many characteristics • Considers the question of how else someone would search for this • Becoming increasingly common Navigation
- 46. 25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com Navigation Design
- 47. Navigation Location Top • All navigation visible at once • Full width of the screen is available to content below navigation • Good if you have a few big categories • Gets messy if you have more than about 5 Navigation Design
- 48. Navigation Location Left • More flexible with the number of categories • Vertical space continues infinitely • Leaves less space for local navigation and content Navigation Design
- 49. Navigation Location Right • Don’t do it • Least effective with users Navigation Design
- 50. Navigation UI Mega Menu Navigation Design
- 51. Navigation UI Mega Menu • Jakob Nielsen endorsed Mega Menus in 2009 • Allow you to see multiple levels of navigation • Requires less drill down • Allows for recognition over recall • Potentially overwhelming • Can be used at any level of navigation • Take up a large portion of the screen • Not mobile friendly Navigation Design
- 52. Navigation UI Breadcrumbs • Provide a trail of hierarchy • Useful for pogosticking • Expert users get the most use of breadcrumbs • Use > instead of : to indicate hierarchy • Should live right under page title • Jury is still out on whether they decrease task completion time or increase success rate Navigation Design
- 53. Sub Navigation Best Location • Start left OR top • 2nd and 3rd selections should be from the same place but 1st selection can be separated • Top-left-left and left-left-left were the best Navigation Design
- 56. Hover = Bad Usability • People think hover is faster than click • The problems: – Accidental menu triggering/un-triggering – Unnatural cursor movements Navigation Design
- 57. Absent Navigation • When it is crucial for users to take a specified path • Wizards • Initial setup Navigation Design
- 58. How Users Search • Known-item search • Exploratory seeking • Don’t know what I need to know • Re-finding Navigation Design
- 59. Navigation for Wayfinding Navigation Design
- 60. Navigation for Wayfinding • Landmarks are the only way to navigate • Users need to know: – Where they are – Where’s the thing they need – How did they get there? – Where have they already looked? • Be consistent with organization • Provide detours for errors Navigation Design
- 61. 25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com Keep in Mind
- 62. When Organizing Content • Users perform better with deep (3 levels) rather than wide (2 levels) navigation • Good navigational structure doesn’t make up for junk labels • Organize products/features together with a focus on what they have in common instead of organizing by goal Keep in Mind
- 63. Novices • Only novice for a short time • Many plateau at intermediate • Don’t be in the way Keep in Mind
- 64. "You knew when you were needed and when to go away - it's a rare talent" Jaime Lannister – Game of Thrones Season 2 Episode 7 Keep in Mind
- 65. Sustainable Structures • Allow room for growth (within a section and whole new sections) • Avoid making structures too narrow or deep Keep in Mind
- 66. What’s Different with Mobile? • Space is more limited • Fat Finger Syndrome – targets need to be large enough • Navigation may be hidden • Hover is not an option • Relevant content may be different Keep in Mind
- 67. Photo Credits • http://downthenaturetrail.blogspot.com/2013/05/architecture- design-wallpaper.html • https://www.interaction-design.org/ux-daily/194/web-user- behaviour-directed-by-information-scent • https://www.newfangled.com/an-offline-information-architecture- exercise/ • http://itcourses.cs.unh.edu/assets/docs/502/tutorials/fall09- tut/asr25/page2.html • http://kaylaashley345.blogspot.com/2013/12/task-analysis.html • http://imgbuddy.com/pogo-stick-clip-art.asp • https://www.flickr.com/photos/peterkaminski/47922080 • http://www.creativebloq.com/navigation/design-better-faceted- navigation-your-websites-41411437
- 68. Resources • http://www.usabilityfirst.com/about-usability/information-architecture • http://www.usabilityfirst.com/glossary/information-scent • https://www.interaction-design.org/ux-daily/194/web-user-behaviour-directed- by-information-scent • Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education. • http://theuxreview.co.uk/user-journeys-beginners-guide/ • http://www.creativebloq.com/navigation/design-better-faceted-navigation-your- websites-41411437 • http://www.usability.gov/get-involved/blog/2006/11/breadcrumb-navigation.html • http://www.usability.gov/get-involved/blog/2006/04/left-navigation-is-best.html • http://www.nature.com/neuro/journal/v3/n4/full/nn0400_404.html • http://www.usability.gov/how-to-and-tools/methods/organization-structures.html
- 69. 25 1st St., Suite 104, Cambridge, MA 02141 | www.BioRAFT.com Are Mega Menus Really Heroic? drupal.org/u/hezzieb twitter.com/hezzieb524 linkedin.com/in/heathersbauer Slides will be available on drupalnights.org/library Heather Bauer Design4Drupal Saturday, August 1, 2015 – 11:00
Editor's Notes
- #4: Enterprise safety, compliance & training software for lab scientists and those that work with them built with Drupal
- #9: Photo: http://downthenaturetrail.blogspot.com/2013/05/architecture-design-wallpaper.html
- #10: http://www.usabilityfirst.com/about-usability/information-architecture
- #11: Photo: https://www.interaction-design.org/ux-daily/194/web-user-behaviour-directed-by-information-scent
- #12: http://www.usabilityfirst.com/glossary/information-scent
- #13: https://www.interaction-design.org/ux-daily/194/web-user-behaviour-directed-by-information-scent
- #14: Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #15: Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #16: Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #17: Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #18: Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #23: Photo Credit
- #25: Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #26: Photo: http://itcourses.cs.unh.edu/assets/docs/502/tutorials/fall09-tut/asr25/page2.html
- #27: Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #28: Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #29: Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #30: Photo: http://kaylaashley345.blogspot.com/2013/12/task-analysis.html
- #31: Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #33: Photos: http://pengbos.com/blog/slick-html-sitemap http://bhsmistler.weebly.com/web-design/wireframes-sitemaps http://members.tripod.com/the_english_dept/Inspiration/sitemap.html http://www.wmwhiteley.com/sitemap.htm
- #34: Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #35: Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #42: Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #43: Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #44: photo: http://imgbuddy.com/pogo-stick-clip-art.asp Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #45: Photo: https://www.flickr.com/photos/peterkaminski/47922080 Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #46: Photo: http://www.creativebloq.com/navigation/design-better-faceted-navigation-your-websites-41411437 Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #48: Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #49: Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #52: http://ux.stackexchange.com/questions/36164/in-what-situation-is-it-best-to-use-a-mega-menu http://www.nngroup.com/articles/mega-menus-work-well/ http://www.nngroup.com/articles/recognition-and-recall/
- #53: http://www.usability.gov/get-involved/blog/2006/11/breadcrumb-navigation.html
- #54: http://www.usability.gov/get-involved/blog/2006/04/left-navigation-is-best.html
- #59: Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #61: http://www.nature.com/neuro/journal/v3/n4/full/nn0400_404.html Wodtke, C., & Govella, A. (2009). Information Architecture: Blueprints for the Web. Pearson Education.
- #63: http://www.usability.gov/get-involved/blog/2009/08/organizing-web-content.html
- #66: http://www.usability.gov/how-to-and-tools/methods/organization-structures.html