# N341  Chapter 2 Notes Web Development

Modified

### Designing for Users

One design point is that you are not the user and the user is not the designer.

Usability books offer many rules of thumb for creating sites and pages that work for the user. You should read a variety of sources and consider the suggestions when designing sites and individual pages. The following are only some of the important topics.

### 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

• Search
• Homepage
• Blue text links underlined

### 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.

### Exercise

 Suggest improvements for the homepage below. Create a better homepage following the preceeding suggestions. Use Frontpage. The links do not need to be active. Copy the following and Paste Special | Treat as HTML into FrontPage. Click on the graphic and save as Petz.jpg. Test it on your neighbor. ```
dog toys
view shopping cart
kitty toys
videos for your pooch