Mega Drop Downs
- 1. Mega Drop Down What they are, usability, design and development
- 2. Mega Drop Downs • Visual navigation • Large drop down menu showing image and product description
- 3. Mega Drop Downs Simple mega drop down Shows the difference between products that are hard to describe
- 4. Mega Drop Downs Well styled mega drop down Does require scrolling but allows products to be easy scanned & sublevel navigation
- 5. Mega Drop Downs Mega drop down that slightly misses the mark. Difficult to scroll & sublevel navigation gets in the way.
- 6. Mega Drop Downs Mega drop down that misses the mark. Over large image that takes too long to load. More of a mini web page than a navigation scheme.
- 7. History • Jakob Nielsen • Alertbox, March 23, 2009 • “Big, two dimensional drop- down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user’s choices.”
- 8. Usability • Everything visible at once (no scrolling or multilevel menus) • Grouped to aid usability • Can use visual images to clarify choices that are difficult to describe in a few words (eg rack types)
- 9. Usability - Design Parameters Design Parameters • Structure navigation in functional groups that make sense to your customers • Pick images that show product differences clearly • Use a few words to supplement images if required • Use a mouse over effect if appropriate
- 10. Design/Development • Needs to open quickly with minimal loading times • Use ‘CSS sprites’ to load all images at once quickly • Use expires headers so that images are put into cache
- 11. Design/Development • Use javascript to add in a 0.5 second closing delay • Possible use of jQuery, although in Sitepoint article this didn’t work well • Use of Dreamweaver’s Spry based menu works well and is quite light weight
- 12. Summary • Use Mega Drop Downs when • a site requires multi-level navigation • when products are difficult to describe • when a visual may more clearly identify a product than words (eg cars) • Don’t ‘rely’ Mega Drop Downs as javascript may be turned off, or the site may be accessed by a mobile device.