Drop-Down Menus: Examples and Best Practices (Smashing Magazine)

I’m mostly posting this for myself. The more content people have, the faster they ask for dropdown menus. Here’s a list of best practices and examples for using dropdown menus from the good people at Smashing Magazine. Dropdown menus add complexity and potential confusion for users. These tips can help you make the call or draw the line.

Four Sites Deconstructed

Jakob Nielsen analyzes four sites for usability in his April 14 column Four Bad Designs.

“Bad content, bad links, bad navigation, bad category pages… which is worst for business? In these examples, bad content takes the prize for costing the company the most money.”

Ouch.

Let me know what you think. Nielsen is a polarizing figure for Web designers, so I hope we can have some good discussion.

What’s precise vs. what’s helpful

Take a look at the following collection of New York City subway maps.

The maps on the left are very precise. They are geographically pure. This would be great if they were intended for geographers or anyone else who needs a precise map.

However, these are graphics to inform people who ride the subway. They could care less about the surrounding landscape. They just need to find the right transfer, to get in the right tube. The information and clarity of the subway lines themselves is what’s most important.

The maps on the right are redesigned with the user in mind. They clarify the relationship of the subway lines to one another. Geographical purity is sacrificed, but the result (in theory) is a happier and more civil subway commuter.

Who is your audience? Do they need every tiny detail? What can you remove to provide more clarity to the message.

Remember, design and communication is the practice of subtraction.

What users hate most about Web sites

In What users hate most about Web sites , Sandra Rossi outlines some all-too common Web usability mistakes. To sum them up:

1. Invasive advertising: luckily, we don’t need to worry about this. However, making anything on your site invasive is a bad idea.
2. Re-inventing the wheel: people do not want to have to learn how to use a site before they can browse it. Fancy experimental navigation is for your own personal playground site, not for a corporate site.
3. ‘Leap of faith’ links: that means disclosing information on content and file size. There’s nothing I personally hate more than clicking a link that launches a pdf when I was expecting a web page. The Acrobat plugin takes forever. Always tell people if they’re not going to get a web page
4. Attention-deficit Web sites: “Users have a special hatred of flashing icons and banners, because they draw the eye away from what is important and hinder their progress,” Cunnington said. Blinking, flashing, buzzing and scrolling text is annoying.
5. War and Peace length: “A common mistake in Web design is to just [convert] a brochure to the Web. But the Web is its own medium, and communication has to change to reach users. Users are known to read 25 percent slower on the screen than on paper, read fewer words and don’t like long pages which require scrolling down,” she said. ‘Nuff said

So there you have it. The top 5 of “Web No-Nos,” print them out and glue them next to your monitor or tatoo them on your forearm if you’re really hard-core.

How users scan Web pages

Jakob Nielsen has posted results of a recent study that uses eye-tracking technology to understand how people scan web pages. Some quick take-aways from this study are:

• Users won’t read your text thoroughly
• The first two paragraphs must state the most important information.
• Start subheads, paragraphs, and bullet points with information-carrying words

Not is this good advice for readers, it’s also good advice for getting the attention of search engine spiders!