Tabs for Navigation
We have several sections on our website that use tabbed navigation but in some cases the tabs don’t look enough like tabs for people to notice they are clickable. To deal with this I’ve been working to redesign the tabs but I’m not exactly sure what I want them to look like. While I like rounded tabs I think that these would be to much for the space I’m working with. I want something really simple and plain but I also want to make sure people are clear that they are clicking on tabs. I haven’t found anything that is just right yet. Some tabs that I’ve found which stand out as possibilities are:
I’m not really concerned about the code to render these so much as a concept that I think will be effective in conveying to my users that “hey these are clickable tabs”.
Below are a couple screen shot of the current tabs to give you a sense of how they look/what they do. Keep in mind the number of tabs is variable as is the width of the area they are sitting in.
Why am I telling all of you this? Well what I’d really like is if you’d post links to your favorite tabs in the comments on this post. The help is appreciated and I’ll post back here which type we decide to go with, along with an updated screenshot from the site once they are implemented.
I don’t know how much you can change things but I think to get people to more often realize that the tabs can be clicked on would be to either emphasize them with a box or a small icon, making them look more like buttons even when they’re not. A good concept of this is http://elasticdigital.com/ , where the arrows let you know you can click even if the buttons are essentially the same color as the header. http://mintidea.ca/ also has a nice set of tabs that don’t really look like tabs. Just breaking each link up with a vertical line between them might help too, making it look more like navigation which people are more used to looking for, like on this site http://www.exploresteamboat.com/marketplace/ .
Thanks for the ideas. I like the ideas of “breaking each link up with a vertical line between them” or “emphasize them with a box or a small icon”. These approaches are simple and not too much overkill for the space, which is exactly what I was looking for.
The example you posted “Tab example from silver orange”, seems about perfect to me. But I am a geek.