Sometimes you have a lot of information to present on a page. In certain circumstances (say, when you have a constrained space in which to present this content) I think the concept of using inline tabs to present users with choices as to what they see at any one time works really well.
By hiding the content the user doesn’t wish to see until they choose to you can avoid the problem of information overload, which can make it hard for a user to find the particular piece of information they are seeking.
In our usability testing, when we ask someone to find a piece of content such as a phone number, it’s not uncommon for them to be unable to see it even though it’s right there on the page infront of them.
However, it all looked a little blocky (our audience is mostly female, who prefer things to look a little more organic) and so I added rounded corners using the excellent Nifty Corners script (See more CSS rounded corners techniques).
Here’s a screenshot of how it turned out:
Showing Meaning Through Color
If you’re wondering about the color choices, they are meant to indicate a sliding scale of urgency: the deepest red is the most urgent (i.e. call 911), followed by a lighter red, then yellow and then blue for non-urgent conditions which could be treated at home.
Picking the colors was a nightmare, especially when dealing with shades of red (which immediately turns to pink when you start to lighten it). I’m still not totally happy with the colors, but our users understood the meaning behind them, which was the most important thing.
Here’s a thought – maybe someone can come up with a better color combination which I could use. I’m open to ideas.
Sadly, DOMTab doesn’t work in IE5/Mac. If you care about making your content viewable to users on this browser you’ll need to run a browser detect script and update the DOMTab script so that it doesn’t load for these poor souls.