Human Computer Interaction: An Overview

 What is Human Computer Interaction (HCI)?

 Importance of HCI
 Good and Poor Design Examples
 What and Who are involved in HCI design?
 General Principles of HCI Design
 Norman's Principles of Usability
 Conceptual Model

Page 1
What is HCI?
How Human interacts with Computer:
- Not primarily the study of Human
- Not primarily the study of Computer
- The study of bridge between them, which includes
 Observation of interactions between people &
computers, e.g., Find examination papers via our
library Web
 Analysis of the involved interactions, e.g., Are all
the steps involved are necessary?
 Investigating outcomes after interacting with
computers,
e.g., Can the user perform his task? Does he
enjoy working with the computer?
Page 2
What is HCI?
The term HCI was adopted in mid-1980s:
Association for Computing Machinery (ACM): “discipline
concerned with the design, evaluation & implementation of
interactive computer systems for human use & with the
study of major phenomena surrounding them” (1992)
Dix: “HCI is study of people, computer technology and the
ways these influence each other. We study HCI to
determine how we can make this computer technology
more usable by people” (1998)
Carroll: “HCI is the study and practice of usability. It is
about understanding and creating software and other
technology that people will want to use, will be able to
use, and will find effective when used.” (2002)
Page 3
What is HCI?
Human:
Individual user, a group of working together, a
users sequence of users in an
organization
Computer:
Desktop computer, large-scale computer system, smart
phone, embedded system (e.g., photocopier, microwave
oven), software (e.g., search engine, word processor)
User interface:
Parts of the computer that the user contacts with, e.g.,
screen, mouse, keyboard, switch button, knob
Interaction:
Usually involve a dialog with feedback & control throughout
performing a task (e.g., user invokes “print” command and
then interface replies with a dialog box)
Page 4
What is HCI?
Lamp
 Function/objective: to illuminate
environment the
 Interface: power switch button
 Functional part: light bulb
 Interaction: press “On”, light on; press
“Off”, light off
 User tasks: turn on the lamp, turn off
the lamp

Page 5
What is HCI?
Stapler
 Objective: to bind paper together
 Interface: top surface where you press
 Functional part: stapler ejection gap
 Interaction: put an edge of the stack of
paper in the stapler’s mouth, press
down firmly and quickly, hear “click”
sound, see paper bound
 User tasks: bind paper together, refill
the staples

Page 6
What is HCI?
Word processor
 Objective: to edit a document
 Interface: windows, icons, menus, pointers (WIMP), etc.
 Functional part: sub-routines for command execution, file
handling, etc.
 Interaction: use mouse to click the “WORD” icon, observe
WORD is invoked, use mouse to click “FILE” icon, …
 User tasks: edit file, save file, etc.

Page 7
Why HCI?
 In the past, computers were expensive & used by
technical people only

 Now, computers are cheap and used by non-

technical people (different backgrounds, needs,
knowledge, skills)
 Computer and software manufacturers have noticed
the importance of making user-friendly
interfaces: including easy to learn, easy to use, save
people time e.g., Is your washing machine user-
friendly?
 We also desire good user experience
e.g., Do you feel pleasure and satisfaction when
using your smart phone?
Page 8
HCI Scope
Use & Context: Find application areas for computers

Human: Study psychological & physiological

aspects
e.g., study how a user learns to use a
new product, study human typing speed

Computer: Hardware & software offered

e.g., input & output devices,
speed, interaction types, computer
graphics
Development: Design, implementation & evaluation
HCI Goals
 Understand the factors that determine how people
use technology
 At physical level, HCI concerns selecting most
the appropriate input devices and output for
devices interface or task
particular
 Determine the best type of interaction, such asa
direct manipulation, natural language, icons, menus
 For systems that include computers, develop or improve
parameters like:
 Safety
 Utility
 Effectiveness
 Efficiency
 Usability
 Appeal
HCI Goals
 Safety: protecting the user from dangerous conditions
and undesirable situations
 Users
 Nuclear energy plant or bomb-disposal – operators
should interact with computer-based systems remotely
 Medical equipment in intensive care unit (ICU)
 Data
 Prevent user from making serious errors by reducing
risk of wrong keys/buttons being mistakenly activated
 Provide user with means of recovering errors
 Ensure privacy (protect personal information such as
habits and address) & security (protect sensitive
information such as passwords, VISA card numbers)
HCI Goals
 Utility: extent of providing the right kind of functionality
so that users can do what they need or want to do
 High utility
 Scientific calculator provides many
mathematical operations, built-in formulae, and is
programmable
 Low utility
 Software drawing tool does not allow free-hand
drawing but only supports polygon shape drawing
 Effectiveness: concern a user’s ability to accomplish
a desired goal or to carry out work
HCI Goals
Consider a shopping Web that provides all the information
required to perform an on-line purchase. However, the
users cannot figure out how to find the items they want to
buy.

 Efficiency: a measure of how quickly users can accomplish

their goals or finish their work using the system
 Find a book whose title contains “human
computer interaction” in our library Web
 How about a Ph.D. thesis whose author’s last name is
“Cheng”?
 How about the newest book in the subject of “human
computer interaction”?
HCI Goals
HCI Goals
 Usability: ease of learning and ease of use
 Can I use the basic functions of a new digital camera
without reading the manual?
 Does the software facilitate us to learn new
functions easily?

 Appeal: how well the user likes the system

 First impression
 Long-term satisfaction
HCI Goals
 Use Microsoft WORD as an example:

Goals Achieved? Example

Safety Yes Warning for “Exit before Save”
Utility Yes A lot of word
processing functions is
provided
Effectiveness Yes A science student can
edit equations
Efficiency Yes Default template avoids
initial document setting
Usability Yes Icons help ease of learning
Appeal Yes Interface is attractive
HCI Benefits
 Gaining market share
 People intend to buy/use products with higher usability
 e.g., Google’s search engine has the largest market
share because it is easy to use with higher efficiency;
iPhone gives good user experience
 Improving productivity
 Employees in a company perform their jobs in a faster
manner
HCI Benefits
 Lowering support costs
 If the product is not usable, calls to customer support
can be enormous
 e.g., If a washing machine is difficult to use even after
reading the instruction manual, many users will call the
customer service, which will result in high cost
 Reducing development cost
 Avoid implementing features users do not want
and creating features that are annoying or inefficient
 e.g., If there are too many unnecessary
confirmation dialog boxes in using a word processor,
it is likely this
product needs to be redeveloped
Good and Poor Design Examples
 This is a lamp switch (www.baddesigns.com)

There are 3 modes: “I”, “O” and “II”

correspond to Low, Off and High, respectively

Is it a good design? Why?

Good and Poor Design Examples
 Cursor keys (
https://www.uxpassion.com/blog/implementation-
mental-representation-models-ux-user-experience/
)

Is it a good design? Why?

Good and Poor Design Examples
 Inside a lift

Any problems?
Good and Poor Design Examples

Do you know how to use them?

Good and Poor Design Examples
 This is the interface for WORD 97

Any suggested improvement?

Good and Poor Design Examples
 This is an interface of a dialog box

Is it a good design?
Good and Poor Design Examples

Can you guess what is it? How to operate it?

Good and Poor Design Examples
 This is found in restroom at Vienna Austria airport

Is it a good design? Any suggested improvement?

Good and Poor Design Examples
 Chair or Table?

Is it a good design?
Exercise:
1. Traffic Light
2. Coffee mug where 4 person can dring
coffee together.
3. Home Elevator
4. card swipe
machine(software(OTP)/hardware) from
security point of you
Disciplines Contribute to HCI
Academic Disciplines:
 Computer Science
 Develop programming languages, system architectures,
etc. of the computing systems
 Linguistics, Artificial Intelligence (AI)
 Speech synthesis and recognition, natural
language processing, etc.
 Psychology
 Provide information about human mental
capabilities (e.g., memory, decision making)
 Ergonomics (Human Factors)
 Provide information about human physical capabilities
Disciplines Contribute to HCI
 Sociology
 How people interact in groups
Design Practices:
 Graphic Design
 Art of combining text and graphics and communicating
an effective message in design of posters, brochures,
signs, logos & other type of visual communications
 Product Design
 Process of planning the product's specification
 Industrial Design
 Applied art whereby aesthetics and usability of products
may be improved. Aspects include overall shape of the
object, colors, textures, sounds & product ergonomics
 Film Industry
Disciplines Contribute to HCI
People in HCI Business
 Interactive / Interaction Designers: People involved in
the design of all the interactive aspects of a product
 Usability Engineers: People who focus on evaluating
products using usability methods and principles
 Web Designers: People who develop and create the visual
design of Websites, such as layouts & animations
 Information Architects: People who come up with ideas of
how to plan and structure interactive products
 User Experience Designers: people who do all the above
but who may also carry out field studies to inform the
design of products
People in HCI Business
User experience :

 About how people feel about a product and their pleasure

and satisfaction when using it, looking at it, holding it,
opening it, closing it, etc.
 Examples: how smoothly a switch rotates, the sound of a
click, the touch of a button when pressing it
Activities in HCI Design
1. Identify needs and establish requirements
2. Develop alternative designs
3. Build interactive prototypes that can be communicated
and assessed
4. Evaluate what is being built throughout the process
Activities in HCI Design
 Users should be involved through the development of the
project

 Specific usability and user experience goals need to be

identified, clearly documented and agreed at the
beginning of the project

 Iteration is needed throughout the core activities

General Principles of HCI Design
 Making systems easy to use & learn
 Usability applies to all aspects of a system
 Principles support usability include
 Compatibility
 Ease of Learning
 Memorability
 Predictability
 Simplicity
 Flexibility
 Responsiveness
 Protection
 Invisible Technology
 Control
 Accessibility
Compatibility
 User – know the user
 Design must be appropriate
and compatible with the needs
of the user or client
 Effective design starts with
understanding the user’s
needs and adopting the user’s
point of view
 One common error among
designers is to assume that
users are all alike
 Another is to assume that
all
users think, feel, and behave
exactly like the developer
Compatibility
 Product – can reduce
both learning time &
errors
 The intended user of a
new system is often the
user of other systems or
earlier versions of the
system. Habits,
expectations, and a level
of knowledge have been
established and will be
brought in learning the
new system
Compatibility
 If these cannot be applied to the new system, confusion
results and learning requirements are greatly increased

 While compatibility across products must always be

considered in relation to improving interfaces (e.g.,
different applications in Microsoft Office), making new
systems compatible with existing systems (e.g., different
versions of WORD) will take advantage of what users
already know and reduce the necessity for new learning

Any disadvantage?
Compatibility
 Task compatibility: The organization of a system should
match the tasks a person must do to perform the job
Compatibility
 Work flow
compatibility:andStructure
flow of
functions should permit
easy transition between
tasks. The user must
never be forced to
navigate between
applications or many
screens to complete
routine daily tasks
Ease of Learning
 Ease of learning – the
system should be easy to
learn so that the user can
rapidly start getting
some work done with the
system
Memorability
Interfaces that have high memorability will be easier to
learn and use. Factors which affect memorability include

 Location: It will be easier to remember if a particular

object is placed in a consistent location, e.g., always
putting the search box in the upper right-hand corner of
a Web page
 Logical grouping: It will be easier to remember if things
are grouped logically, e.g., putting related options
together in a menu
 Conventions: Conventional objects and symbols will
be

easier to remember, e.g., shopping cart symbol

Predictability
Predictability involves a person’s expectations and his/her
ability to determine the results of actions ahead of time. It
includes:
 Consistency – Reinforce our associations and therefore
increase our ability to remember and predict outcomes
and processes, e.g., same format in command, screen
layout, and navigation control
 Generalizabilty – Help us use the knowledge we gather
from previous experience and apply it to similar situations
 Familiarity – A user’s knowledge and experience in other
domain can be applied when interacting with a new
system, e.g., familiar menu names and options help users
locate objects and functions more easily
Predictability
Predictability
 Conventions – Allow us to use our intuitions which are
based on previous experience and logic; if something is
consistently done in a particular way, it will eventually
become the conventional way of doing it
Simplicity
If things are simple they will be easy to understand and
thus easy to learn and remember
Simplicity
It includes:
 Progressive disclosure – Show the user only what is
necessary
Simplicity
 Constraints – Involve limiting the actions that can
be performed in a particular design
Flexibility
 Allow more user control
& accommodates
variations in user skill
and preferences, i.e.,
give users choices

 Hardware
 Types of interaction
 Data format
Flexibility
 Flexibility is the system’s ability to respond to individual
differences in people
 Permit people to choose the method of interaction that is
most appropriate to their situation. People should be able
to interact with a system in terms of their own particular
needs including knowledge, experience, and personal
preference
 Flexibility is accomplished by providing multiple ways to
access application functions and perform tasks
 It is also accomplished through permitting system
customization
Responsiveness
 The system must rapidly
respond to the user’s
requests
 Provide immediate
acknowledgment for user
actions: visual, textual,
and/or auditory
Protection

 Protect users against

disastrous results of
common human error
Invisible Technology
 In general, the user
should need to know as
little as possible about the
technical details of how
the system is implemented
and operates
Control

 Users prefer to feel a

sense of mastery
and control over the
system
 It is frustrating and
demoralizing when
the user is being
controlled and
directed by machine
 Introduction of the Graphical User
Interface
• The Xerox systems, Altus and STAR, introduced the mouse and pointing and
selecting as the primary human-computer communication method.

• The user simply pointed at the screen, using the mouse as an intermediary.

• These systems also introduced the graphical user interface as we know it a

new concept was born, revolutionizing the human-computer interface.
Introduction of the Graphical User
Interface
The Blossoming of the World Wide
Web
The Blossoming of the World Wide
Web
 Graphical User Interface
(GUI)

 Graphical User Interface (GUI) is a visual way of interacting with the computer using
the components like windows, icons, labels, text-boxes, radio buttons, etc.
 GUI is a program interface that takes the advantage of the computer graphics
capabilities to make the program easier to use.
 A well designed GUI helps the users to get rid from remembering complex
commands by presenting command driven graphical layout.
 GUI uses windows, icons and menus to carry out commands such as opening files,
deleting files and moving files.
 It refers to the graphical interface of a computer that allows users to click
and drag objects with a mouse instead of entering text at a command line.
 Frame

 In graphics and desktop publishing

applications, a rectangular area in which
text or graphics can appear is termed as
a frame.
 Frames are rectangular areas
meant for inserting graphics and
text.
 They allow users to place objects
wherever they want to on the page.
 Windo
w
 Window is the total visible
screen of any application.
 It consists of a visual area
that contains some of the
graphical user interface of
the program.
A window is framed by
a window decoration.
 It has a rectangular shape
that can overlap with the
area of other windows.

 It displays the output

allows input to and
one
more or
processes.
 Label

 A label is a graphical control

element, which displays
text on a form.
 It is a static control;
having no interactivity.
 A label is generally used to
identify a nearby text box.
 A label in GUI is just like a
piece of paper, polymer,
cloth, metal, or other
material on a container or
product, written
or printed information about the
product.
 In computing, labels are used
when the texts are written
for informational and naming
purpose.
 Text
Box

 A text box is a graphical

control element often
appears with a label and is
intended to enable the
user to input text
information used by the
program.
 It is an area where user
can
input data and information.
Text
Field

 A text field is a text

control GUI element that
enables the user to type
a small amount of text.
 When the user indicates
that text entry is
complete, the text field
processes an event.
 Men
u

Menu is a control that allows

the user to select an
option out of a list of
options.
 It is a list of options
commands or
presented an operator to
by a computer.
 Button
s

 Buttons are control which

can be clicked upon to
select an option from a
selection of options.
 Its name comes from the
mechanical push-button
group on a car radio
receiver.
 Combo
Box

 Combo box is a
combination of
a adrop-down
single-line text
list or box
list box.
and
 It allows the user to
eitherdirectly into
type a value
the control or choose
from the list of existing
options.
 It is very useful when a user
has to select a certain
option among various
options.
 Radio
Button

 Radio buttons always appear in

pairs or larger groups, and only
one option in the group can be
selected at a time.
 Selecting a new item from
the group's buttons also de-
selects the previously
selected button.
 Radio buttons were named
after the physical buttons used
on older radios to select preset
stations –
 When one of the buttons was
pressed, other buttons would
pop out, leaving the pressed
button the only button in the
"pushed in" position.
 Check
Box

 Check box is a graphical

element that allows user to
make selection among the
given alternatives.
 Check box are often
presented as a small box in
the shape of square.
 A simple click on the check
box marks the box and
makes a visible selection in
the computer.
 A check box is usually
accompanied by a label to
provide information to the
user about the choices to be
made.
 Tree
view
 A tree view is a graphical
control element that
presents
a hierarchical view of
information.
 Each item (often
called a branch or a node) can
have a number of sub- items.
 This is often
visualized by
indentation in a list.
 An item can be expanded to
reveal sub-items, if any
exist,
and collapsed to hide sub-items.
 Tree views can be seen in file
manager applications,
where they allow the user
to navigate the file system
directories.
 Tab

Tab is a graphical

control
element.
 A tab
allows
multiple documents or
panels to be contained
within a
single window.
 It is an interface style
most commonly
associated with web
browsers, web
applications and text
editors.
 Tabs are popular in use as a
navigational widget for
switching between sets of
documents.
 Characteristics of GUI and Web interfaces
Interaction styles
The method by which the user and a computer system
communicate with one another
-Command line
-Menu selection
-Form fill-in
-Direct manipulation
-Anthropomorphic
Command line
Menu selection
Form fill-in
Direct Manipulation
Anthropomorphic

Spoken natural
language
Hand gestures
Anthropomorphic (cont.)

Facial expressions
Eye movements

What??!

OK
Examples
 THE CONCEPT OF DIRECT
MANIPULATION
The system is portrayed as an extension of the real world. It is
assumed that a person is already familiar with the objects and
actions in his or her environment of interest. A person has the
power to access and modify these objects, including windows.

Objects and actions are continuously visible. Like one's desktop,

objects are continuously visible. Reminders of actions to be
performed are also obvious, where labeled buttons replace
complex syntax and command names. Cursor action and motion
occurs in physically obvious and intuitively natural ways.
THE IMPORTANCE OF THE USER INTERFACE
• A well-designed interface and screen is terribly important to
our users. It is their window to view the capabilities of the
system.
• A screen's layout and appearance affect a person in a variety
of ways. If they are confusing and inefficient, people will have
greater difficulty in doing their jobs and will make more
mistakes.
• Poor design may even chase some people away from a
system permanently. It can also lead to aggravation,
frustration, and increased stress.
The Benefits of Good Design
• Poor clarity forced screen users to spend one extra second per
screen.
– Almost one additional year would be required to process all screens.
– Twenty extra seconds in screen usage time adds an additional 14
person years.

•The benefits of a well designed screen have also been under

experimental scrutiny for many years.
– One researcher, for example, attempted to improve screen clarity
and readability by making screens less crowded.
– Separate items, which had been combined on the same display line
to conserve space, were placed on separate lines instead.
– The result screen users were about 20 percent more productive with
the less crowded version.
• Proper formatting of information on screens does have a
significant positive effect on performance.
• Training costs are lowered because training time is reduced.
• support line costs are lowered because fewer assist calls are
necessary.
• Employee satisfaction is increased because aggravation and
frustration are reduced.
• Ultimately, that an organization's customers benefit because of
the improved service they receive.

• Identifying and resolving problems during the design and

development process also has significant economic benefits
• How many screens are used each day in our technological world?
• How many screens are used each day in your organization?
Thousands? Millions?
• Imagine the possible savings. Proper screen design might also, of
course, lower the costs of replacing "broken" PCs.
A Brief History of Screen Design
• In early 1970s, Screen design at this time period had little to guide
it, being driven by hardware and telephone line transmission issues.
• A 1970s screen often resembled the one pictured in Figure 1.1.
• Effectively using this kind of screen required a great deal of practice
and patience.
• Most early screens typically presenting green
text on black backgrounds.
A Brief History of Screen Design
• At the turn of the decade guidelines for text-based screen design
were finally made widely available (Galitz, 1980, 1981) and many
screens began to take on a much less cluttered look through
concepts such as grouping and alignment of elements, as illustrated
in Figure 1.2.
 A Brief History of Screen Design
• The advent of graphics yielded another milestone in the evolution
of screen design, as illustrated in Figure 1.3. While some basic
"design principles did not change, groupings and alignment, for
example, borders were made available to visually enhance
groupings, and buttons and menus for implementing commands
replaced function keys.
• The entry field was supplemented by a multitude of other kinds of
controls, including list boxes, drop-down combination boxes, spin
boxes, and so forth.

Figure 1.3 A 19D9.r0Laset ashnMdalbki eyond

THE GRAPHICAL USER INTERFACE
 A user interface is a collection of techniques and mechanisms
to interact with something.
 In a graphical interface the primary interaction mechanism is
a pointing device of some kind.
 This device is the electronic equivalent to the human hand.
What the user interacts with is a collection of elements referred
to as objects.
 They can be seen, heard, touched, or otherwise perceived.
 Objects are always visible to the user and are used to perform
tasks.
 They are interacted with as entities independent of all other
objects.
 People perform operations, called actions, on objects. The
operations include accessing and modifying objects by pointing,
selecting, and manipulating. All objects have standard resulting
behaviors.
THE POPULARITY OF GRAPHICS
• A graphical screen resemblance to its earlier text-based interfaces.
• Older text-based screen possessed a one dimensional
• Graphic screens assumed a three-dimensional look.
• Controls appeared to rise above the screen and move when activated.
• Information could appear, and disappear, as needed.
• Text could be replaced by graphical images called icons.
• These icons could represent objects or actions
• selection fields such as radio buttons, check boxes, list boxes, and palettes
coexisted with the reliable old text entry field
• More sophisticated text entry fields with attached or dropdown menus of.
• Objects and actions were selected through use of pointing mechanisms.
• User's actions to be reacted to quickly, dynamically, and meaningfully.
• WIMP interface: windows, icons, menus, and pointers.
• Graphic presentation is much more effective than other presentation
methods.
• It permits faster information transfer between computers and people by
permitting more visual comparisons of amounts, trends, or relationships;
• Graphics also can add appeal or charm to the interface and permit greater
customization to create a unique corporate or organization style.
GRAPHICAL SYSTEMS ADVANTAGES

 Symbols recognized faster than text

 Faster learning
 Faster use and problem solving
 Easier remembering
 More natural
 Exploits visual/spatial cues
 Fewer errors
 Increased feeling of control
 Immediate feedback
 Predictable system responses
 Easily augmented with text displays
 Smooth transition from command language system
CHARACTERISTICS OF THE GRAPHICAL USER INTERFACE

Sophisticated Visual Presentation:

• Visual presentation is the visual aspect of the interface. It is what
people see on the screen.
• The sophistication of a graphical system permits displaying lines,
including drawings and icons.

• It also permits the displaying of a variety of character fonts,

including different sizes and styles.

• The display of 16 million or more colors is possible on some

screens. Graphics also permit animation and the presentation of
photograph and motion video.
Pick-and-Click Interaction: Elements of a graphical screen upon which
some action is to be performed must first identified.

o The primary mechanism for performing this pick-and-click is most often

the mouse and its buttons.

o The user moves the mouse pointer to the relevant element (pick) and
the action is signaled (click).

o Pointing allows rapid selection and feedback. The hand and mind seem
to work smoothly and efficiently together.

o The secondary mechanism for performing these selection actions is the

keyboard most systems permit pick-and-click to be performed using the
keyboard as well.
Visualization: Visualization is a cognitive process that allows people to
understand Information that is difficult to perceive, because it is either
too voluminous or too abstract
Presenting specialized graphic portrayals facilitates visualization.
• The best visualization method for an activity depends on what People
are trying to learn from the data.

• The goal is not necessarily to reproduce a really graphical image, but to

produce one that conveys the most relevant information.

• Effective visualizations can facilitate mental insights, increase

productivity, and for faster and more accurate use of data.
Object Orientation: A graphical system consists of objects and actions.
Objects are what people see on screen.
• Objects can be composed of sub objects. For example,an object may be a
document. The document's sub objects may be a paragraph, sentence, word,
and letter.

• A collection is the simplest relationship-the objects sharing a common

aspect.

• A collection might be the result of a query or a multiple selection of objects.

Operations can be applied to a collection of objects.

• A constraint is a stronger object relationship. Changing an object in a set

affects some other object in the set.

• A document being organized into pages is an example of a constraint. A

composite exists when the relationship between objects becomes so significant
that the aggregation itself can be identified as an object.
• Examples include a range of cells organized into a spreadsheet, or a collection
of words organized into a paragraph.
Use of Recognition Memory : Continuous visibility of objects and actions
encourages use of a person's more powerful recognition memory.
PRINCIPLES OF USER INTERFACE DESIGN
Aesthetically Pleasing
Provide visual appeal by following these presentation and graphic design
principles:
• Provide meaningful contrast between screen elements.
• Create groupings.
• Align screen elements and groups.
• Provide three-dimensional representation.
• Use color and graphics effectively and simply.

Clarity
The interface should be visually, conceptually, and linguistically clear,
including
• Visual elements
• Functions
• Words and Text
Compatibility
Provide compatibility with the following:
- The user
- The task and job
- The Product
- Adopt the User’s Perspective

Configurability
Permit easy personalization, configuration, and
reconfiguration of settings.
- Enhances a sense of control
- Encourages an active role in understanding
Comprehensibility
A system should be easily learned and understood: A user should know the
following:
- What to look at
- What to do
- When to do it
- Where to do it
- Why to do it
- How to do it .
Consistency
A system should look, act, and operate the same throughout. Similar
components should:
- Have a similar look.
- Have similar uses.
- Operate similarly.
• The same action should always yield the same result
• The function of elements should not change.
• The position of standard elements should not change.
Control
The user must control the interaction.
- Actions should result from explicit user requests.
- Actions should be performed quickly.
- Actions should be capable of interruption or termination.
-The user should never be interrupted for errors

Directness
Provide direct ways to accomplish tasks.
- Available alternatives should be visible.
-The effect of actions on objects should be visible.

Flexibility
A system must be sensitive to the differing needs of its users,
enabling a level and type of performance based upon:
- Each user's knowledge and skills.
- Each user's experience.
- Each user's personal preference.
- Each user's habits.
- The conditions at that moment.
Efficiency
Minimize eye and hand movements, and other control actions.
- Transitions between various system controls should flow easily and freely.
- Navigation paths should be as short as possible.
- Eye movement through a screen should be obvious and sequential.
- Anticipate the user's wants and needs whenever possible.

Familiarity
• Employ familiar concepts and use a language that is familiar to the user.
• Keep the interface natural, simulate the user's behavior patterns.
• Use real-world metaphors.

Forgiveness
• Tolerate and forgive common and unavoidable human errors.
• Prevent errors from occurring whenever possible.
• When an error does occur, provide constructive messages.
Predictability
• The user should be able to anticipate the natural progression of each task.
o Provide distinct and recognizable screen elements.
o Provide dues to the result of an action to be performed.
• All expectations should be fulfilled uniformly and completely.
Recovery
A system should permit:
- Commands or actions to be abolished or reversed.
- Immediate return to a certain point if difficulties arise.

Ensure that users never lose their work as a result of:

- An error on their part.
-Hardware, software, or communication problems
-Responsiveness
The system must rapidly respond to the user's requests provide immediate
Acknowledgment for all user actions:
- Visual.
- Textual
- Auditory.
Transparency
Permit the user to focus on the task or job, without concern for the
mechanics of the interface.
- Workings and reminders of workings inside the computer should be
invisible to the user.

Simplicity
Provide as simple an interface as possible. Five ways to provide simplicity:
- Use progressive disclosure, hiding things until they are needed
- Present common and necessary functions first
- Prominently feature important functions
- Hide more sophisticated and less frequently used functions.
- Provide defaults.
- Minimize screen alignment points.
- Make common actions simple at the expense of uncommon actions being
made harder.
- Provide uniformity and consistency.
Norman's Principles of Usability
Norman is a cognitive psychologist, expertise in computers
Cognition refers to how we gain knowledge, includes
understanding, remembering, reasoning, acquiring skills,
creating new idea
Basic ideas of Norman’s principles:
 We can learn from common objects
 We are able to operate common objects without a user
manual
 The objects should provide some cues. If a simple piece
of equipment such as a door or a kitchen stove requires
labelling, that need is sign of design failure
 Visibility, affordance, mapping, constraints, feedback
Norman's Principles of Usability


A product or design with good usability should

provide perceptual cues for us to answer:
 Can we see the interface elements?
Related to visibility
 What do you perceive you can do with the interface?
Related to affordance
 How our interaction is constrained by the interface?
Related to constraint
 What is supposed to happen when we interact with
the interface?
Related to mapping and feedback
Norman's Principles of Usability

 Visibility
 Interface feature is accessible to a human sense organ?
(e.g., Can an answering machine indicate the presence
of incoming voice mails? The number of mails?)
 Indicate what parts operate & how
 Indicate how user is to interact with the device
(e.g., on/off key on a calculator)
 The more visible functions are, the more likely users will
be able to know what to do next
Norman's Principles of Usability

Which one is of higher visibility?

Norman's Principles of Usability

Which one is salt shaker? Which one is pepper

shaker? Which pair is of higher visibility?
Norman's Principles of Usability
Need to insert your room card in the
slot first!
How would you make this action more
visible?
 Make the card reader more obvious
 Provide an auditory message, that
says what to do
 Provide a big label next to the card
reader that flashes when someone
enters
 Make relevant parts visible
 Make what has to be done obvious
Norman's Principles of Usability
 Feedback
 This principle is nature: when you talk to somebody, you
expect a reply
 Send back to user information about what action has
actually been done. This allows a person to continue
with the activity
(e.g., press a key on a telephone, copy a file in PC,
progress of downloading a file from internet, screen
button clicked on provides sound or red highlight
feedback)

 Include sound, highlighting, animation and combination

of these
Norman's Principles of Usability
A user wants to create a new post and moves the pointer
over the “Create” button:

Has the user received any feedback?

Norman's Principles of Usability
 Constraints
 Restricting the possible actions that can be performed at
a given moment
(e.g., some menu options will be deactivated by shading
them at some occasions)
 Avoid wrong uses of thing, i.e., help prevent user from
selecting incorrect options
 3 main types:
 Physical
 Logical
 Cultural
Norman's Principles of Usability
Physical Constraints
 Physical objects can be designed to constrain things,
and this constraint restricts the user interaction
 How many ways can you insert electrical plug to a
socket?
 How about inserting a CD into a computer?
Which of them has a better physical constraint?

 The more possible interpretations a thing has, the more

difficult it will be to use
Norman's Principles of Usability
Logical Constraints
 Exploit people’s common sense reasoning about actions
and their consequences
 When no object is selected, it is not allowed to use the
“Cut” command in WORD
Norman's Principles of Usability
Cultural Constraints
 Society has evolved numerous artificial conventions that
govern acceptable social behaviour. These cultural
conventions have to be learned, but once learned they
apply to a wide variety of circumstances.
 Red colour stands for danger while green colour stands
for safe
 Smiling face stands for happy emotion

Which one is universal and which one is culturally-

specific (i.e., accepted by a cultural group only)?
Norman's Principles of Usability
 Light switch:
 America: down is off
 Britain: down is on

 Water tap:
 America: anti-clockwise is on
 Britain: anti-clockwise is off
 Red colour:
 America: danger
 Egypt: death
 India: life
 China: happiness
Norman's Principles of Usability
 Affordance
 Refer to an attribute of an object that allows people to
know how to use it, i.e., give clues to operations of
things
 Indicate what thing is for
(e.g., a door handle affords pulling, a cup handle affords
grasping)

 Indicate how thing could possibly be used

(e.g., knobs are for turning, slots are for inserting things
into)
Norman's Principles of Usability
 Other examples include: scrollbars afford moving up and
down, icons afford clicking on

Milk
Butter
Cheese

Water
Beer
Wine

A radio button in a Web page affords you to choose 1-of-

many choice by clicking one of the items
Norman's Principles of Usability

A check box affords you to choose 0 to all choices

Is it true for Microsoft WORD?

There are two kinds of affordance:

 Real: for physical objects and do not have to be learned
 Perceived: for screen-based interfaces and can be
considered as learned conventions
Norman's Principles of Usability
Norman's Principles of Usability
 Mapping
 Natural relationship between controls & their effects
(e.g. move mouse to left, pointer goes left)

 Upper button controls upper bulbs while lower controls

lower bulbs (button affords you to press)
Norman's Principles of Usability
 The timer knob in a microwave oven is of good mapping
because turning it clockwise implies increasing cook
time (the knob affords you to turn as well)

 The volume knob in a Hi-Fi system is of good mapping

because turning it clockwise implies increasing
volume (the knob affords you to turn as well)
Norman's Principles of Usability
 Slide bar also has a strong mapping, since moving it to
the right/top will increase the value while moving it to
the left/down will decrease it (the slider affords you to
move)
Norman's Principles of Usability

A B C D

Which controls go with which burner rings?

Norman's Principles of Usability

Is it better?
Norman's Principles of Usability

Which arrow-key layout is the best?

Which set is better?

Norman's Principles of Usability
 Pull or Push?
Norman's Principles of Usability
 Pull or Push?
Norman's Principles of Usability

Any suggested improvements?

Page 130