# Presentation: 237891

## 1:1  Set and State Goals 

**Sources:  3**

**Guideline:  **Identify and clearly articulate the **primary goals of the website** before beginning the design process.
- Comments:  Before starting design work, identify the primary goals of the website (educate, inform, entertain, sell, etc.).  Goals determine the **audience, content, function**, and the **site’s unique look and feel**.  It is also a good idea to **communicate the goals** to, and develop consensus for the site goals from, management and those working on the website.

**Importance**

**Evidence**

**Notes:**
-Seems obvious – but how many do it??  Especially given strong impt rating.
-EG.  HHS site 
-1/3 of resources/budget devoted to define
	-Goals (to educate those unfamiliar with HHS) (Topic driven)
	-Audience (for public, not prof)
	-Features/Functions in order of priority
	-Consensus from management and Users

## 1:1  Set and State Goals 

- 1:1  Set and State Goals

**Sources:  3**

**Importance**

**Evidence**

**Notes:**
-Let’s look at some actual sites.  Looking at this page, what’s the goals?  

-May have set them, but it’s not clearly reflected on this site.

## 1:1  Set and State Goals 

- _[http://](http://familydoctor.org/)__[familydoctor](http://familydoctor.org/)__[.org/](http://familydoctor.org/)_

- 1:1  Set and State Goals

**Sources:  3**

**Importance**

**Evidence**

**Notes:**
This site does a better job at giving its Value Proposition.  Is it reflected throughout the site???  Doesn’t do much good if it’s not.

## 1:2  Use an Iterative Design Approach 

**Sources:  9**

**Guideline:  **Develop and test prototypes through an **iterative design approach** to create the most useful and usable website.
**Comments:  **Iterative design consists of **creating** paper and software prototypes, **testing** the prototypes, and then **making changes** based on the test results.  The “test and make changes” process is repeated until the website meets **performance benchmarks** (“usability goals”).  When these goals are met, the iterative process ends.  **Software tools** are available to assist and facilitate the development of prototypes.

**Importance**

**Evidence**

**Notes:**
-Research shows that the more iterations we make of a site and test, the better.  
-Problem: usually only get a chance to do 2 or 3 before launch.  Most times, occurs only at the end. 
-Use a variety of tools to iterate: html, paper, powerpoint, software tools
-Stop when meet usability goals and objectives

## 1:4  Provide Useful Content 

**Sources:  14**

**Guideline:  **Provide content that is engaging, relevant, and appropriate to the audience.
**Comments:  **Content is the information provided on a website.  Do not waste resources providing easy access and good usability to the wrong content.  One study found that content is the most critical element of a website.  Other studies have reported that content is more important than navigation, visual design, functionality, and interactivity.

**Importance**

**Evidence**

**Notes:**
Idea here is that: ‘Content is king’ (Nielsen). It’s what people come to your site for.  

The home and 2nd tier pages are only used to speed users up to content.  It’s silly speed users up to content that is not useful.

Again, spend 1/3 of time, budget defining content, how manage/update it, what will/won’t add to site, and how to display it.

## 1:4  Provide Useful Content 

**Sources:  14**

**Importance**

**Evidence**

**Notes:**
Example: mix of good and bad content.  
This is an NIH site specifically for the public.  It’s goal is to reach the layman.  
However, extraneous info is added – note ‘Conduct Business w/ the NIH’

## 2:1  Display Information in a Directly Usable Format

**Sources:  6**

**Importance**

**Evidence**

**Notes:**
Idea here is “don’t make me think.”  

Don’t require users to covert, summarize, or translate your information in order for it to be useful.  

Ask audience: how many grams in an ounce?  Provide both formats to users.

## 2:1  Display Information in a Directly Usable Format

**Sources:  6**

**Importance**

**Evidence**

**Notes:**
-These icons are used as primary navigation features on a website.  Are they clear? 
-The first set are off of a fitness and health website and the second is off of the old IRS.
-Please put in a one word item that best describes the icon. (Let’s see if someone in the class can get these all right.  You guys have been looking at icons for years, let’s see if you can get them all right.)
-After the exercise, ask users what the icon is.  Have them debate each one.
(Study found that designers select artistic icons while users select ones that are more functional.)

## 2:1  Display Information in a Directly Usable Format

-  Diet	 Family   Drugs   Sex     Mind    Body

**Sources:  6**

**Importance**

**Evidence**

- Previous         Next         Home       Search        Help

**Notes:**
These icons are used as primary navigation features on a website.  Are they clear?  Please place a word next to each.

## 3:4 Do Not Use Color Alone to Convey Information 

**Sources:  14**

**Importance**

**Evidence**

**Notes:**
-8% of males/0ne-half % of females have difficulty discriminating colors.
-Guidelines provide a list of ways to accommodate color-deficient users w/ the colors you select.

## 3:4 Do Not Use Color Alone to Convey Information 

**Sources:  14**

**As seen by non-colorblind users.**

**Importance**

**Evidence**

## 3:4 Do Not Use Color Alone to Convey Information 

**Sources:  14**

**As seen by 5% of the population.**

**Importance**

**Evidence**

**Notes:**
-Does a nice job using some other techniques to “Convey” info:
	-Larger text to highlight “News this week” header
	-Bold
	-Consistency in placement of information
-Demonstration: Show users how to access the color blind pallette.

## 4:1 Design for Common Browsers 

**Sources:  4**

**More than 90% of website visitors use some version of Internet Explorer.**

**Importance**

**Evidence**

**Notes:**
-Don’t spend time designing for the wrong devices.  A good designer will find the characteristics of his/her audience and design for them.
-If 90% using IE, create using the most popular version and control in other versions and Netscape.
-Show Bob’s site (webusability.com, ‘web profile user statistics’).  Other sources provided in guidelines.

## 5:1 Create a Positive First Impression of Your Site 

**Sources:  4**

**Importance**

**Evidence**

**Notes:**
Does this site convey quality?

## 5:2 Ensure the Homepage Looks like a Homepage 

**Sources:  7**

**1**

**2**

**3**

**Importance**

**Evidence**

**Notes:**
-Users should be able to distinguish the homepage from the second/third tier pages quickly
-Describe the Cancer Research Portfolio example – users thought second tier page was the homepage.  Made selections off of it.
-What attributes indicate it’s a homepage
	-Masthead/logo easily recognizable
	-Masthead is heavy
	-Key categories are displayed, heavily weighted

## 5:3 Show All Major Options on the Homepage 

**Sources:  4**

**All major topic areas and categories are **
**presented at the homepage level.**

**Importance**

**Evidence**

**Notes:**
-Users should not have to click down the 2nd/third tier pages to see all ‘major’ options.
-Plus they may think the information doesn’t exist if it’s not on the homepage.
-Make sure they are the most important on the site.
-Users also may not think they exist on the site.

-Relies on the ‘define’ activities discussed earlier.
-Silly to have the good usability on the ‘wrong set of features/functions.’

## 5:3 Show All Major Options on the Homepage

- 5:3 Show All Major Options on the Homepage

**Sources:  7**

**Importance**

**Evidence**

**Notes:**
All major topics are several clicks into the site.

## 9:1 Use Clear Category Labels 

**Sources:  7**

- Link labels are clear and distinct, allowing users to distinguish paths quickly.

**Importance**

**Evidence**

**Notes:**
Users scan sites looking to accomplish a task.  To effectively identify the correct choice, ‘category labels’ need to be:
-Clear
-Distinct
-When not clear leads to 
	-more error rates
	-Task completion time goes up
	-Success rates go down

## 9:1  Use Clear CategoryLabels 

**Sources:  7**

**Importance**

**Evidence**

**Notes:**
Are these ‘Category labels’ clear?  ‘Get Involved’  ‘Helpful NIH Links’
Links attached don’t offer much help either.

## 10:1 Provide Consistent Clickability Cues 

**Sources:  5**

**Importance**

**Evidence**

**Notes:**
-One of the most frequent user behaviors is clicking links.
-User’s shouldn’t be required to ‘sweep’ website with their cursor to determine what’s clickable. (Waiting for finger to pop-up).
-Using the eyes is much faster.

-Ask to do exercise: circle all items you think are clickable
-18 links in total

## Slide 21

## Slide 22

## 10:1 Provide Consistent Clickability Cues 

**Sources:  5**

**Right-facing arrows are very strong clickability cues for users.**

**Importance**

**Evidence**

## 10:1 Provide Consistent Clickability Cues 

**Sources:  5**

**On the home page, images are clickable.**

**On lower pages, images are not clickable.**

**Importance**

**Evidence**

**Notes:**
Here is an issue w/ consistency.  Not all graphics are links.  Keep cues consistent throughout site.

## 11:1 Use Black Text on Plain, High-Contrast Backgrounds 

**Sources:  17**

**Importance**

**Evidence**

**Notes:**
To reliable increase reading speed and scanning – use black text on a plain, high-contrast, non-patterned background.

One study found that when compared to reading light text on a dark background, people read black text on white background 32% faster. 

## 11:1 Use Black Text on Plain, High-Contrast Backgrounds 

**Sources:  17**

**Importance**

**Evidence**

## 11:2 Ensure Visual Consistency 

**Sources:  14**

**Location and size of pictures, title bar, and font all result in visual consistency.**

**Importance**

**Evidence**

**Notes:**
-Several studies found that using visually inconsistent displays led to: 1) more errors 2) increased task completion times 3) decreased user satisfaction, and 4) an increase in learning time.
-This example shows several areas that are consistent: topic headers, news stories, content layout.  Describe how users need to form a mental model quickly of how the site is laid out across all pages.
-VC includes: Colors used for labels; font sizes and backgrounds; location of labels, text, pictures.

## 13:1 Distinguish Required and Optional Data Entry Fields 

**Sources:  4**

**Importance**

**Evidence**

**Notes:**
Clearly indicate which fields are required.

Give Atlas example.

## 13:2 Detect Errors Automatically 

**Sources:  17**

**Importance**

**Evidence**

**Notes:**
Use the computer to detect errors made by users.

Anticipate user errors and allocate responsibility to the computer to identify them.

## 13:3 Minimize User Data Entry 

**Sources:  3**

**Importance**

**Evidence**

**Notes:**
Don’t require the user to enter information more than once.
Why?
	-increases completion time
	-increases the possibility of error

## 13:3 Minimize User Data Entry 

- 13:3 Minimize User Data Entry

**Sources:  3**

**Importance**

**Evidence**

**Notes:**
As designers, we should look for ways to have users make as few entries as possible.

## 13:4 Label Data Fields Clearly 

**Sources:  2**

**Each data entry field has an associated descriptive label.**

**Importance**

**Evidence**

**Notes:**
Need to be 
	-Clear
	-Concise
	-unambiguous (common terms their familiar with)
	-Bold (so users can readily distinguish between their entries and field labels)

## 13:5  Put Labels Close to Entry Fields 

**Sources:  4**

**Importance**

**Evidence**

**Notes:**
Close proximity allow users to rapidly make the connection between label and entry field.  CNET example – put fields to the left of a box to ensure more likelihood it’ll be read

## 13:5 Put Labels Close to Entry Fields 

**Sources:  4**

**Importance**

**Evidence**

## 16:1 Organize Information Clearly 

**Sources:  18**

**This design clearly illustrates to the user the logical structure of the website,  The structure is built on the user’s needs – namely, completing a form in ten steps.**

**Importance**

**Evidence**

**Notes:**
-Organize info at each level of the website so it shows a clear and logical structure.

-Present information in a structure that reflects users needs at the 
	-website level
	-page level
	-paragraph or list level

This online content/form example – allows users to quickly understand the structure, process, and relationships.
(Bad example of ‘data entry’: the ‘label’ is far from the ‘entry field’

## 16:1 Organize Information Clearly 

**Sources:  18**

**Importance**

**Evidence**

**Notes:**
Menu page level example

## 16:1 Organize Information Clearly 

**Sources:  18**

**Importance**

**Evidence**

**Notes:**
Content level example

## 16:2 Put Critical InformationNear the Top of the Website 

**Sources:  7**

**Importance**

**Evidence**

**Notes:**
-Put critical information high in the hierarchy of a website.

-Reduces the need for users to click deep into the site, make more decision between choices (that are less critical)
-Studies found that more clicks users make to find desired info, the greater the likelihood they’ll make an incorrect choice.  Impt info should be 2 to 3 clicks from homepage.

## 17:1 Provide a Search Option on Each Page 

**Sources:  7**

**Importance**

**Evidence**

**Notes:**
-Provide a search option on each page of a CONTENT RICH site.

-Users shouldn’t have to return to the homepage to conduct search.

-Search engines don’t always improve users’ search performance.
-Designers should consider the advantages/disadvantages of including one (is it content rich, are there specific items on the site (spool)
-Designers should consider whether the site lends itself to ‘automated searches’

## 17:2  Ensure Usable Search Results 

**Sources:  7**

**Importance**

**Evidence**

**Notes:**
Ensure that results
	-provide the precise info being sought
	-Format that matches users expectations
-Studies found that users want to use the search results to continue to solve their problems.  Get frustrated when results are confusing.

-Above example provides several good features:
	-Term searched on (user maintains context of results)
	-Highlighted term in the description section of results
	-Clustered list of related search terms

## 17:2  Ensure Usable Search Results 

**Sources:  7**

**Importance**

**Evidence**

**Notes:**
-Unusable results
	-No discernable order
	-no ability to sort results by characteristics – price, size

## 17:3 Allow Simple Searches 

**Sources:  7**

**Importance**

**Evidence**

**Notes:**
-Most users employ a simple search strategy
-Most will use few search terms
-And ever fewer search features (eg, boolean operators, query modifiers)

-If most users are inexperienced web searchers, provide simple instructions and examples to help guide users’ searchers

## 17:3 Allow Simple Searches 

**Importance**

**Evidence**

**Sources:  7**