ZeePedia buy college essays online


Human Computer Interaction

<<< Previous EVALUATION: TRY THE TRUNK TEST Next >>>
 
img
Human Computer Interaction (CS408)
VU
Lecture
33
Lecture 33. Evaluation V
Learning Goals
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-at-
a-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.
310
img
Human Computer Interaction (CS408)
VU
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 \ o u 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.
311
img
Human Computer Interaction (CS408)
VU
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.)
Try the trunk test
33.1
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
312
img
Human Computer Interaction (CS408)
VU
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.
1. Site 1D
4-Local navigation
CIRCLE:
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
313
img
Human Computer Interaction (CS408)
VU
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
314
img
Human Computer Interaction (CS408)
VU
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.
315
img
Human Computer Interaction (CS408)
VU
Search
Encircled area represents the search option provided in this web site, which is a
Utility.
316
Table of Contents:
  1. RIDDLES FOR THE INFORMATION AGE, ROLE OF HCI
  2. DEFINITION OF HCI, REASONS OF NON-BRIGHT ASPECTS, SOFTWARE APARTHEID
  3. AN INDUSTRY IN DENIAL, SUCCESS CRITERIA IN THE NEW ECONOMY
  4. GOALS & EVOLUTION OF HUMAN COMPUTER INTERACTION
  5. DISCIPLINE OF HUMAN COMPUTER INTERACTION
  6. COGNITIVE FRAMEWORKS: MODES OF COGNITION, HUMAN PROCESSOR MODEL, GOMS
  7. HUMAN INPUT-OUTPUT CHANNELS, VISUAL PERCEPTION
  8. COLOR THEORY, STEREOPSIS, READING, HEARING, TOUCH, MOVEMENT
  9. COGNITIVE PROCESS: ATTENTION, MEMORY, REVISED MEMORY MODEL
  10. COGNITIVE PROCESSES: LEARNING, READING, SPEAKING, LISTENING, PROBLEM SOLVING, PLANNING, REASONING, DECISION-MAKING
  11. THE PSYCHOLOGY OF ACTIONS: MENTAL MODEL, ERRORS
  12. DESIGN PRINCIPLES:
  13. THE COMPUTER: INPUT DEVICES, TEXT ENTRY DEVICES, POSITIONING, POINTING AND DRAWING
  14. INTERACTION: THE TERMS OF INTERACTION, DONALD NORMAN’S MODEL
  15. INTERACTION PARADIGMS: THE WIMP INTERFACES, INTERACTION PARADIGMS
  16. HCI PROCESS AND MODELS
  17. HCI PROCESS AND METHODOLOGIES: LIFECYCLE MODELS IN HCI
  18. GOAL-DIRECTED DESIGN METHODOLOGIES: A PROCESS OVERVIEW, TYPES OF USERS
  19. USER RESEARCH: TYPES OF QUALITATIVE RESEARCH, ETHNOGRAPHIC INTERVIEWS
  20. USER-CENTERED APPROACH, ETHNOGRAPHY FRAMEWORK
  21. USER RESEARCH IN DEPTH
  22. USER MODELING: PERSONAS, GOALS, CONSTRUCTING PERSONAS
  23. REQUIREMENTS: NARRATIVE AS A DESIGN TOOL, ENVISIONING SOLUTIONS WITH PERSONA-BASED DESIGN
  24. FRAMEWORK AND REFINEMENTS: DEFINING THE INTERACTION FRAMEWORK, PROTOTYPING
  25. DESIGN SYNTHESIS: INTERACTION DESIGN PRINCIPLES, PATTERNS, IMPERATIVES
  26. BEHAVIOR & FORM: SOFTWARE POSTURE, POSTURES FOR THE DESKTOP
  27. POSTURES FOR THE WEB, WEB PORTALS, POSTURES FOR OTHER PLATFORMS, FLOW AND TRANSPARENCY, ORCHESTRATION
  28. BEHAVIOR & FORM: ELIMINATING EXCISE, NAVIGATION AND INFLECTION
  29. EVALUATION PARADIGMS AND TECHNIQUES
  30. DECIDE: A FRAMEWORK TO GUIDE EVALUATION
  31. EVALUATION
  32. EVALUATION: SCENE FROM A MALL, WEB NAVIGATION
  33. EVALUATION: TRY THE TRUNK TEST
  34. EVALUATION – PART VI
  35. THE RELATIONSHIP BETWEEN EVALUATION AND USABILITY
  36. BEHAVIOR & FORM: UNDERSTANDING UNDO, TYPES AND VARIANTS, INCREMENTAL AND PROCEDURAL ACTIONS
  37. UNIFIED DOCUMENT MANAGEMENT, CREATING A MILESTONE COPY OF THE DOCUMENT
  38. DESIGNING LOOK AND FEEL, PRINCIPLES OF VISUAL INTERFACE DESIGN
  39. PRINCIPLES OF VISUAL INFORMATION DESIGN, USE OF TEXT AND COLOR IN VISUAL INTERFACES
  40. OBSERVING USER: WHAT AND WHEN HOW TO OBSERVE, DATA COLLECTION
  41. ASKING USERS: INTERVIEWS, QUESTIONNAIRES, WALKTHROUGHS
  42. COMMUNICATING USERS: ELIMINATING ERRORS, POSITIVE FEEDBACK, NOTIFYING AND CONFIRMING
  43. INFORMATION RETRIEVAL: AUDIBLE FEEDBACK, OTHER COMMUNICATION WITH USERS, IMPROVING DATA RETRIEVAL
  44. EMERGING PARADIGMS, ACCESSIBILITY
  45. WEARABLE COMPUTING, TANGIBLE BITS, ATTENTIVE ENVIRONMENTS