Mega Drop Downs: Designing for the Future
This blog entry was posted on April 2, 2009.
Are you keeping up with the latest Web usability trends? If not, start running some Google searches on “web usability.” You’ll see something called the “Userati” which sounds like a cult at first…well I guess it sort of is.
Anyway, Jakob [yaw-cub] Nielsen is the most prominent figure out there right now in the Userati group. Over the course of his career he has consistently written new material for our reading pleasure. As the times change, so does the information he provides.
This morning, I came across an interesting usability article that covers “Mega Drop Downs” and the growing amount of Web developers using them. They are essentially drop downs taken to the next level.
Let’s say your website has over 50 pages of relevant information. You can’t possibly fit 50 navigational links into one bar on a website. So what do you do? You create drop down menus! Drop down menus are great for 15-20 page sites, but if you have many more pages than that you should think about implementing a mega drop down which is nothing more than an expanded version of a regular drop down.
Megas, their short name, are “Big, two-dimensional drop-down panels group navigation options to eliminate scrolling and use typography, icons, and tooltips to explain the user’s choices. “ ~ Jakob Nielsen.
It’s important that during the transition from a concept to code that the images are being optimized for the web. Since Mega’s contain more information, they will take a few milliseconds longer to load which could be the difference from either keeping or losing a customer.
Nielson makes an interesting note that just because Mega’s are bigger, that doesn’t mean you should load them up with a bunch of unnecessary information. Remember, you are building and designing sites for internet users who have little or no experience navigating the Web. So keep Mega’s simple, smart and elegant.
If You Like this posting please +1 it!
Related posts:
Filed under: Web Usability,Website Design
This entry was posted on Thursday, April 2nd, 2009 at 5:14 am and is filed under Web Usability, Website Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.No Comments
RSS feed for comments on this post. | TrackBack URL
“Since Mega’s contain more information, they will take a few milliseconds longer to load which could be the difference from either keeping or losing a customer.”
A few milliseconds influences whether you stay or go? I don’t fully agree with that time frame but I get your point
Comment by Christian — April 2, 2009 @ 10:27 am
If it takes too long for something to load, don’t you think the visitor would get frustrated with that?
The idea is to make everything as accessible as possible. If site elements load too slowly you could definitely lose their traffic.
Do you not agree?
Comment by Jason Wright — April 2, 2009 @ 11:08 am
I agree 100%. But I don’t think many of us think in terms of milliseconds…
Comment by Christian — April 3, 2009 @ 12:59 pm
but how is this best implemented to ensure spiders can crawl? CSS – any pointers?
cheers
Comment by John — July 31, 2009 @ 4:07 pm
Excellent question John. To be honest, I haven’t tried coding one of these bad boy’s yet. A lot of what I’ve been reading about is that you should use Ajax to get the results you’re looking for. I do know that SEO people out there try to stay away from using Ajax as a means to improve the search engines ability to crawl the site. I think this is something you could produce via CSS, but I’m not sure you would get the results you desire. Take a look at this post: http://www.sitepoint.com/blogs/2009/03/31/make-a-mega-drop-down-menu-with-jquery/ don’t forget to checkout their completed example code. Best of luck.
Comment by Jason Wright — August 3, 2009 @ 10:09 am