Mega Drop DownWhat they are, usability, design and

development

Mega Drop Downs

•Visual navigation

•Large drop down menu showing image and product description

Mega Drop Downs

Simple mega drop downSimple mega drop downShows the difference between Shows the difference between

products products that are hard to describethat are hard to describe

Mega Drop Downs

Well styled mega drop downWell styled mega drop downDoes require scrolling but allows Does require scrolling but allows products to be easy scanned & products to be easy scanned &

sublevel navigationsublevel navigation

Mega Drop Downs

Mega drop down that slightly misses Mega drop down that slightly misses the mark. Difficult to scroll & the mark. Difficult to scroll &

sublevel navigation gets in the way.sublevel navigation gets in the way.

Mega Drop Downs

Mega drop down that misses the Mega drop down that misses the mark. Over large image that takes mark. Over large image that takes

too long to load. More of a mini web too long to load. More of a mini web page than a navigation scheme.page than a navigation scheme.

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.”

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)

Usability - 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

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

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

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.

http://www.webxopt.com/resources.html

More Information