Mega Drop Down
What 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 down
Shows the difference between products
       that are hard to describe
Mega Drop Downs




       Well styled mega drop down
Does require scrolling but allows products
 to be easy scanned & sub...
Mega Drop Downs




 Mega drop down that slightly misses the
mark. Difficult to scroll & sublevel navigation
             ...
Mega Drop Downs




Mega drop down that misses the mark. Over
large image that takes too long to load. More
of a mini web ...
History
• Jakob Nielsen
 • Alertbox, March 23, 2009
 • “Big, two dimensional drop-
    down panels group
    navigation op...
Usability

• Everything visible at once (no scrolling or
  multilevel menus)
• Grouped to aid usability
• Can use visual i...
Usability -
              Design Parameters
              Design Parameters
•   Structure navigation in
    functional gro...
Design/Development
•   Needs to open quickly
    with minimal loading
    times

    •   Use ‘CSS sprites’ to
        load...
Design/Development
• Use javascript to add in a 0.5 second
  closing delay
  • Possible use of jQuery, although in
    Sit...
Summary
• Use Mega Drop Downs when
 • a site requires multi-level navigation
 • when products are difficult to describe
 •...
More Information
http://www.webxopt.com/resources.html
Upcoming SlideShare
Loading in …5
×

Mega Drop Downs

1,760 views
1,675 views

Published on

A quick look at mega drop downs. What they are, where they have come from, example, and some development idea.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,760
On SlideShare
0
From Embeds
0
Number of Embeds
86
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mega Drop Downs

  1. 1. Mega Drop Down What they are, usability, design and development
  2. 2. Mega Drop Downs • Visual navigation • Large drop down menu showing image and product description
  3. 3. Mega Drop Downs Simple mega drop down Shows the difference between products that are hard to describe
  4. 4. Mega Drop Downs Well styled mega drop down Does require scrolling but allows products to be easy scanned & sublevel navigation
  5. 5. Mega Drop Downs Mega drop down that slightly misses the mark. Difficult to scroll & sublevel navigation gets in the way.
  6. 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. 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. 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. 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. 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. 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. 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.
  13. 13. More Information http://www.webxopt.com/resources.html

×