HBT 2402: HUMAN COMPUTER INTERACTION

Prerequisite- none

Course Purpose:
To introduce the basic foundations of human computer interaction.

Course Objectives
At the end of this course the student should be able to:

1. understand the importance of users in the design and development of interactive computer
systems
2. understand the techniques and skills required to develop more usable interactive computer
systems.
3. To develop usable and useful interactive computerized systems that address the institutional,
social and ethical aspects of information systems

Course Description
This course covers the following topics:
1. Introduction to Human Computer Interaction
2. Architecture and design of user interfaces.
3. Interaction styles; metaphors; examination of selected systems.
4. Windowing systems.
5. User interface toolkits.
6. Dialog modelling.
7. User interface management systems.
8. Introduction to computer-support for co-operative working.
9. Classification of Computer Supported Cooperative Work (CSCW) systems; multi-user
interfaces architecture; co-operative application scenarios.

Teaching Methodology
Teaching is by lecture method

Course Evaluation
CATs/Assignment/Presentation 30 %
Final Examination 70 %
Total 100%

Course Text Books

Alan Dix,Janet E. Finlay, Gregory D. Abowd, Russell Beale (2004). Human-Computer
Interaction (3rd. ed.). Prentice Hall. ISBN: 0130461091
Laura Leventhal, Julie Barnes (2007). Usability Engineering: Process, Products and Examples.
Prentice Hall. ISBN-10: 0131570080

References
John M. Carroll (2001). Human-Computer Interaction in the New Millennium. Addison Wesley
Professional - ACM Press. ISBN: 0201704471
1
Serengul Smith-Atakan (2006). Human Computer Interaction. Thomson Course Technology.
ISBN: 1844804542
Shneiderman B.(ISBN: 0-201-69497-2). Designing the User Interface: strategies for Effective
Human Computer Interaction. Addison Wesley

Course Journals
Oxford Journals: The Computer Journal
Computer Science Journals (CSC Journals)

Reference Journals
Journal of Computing
Directory of Open Access (DOAJ): Computer Science

2
1 INTRODUCTION TO HUMAN COMPUTER INTERACTION
Definition
HCI (human-computer interaction) is the study of how people interact with computers and to
what extent computers are or are not developed for successful interaction with human beings.
HCI consists of three parts: the user, the computer itself, and the ways they work together.

HCI is concerned with:

behavioral and physical domains in the psychology and engineering sense
 system design and development
 the human as an information processor; the computer as an information processor
 performance issues -- the total system
 job-task certainty (industrial psych. here)
 evaluation and standards
User
By "user", we may mean an individual user, a group of users working together. An appreciation
of the way people's sensory systems (sight, hearing, touch) relay information is vital Also,
different users form different conceptions or mental models about their interactions and have
different ways of learning and keeping knowledge and. In addition, cultural and national
differences play a part.
Computer
The computer refers to any technology ranging from desktop computers, to large scale
computer systems. Devices such as mobile phones or VCRs can also be considered to be
“computers”.
Interaction
HCI attempts to ensure that humans and machines get on with each other and interact
successfully. In order to achieve a usable system, you need to apply what you know about
humans and computers, and consult with likely users throughout the design process.

The Goals of HCI

The goals of HCI are to produce usable and safe systems, as well as functional systems. In order
to produce computer systems with good usability, developers must attempt to:
 understand the factors that determine how people use technology
 develop tools and techniques to enable building suitable systems
 achieve efficient, effective, and safe interaction
 put people first

• A basic goal of HCI is

– to improve the interactions between users and computers
– By making computers more usable and receptive to the user's needs.
• A long term goal of HCI is
– to design systems that minimize the barrier between the human's cognitive model of what they
want to accomplish and the computer's understanding of the user's task

Usability
Usability is one of the key concepts in HCI. It is concerned with making systems easy to learn
and use. A usable system is:

3
 easy to learn
 easy to remember how to use
 effective to use
 efficient to use
 safe to use
 enjoyable to use
To produce computer systems with good usability, we need to understand the factors that
determine how people operate and make use of computer technology effectively, and to
translate that understanding into the development of tools and techniques to help designers
ensure that computer systems are suitable for the activities for which people will use them, in
order to achieve efficient, effective, and safe interaction both in terms of individual human
computer interaction and group interactions.
Factors affecting usability
The main factors affecting usability are:
 Format of input
 Feedback – This is sending information to the user about what has been done. This may
done by use of sound, highlighting, animation etc.
 Visibility – This is the mapping of a control and its effects. E.g. controls in cars are
generally visible. The steering wheel has just one function.
 Affordance -Affordance refers to an attribute of an object that allows people to know
how to use it. E.g. a mouse button affords/invites pushing, a door handle affords pulling
etc. The important factor for design is perceived affordance – what a person thinks can
be done with an object. For example, does the design of a door suggest that it should be
pushed or pulled open?

Usability Principles
• Visibility– The more visible functions are, the more likely users will know what to do next
• Feedback – Systems should provide adequate feedback to users
• Constraints – Restricting user actions to those relevant to the stage of activity
• Affordance – Object attributes that provide clues to how they should be used
• Consistency – Similar operations and elements
• Mappings – Relationship between controls

Factors in HCI
There are a large number of factors which should be considered in the analysis and design of a
system using HCI principles. Many of these factors interact with each other, making the analysis
even more complex. The main factors are listed in the table below:
 Organisation Factors: Training, job design, politics, roles, work organization
 Environmental Factors: Noise, heating, lighting, ventilation
 Health and Safety Factors
 The User: Cognitive processes and capabilities Motivation, enjoyment, satisfaction,
personality, experience
 Comfort Factors: Seating, equipment, layout.
 User Interface: Input devices, output devices, dialogue structures, use of color, icons,
commands, navigation, graphics, natural language, user support, multimedia,
 Task Factors: Easy, complex, novel, task allocation, monitoring, skills
 Constraints: Cost, timescales, budgets, staff, equipment, buildings
4
 System Functionality: Hardware, software, application
 Productivity Factors: Increase output, increase quality, decrease costs, decrease errors,
increase innovation

Guidelines in HCI
Shneiderman’s Eight Golden Rules
Ben Shneiderman, an American computer scientist consolidated some implicit facts about
designing and came up with the following eight general guidelines −

 Strive for Consistency.

 Cater to Universal Usability.
 Offer Informative feedback.
 Design Dialogs to yield closure.
 Prevent Errors.
 Permit easy reversal of actions.
 Support internal locus of control.
 Reduce short term memory load.
These guidelines are beneficial for normal designers as well as interface designers. Using these
eight guidelines, it is possible to differentiate a good interface design from a bad one. These are
beneficial in experimental assessment of identifying better GUIs.
Norman’s Seven Principles
To assess the interaction between human and computers, Donald Norman in 1988 proposed
seven principles. He proposed the seven stages that can be used to transform difficult tasks.
Following are the seven principles of Norman −
 Use both knowledge in world & knowledge in the head.
 Simplify task structures.
 Make things visible.
 Get the mapping right (User mental model = Conceptual model = Designed model).
 Convert constrains into advantages (Physical constraints, Cultural constraints,
Technological constraints).
 Design for Error.
 When all else fails − Standardize.

Heuristic Evaluation
Heuristics evaluation is a methodical procedure to check user interface for usability problems.
Once a usability problem is detected in design, they are attended as an integral part of constant
design processes. Heuristic evaluation method includes some usability principles such as
Nielsen’s ten Usability principles.

5
Nielsen's Ten Heuristic Principles
The ten principles of Nielsen serve as a checklist in evaluating and explaining problems for the
heuristic evaluator while auditing an interface or a product.

 Visibility of system status.

 Match between system and real world.
 User control and freedom.
 Consistency and standards.
 Error prevention.
 Recognition rather than Recall.
 Flexibility and efficiency of use.
 Aesthetic and minimalist design.
 Help, diagnosis and recovery from errors.
 Documentation and Help

2 ARCHITECTURE AND DESIGN OF USER INTERFACES

User Interface (UI) Design focuses on anticipating what users might need to do and ensuring that
the interface has elements that are easy to access, understand, and use to facilitate those actions.
UI brings together concepts from interaction design, visual design, and information architecture.

Choosing Interface Elements

Users have become familiar with interface elements acting in a certain way, so try to be
consistent and predictable in your choices and their layout. Doing so will help with task
completion, efficiency, and satisfaction.
Interface elements include but are not limited to:

 Input Controls: buttons, text fields, checkboxes, radio buttons, dropdown lists, list
boxes, toggles, date field
 Navigational Components: breadcrumb, slider, search field, pagination, slider, tags,
icons

6
  Informational Components: tooltips, icons, progress bar, notifications, message
boxes, modal windows
 Containers: accordion
There are times when multiple elements might be appropriate for displaying content.  When this
happens, it’s important to consider the trade-offs.  For example, sometimes elements that can help
save you space, put more of a burden on the user mentally by forcing them to guess what is
within the dropdown or what the element might be. 
Best Practices for Designing an Interface
Everything stems from knowing your users, including understanding their goals, skills,
preferences, and tendencies.  Once you know about your user, make sure to consider the
following when designing your interface:

 Keep the interface simple. The best interfaces are almost invisible to the user. They
avoid unnecessary elements and are clear in the language they use on labels and in
messaging.
 Create consistency and use common UI elements. By using common elements in
your UI, users feel more comfortable and are able to get things done more quickly.  It
is also important to create patterns in language, layout and design throughout the site
to help facilitate efficiency. Once a user learns how to do something, they should be
able to transfer that skill to other parts of the site. 
 Be purposeful in page layout.  Consider the spatial relationships between items on
the page and structure the page based on importance. Careful placement of items can
help draw attention to the most important pieces of information and can aid scanning
and readability.
 Strategically use color and texture. You can direct attention toward or redirect
attention away from items using color, light, contrast, and texture to your advantage.
 Use typography to create hierarchy and clarity. Carefully consider how you use
typeface. Different sizes, fonts, and arrangement of the text to help increase
scanability, legibility and readability.
 Make sure that the system communicates what’s happening.  Always inform your
users of location, actions, changes in state, or errors. The use of various UI elements
to communicate status and, if necessary, next steps can reduce frustration for your
user. 
 Think about the defaults. By carefully thinking about and anticipating the goals
people bring to your site, you can create defaults that reduce the burden on the user. 

7
 This becomes particularly important when it comes to form design where you might
have an opportunity to have some fields pre-chosen or filled out.

Interface Design Guidelines

Some more important HCI design guidelines are presented in this section. General interaction,
information display, and data entry are three categories of HCI design guidelines that are
explained below.
General Interaction
Guidelines for general interaction are comprehensive advices that focus on general instructions
such as −
 Be consistent.
 Offer significant feedback.
 Ask for authentication of any non-trivial critical action.
 Authorize easy reversal of most actions.
 Lessen the amount of information that must be remembered in between actions.
 Seek competence in dialogue, motion and thought.
 Excuse mistakes.
 Classify activities by function and establish screen geography accordingly.
 Deliver help services that are context sensitive.
 Use simple action verbs or short verb phrases to name commands.

Information Display
Information provided by the HCI should not be incomplete or unclear or else the application will
not meet the requirements of the user. To provide better display, the following guidelines are
prepared −
 Exhibit only that information that is applicable to the present context.
 Don't burden the user with data, use a presentation layout that allows rapid integration of
information.
 Use standard labels, standard abbreviations and probable colors.
 Permit the user to maintain visual context.
 Generate meaningful error messages.
 Use upper and lower case, indentation and text grouping to aid in understanding.
 Use windows (if available) to classify different types of information.

8
  Use analog displays to characterize information that is more easily integrated with this
form of representation.
 Consider the available geography of the display screen and use it efficiently.

Data Entry
The following guidelines focus on data entry that is another important aspect of HCI −
 Reduce the number of input actions required of the user.
 Uphold steadiness between information display and data input.
 Let the user customize the input.
 Interaction should be flexible but also tuned to the user's favored mode of input.
 Disable commands that are unsuitable in the context of current actions.
 Allow the user to control the interactive flow.
 Offer help to assist with all input actions.
 Remove "mickey mouse" input.

3 INTERACTION
Interaction can be seen as a dialog between the computer and the user. The choice of
interface style can have a profound effect on the nature of this dialog.
There are a number of common interface styles including:
 command line interface
 menus
 natural language
 question/answer and query dialog
 form-fills and spreadsheets
 WIMP
 point and click
 three-dimensional interfaces.
As the WIMP interface is the most common and complex, we will discuss each of its
elements in greater detail

Interaction styles include:

 Command
 Menus
 Form fill
 Questions and Answers
 Direct Manipulation

9
Command
Commands provide a way of expressing instructions to the computer directly. Communication
between user and computer is purely textual. Commands can take the form of function keys,
single characters, short abbreviations, whole words, or combination of the first two. An issue
with command interface is the number of keystrokes required to complete a command.
Commands must be remembered, so care must be taken in choosing the commands for the
system.
Command-entry remains popular in applications where the users are experts and become very
familiar with the commands they can use, for example:
 System administrators, particularly on Unix and Linux systems
 Network administrators – Cisco devices (routers, switches, etc) use a command entry
Interface
Advantages of command interfaces
 Quick and powerful for experienced users
 Can be used in conjunction with other user interfaces.
Disadvantages of command interfaces
 Relies on recall of commands and syntax.
 Difficult to learn.
 Error prone

Menus
A list of options is presented to the user and the appropriate decision is selected by typing
some code or selecting the option required. Unlike command-driven systems, menus do not
require the user to remember the item they want; they only need to recognize it. Menus favour
recognition over recall. This is often described by cognitive psychologists as favouring
‘knowledge in the world’ over ‘knowledge in the head’. The majority of user interfaces are
now designed to make use of knowledge in the world.
Menus are used extensively in GUI systems such as Windows, and are also widely used to
provide navigation systems in web sites. Horizontally oriented menus in web pages are often
referred to as navigation bars.
A number of menu interface styles
– flat lists, drop-down, pop-up, contextual, and expanding ones, e.g., scrolling and
Cascading

Fitts’ Law
Fitts' law is a mathematical model that predicts how long it will take to point to a target. It
takes into account where you are currently pointing relative to the target; how far the target is
and how big the target is.
Essentially, Fitts’ Law states that big targets at close distance are reached faster than small
targets at long range. Theoretically, the following principles exist when applying Fitts’ Law to
interface designs:
 Things done more often should be assigned a larger button. This seems an intuitive
principle, but it needs to be used very carefully, since it harms the consistency of the
interface.
 Things done more often should be closer to the average position of the user's cursor.
 The top, bottom, and sides of the screen are infinitely targetable because of the
10
boundary created by the edges of the screen. They should be fully utilized.
There are tradeoffs when applying Fitts' Law to interface designs. Fitts' Law suggests that
interface components should be made larger and positioned closer to the average cursor
position. These suggestions may act in opposition to other factors that make an efficient
interface, such as organization and use of available screen space.

Advantages of menus
 Users do not have to memorize complex commands.
 Structured navigation benefits novices and casual users.
 Can shorten users learning time and effort.
Disadvantages of menus
 Can force users through many levels of menus.
 Users may get lost in menu hierarchies.
 Menu terms and names may not be meaningful to users.

Form-fill
The user type the data in specific fields, similar to the fields on a paper fill-in form. Many office
and database applications use this style. Form-fill is also widely used in web pages, to obtain
feedback or to elicit customer details in transactions.
Some of the issues which should be considered when designing forms include:
 Clarity of layout
 Types of fields – the users should be able to tell what kinds of data are permissible in
each field.
 Help text (for the form and for each field)
 Automatic advancement (tabbing from field to field) – this can be very helpful as long as
it done in the correct order.
 Cancel option (what does it mean in the situation)
 Corrections – how can the user correct data once entered
 Corresponding paper-form (for example order entry)
 Pre-filled fields – it may save the user time if some fields contain commonly used initial
values
 Use of list boxes to select from predetermined list of optional values.
 The spreadsheet is a variation on the form-fill interaction style.

Question and answer dialogues

In this kind of interaction questions are asked one at a time and the next question may depend
on the previous answer. Question and answer dialogues are often used in tasks where
information is elicited from users in a prescribed and limited form, such as a bank ATM. They
are now widely used in PC software, in the form of ‘Wizards’ to guide novice users through
tasks. Wizards can be very frustrating for experienced users who know what they want to do.

Direct Manipulation
Direct manipulation is a style of interaction which features a natural representation of task
objects and actions promoting the notion of people performing a task themselves (directly) not
through an intermediary like a computer. A direct manipulation system has the following
features:
• Visibility of the objects of interest
11
• Rapid, reversible, incremental actions
• Replacement of complex command syntax by direct manipulation of the object of interest

The visual representation usually takes the form of a metaphor related to the actual task being
performed. Well-designed direct manipulation systems tend to make the interaction enjoyable
for the users.
Why are DM interfaces so enjoyable?
 Novices can learn the basic functionality quickly
 Users can immediately see if their actions are furthering their goals
 Users experience less anxiety because the system is comprehensible and because
actions are reversible
 Users gain confidence because they fell in control and can predict system responses
Examples
File managers, such as Windows Explorer (drag-and-drop copying)
• Graphics software (drawing tools such as Photoshop and Fireworks)
• Games
WIMP/GUI interfaces
• Windows
– could be scrolled, stretched, overlapped, opened, closed, and moved around the
screen using the mouse
• Icons
– represented applications, objects, commands, and tools that were opened when
clicked on
• Menus
– offering lists of options that could be scrolled through and selected
• Pointing device
– a mouse controlling the cursor as a point of entry to the windows, menus, and
icons on the screen
User Frustration with interfaces
When using an interface the user may get frustrated when
 When an application doesn’t work properly or crashes
 When a system doesn’t do what the user wants it to do
 When a user’s expectations are not met
 When a system does not provide sufficient information to enable the user to know what
to do
 When error messages pop up that are vague, obtuse or condemning
 When the appearance of an interface is garish, noisy, gimmicky or patronizing

Interface metaphors
Metaphors convey an abstract concept in a more familiar and accessible form. A metaphor is a
figure of speech in which an expression is used to refer to something that it does not literally
denote in order to suggest a similarity. Metaphors are widely used to make use of users’
existing knowledge when learning new computer systems.
Interface metaphors are designed to be similar to a physical entity but also has own properties
e.g. desktop metaphor, search engine. They exploit user’s familiar knowledge, helping them to
understand ‘the unfamiliar’
Interface metaphors conjure up the essence of the unfamiliar activity, enabling users to
12
leverage of this to understand more aspects of the unfamiliar functionality. People find it
easier to learn and talk about what they are doing at the computer interface in terms familiar to
them.
Benefits of interface metaphors
• Makes learning new systems easier
• Helps users understand the underlying conceptual model
• Can be innovative and enable the realm of computers and their applications to be made
more accessible to a greater diversity of users

Problems with interface metaphors (Nelson, 1990)

• Break conventional and cultural rules
– e.g., recycle bin placed on desktop
• Can constrain designers in the way they conceptualize a problem space
• Forces users to only understand the system in terms of the metaphor
• Designers can inadvertently use bad existing designs and transfer the bad parts over
• Limits designers’ imagination in coming up with new conceptual models

13