Course Title: INTRODUCTION TO HUMAN-COMPUTER INTERACTION

Course Code:
Course Prerequisites: Web Systems and Technologies 1
Pre-requisite Topics Requiring Mastery:
Web Systems
Target Learners: The subject is intended to the following students:
BSIT
Course Number: 3 units

COURSE DESCRIPTION
• In this course, students are introduced to the fundamental theories and concepts of human-
computer interaction (HCI). HCI is an interdisciplinary field that integrates theories and
methodologies across many domains including cognitive psychology, neurocognitive
engineering, computer science, human factors, and engineering design. Students will gain
theoretical knowledge of and practical experience in the fundamental aspects of human
perception, cognition, and learning as relates to the design, implementation, and evaluation of
interfaces.
• Topics covered include: interface design, usability evaluation, universal design, multimodal
interfaces (touch, vision, natural language and 3-D audio), virtual reality, and spatial displays. In
addition to lectures, students will work on individual and team assignments to design, implement,
and evaluate various interactive systems and user interfaces based on knowledge culled from
class material and additional research.
GENERAL LEARNING OUTCOMES
• Practical and professional skills
• Have an awareness of the role of the UI in the development of software
• Be able to promote user-centered UI development within your organization
• Be able to design and evaluate UI’s
• Knowledge and understanding
• The importance of user-centered UI design and evaluation
• The relevant aspects of related academic disciplines, including computer science, cognitive
psychology, and graphic design
• The concepts, principles, and techniques associated with usability requirements gathering
• The concepts, principles, and techniques associated with designing UIs
Cognitive Skills

1
 • Develop a UI in a flexible, iterative manner, working in close collaboration with the users
• Specify the profile of the users, the tasks they wish to carry out, and the environments in which
they will be working.
• Design a UI that better supports the users as they carry out their tasks
• Represent the underlying organization and structure of the UI
• Apply design principles and guidelines
• Choose appropriate input and output devices
• Make effective use of text, color, sound, images, moving images, and layout
• Design UIs for graphical UIs and web sites
• Develop an evaluation strategy and plan
• Undertake user observations and inspections to evaluate UI designs
• Make use of your findings from an evaluation to improve a UI
Key Skills
• Communicate effectively about UI design and evaluation
• Provide appropriate, effective documentation for the design and evaluation process

COURSE REQUIREMENTS AND EXPECTATIONS:

• Academic dishonesty: Students are expected to complete all materials (assignments & exams)
on their own. This does not prevent the student from seeking assistance from the instructor or
other students. 
• Class attendance: You are expected to regularly attend and be on time for all classes. You are
responsible for all materials covered during an absence. 
• Late Assignments Policy:
A project, that is turned in late, will have a ten points penalty per a day and if it is three days late,
it will not be accepted
• Make-up Exam Policy
You are expected to take each exam on the scheduled dates. Make-up exams are not
guaranteed, but are granted at the discretion of the instructor. 

COURSE EVALUATION
• Quiz
• Participation

2
 • Project
• Exam

COURSE CALENDAR

Examination Date Days

Preliminary Feb. 16-19, 2022 Wed-Saturday

Mid-term Mar. 16-19, 2022 Wed-Saturday

Pre-finals Apr. 20-23, 2022 Wed-Saturday

Finals May 25-28, 2022 Wed-Saturday

CONTENTS
Part 1 Introducing User Interface Design
Why the User Interface Matters
Computers are ubiquitous
The importance of Good User Interface Design
3.1 What is a good user interface design?
3.2 The problems of poor and bad user interfaces
3.3 Safety and the user interface
3.4 Elections and the user interface

MODULE 1

UNIT 1: Introducing User Interface Design

1.0 Learning Targets

After finishing this module, you are expected to:

 Identify how important it is to have a good interface design.

1.1 Warm Up

Give three things that you expect you will learn in this module.
1. ___________________________________________________________

3
 2. ___________________________________________________________
3. ___________________________________________________________
Answer the following:
1. How will a developer know that the application that he designed is an effective type of user
interface?
2. How will a developer know that the application that he designed is an effective type of user
interface?
3. Have you ever watched someone struggling to program their video recorder or set the clock on
their microwave oven?
4. How often does your computer behave in a manner that you do not understand?
1.2 Introduction

• The UI is a vital part of almost all computer systems. Numerous accidents and disasters have
been blamed on the design of the UI. Every day, poor UIS result in increased error rates, higher
training costs, and reduced throughput. This costs businesses money and causes stress for those
interacting with the UIS – the users.
• By studying this module, you will learn the theory behind good UI design and develop the skills
needed to design and evaluate your own UIs. Through this module, we emphasize the importance
of the user in developing UIs. You will learn attending to the users and to how they behave in
practice is key to the development of usable UIs. We will teach you the skills needed for getting
to know the users and addressing their needs when you are designing a UI.
• Why the User Interface Matters
• Human-computer interaction (HCI) is the study of how humans interact with computer systems.
Many disciplines contribute to HCI, including computer science, psychology, ergonomics,
engineering, and graphic design. HCI is a broad term that covers all aspects of the way in which
people interact with computers. In their daily lives, people are coming into contact with an
increasing number of computer-based technologies. Some of these computer systems, such as
personal computers, we use directly. we come into contact with other systems less directly – for
example, we have all seen cashiers use laser scanners and digital cash registers when we shop.
And as we are all too aware, some systems are easier to use than others.
When users interact with a computer system, they do so via a user interface (UI). This module
explores how to design good user interfaces – interfaces that are easy to use and easy to
understand, that meet the needs of the intended users, and that support users in the tasks they wish
to undertake. We introduce you to user interface design is important and highlight the
consequences of poor or bad user interface design. More important, we will get you to start
thinking about users – and why and how to involve them in the design and evaluation of the user
interface.
1.3 Computers are ubiquitous

• HCI refers to the study of how humans interact with computer systems.
• Why the user interface matters?
• Interface design is important because it can turn potential visitors to buyers. User interface also
facilitates the interactions between the user and your website or web application. It is important to

4
 meet the user expectations and support the effect functionality of your site. A well-executed user
interface facilitates effective interaction between the user and the program, app or machine
through contrasting visuals, clean design and responsiveness.
• A computer system (or an interactive computer system or just a system) is the combination of
hardware and software components that receive input from, and communicate output to a user in
order to support his or her performance of a task.
• For example, computer-based microchip technology can be found embedded in personal goods
such as digital watches and mobile phones, in domestic appliances such as microwave ovens,
washing machines, and video recorders.

Many stores use laser scanners that “swipe” the bar codes on goods to record both the goods we
purchase and total the amounts we spend.
Behind the scenes, the scanning of goods assists with automated stock control and stock
reordering.

When we take money from our bank accounts using an automated teller machine (ATM) or when
we use ATM debit cards to buy goods electronically, our bank details are accessed via bank’s
computer system.
The list of everyday ways in which we use computer-based systems seems endless.

The user interface and the ways of interacting with computer-based systems are different for each
system.

5
For example, digital watches generally have buttons that users press to set the time or use the
stopwatch facility. Microwave ovens might have dials to turn or a digital display and a touchpad
of buttons to set the cooking time.
PCs have a screen, a keyboard, and a mouse (or sometimes a trackball or a joystick) that enable
interaction to take place. So, each user interface is different. Depending on the design of the
interface, each of these systems will either be usable – that is, easy to learn and easy to use – or
problematic for users.
The user’s view of a computer system is often limited to and based solely on his or her
experience of the user interface.

The importance of Good User Interface Design

Good user interface design is important because, as we have discussed, computer use permeates
everyday life. Early computer systems were expensive and were developed mainly for particular
tasks, like advanced number-crunching; as such, these systems were employed only by specialist
computer users. Often the systems had command-line interfaces, with obscure commands known
only by these specialist users. Thus, the user had to adapt to the system, and learning how to use
the system required much effort.
Therefore, the need for the design and development of user interfaces that support the tasks
people want to do and that can be used easily by a variety of people with varying abilities has
become an important issue. Users are more comfortable with computer systems that are easy to
use, easy to understand, and enable them to attain their goals with minimum frustration. One way
of demonstrating the importance of good user interface design is by showing tangible benefits
that can be discussed in cash terms. For businesses, good user interfaces can lead to benefits such
as higher staff productivity, lower staff turnover, higher staff morale, and higher job satisfaction.
Economically, theme benefits should translate into lower operating costs. In addition, computer
systems that are easy to use and easy to understand require less training, again saving employers
money. Bad user interfaces, on the other hand, may result in stress and unhappiness among staff,
leading to high staff turnover, reduced productivity, and, consequently, financial losses for the
business. As you will see later, it is easy to give examples of the effects of bad design but
showing the financial benefits of good user interface design can be more difficult. Invariably,
many factors are involved, and this makes it difficult to attribute success directly to good user
interface design,
What is a good user interface design?

6
A good user interface design encourages an easy, natural, and engaging interaction between a
user and a system, and it allows users to carry out their required tasks.
With a good user interface, the user can forget that he or she is using a computer and get on with
what he or she wants to do.
Just as knowledge of the transmission mechanism of a car is of little concern to most motorists,
knowledge of the internal workings of a computer system should be of little consequence to its
users.
Although we have used the adjectives "good." "poor," and "bad" to describe user interfaces, it is
worth noting that each of these terms is subjective: they have different meanings for different
people and their use to rate various aspects of a user interface will vary.

You may have used the terms "good" or "bad" to describe, for example, the colors used in an
interface, the pictures on the icons, or how attractive or eye- catching the interface was. These
attributes describe the overall look or aesthetics of the UI. Nevertheless, they are only a part of
our focus in this module. Our real concern is whether a user interface is good, bad, or poor in
relation to its usability.
What is usability?
Usability is defined in Part 11 of the ISO 9241 standard (BSI, 1998) as "the extent to which a
product can be used by specified users to achieve specified goals with effectiveness, efficiency
and satisfaction in a specified context of use."
The problems of poor or bad user interfaces

User Frustration and Dissatisfaction

Problems for users and the public in general arise as a result of poorly designed user
interfaces.

7
8
Do It Yourself

1. Think for a moment about the situation outlined in Box 1.3. Suggest what the consequences of
the Passport Agency's computer problems may have been for the following groups of people:

· The general public

· The workers at the Passport Agency

Discussion
The consequences to the general public were enormous. People had great difficulty getting their
passports in time for their vacations. People waiting for passports may have suffered from stress
and anxiety related to the possibility that they may not be able to go away. Some may have lost
money as a result of being unable to travel. Business travelers would have been affected too. Both
groups probably felt anger and frustration with what they would have perceived as computers
being in control and staffed by unorganized, incompetent government administrators.
Loss of productivity, efficiency, and money
Computer systems with poor user interfaces can have an financial cost. Take the crisis at the
Passport Agency. It was reported that the cost of this fiasco was $20million ($12.6 million),
which included nine million dollars (six million pounds) on staff overtime and at least $242,000
(161,000) in compensation to the hundreds of people who missed their vacations as a result of not
receiving their passports on time.
Safety and the User Interface
Systems in which human or environmental safety is of paramount concern are referred to as
safety-critical systems. These systems include aircraft, aircraft flight decks, air traffic control
consoles, nuclear power plants, control systems, and medical devices.

Elections and the User Interface

Many voters in Palm Beach Country felt that their vote went to the wrong person

9
Small irritations are also a problem
For instance, the process of shutting down your computer from Microsoft Windows.
If you have found it difficult to relate to the "catastrophic" examples, we have dis-
cussed so far, there are many less disastrous but still problematic examples that may
be more familiar to you. Take, for instance, the process of shutting down your com-
puter from Microsoft Windows. To do this, you have to press the Start button on the
task bar, and find the command Shut Down on the menu. Intuitively, is that where
you would expect the Shut Down command to be? What other domestic appliance,
or any other type of device, is stopped by starting it? Although the Start button may
not have been the obvious place to look for the Shut Down command when you first
used Windows, once you have used Windows for some time you adapt to what it
makes you do to shut down your computer and you just do it.
Do It Yourself

Think about your use of the different software applications provided in the Microsoft Office Suite or in
another suite of office applications that you use. Choose one application and think about a particular
feature that you find confusing when you use it.
Discussion
The application I use most often from the Microsoft Office Suite is Word. For me, confusing feature in
more recent versions of Word is tabbed dialogs.

10
Designing for Users
Computer systems should be designed for the needs and capabilities of the users for whom they are
intended. A user should not have to think unnecessarily about the intricacies of how to use a computer
unless, of course, that itself is the user’s task.
User-centered Design
User-centered Design(UCD) is an approach to user interface design and development process. User-
centered design not only focuses on understanding the users of a computer system under development but
also requires an understanding of the tasks that users will perform with the system and of the
environment (organizational, social, and physical) in which they will use the system. Taking a user-
centered design approach should optimize a computer system’s usability
Four main principles of human-centered design
1. The active involvement of users
2. An appropriate allocation of function between user and system
3. The iteration of design solutions
4. Multidisciplinary design teams
The four essential human-centered design activities are:
1. Understand and specify the context of use
2. Specify the user and organizational requirements
3. Produce design solutions (prototypes)
4. Evaluate designs with users against requirements

11
The iterative user interface design and evaluation process
Involving Users
The way to be user-centered is to involve users and to pay attention to their views.
This can include a variety of approaches, from simply observing users’ working practices as part of
collecting system requirements, to using psychologically based user-modeling techniques, to including
user representatives on the design team.
Who are the users?
In a user interface design project, developers generally refer to several types of people as users:
● Customers, who pay for and perhaps specify the computer system under development
● Other people within the user’s organizations who have an interest in the development of the
system

12
 ● Users or end users - the people who actually use the system directly to undertake tasks and
achieve goals

Do It Yourself

Think about a recent project you have been involved with a work or an important meeting that you have
attended (for example, a meeting at a club you belong to or a local community meeting)/
Various people were there, all expressing their own views. In the project or at the meeting, was it
easy/necessary/appropriate to accommodate all the views expressed when arriving at a decision?

Making the Design Process iterative

- Way of ensuring that users can get involved in design and that different kinds of knowledge and
expertise related to the computer system can be brought into play as needed.
When and how to involve users
Users should be involved in every part of the user interface design and development life cycle.
● Early in the design process when the requirements are being specified.
● During prototyping to test designs and options
● Just before delivery of the product
● During training/after delivery of the system

Do It Yourself

Think about the approach you take to software development at work. If this is not applicable to you, think
about how you might approach a task like preparing a meal for friends. Think about where you would
involve users and where you might work iteratively.
Think about a recent purchase you have made. It might be a new PC, a new car, or a domestic appliance
for the home; or perhaps you were involved in making the decision about buying some equipment at
work. Think about how you made the decision. Did you buy the first item you saw, or did you look for
specific features to judge alternatives by and to guide your choice?

13
When and how do you evaluate?
● Evaluation is a way of finding out whether your systems work, and it is an ongoing activity
throughout the life cycle.
● You can look for as many problems as possible (diagnostic evaluation) or you can try to measure
the performance of the system (measurement evaluation).
● The role of the evaluation is always to inform the design and to improve it at all stages.
● Measurement evaluation frequently contributes to subsequent versions of a product.
● Different kinds of evaluation may be carried out at different design stages and for different
reasons.

● Evaluation early in the life cycle

○ Validate the users’ requirements, predict the usability of the product or the usability of an
aspect of the product, and to assess how well the interface meets the users’ needs.
● Evaluation later in the life cycle
○ Use to assess how well the user interface meets the users’ needs. It is carried out to check
the usability of the nearly completed system and to ensure that the system meets the
specified usability requirements.
● How do you evaluate

14
 ○ Observing the organization and how people work
○ Interviewing, talking, and asking questions - surveys (questionnaires, interviews)
● Making predictions
○ Predict the types of problems that users will encounter without actually testing the system
with them
Summary

● We introduced you to user interface design, discussed why it is important, and explored what can
happen when UIs are badly designed.

● Introduced to user-centered design, emphasized the importance of user involvement throughout

design and development, and stressed the need for an iterative approach to design and frequent
evaluations of the design in progress. We then discussed when to evaluate user interface designs
and provided a short introduction to evaluation techniques
References

Botin, Khristine A.

15