Week1 Lecture

HCI Guidelines
Week 1
Overview
• Introduction to HCI
• Guidelines for navigating the interface
• Website guidelines for disabilities
• Guidelines for organizing the data display
• Guidelines for getting the user’s attention
• Guidelines for facilitating data entry
• The eight golden rules of interface design
• Design elements & principles
Human-Computer Interaction
• Introduction
• When was the term HCI coined?
* Human Factors and Ergonomics

– Industrial Engineering Departments
* The design of assembly lines and military technology
(J. Grudin, 2006)

• Introduction (cont’d)
• HCI in Information Systems
* Business and Management schools involve in HCI research for managerial use
(J. Grudin, 2006)

• Computer-Human Interaction
* From Cognitive Psychologists and Computer Science for discretionary hands-on use
(J. Grudin, 2006)

• HCI in Informatics @ Indiana University Bloomington, U.S.A:
* Bioinformatics
* Cheminformatics
* Human-Computer Interaction Design
* Music informatics
* Security informatics
Guidelines
I. Navigating the interface (Shneiderman)
* Guidelines:
A. Standardize task sequences:
-- To allow users to perform tasks in the same sequence
B. Ensure that embedded links are descriptive
C. Use unique and descriptive headings
D. Use check boxes for binary choices
E. Develop pages that will print properly
F. Use thumbnail images to preview larger images
Guidelines
* Guidelines
A. Standardize task sequences:
-- To allow users to perform tasks in the same sequence
Guidelines
* Guidelines:
A. Standardize task sequences
B. Ensure that embedded links are descriptive:
-- Text should describe the link’s destination
Guidelines
* Guidelines
B. Ensure that embedded links are descriptive:
-- Text should describe the link’s destination
Source:http://www.shutterfly.com
Guidelines
* Guidelines:
C. Use unique and descriptive headings:
-- Headings should be related to the content
Guidelines
* Guidelines
C. Use unique and descriptive headings:
-- Headings should be related to the content
Source: http://www.oracle.com
Guidelines
* Guidelines:
D. Use check boxes for binary choices:
-- To provide a check box control if there are options
Guidelines
* Guidelines
D. Use check boxes for binary choices:
-- To provide a check box control if there are options
Source: http://www.ppsmile.com/staffeye/help/image/page7.gif
Guidelines
* Guidelines:
E. Develop pages that will print properly:
-- If users are likely to print develop pages with widths that print properly
Guidelines
* Guidelines
E. Develop pages that will print properly:
-- If users are likely to print develop pages with widths that print properly
Guidelines
* Guidelines:
F. Use thumbnail images to preview larger images:
-- To provide a thumbnail of images in order to make users
navigate multiple images easily
Guidelines
* Guidelines
F. Use thumbnail images to preview larger images:
-- To provide a thumbnail of images in order to make users
navigate multiple images easily
Source: http://www.friendster.com
Guidelines
Website guidelines for disabilities
-- Goal: to have web-page designers use features that permit users

with disabilities
-- included:
in the U.S. Rehabilitation Act Amendments
of 1998
http://www.access-board.gov/508.htm
(Shneiderman & Plaisant, 2005)

Guidelines
• Priority 1 Accessibility Guidelines:

from World Wide Web Consortium (W3C)
A. Provide a text equivalent for every non-text element

-- To provide a thumbnail of images
-- These include images, graphical representations of text,
animations, applets, programmatic objects, ASCII art, frames,
script images, stand-alone audio files, audio tracks of video and
video
Guidelines
• Priority 1 Accessibility Guidelines (cont’d):
B. For any time-based multimedia presentation

-- e.g.: movie or animation, synchronize equivalent
alternatives, such as captions, auditory descriptions of
the visual track
Guidelines
C. Ensure that all information conveyed with color is also

available without color
e.g.: from context
Guidelines
D. Title each frame to facilitate frame identification and

navigation
Guidelines
II. Organizing the display

* Guidelines
A. Consistency of data display:
-- should have standardized terminology abbreviations,
formats, colors, capitalization etc.
B. Efficient information assimilation by the user
C. Minimal memory load on the user
D. Compatibility of data display with data entry
E. Flexibility for user control of data display
Guidelines

* Guidelines
A. Consistency of data display
B. Efficient information assimilation by the user:
-- use format that is familiar to the user and related to the
tasks required to be performed with the data.
Guidelines

* Guidelines
C. Minimal memory load on the user:
-- Users should not required to remember information from
one screen to another.
Guidelines

* Guidelines
D. Compatibility of data display with data entry:
-- The format of displayed information should be well-matched
and linked clearly with data entry.
Guidelines

* Guidelines
E. Flexibility for user control of data display:
-- Information display should be flexible which allows user
to change it easily.
Guidelines
III. Getting the user’s attention

* Guidelines
A. Intensity:
-- limited use of high intensity to draw attention.
B. Marking
C. Size
D. Choice of fonts
E. Inverse video
F. Blinking
G. Color
H. Audio
Guidelines

* Guidelines
A. Intensity
B. Marking:
-- underline the item, enclose it in a box, point to it with an arrow or
use an indicator such as an asterisk, bullet, dash, plus sign or X.
C. Size
D. Choice of fonts
E. Inverse video
F. Blinking
G. Color
H. Audio
Guidelines

* Guidelines
A. Intensity
B. Marking
C. Size:
-- use up to four sizes with larger sizes attracting more attention.
D. Choice of fonts
E. Inverse video
F. Blinking
G. Color
H. Audio
Guidelines

* Guidelines
A. Intensity
B. Marking
C. Size
D. Choice of fonts:
-- use up to three fonts.
E. Inverse video
F. Blinking
G. Color
H. Audio
Guidelines

* Guidelines
A. Intensity
B. Marking
C. Size
D. Choice of fonts
E. Inverse video:
-- use inverse coloring.
F. Blinking
G. Color
H. Audio
Guidelines

* Guidelines
A. Intensity
B. Marking
C. Size
D. Choice of fonts
E. Inverse video
F. Blinking:
-- use blinking display or blinking color changes with great care and
in limited areas.
G. Color
H. Audio
Guidelines

* Guidelines
A. Intensity
B. Marking
C. Size
D. Choice of fonts
E. Inverse video
F. Blinking
G. Color:
-- use standard colors, with additional colors for occasional use.
H. Audio
Guidelines

* Guidelines
A. Intensity
B. Marking
C. Size
D. Choice of fonts
E. Inverse video
F. Blinking
G. Color
H. Audio:
-- use soft tones for regular positive feedback and harsh sounds for
rare emergency conditions.
Guidelines
IV. Facilitating data entry
* Guidelines
A. Consistency of data-entry transactions:
-- Use similar sequence of actions that are under similar
abbreviations, conditions, etc.
B. Minimal input actions by user
C. Minimal memory load on user
D. Compatibility of data entry with data display
E. Flexibility for user control of data entry
Guidelines
* Guidelines
A. Consistency of data-entry transactions
B. Minimal input actions by user:
-- Fewer input actions mean greater operator productivity.
-- Fewer input actions enable less error.
Guidelines
* Guidelines:
C. Minimal memory load on user:
-- Users should not be required to remember specific codes,
commands or syntax.
Guidelines
* Guidelines:
D. Compatibility of data entry with data display:
-- The format of data entry information should be compatible
and linked closely with data display.
Guidelines
* Guidelines:
E. Flexibility for user control of data entry:
-- Let users enter information in a sequence they can control.
Eight golden rules
• The eight golden rules of interface design (Shneiderman)
1. Strive for consistency:

-- Consistent sequences of actions must be in similar situations;
identical terminology should be used in prompts, menus and
help screens; consistent layout, color, fonts, etc.
2. Cater to universal usability
3. Offer informative feedback
4. Design dialogs to yield closure
5. Prevent errors
6. Permit easy reversal of actions
7. Support internal locus of control
8. Reduce short-term memory load
Eight golden rules
1. Strive for consistency

2. Cater to universal usability:
-- designers must recognize the needs of diverse users, age ranges,
disabilities, and technology diversity.
e.g.: adding features for novices such as explanations or
shortcuts for expert.
5. Prevent errors
Eight golden rules

3. Offer informative feedback:
-- there should be a system feedback for every user action.
-- the feedback can be in text or visual presentation of objects.
5. Prevent errors
Eight golden rules

4. Design dialogs to yield closure:
-- Informative feedback at the completion of a group of actions
e.g.: e-commerce sites move users from selecting products to the
checkout; ending with a clear confirmation page that completes
the transaction.
5. Prevent errors
Eight golden rules

5. Prevent errors:
-- designers should design a system such that users cannot make errors
e.g.: gray out menu items that are not appropriate;
if there are errors, the interface should detect the error and offer recovery
Eight golden rules

5. Prevent errors
6. Permit easy reversal of actions:
-- actions should be reversible (i.e.: errors can be undone)
Eight golden rules

5. Prevent errors
7. Support internal locus of control:
-- operator and users desire a sense that they are in charge of the
interface and that the interface responds to their actions.
Eight golden rules

5. Prevent errors
8. Reduce short-term memory load:
-- the display should be kept simple; online access to command-syntax
forms, abbreviates, cods and other information should be provided.
Conclusion
• HCI is a new field that has not been around for a long time. Its root
is from cognitive psychology.
• Navigating an interface has several guidelines that may work well
for website designs.
• World Wide Web Consortium (W3C) is one of the organizations that
offer website guidelines for people with disabilities.
• Guidelines for data display, data entry and user’s attention are
essential for operators, designers and users.
• The eight golden rules are necessary tools for designers.

Week1 Lecture

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Week1 Lecture

Încărcat de

Drepturi de autor:

Formate disponibile

HCI Guidelines

* Human Factors and Ergonomics

* The design of assembly lines and military technology

(J. Grudin, 2006)

• HCI in Information Systems

(J. Grudin, 2006)

(J. Grudin, 2006)

• HCI in Informatics @ Indiana University Bloomington, U.S.A:

I. Navigating the interface (Shneiderman)

I. Navigating the interface (Shneiderman)

I. Navigating the interface (Shneiderman)

I. Navigating the interface (Shneiderman)

I. Navigating the interface (Shneiderman)

I. Navigating the interface (Shneiderman)

Website guidelines for disabilities

-- Goal: to have web-page designers use features that permit users

(Shneiderman & Plaisant, 2005)

Website guidelines for disabilities

• Priority 1 Accessibility Guidelines:

A. Provide a text equivalent for every non-text element

Website guidelines for disabilities

• Priority 1 Accessibility Guidelines (cont’d):

B. For any time-based multimedia presentation

Website guidelines for disabilities

• Priority 1 Accessibility Guidelines (cont’d):

C. Ensure that all information conveyed with color is also

Website guidelines for disabilities

• Priority 1 Accessibility Guidelines (cont’d):

D. Title each frame to facilitate frame identification and

II. Organizing the display

II. Organizing the display

II. Organizing the display

II. Organizing the display

II. Organizing the display

III. Getting the user’s attention

III. Getting the user’s attention

III. Getting the user’s attention

III. Getting the user’s attention

III. Getting the user’s attention

III. Getting the user’s attention

III. Getting the user’s attention

III. Getting the user’s attention

IV. Facilitating data entry

IV. Facilitating data entry

IV. Facilitating data entry

IV. Facilitating data entry

IV. Facilitating data entry

• The eight golden rules of interface design (Shneiderman)

1. Strive for consistency:

• The eight golden rules of interface design (Shneiderman)

1. Strive for consistency

• The eight golden rules of interface design (Shneiderman)

1. Strive for consistency

• The eight golden rules of interface design (Shneiderman)

1. Strive for consistency

• The eight golden rules of interface design (Shneiderman)

1. Strive for consistency

• The eight golden rules of interface design (Shneiderman)

1. Strive for consistency

• The eight golden rules of interface design (Shneiderman)

1. Strive for consistency

• The eight golden rules of interface design (Shneiderman)

1. Strive for consistency