|
|
|
|
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
do?"
. 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.
311
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.
312
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
313
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
314
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
315
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.
316
Search
Encircled area represents the search option provided in this web
site, which is a
Utility. |
|
|
|
|