Menu Transitions
Since I started helping out over at Widgetopia, I’ve been paying much closer attention to Web menus and how they work. The aspect of menus that’s been on my mind the most is the menu transition often used in Flash UIs, such as the “choose a model” menu on the current Volkswagon homepage. What intrigues me about menu transitions is not their effects, but their experience. As an experiment of sorts, I thought a Nielsenesque miniguide to menu transitions would be fun to write.
What are Menu Transitions?
Menu transitions are visual (and sometimes audio) effects that connect two separate menu states.
A flashy yet well produced example of menu transitions (Flash with sound) can be seen at Joshua Davis Studios. In this example, the two menu states for the “portfolio” button are the resting state and the point at which the three submenu options appear and come to rest.
When Are Menu Transitions Appropriate?
Simply put, menu transitions are appropriate when they convey an idea or meaning without gratuitous or long effects. Joshua Davis’s aforelinked menu transitions are appropriate because they convey the idea of an environment submerged in water. They do take a few seconds to complete and may frustrate some visitors, but the designer knew this when he was creating the menu. It’s a trade off that he made in an attempt to improve the experience of using the menu, and more importantly, the site it was designed for.
Another example of menu transitions can be found on the Elf movie homepage. Moving your mouse over any of the snow globes causes them to rise and reveal a menu. There may be some meaning there, but I have no idea what it is. The movement is simple and unexciting. The woosh sound could have come from any stock sound effect collection. In short, these menu transitions are pointless cheese. Then again, it is a Will Ferrell film.
Gratuitous transition effects are sometimes worse than meaningless effects because they’re either just too much or force the user to wait. What makes a “gratuitous” transition effect? It’s subjective, but solid user testing should reveal these types of transitions. A good rule of thumb is to keep menu transitions under two seconds.
Here’s the lesson: if users aren’t sure what idea the menu transitions convey, or if they’re gratuitous, don’t use them. Either don’t use any menu transitions or improve the menu transitions by using them to support the overall experience.
- 11 Jan 04
- interaction design, navigation, usability, web design
Go back to the top of this entry ↑
Comments
Frequency with which users actually use a website are also a factor. If it’s a site where the visitors are likely one time visitors, such as movie websites, then flashy whiz-bang may not be as much of a problem. On the other hand, if I’m at a stock quote site, I’m likely visiting this weekly, if not more than once a day even. Such a site would do well to ensure the information is accessible as fast as possible with as little fuss as possible.
Also, if you’re going to do something Nielsen-esque, you should really include a broad sweeping statement like “98% of menu transitions are unusable” ;)
KC on 13 Jan 04