The Common User
|
No one wants to learn your user interface.
Vision
A. 
B.
 C.
D.
E.
|
- Hue - Degree color is similar to red, green, or blue.
- Value - Degree color differs from white, gray, or black.
- Lightness - Degree a color appears lighter or darker than
another.
- Proximity uses distance or location to create groups. How
many groups are there in the lines in A at left? How many are in each
group? What are the groupings in the following?
Hue
Value
Lightness
Proximity
Similarity
Symmetry
Continuity
Indentation |
Hue
Value
Lightness
Proximity
Similarity
Symmetry
Continuity
Indentation |
- Similarity groups by kind. How many groups are there in the
computers in B at left? How many are in each group?
- Symmetry perceives the whole of the figure rather than the
parts. We see two overlapping triangles but miss the smaller triangle
in C at left. We see the [ ] brackets grouped together even though the
][ are closer.
[ ][
][ ]
- Continuity grouping by flow of lines or alignment. In D at
left, we see the lines connecting A-C and B-D but not A-B and C-D. In
E at left, we see a cross formed by the computers at left even though
there are no connections.
- Indentation is an element of continuity to group things
together into a hierarchy. For an example see this page.
- Alignment is an element of continuity for grouping. Which
of the following are easier to group together? Name at least three
grouping elements at work.
Vision
Similarity
Symmetry
Continuity
Indentation
|
Vision
Similarity
Symmetry
Continuity
Indentation |
Vision
Similarity
Symmetry
Continuity
Indentation |
Vision
Similarity
Symmetry
Continuity
Indentation |
Vision
Similarity
Symmetry
Continuity
Indentation |
Vision
Similarity
Symmetry
Continuity
Indentation |
Some basic vision rules:
- Use text, graphics, and backgrounds that are easily discernable.
Don't count on perfect lighting conditions.
- Sometimes conventions must be followed, white and yellow stand out
better but fire trucks must be red.
- Keep contrast high, no
white on light
gray.
- Avoid patterned backgrounds, it makes text hard to read.
- Make important items significantly different in two ways, such as
hue and lightness. Consider that links on a white background are
significantly different by being blue and dark.
|
Memory
Rabbits can remember 5 things, plus or minus 2. People can remember 7
things, plus or minus 2
|
- Recognize that users want to leave your site as soon as possible,
including this site.
- Assume users are impatient and want only to minimize work and
maximize gain.
- Recognition is easier and more accurate than recall.
Is it easier to recognize an answer on a multiple choice test
or recall the answer on an essay? Don't force users to remember
anything.
- Make pages to be remembered visually distinct. Are splash screens
and a standard site look-and-feel at odds with this rule?
- People only remember 7 things, plus or minus 2, for a short time
without repetition. Try to keep choices to a maximum of 9. Can you
memorize the letters "forashorttime".
- Chunking or organizing choices into similar groups
can be used when more choices required. Is it easier to recognize "forashorttime" or "for a short time"?
|
Delay and Interruptions
Delay is due to the system.
Interruptions are generally due to the user. |
- What is user reaction to system delay?
| Response time |
User reaction |
| < 0.1 second |
Instantaneous. |
| < 1.0 second |
Delay but not break in thought stream. |
| > 10 second |
Switches to another task. |
- Provide feedback on progress of some operation that may take a
long or unpredictable amount of time.
- Interruptions can break concentration, provide feedback cues
or memory aids so user knows where they are in the task on their
return, such as page titles that clearly describe the task at
hand.
|
|
Perceived affordance
Affordance is the function that an interface provides. |
- Which door provides the better perceived affordance?
- Is the affordance of
 the same as "Syllabus"? Is the perceived affordance the
same?
|
| |
Movement
|
- Place common navigation elements in a common location on the page,
top, left, right, etc.
- Minimize the distance between successive choices. For example, on
successive pages, a Next button placed in the same location on
each page, places the mouse over the button on the next page, reducing
user effort to move rapidly from one page to the next.
- Place navigation close to the Back button, the most heavily
used navigation element.
- Make hotspots large enough to accurately and quickly be clicked.
Which of the following works best?
Syllabus
Syllabus
|
| |
User Environments
|
- Lighting greatly effects viewing. What can be done by the page
designer?
- Internet access speed in bits per second of 14.4KB to 10MB is
common, or roughly 1000 times difference. Downloading a 10 megabyte
file requires at least 8 seconds at 10MB and about 6000 seconds or
over 100 minutes at 14.4 KB. What can be done by the page designer?
- Browser devices can vary from computer, PDA, phone, etc.
|
| |
Web Conventions
- Site Navigation
- Search
- Homepage
- Links repeated
- Blue text links underlined
- Back to top on long pages
|
 |
| |
Accessibility
|
- Follow the W3C (www.w3.org) guidelines.
- Use http://www.cast.org/bobby
to evaluate for accessibility. It is a good test but humbling.
|
| |
Building a Useable Site
|
- Perform user testing early and often.
- Ways to verify usability include:
- User observations.
- Surveys and interviews.
- Focus groups.
- Lab testing.
- Heuristic evaluations by developers or usability experts.
- Avoid talking too much or providing guidance during tests.
|
|
