IT 2622 (HCI)

● for desktop-interface designers,

have been followed by dozens of
guidelines documents for the Web
GUIDELINES, PRINCIPLES, and mobile devices
AND THEORIES ● Example of Apple guidelines for
designing menus for the iWatch

GUIDELINES, PRINCIPLES, AND THEORIES

● GUIDELINES: Low-level focused advice

about good practices and cautions
against dangers
● PRINCIPLES: Mid-level strategies or
rules to analyze and compare design
alternatives NAVIGATING THE INTERFACE
● THEORIES: high-level widely applicable
frameworks to draw on during design ● Standardize task sequences
and evaluation, as well as to support ● Ensure that embedded links are
communication and teaching descriptive
- Theories can also be predictive, such ● Use unique and descriptive headings
as those for pointing times by ● Use check boxes for binary choices
individuals or posting rates for ● Use radio buttons for mutually exclusive
community discussions choices
● Develop pages that will print properly
GUIDELINES ● Use thumbnail images to preview larger
images
● A guideline document helps by
developing a shared language and
ACCESSIBILITY GUIDELINES
promoting consistency among multiple
designers (in terminology usage, UI
● Text alternatives
appearance, and action sequences)
● Time-based media
● Based on best practices
● Distinguishable
● Critics:
● Predictable
- Guideline documents are too
specific, incomplete, hard to apply,
ORGANIZING THE DISPLAY
and something wrong
● Proponents:
● Smith and Mosier (1986) offer five
- Encapsulate experience, contribute
high-level goals
to improvements
- Consistency of data display
● The early Apple and Microsoft
(terminology, formats, colors,
guidelines, which were influential
delimiters, capitalization)
1
 - Efficient information assimilation by ● Blinking - use this method cautiously
the user / minimal input action by [2-4 Hz]
the user (justification, spacing, no. of ● Color - use up to 4 standard colors
decimal points, appropriate units, ● Animation - use it only when
comprehensible labels, meaningful
abbreviations, etc,; avoid ● Audio - soft tones [regular] vs. harsh
duplications) tones [emergency]
- Minimal memory load on the user ● Avoid cluttered screens, don’t overuse
- Compatibility of data display with the above
data entry
FACILITATING DATA ENTRY
- Flexibility for user control of data
display ● Consistency of data-entry transactions.
● Minimal input actions by the user
● Minimal memory load on users.
HCI DESIGN CONSTRAINTS/GUIDELINES
● Compatibility of data entry with data
● Design constraints: display
- Smaller screen size ● Flexibility for user control of data entry.
- Touch data entry can cause errors
- Battery-power limitations
PRINCIPLES
- Data download speed or access

● More fundamental, widely applicable,

● Design Guidelines:
and more enduring than guidelines
- Ensure spatial consistency
● Need more clarification
- Show high-level information
● Fundamental principles
- Minimize the number of steps (taps)
- Determine the user’s skill levels
- Minimize data entry
- Identify the tasks
- Focus on goals and optimize tasks
- Choose between five primary
- Follow emerging standards from
interaction styles
manufacturers
- Apply 8 golden rules of interface
design
GETTING THE USERS ATTENTION
- Prevent errors
● Design Guidelines - use two levels only, - Ensure human control while
with limited use of high intensity increasing automation
● Marking - various ways: underline the
item, enclose it in a box, point it with an
arrow, use an asterisk, bullet, dash, + or
X sign
● Size - use up to 4 sizes
● Choice of fonts - use up to 3 fonts

2
DETERMINE THE USER’S SKILL LEVEL ● Command language
● Natural language

● “Know thy user”

● Age, gender, physical and cognitive
abilities, education, cultural or ethnic
background, training, motivation, goals,
and personality.
● Design goals based on skill level.
- Novice or first-time users
- Knowledgeable intermittent users
- Expert frequent users
● Multi-layer designs, personalized menus,
control of informative feedback

SPECTRUM OF DIRECTNESS
IDENTIFY THE TASK

● Task analysis usually involves long hours THE 8 GOLDEN RULES OF INTERFACE
observing and interviewing users DESIGN

● Decomposition of high-level tasks 1. Strive for consistency

● Relative task frequencies, the basis for 2. Cater to universal usability
design decisions 3. Offer informative feedback
4. Design dialogs to yield closure
CHOOSE AN INTERACTION
5. Prevent errors
● Direct manipulation 6. Permit easy reversal of actions
● Menu selection 7. Keep users in control
● Form fill-in 8. Reduce short-term memory load

3
PREVENTION OF ERRORS improve system performance,
without reducing human
● Make error messages specific, positive involvement
in tone, and constructive ● Goals for autonomous agents
● Mistakes and slips (Norman, 1983) - Know user’s likes and dislikes
● Correct actions - Make proper inferences
- Gray out inappropriate actions - Respond to novel situations
- Selection rather than freestyle - Perform competently with little
typing guidance
- Automation completion ● Tool-like interfaces vs. autonomous
● Complete sequences agents
- Single abstract commands ● Avatars representing human users, not
- Macros and subroutines computers more successful
● User modeling for adaptive interfaces
AUTOMATION AND HUMAN CONTROL - Keeps track of user performance
- Adapts behavior to suit user's needs
- Allows for automatically adapting
the system
* Response time, length of messages,
the density of feedback, the content
of menus, order of menu items, type
of feedback, the content of help
screens
- Can be problematic
* System may make surprising
● Successful integration changes
- Users can avoid: * User must pause to see what has
* Routine, tedious, and error prone happened
tasks * Use may not be able to
- Users can concentrate on: - Predict the next change
* Making critical decisions, coping - Interpret what has happened
with unexpected situations, and - Restore the system to the
planning future actions previous state
● Supervisory control needs to deal with ● Alternative to agents, systems that
real-world open systems enable:
- E.g air-traffic controllers with low - User control, responsibility,
frequency, but high consequences of accomplishment
failure - Extended use of control panels
- FAA: design should place the user in (settings, options, preferences)
control and automate only to * Game levels

4
 * Style sheets for word processors EXPLANATORY AND PREDICTIVE THEORIES
* Information-visualization tools
* Scheduling software ● Explanatory theories:
- Observing behavior
● Users employ control panels to set - Describing activities
physical parameters, such as the - Conceiving designs
cursor blinking speed or speaker - Comparing high-level designs
volume, and to establish personal - Training
preferences such as time/date ● Predictive theories:
formats, color schemes, or the content - Enable designers to compare
of start menus. proposed designs for execution time
or error rates
THEORIES
PERCEPTUAL, COGNITIVE, AND MOTOR TASKS
● Beyond the specifics of guidelines
● Principles are used to develop theories ● Perceptual or cognitive subtasks

● Some theories are: theories

- Descriptive: Describes user - Predicting reading times for free

interfaces and their uses with text, lists, or formatted displays

consistent terminology and ● Motor-task performance times

taxonomies theories:

- Explanatory: Describes sequences - Predicting keystroking or pointing

of events with casual relationships times

- Prescriptive: Offers guidelines for

TAXONOMIES (PART OF DESCRIPTIVE
designers to make decisions
THEORIES)
- Predictive: Enables comparison of
design alternatives based on ● Order on a complex set of phenomena
numeric predictions of speed or ● Facilitate useful comparisons
errors. ● Organize a topic for newcomers
● Some theories are baked on human ● Guide designers
capacity: ● Indicate opportunities for novel
- Motor: Skill in pointing, clicking, products
dragging, or other movements. Taxonomy example:
- Perceptual: Visual, auditory, tactile,
or other
- Cognitive: Problem solving with
short and long-term memory

5
 ● Norman’s contributions
DESIGN BY-LEVELS THEORIES - Contect of cycles of action and
evaluation.
● (Foley and van Dam, 1995) Four-level
- Gulf of execution: Mismatch
approach - model for interfaces
between the user’s intentions and
- Conceptual level: User’s mental
the allowable actions
model of the interactive system
- Gulf of evaluation: Mismatch
- Semantic level: Describes the
between the system’s representation
meanings conveyed by the user’s
and the user’s expectations
command input and by the
computer’s output display
STAGES OF ACTION MODELS
- Syntactic level: Defines how the
units (words) that convey semantics ● Four Principles of good design
are assembled into a complete - State and the action alternatives
sentence that instructs the computer should be visible
to perform a certain task - Have a good conceptual model with
- Lexical level: Deals with the device a consistent system image
dependencies and with the precise - Interface should include good
mechanisms by which a user mappings that reveal the
specifies the syntax relationships between stages
● This approach is convenient for - User should receive continuous
designers feedback
- Top-down nature is easy to explain
- Matches the software architecture ● Four critical points where user failures
- Allows for useful modularity during can occur
the design - Users can form an inadequate goal
- Might not find the correct interface
object because of an
STAGES OF ACTION THEORY incomprehensible label or icon
- May not know how to specify or
● Norman’s Seven Stages of Action
execute a desired action
Model
- May receive inappropriate or
1. Forming the goal
misleading feedback
2. Forming the intention
3. Specifying the action
4. Executing the action
5. Perceiving the system state
6. Interpreting the system state
7. Evaluating the outcome

6
 CONSISTENCY THEORIES

Consistent user interface through grammar

● Definition is elusive - multiple forms

sometimes in conflict
● Sometimes advantageous to be
inconsistent

● User actions are situated by time and

Inconsistent action verbs place
● Take longer to learn, cause more errors, - You may not have time to deal with
slow down users, and are harder for shortcuts or device dependent
users to remember syntax (such as mobile devices)
when hurried
CONTEXTUAL THEORIES - Physical space is important in
ubiquitous, pervasive and
● Micro-HCI Theories
embedded devices, e.g., a museum
- Focus on measurable performance
guide stating information about a
(such as speed and errors) on
nearby painting
multiple standard tasks taking
● A taxonomy for mobile device
seconds or minutes in laboratory
application development could
environments
include:
❖ Design-by-levels
- Monitor and provide alerts, e.g.,
❖ Stages of action
patient monitoring systems
❖ Consistency
- Gather information
● Macro-HCI Theories
- Participate in group collaboration
- Focus on case studies of user
- Locate and identify nearby objects
experience over weeks and months,
or sites
in realistic usage contexts with rich
- Capture information about the
social engagement
object and share that information
❖ Contextual
❖ Dynamic

7
DYNAMIC THEORIES

● Dynamic theories owe much to theories

of adoption or innovation diffusion.
Attributes
- Relative advantage: faster, safer,
more error-free, cheaper
- Compatibility: fitting user’s needs
- Trial-ability: availability to
experiment with innovation
- Observability: visibility of
innovation to others
- Less complexity: ease of learning
and use

● Used by designers of online

communities and user-generated
content sites
● Example, Reader-to-Leader model