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.
DOMTab is a great script for creating inline tabs using CSS and JavaScript, and so when we were redesigning a section of our web site that lent itself to this approach, I was very keen to try it out.
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.
Uh Oh…IE5/Mac
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.
Wow, that’s a great job! Lots of snippets all coming together, sweet!
*Mike* – thanks! Resolving the IE5/Mac issue was quite a pain though. Thanks to “Tom”:http://www.110am.com/ for fixing that.
Infact, we’ve been discussing in our team how much support we should give the 0.67% of our visitors who are on IE5/Mac.
We’ve decided that we will no longer ensure that they have the same experience as visitors on more current browsers. As long as they can read the content, then we’re not going to worry about small design/layout issues.
In this case, of course, we had to make the pages work in IE5/Mac, otherwise much of the content would have been hidden from these users.
Actually i am a html designer, I know css, but nor more. From this site, I learn a lot, its really Excellent.
I thinks its really userful for everyone who wants to learn CSS.
Nice example I have to try it.