Looking at Vandelay Design’s list of 50 Gorgeous Navigation Menus I started thinking about what made these menus so nice to use.
Sure the designs on these menus were nice but there was something else. Something that made them really simple. Almost none of them have drop-down secondary menus.
The drop-down secondary menu is a killer when it comes to usability. So often the menu will disappear while navigating towards it, for example.
As far as accessibility goes it also causes problems. The main navigation menu for a site often appears above the content. This makes sense. But if there are 5 main menu items and each item has 4 sub-items, now there are 20 items for a screen reader to get through before getting to the content. If someone is navigating by keyboard instead of mouse, what are the rules for where each menu item appears in the tab list?
Do you need all of those lists of what’s on the site at the top of the screen? Isn’t that what you’ve got a sitemap for in the first place?
The difficult task is to still relay the information that can be accessed in each part of the site.
Remember when department stores had elevator operators? You might only know of them from the opening credits of Are You Being Served? but they really existed.
The elevator operator would stop the elevator at each floor and announce what was on that floor. Nobody expected to be able to go into a department store and access men’s underwear instantly. They knew they had to go through the process of entering the store, going to the elevator, go up to the third floor and walk through slacks, shirts and ties before they got there. And they knew that all of that was available on the third floor because the elevator operator told them so.
So my suggestion is to include a little bit of text underneath the menu, like the area where the submenu currently is on DesignSensory‘s site, but instead of having a submenu there, just have a bit of explanatory text. For DesignSensory’s “Services” menu item it could be something like: Information about all our web, print and branding design services.
As long as a user knows that they are heading in the right direction, they’ll follow the path. They don’t need to be able to magically appear at their destination and don’t really expect to. Just give them as much information as they need to take the next step.
