<Previous Lesson

Human Computer Interaction

Next Lesson>



As the aim of this lecture is to introduce you the study of Human Computer
Interaction, so that after studying this you will be able to:

. Understand the use of tabs

. Conduct the trunk test

Four reasons to use tabs

It hasn't been proven (yet), but It is strongly suspected that Leonardo da Vinci
invented tab dividers sometime in the late I5th century. As interface devices go, they're
clearly a product of genius.
Tabs are one of the very few cases where using a physical metaphor in a user interface
actually works. Like the tab dividers in a three-ring binder or tabs on folders in a file
drawer, they divide whatever they're sticking out of into sections. And they make it
easy to open a section by reaching for its tab (or, in the case of the Web, clicking on it).
In the past year, the idea has really caught on, and many sites have started using tabs
for navigation. They're an excellent navigation choice for large sites. Here's why:

. They're self-evident. I've never seen anyone—no matter how "computer
illiterate"—look at a tabbed interface and say, "Hmmm. I wonder what those

. They're hard to miss. When I do point-and-click user tests, I'm surprised at how
often people can overlook button bars at the top of a Web page. But because
tabs are so visually distinctive, they're hard to overlook. And because they're
hard to mistake for anything but navigation, they create the kind of obvious-ata-
glance division you want between navigation and content.

. They're slick. Web designers are always struggling to make pages more
visually interesting without making them slow to load. If done correctly (see
below), tabs can add polish and serve a useful purpose, all without bulking up
the page size.

. They suggest a physical space. Tabs create the illusion that the active tab
physically moves to the front.
It's a cheap trick, but effective, probably because it's based on a visual cue that we're
very good at detecting ("things in front of other things"). Somehow, the result is a
stronger-than-usual sense that the site is divided into sections and that you're in one of
the sections.


Why Amazon is good?

As with many other good Web practices, Amazon was one of the first sites to use tab
dividers for navigation, and the first to really get them right. Over time, they've
continued to tweak and polish their implementation to the point where it's nearly
perfect, even though they keep adding tabs as they expand into different markets.
Anyone thinking of using tabs should look carefully at what Amazon has done
over the years, and slavishly imitate these tour key attributes of their tabs:

. They’re drawn correctly. For tabs to work to full effect, the graphics have
to create the visual illusion that the active tab is in front o/the other tabs. This
is the main thing that makes them feel like tabs—even more than the
distinctive tab shape. '
To create this illusion, the active tab needs to be a different color or contrasting
shade, and it has to physically connect with the space below it. This is what makes
the active tab "pop" to the front.

. They load fast. Amazon's single row of tabs required only two graphics per
page, totaling less than 6k—including the logo!
Some sites create tabs (or any kind of button bar, for that matter) by using a separate
graphic for each button—piecing them together like a patchwork quilt. If Amazon did it
this way, the 17 pieces would look like this:
This is usually done for two reasons:

. Rollovers. To implement rollovers in tabs or button bars, each button needs to
be a separate graphic. Rollovers have merit, but in most cases I don't think
they pull their weight.

. A misguided belief that it will be faster. The theory is that after the first page
is loaded, most of the pieces will be cached on the user's hard drive,'1'0 so as the
user moves from page to page the browser will only have to download the
small pieces that change and not the entire site.
It's an attractive theory, but the reality is that it usually means that users end up with a
longer load time on the first page they see. which is exactly where \ou don't want it.
And even if the graphics are cached, the browser still has to send a query- to the server
for each graphic to make sure it hasn't been updated. If the server is at all busy, the
result is a visually disturbing crazy-quilt effect as the pieces load on ever}' page.

. They're color coded. Amazon uses a different tab color for each section of
the site, and they use the same color in the other navigational elements on the page
to tie them all together.
Color coding of sections is a very good idea—as long as you don't count on everyone
noticing it. Some people (roughly i out of 200 women and i out of 12 men—particularly over
the age of 40) simply can't detect some color distinctions because of color-blindness.
More importantly, from what I've observed, a much larger percentage (perhaps as many as
half) just aren't very aware of color coding in any useful way.
Color is great as an additional cue, but you should never rely on it as the only cue.

Amazon makes a point of using fairly vivid, saturated colors that are hard to miss.
And since the inactive tabs are neutral beige, there's a lot of contrast—which even
color-blind users can detect—between them and the active tab.

. There's a tab selected when you enter the site. If there's no tab selected when I
enter a site (as on Quicken.com, for instance), I lose the impact of the tabs in
the crucial first few seconds, when it counts the most.
Amazon has always had a tab selected on their Home page. For a long time, it was the
Books tab.
Eventually, though, as the site became increasingly less book-centric, they gave the
Home page a tab of its own (labeled "Welcome").
Amazon had to create the Welcome tab so they could promote products from their other
sections—not just books—on the Home page. But they did it at the risk of alienating
existing customers who still think of Amazon as primarily a bookstore and hate having to
click twice to get to the Books section. As usual, the interface problem is just a reflection
of a deeper—and harder to solve—dilemma.
Here's how you perform the trunk test:
Step 1 Choose a page anywhere in the site at random, and print it.
Step 2 Hold it at arm's length or squint so you can't really study it closely.
Step 3 As quickly as possible, try to find and circle each item in the list below.
(You won't find ail ot the items on every page.)

33.1 Try the trunk test

Now that you have a feeling for all of the moving parts, you're ready to try my acid
test for good Web navigation. Here's how it goes:
Imagine that you've been blindfolded and locked in the trunk of a car, then driven
around for a while and dumped on a page somewhere deep in the bowels of a Web
site. If the page is well designed, when your vision clears you should be able to
answer these questions without hesitation:

. What site is this? (Site ID)

. What page am I on? (Page name)

. What are the major sections of this site? (Sections)

. What are my options at this level? (Local navigation)

. Where am I in the scheme of things? ("You are here" indicators)

. How can I search?
Why the Goodfellas motif? Because it's so easy to forget that the Web experience is
often more like being shanghaied than following a garden path. When you're
designing pages, it's tempting to think that people will reach them by starting at the
Home page and following the nice, neat paths you've laid out. But the reality is that
we're often dropped down in the middle of a site with no idea where we are because
we've followed a link from a search engine or from another site, and we've never seen
this site's navigation scheme before.
And the blindfold? You want your vision to be slightly blurry, because the true test
isn't whether you can figure it out given enough time and close scrutiny. The standard
needs to be that these elements pop off the page so clearly that it doesn't matter

whether you're looking closely or not. You want to be relying solely on the overall
appearance of things, not the details.
Here's one to show you how it's done.
CIRCLE: 1. Site 1D 4-Local navigation
2. Page name 5. "You are here" indicator(s)
3. Sections and subsections 6. Search

Site ID

Encircled area in the figure represents the site ID


Page Name

Encircled area in the figure represents the Page Name

Sections and subsections

Encircled area in the figure represents the sections of this site


Local Navigation

Encircled area represents the Local Navigation area

You are here indicator

In this site as you can see the tabs are used to separate different sections. At this time
we are on home section. This is indicated by the use of same color for back ground as
the color of the tab.



Encircled area represents the search option provided in this web site, which is a

<Previous Lesson

Human Computer Interaction

Next Lesson>


Lesson Plan


Go to Top

Next Lesson
Previous Lesson
Lesson Plan
Go to Top