Recently I had the honor of being a presenter for Web920, a group of web developers/designers who meet once a month at Titletown Brewery to share ideas on various web-related topics. One of the topics I was asked to cover was website navigation design. So many possibilities! Each with their own pros and cons.
Here are four of the styles we discussed:
1. Standard button
Pros: Quick to create and your audience will easily recognize the button as something they should click.
Cons: Too many buttons can overwhelm your audience or make your site look outdated. Use sparingly.
Tips: The Illustrator Symbols Palette contains many ready-to-go button designs and icons which you can then customize. Make sure to use “trigger words” on your buttons so that it is very clear to the user what will happen when they click.
Example: Illustrator’s Web Symbols Palette
2. List with icons
Pros: Icons make it easier for your audience to quickly find the link they are looking for. This style also allows you to write slightly more descriptive text than you would be able to fit on a standard button.
Cons: Occasionally this style can be misinterpreted for a bulleted list of information rather than something the user should click on.
Tips: Reinforce the fact that the list is clickable by using a rollover state. Perhaps the icon/text/background changes color on rollover.
Example: musiquenomade.com
3. Buckets
Pros: Buckets are much larger than a button, so they have a stronger presence on the page and they give your audience more of a preview of what they will get if they click. People are drawn to great photography, so buckets are not only functional but also can be great eye candy.
Cons: General rule of thumb is to limit buckets to no more than 3 per grouping. More than this can be overwhelming.
Tips: Use the buckets to link to the pages your audience is naturally going to want to see next. Buckets work well with photography so add some flare. Also make the entire bucket clickable to enhance usability.
Example: k2.pl
4. Animated
Pros: Animation has potential to increase user engagement.
Cons: Not all animation is functional or practical for mobile users or users with disabilities.
Tips: Use animation as a progressive enhancement. Your site should still be navigable if the user does not have Javascript or Flash on their device. Also don’t allow animation to interfere with accessibility.
This is just the tip of the iceberg. Is there a navigation style or tip that you would like to share? We would love to hear from you.
