Mission Critical Hover States are Evil

You don’t have to build websites to know what a dropdown menu is, and how common they are. Almost every website in the last decade with complicated taxonomy has a dropdown, and clients expect them.

It’s not too hard to create a Dropdown menu. I like to use Chris Coyier’s Simple jQuery Dropdowns. It’s slim in code and works great, but should I be creating dropdown menus?

Just because a particular method of providing a user interface has been popular in the past doesn’t mean it’s even usable today. The hardware people are using to access the websites you are building will continue to change and evolve far faster than you can anticipate.

Websites of the Future

As responsible people who build websites ( I don’t think designer or developer are accurate anymore, got a new Pronoun? ), we have to start accepting the chaos. I don’t want to build websites that won’t work in 2 years when a new way to interact with them is standard.

We’ve gotten past the flash. Everyone hows why that is evil now. The next evil doer, in my opinion is the mission critical hover state.

Design Critical Menus

Every website has a goal, or set of goals. The main menu of a website is generally going to be critical to these goals, and where the dropdown menu lives.

I treat the masthead of a website as the most valuable piece of real estate. The ONLY links or text to go in the header should be something you need to have available on every page of the site.

What Menu?

The elephant in the room here is that touch devices don’t have a hover state. Your dropdown menu will never be seen from a phone or touch computer.

When you consider that the hover state only works with a cursor, there are a lot of fairly common design techniques that fall apart.

Links will always work

One of the most important elements of the web is the hyperlink. This is what makes it a web.

Dropdown menus revolve around the CSS :hover state, and often jQuery, and are essentially a hack. For quite a while, they were a great way to tuck away a submenu. That was when the only device to really interact with a website was a full sized PC or laptop. The little smart phones before the iPhone could browse, but nobody really expected to be able to use a website efficiently with one.

Obviously, there are many websites that need complicated menus and ways to divide choices without overwhelming users. The way to proceed is with good, old fashioned CLICK, and a little more creativity. Only display what you really need. The website doesn’t have 20 high priority goals.

Use things like the jQuery UI Accordion which requires a click to display the contents, and indicate that there are contents without a hover.

Back to Reality

There are going to be many clients who continue to require these horrible things. The best we can do is inform them of why they aren’t the best idea today, and find alternatives that provide better results. Given the rise in use of tablet computers like the iPad, this isn’t very difficult when compared to a design that didn’t take them into consideration.