Human Computer Interaction 1

Human Computer Interaction |1
WESTERN MINDANAO STATE UNIVERSITY
Vision
The University of Choice for higher learning with strong research orientation that
produces professionals who are socially responsive to and responsible for human
development; ecological sustainability; and, peace and security within and beyond
the region.
Mission
The Western Mindanao State University, set in a culturally diverse environment, shall
pursue a vibrant socio-economic agenda that include:
•A relevant instruction paradigm in the education and training of competent and
responsive human resource for societal and industry needs;
•A home for intellectual formation that generates knowledge for people
empowerment, social transformation and sustainable development; and;
•A hub where science, technology and innovation flourish enriched by the wisdom
of the Arts and Letters, and Philosophy.
INSTITUTE OF COMPUTER STUDIES
Goals
The institute shall provide academic excellence in the field of Information and
Communication Technology, with emphasis on the following goals:
• Comprehensive faculty development plans
• Achievement of Level 2 accreditation status for curricular programs
• Excellence in quality of graduates
• Outcomes-based curricular offerings
• Strong linkages of partner industries and institutions  Institutional
building and development BACKGROUND OF THE WORKBOOK
HCI is an interdisciplinary field that integrates theories and methodologies

across many domains including cognitive psychology, neuro-cognitive engineering,
computer science, human factors, and engineering design. This workbook consists of

practical exercises on the fundamental theories and concepts of human-computer
interaction that includes human perception, computer concepts, interaction, design
process and rules, multimodal interfaces (touch, vision, natural language and 3-D
audio), evaluation techniques and methods, usability evaluation, user experience,
and universal design that students can work on individual and teams to design,
implement, and evaluate various interactive systems and user interfaces.
OBJECTIVES OF THE WORKBOOK
At the end of this workbook, the students can:
1. Demonstrate an understanding on the theoretical knowledge and

practical experience in the fundamental aspects of human perception,
cognition, and learning in relation to the design, implementation, and
evaluation of interfaces.
2. Integrate interactive design in context to human diversity.
3. Develop an awareness of the range of general human-computer
interaction issues that must be considered when designing information
systems.
4. Analyze interaction problems from a technical, cognitive, and functional
perspective.
5. Apply variety of simple methods for designing and evaluating the
quality of user interfaces and spatial displays.
6. Develop prototypes and interfaces for users with specific accessibility
issues.
TABLE OF CONTENTS
TITLE Page
ACTIVITY 1 – INTRODUCTION TO HCI 5
ACTIVITY 2 – HCI AND INTERACTION DESIGN 11
ACTIVITY 3 – FOUNDATIONS OF HCI: THE HUMAN 16

ACTIVITY 4 – FOUNDATIONS OF HCI: THE COMPUTER 22
ACTIVITY 5 – FOUNDATIONS OF HCI: THE INTERACTION 28
ACTIVITY 6 – DESIGN PORCESS: DESIGN SPACE ANALYSIS 37
ACTIVITY 7 – DESIGN PROCESS: ITERATIVE DESIGN AND PROTOTYPING 42
ACTIVITY 8 – DESIGN PROCESS: DESIGN RULES 50
ACTIVITY 9 – DESIGN EVALUATION: EVALUATION METHODS 59
ACTIVITY 10 – DESIGN EVALUATION: QUERY METHODS 68
ACTIVITY 11 – DESIGN EVALUATION: USER EXPERIENCE 72
ACTIVITY 12 – UNIVERSAL DESIGN: PRINCIPLES AND CONCEPTS 76

ACTIVITY 1: INTRODUCTION TO HCI
I. Introduction
Human Computer Interaction (HCI) has been defined as a system concerned

to study, design, construction and implementation of human-centered interactive
computer systems. It is a term which refers to the understanding and designing of
different relationships between the people and computers. In this activity, you will
demonstrate an understanding on the basic concepts and principles of HCI through
concept maps, discussions, and examples.
II. Objectives
At the end of this activity, you can:

1. Discuss the importance of HCI through concept mapping
2. Identify the principles of HCI and its importance
3. Give examples for each principle of HCI
4. Examine an electronic device to illustrate the goal of HCI

III. Concept/s Explanation
HCI is concerned with the design, evaluation, and implementation of

interactive computing systems for human use and with the study of major
phenomena surrounding them. One of its major goal is to develop and improve the
safety, utility, effectiveness, efficiency, and usability of the systems that include
computers.
Good HCI design is generally difficult to achieve because of its “multiobjective

task” which involves simultaneous consideration of many things such as the type of
end-users, the characteristics of the tasks, the cost and capabilities of the devices,
the lack or exact quantitative evaluation measures, including the changing
technologies. Thus, it is essential to know the different principles of HCI to achieve its
goal which could lead to a good HCI design
IV. Work/Practice Exercise
Exercise 1. You draw a concept map that explains the importance of HCI in the box
given. Then, discuss your drawing.
Concept Map
Usability
Software
Design HCI
Engineering

Information
Architecture
Discussions
As you can see in my concept map for me this the 4 importance when it comes
from HCI. The Information Architecture is the structural design of shared
information environments that are organizing labeling websites, software to
support usability and findability and many more. Usability is concerned with
making systems easy to learn, easy to use, and with limiting error frequency and
severity. The Software Engineering is concerned with methods and tools for the
development of human-computer interfaces, assessing the usability of
computer systems and with broader issues about how people interact with
computers. And the last is the Design, Design is considered as a problem-
solving process that has components like planned usage, target area,
resources, cost, and viability.
Exercise 2. List down the Seven (7) Principles of HCI and its importance. Provide an
example for each principle of HCI through an illustration (examples should not be
taken from the lecture notes)
PRINCIPLES OF IMPORTANCE EXAMPLES

HCI
1. Know Thy User You should understand the Examples your target user
need of the user on your are the students. You
desired work and design what should make some of work
is the best for them. that based on learning new
things that help the user in
their studies

2. Understand the The task analysis should Example making websites
Task know the detail on their work based on uploading file
and to know the work of the and to store it for a long
user by teaming up and time. The task analysis
achieve the goals they should understand the task
wanted. and to support the work of
the website designer.
3. Reduce Memory This principle makes the Example the apps that are
Load easier way to less memory very simple, classic and
load. can make you satisfied
than the apps that are
heavy and so much design
but there is the same.

HCI
4. Strive for Using the same design Example you make a
Consistency patterns and the same website that the
sequences of actions for background color is black
similar situations. and there is a setting and a
search button. When you
update it, you can change
the color of the
background and make the
setting and search much
more responsive than the
previous one.

5. Remind Users It is a reminds the user to see Example when you
and Refresh Their the feedback of their ordered at Shopee the
Memory interaction of the used receipt or the feedback you
app/website. get is the example of it.
6. Prevent This the best to make the Example when you make a
Errors/Reversal of user satisfied to simply give a website you should state
Action name of every icon or words the name or specific icon
that the are curiously going to that the user can
click to prevent errors. understand properly and
the prevent mistakes of
their work.

HCI
7. Naturalness Naturalness isa principle that Example when you are
make your work as simple or creating websites that are
natural as stated. record your blood pressure
and to say that you are
healthy or not, but you
should type what is your
blood pressure is.

Exercise 3. Choose an electronic device that you can see at home. From the chosen
device, you assess its characteristics and functionalities. Then provide your answer on
the following items:
Name of the Chosen Electronic Device: Flash Drive
Screen shots

1. Characteristics and functionalities:
 Flash drive is data storage device that can store data depends on the size
and it can use to data back-up and transferring of computer files. When you
see it, they are small, durable, and reliable. The larger their storage space,
the faster they tend to operate.
2. With its design and functionalities, has the device achieved the goal of HCI?
Explain your answer.
 Yes, because if they are usable, safe, and functional they are already
achieved the goal of HCI. And it can help the user also, so it is a best
electronic device for me.
3. Does it have a good HCI design? Explain your answer

 For me it is not bad, and it is not good also to show that this thing is best
HCI design. But because it is small and we don’t have an intention to make
it more design of it, for me I’m satisfied with the design and the
functionalities to make it user friendly.
Human Computer Interaction | 10

ACTIVITY 2: HCI AND INTERACTION DESIGN
I. Introduction
How many interactive products are used every day? Think for a minute about
what you are using on a typical day: cell phone , computer, personal organizer,
remote control, soft drink machine, coffee machine, ATM, ticket machine, library
information system, web, photocopier, watch, printer, stereo, calculator... it is an
endless list. Just think about how useful they are for a minute. How many are fast,
effortless, and enjoyable to use? In this activity, you will know the role of interaction
design in Human Computer Interaction (HCI) through assessment and application of
principles. You will also evaluate and determine a good design from a bad one.
II. Objectives
1. Assess the relationship of Interactive Designs and HCI

2. Apply the process and principles of interaction design.
3. Assess the difference between good and poor interaction design.
4. Demonstrate an understanding on what “Everyday Thing” is
5. Evaluate an Everyday Thing and explain what is good and bad
about it in terms of the goals and principles of interaction design
III. Concept/s Evaluation
Human-Computer Interaction (HCI) is a multidisciplinary area of research

that is concerned with computer technology design specifically, with human (user)
and machine interactions. It is an interdisciplinary field that does Interaction Design.
Meanwhile, Interaction Design is the design of interactive products to support people
in their daily and working lives.
The development of interactive products that are usable is a central concern of

interaction design. This is generally meant to be easy to learn, efficient to use, and
enjoyable user experience. One good start in designing interactive usable products
is by comparing well-designed products and poorly-designed ones. It is through

recognizing the basic limitations and strengths of the different interactive systems,
that we will be able to understand what is meant by useful from not.
Exercise 1. You compare how making a call differs when using the following
devices:
• a public Phone boxes
• a Cell phone
DEVICES COMPARISO
N
Kind of Users Type of Activities Context of Use
Being
Supported
. Phone Public phones Most phone boxes are Phone boxes are
Box are designed to designed with a simple intended to be used in
be used by the mode of interaction: public places, say on
public. Many insert card or money the street or in a bus
have Braille and key in the phone station, and so have
embossed on number. If engaged or been designed to give
the keys and unable to connect the the user a degree of
speaker money or card is privacy and noise
volume control returned when the protection using hoods
to enable receiver is replaced. and booths.
people who are There is also the option
blind and hard of allowing the caller to
of hearing to make a follow-on call by
use them. pressing a button rather
than collecting the
money and reinserting it
again. This function
enables the making of
multiple calls to be more
efficient.
. Cell Cell phones are Cell phones have a Cell phones have been
Phone intended for all more complex mode of designed to be used
user groups, interaction. More any place and any
although they functionality is provided, time. However, little
can be difficult requiring the user to consideration has been
to use for spend time learning how given to how such
people who are to use them. For flexibility affects others

blind or have example, users can who may be in the
limited manual save phone numbers in same public place.
dexterity. an address book and
then assign these to
"hotkeys," allowing them
to be called simply
through pressing one or
two keys.
Exercise 2. Choose an everyday thing, preferably something that is not computer or

information technology-based and analyze it based on the principles discussed in
class. This everyday thing is something you have personally seen, used, or
experienced. You provide a screenshot of your chosen “Everyday Thing”. Then
answer the given guide questions below. (Important: This analysis should NOT be
taken from the web).
Your Everyday Thing: Coin purse wallet
Screen shots of Everyday Thing
Guide Questions:
1. What is the object’s function?

 The Coin Purse is designed to hold coins and loose leaf change. Originating
from the traditional cloth coin pouch, today a Coin Purse often is made from
leather and features a magnetic snap
2. How do you use/operate the object?
 Coin purses are usually small zippered wallets carried inside a larger
handbag or woman's purse. Coin purses often have a large central pocket in
order to hold coins and paper currency, plus a number of auxiliary
compartments for credit cards, personal identification and other small items.
3. What is odd or unusual about its design?
 It didn’t fit any types of cards like credit card or debit card.
4. What principles did it the object’s design follow?
 Coin purse for clarity, is a small money bag or

pouch, made for carrying coins
5. Which principles did the design violate?

 Yes, for being so small.
6. Do these design quirks make it usable?

 Yes, this design makes it very usable for being so
small with the purpose of storing of coins.
ACTIVITY 3: FOUNDATIONS OF HCI – THE HUMAN

I. Introduction
In any interactive system discussion, the human is the central character. It is

after all the one assisted by computer systems. Therefore, the user's requirements
should be the first priority in the design process. The process involves examining
areas of human psychology that come under the general banner of cognitive
psychology. In this activity, you will lean to understand human capabilities and
limitations in order to design something for someone. You will know if things are
going to be difficult or even impossible for them. Doing this, will help you know what
people find easy and how we can help them.
II. Objectives
At the end of the activity, you can:
1. Evaluate different Input-Output Channels

2. Assess the capabilities and limitations of the user on the use of
computer
3. Interpret different Optical Illusions
4. Assess the type of Long-Term Memory through identification and
discussion
5. Appraise the Levels of Emotional Design through identification
and discussion
The human is an information processor which receives input from the world,
stores, manipulates and uses information, and reacts to the information received.
Information is received through the senses, particularly through sight, hearing, and
touch. It can be stored in memory, whether temporarily in sensory or working
memory, or in long-term memory permanently. It can then be used for reasoning and
problem-solving. Furthermore, recurrent familiar situations allow people to acquire
skills in a particular field, as their information structures become more clearly
defined. However, this could also lead to error, when the context changes.
Human perception and cognition are complex and sophisticated, but not
unlimited. Understanding the human capacity and limitations as a processor of

information can help us design interactive systems that support and offset the latter.
The principles, guidelines, techniques, and models derived from cognitive
psychological are considered to be invaluable tools in designing interactive systems.
Exercise 1. You write down five (5) capabilities and five (5) limitations of Human
Perception. Complete the table given below.
Human Perception Capabilities Human Perception Limitations

1. Sight Brightness
2. Touch Pain
3. Hearing Range of volume
4. Taste Odor
5. Smell Stink
Exercise 2. You analyze the different optical illusions below and provide your
answers on the space provided for. Also, provide a brief justification for your answer.
OPTICAL ILLUSIONS YOUR ANSWER

There are 2 animals a duck
and a rabbit.
1.
How many animals do you see?
I can see 5 legs due to an

illusion.
2.
How many legs do I have?
There are 4 colors in the

image a pink, white, green.
3.
How many colors are present in the image?

OPTICAL ILLUSIONS YOUR ANSWER
The number I see in the circle

is 26.
4.
What number do you see in the circle?
I can’t see it clearly, but I

guess it is a horse.
5.
What do you see in the picture?
Exercise 3. You identify the type of Long-Term Memory (LTM) whether episodic,
procedural, or semantic given the examples below.
EXAMPLES TYPE OF LTM

1. First kiss episodic
2. Learning to drive procedural
3. First day of school episodic
4. Numeric value of pi semantic

5. Brushing teeth procedural
6. Your English teacher during elementary episodic
7. The unforgettable experience you had episodic
8. Troubleshooting a PC procedural
9. The capital city of France semantic
10. Symbol of Hydrogen semantic
Exercise 4. You identify the levels of emotional design whether visceral, behavioral,
or reflective given the examples below. Provide a brief justification for your answer.
EXAMPLES LEVELS OF EMOTIONAL

DESIGN
Reflective
1.
x
Behavioral
2.

2.
EXAMPLES LEVELS OF EMOTIONAL

DESIGN
Reflective
3.
Visceral
4.

Behavioral
5.
ACTIVITY 4: FOUNDATIONS OF HCI – THE COMPUTER
I. Introduction
What are we trying to do when we interact with computers? Consider what

happens when we interact with each other – either passing information on to other
people or receiving information from them. Sometimes, the information we receive
responds to the information we have recently given them, and we can then respond
to it. Interaction is therefore a process of transfer of information.
To understand how humans interact with computers, it is necessary that you

understand the interaction between the two parties by considering the computer and
the associated input-output devices, and to examine the influence of technology on
the nature of interaction and design style.
II. Objectives
1. Demonstrate understanding of the properties of the devices with

which a system is built.
2. Classify different physical controls and displays

3. Examine a range of input and output devices in order to
understand how these influence interactions.
4. Design a device and analyze how its properties or attributes
influence interaction
The computer is considered to be one of the fundamental foundations of

HCI. The computer system consists of a variety of elements such as input devices,
output display devices, virtual reality systems and 3D visualization, physical
interaction, printing paper, memory, and processing. Each of these elements affects
the interaction. Meanwhile, technology in interaction design drives and empowers
the interface. Thus, the details of computer processing should be largely irrelevant to
the end-user, but the interface designer needs to be aware of the limitations of
storage capacity and computational power.
Exercise 1. You find at least 5 different examples as you can of physical controls
and displays. Do the following:
(a) List them
(b) Try to group them or classify them.
(c) Discuss whether you believe the control or display is suitable for its purpose.

 Closed-circuit surveillance cameras.
 Motion or thermal alarm systems.
 Biometrics
 Picture IDs.
 Locked and dead-bolted steel doors.
Discussions
CCTV systems may operate continuously or only as required to monitor a particular
event. A complete motion sensor alarm system has a few main components.
Biometrics is the measurement and statistical analysis of people's unique physical and
behavioral characteristics. Picture IDs is an identity document that includes a
photograph of the holder, usually only their face. Locked and dead-bolted steel doors
is a locking mechanism distinct from a spring bolt lock because a deadbolt can be
opened only by a key or handle.
Exercise 2. You examine a range of input and output devices to understand how
they influence interaction.
Problem 1. A typical computer system is comprised of a QWERTY keyboard,

a mouse, and a color screen. There is usually some form of loudspeaker as well.
You should know how the keyboard, mouse, and screen work - if not, read up on it.
You answer the questions given below,

1. What sort of input does the keyboard support?
- Keys on a keyboard send binary information into the computer which is

interpreted using the ASCII or Unicode character sets. Mouse - used to control
a pointer on the screen of a computer.
2. What sort of input does the mouse support?
- A mouse is used to move a little cursor around the screen, clicking and
dragging as you go. if you let go of the mouse, the cursor will stop. The
computer is relying on you to move the mouse, the mouse won't move on its
own! Therefore, it is an input device.
3. Are these adequate for all possible applications? If not, to which areas are
they most suited? Do these areas map well onto the typical requirements for
users of computer systems?
- They are best suited for general inputs and program control where speed is not
a major factor. While many games can be played using a mouse and keyboard,
they are much more fun using a dedicated controller such as a game pad or
joystick. Many graphics applications are easier and quicker to use with either a
stylus and graphics tablet or by using a touch screen.
Problem 2. If you were to design a keyboard for a modern computer, and you
wanted to produce a faster, easier to use layout, what information would you need to
know and how would that influence the design?
Discussions
Letter frequency. The home row letters (ASDFGHJKL) of the traditional

QWERTY keyboard layout make up only one third of English writing. This
makes QWERTY bad. Dvorak and Colemak are much better than QWERTY.
Dvorak is entirely different to QWERTY; only A and M remain at their
positions. However, in Colemak, many keys including Z, X, C, V are

unmoved, and only P and E change hands. I use an improved Dvorak. On my
keyboard, the positions of U and I are interchanged because I is more
frequent than U. So are the positions of Caps Lock and Backspace for the
same reason. The two main reasons people think Colemak is better than
Dvorak are: fingers move less on Colemak, and Colemak makes more keys
stay in their QWERTY places. The first is solved by interchanging U and I.
Problem 3: Pick one of the following scenarios and choose a suitable

combination of input and output devices to best support the intended interaction. It
may help to identify typical users or classes of user and identify how the devices
chosen to support these people in their tasks. Explain the major problems that the
input and output devices solve. Write your answer on the space provided below.
1. Environmental database
A computer database is under development that will hold environmental
information. This ranges from meteorological measurements through fish catches to
descriptions of pollution and will include topographical details and sketches and
photographs. The data has to be accessed only by experts, but they want to be able
to describe and retrieve any piece of data within a few seconds.
2. Word processor for blind people

A word processor for blind users is needed, which can also be operated by
sighted people. It must support the standard set of word-processing tasks.
Discussions
I pick this as a scenario because it can be used as both input and output devices. Word
processor can read aloud the contents of the word processing the program to users with
severe blindness. This software can read an entire word processing document or it can echo
each letter, word or sentence. As an input device, word processor provide audio feedback to
keystrokes from a standard keyboard to help the user identify what they’ve type and it also
helps the user verify what they’ve type if the user is blind. As an output device, word
processor can read the contents aloud to the user. This device provides for the person that
has a low vision access to written the word processing documents. Although this software is
utilized as a text to speech device, it only works in word processing documents.
Exercise 3. Design any assisted device either for senior citizen or persons with
disabilities (PWD) and analyze how its properties or attributes influence interaction.
Include labels in your drawing.

Design
Analysis
I want to make this advance electric wheelchair to help people with

disabilities and to make their daily routine mush more easily and to make them
happy. And it also called electric-powered wheelchair, motorized wheelchair, or
powerchair, any seating surface with wheels affixed to it that is propelled by an
electrically based power source, typically motors and batteries.
ACTIVITY 5: FOUNDATIONS OF HCI – THE INTERACTION

I. Introduction
It is essential to know how the human user uses the computer as a tool to
perform, simplify, or support a task. To do this, the users must communicate their
requirements to the computer. The process of communication between the user and
computer is called Interaction. There are several ways in which the user can
communicate with the system efficiently and effectively through different interaction
styles. In this activity, you will demonstrate your understanding of interaction and its
relation to the user and to the computer through illustrations, examining of different
models, and evaluating variety of styles of interaction. Also, you will know the
essential role of ergonomics in interaction design through analysis of the physical
characterisation of interaction.
II. Objectives
1. Evaluate the relation of interaction between the user and the

system.
2. Examine different models of interaction that will enable them to
identify and evaluate components of the interaction, and at the
physical, social and organizational issues that provide the context
for it.
3. Assess different styles of interaction that are used and consider
how well they support the user.
4. Demonstrate an understanding of the role of ergonomics in
interface design, in analyzing the physical characteristics of the
interaction
Interactivity is at the heart of all modern interfaces and is important on many

levels. Interaction between the user and the computer does not take place in a
vacuum, but is affected by a number of social and organizational factors. These may
be beyond the control of the designer, but awareness of them may help to limit any
negative effects on the interaction. The user-system dialog is influenced by the
interface style. Ergonomics is also important to consider in the design of
interactions. The role of ergonomics is to look at the physical characteristics of the

interaction and how it affects its effectiveness. In addition, interaction models help us
understand what is going on in the interaction between the user and the system.
They deal with the translations between what the user wants and what the system
does.
Exercise 1. Illustrate the general framework of interaction. After, you explain the
relation of interaction between the user and the computer system.
Illustration
Discussions
Articulation – mapping user’s mental representation to the input requirements.

Performance – mapping input representation into a computer-readable representation.
Presentation – mapping system’s results into the output representation.
Observation – mapping the output representation into the user’s mental representation.

Exercise 2. You compare and contrast different models of interaction
MODELS COMPARE CONTRAST
1. NORMAN – user - user establishes the goal

– input - formulates intention
– system
– output - specifies actions at interface
- executes action
- perceives system state
- interprets system state
- evaluates system state with
respect to goal
2. ABOWD AND – user - translated into actions at the

– input interface
BEALE
– system - translated into alterations of
– output system state
- reflected in the output
display
- interpreted by the user
Exercise 3. List down three (3) examples of software that uses command-line
interface in real-life application. Discuss each of the listed examples.

COMMAND LINE DISCUSSIONS
INTERFACE SOFTWARE
1. Windows (DOS) C:\>
2. OS X (bash shell) My-iMac:/ me$
3. Linux (bash shell) [root@myserver /]#
Exercise 4. Discuss the Advantages and Disadvantages of each of the interaction

styles.
INTERACTION ADVANTAGES DISADVANTAGES

STYLES

1. Command This type of interface needs Commands must be typed
Line Interface much less memory (RAM) to precisely. If there is a spelling
use compared to other types error the command will fail.
of user interfaces.
2. Menus There are no commands to It can be irritating if there are

learn or remember. too many menu screens to work
through - users get annoyed or
bored if it takes too long.
3. Natural Users do not have to learn A voice interface might need

Language the syntax or principles of a training to get the software to
particular language. recognize what the user is
saying.

STYLES
4.
Question/ Form filling, simplifies data
answer and entry, requires modest Consumes screen space and
Query training, gives convenient may require more computer
Dialog assistance, permits form- skills.
management tools.
5. Form-Fills
and Formulae can be used to
Spreadsheets instantly recalculate totals. Lack of control and security.

It is easy to explore and find
6. WIMP your way around the system They need significantly more
Interface using a WIMP/ GUI interface. memory (RAM) to run than
other interface types

STYLES
7. Even users with little technical

Pointand0Click knowledge can run simple GUIs need a relatively high
Interfaces applications with a GUI. amount of storage space in the
system.
8. 3D Interfaces
Visually appealing design.
System functionality cannot be
adjusted or adapted.

Exercise 5. Look for a partner and choose a website of your choice.
Name of the Website: YouTube
Website URL address https://www.youtube.com/

Screenshots of the Website or Home Page
1. Identify the problems of the website

- YouTube is facing the same problems as Twitter and Facebook; content
management and lack of oversight. They don't want to be responsible for the
dark forces using their platforms to spread harmful messages or disturbing
content. They're also too big to be able to vet every single tweet, Facebook
post or video.
2. Discuss the use of color using in the website.

- The color using in the YouTube is Red.
3. Discuss the arrangement of the text, menu, and image on the website.
- So far as I see the arranging in the text, menu, and image is very perfect I want
to create a website like this one.
4. if you are to re-design the website, what modifications would you like to
make? Provide hand sketches for the better interface of the website. Give a
suggestion on identified problem.
- Keep the interface simple, create consistency and use common UI elements,
be purposeful in page layout, strategically use color and texture, use
typography to create hierarchy and clarity, make sure that the system
communicates what’s happening, and Think about the defaults.
I. Introduction
The analysis of the design space directly reflects the fact that no design
activity can hope to reveal all design options, therefore the best thing you can look
forward to is to document the small part of the design space being examined. This
activity will allow you to examine the design through design space analysis using the
Questions, Options, and Criteria (QOC) approach. After examining, you will learn to
create a QOC notations by creating your own scenario.
II. Objectives
1. Demonstrate an understanding on concepts of design space analysis

2. Identify design rationale technique using design space analysis given
a scenario
3. Develop a design space analysis through the use of Questions,
Options and Criteria (QOC) notations

The design process consists of a series of decisions that link the vast set of
potential systems to the one delivered to the customer. The purpose of the Design
rationale, in its many forms, is to allow the designer to manage the information on
the decision-making process, in terms of when and why design decisions have been
taken and what the consequences of those decisions have for the user in carrying
out his work. Questions, Options and Criteria (QOC) Notation is one of the
approaches used in the design rationale. It is characterized as an analysis of the
design of the space, initially structured by a set of questions representing the major
issues of design.
Exercise 1. Create a design space analysis given a scenario below. Then, provide
your answers on the items given.
Scenario:
Semester break is just around the corner. You and six other friends are
planning to have a vacation to the interesting travel destination. Referring to the
situation, produce a graphic solution using design space analysis (QOC notation) to
indicate transportation method to your selected destination.
1. State the problem
2. Identify the options from the scenario given.

3. Describe the criteria for each of the option

4. Develop the QOC diagrams for the given scenario. Select and explain
your favourite option.
Screenshots of the Website or Home Page
Discussions

Exercise 2. Create a design space analysis given your own scenario. Then, provide
your answers on the items given.
Scenario
.
1. State the problem
2. Identify the options from the scenario given.

3. Describe the criteria for each of the option
4. Develop the QOC diagrams of your formulated scenario and explain the
diagram
Own QOC Diagram

Discussions

ACTIVITY 7: DESIGN PORCESS –ITERATIVE DESIGN AND PROTOTYPING
I. Introduction
Iterative design techniques understand that the principled design of interactive

systems alone cannot optimize the usability of the product and that the designer
must be able to test early prototypes and easily modify prototype features that
compromise the usability of the system. With this activity, you will be able to
understand the essence of using iterative designing to assess the user’s needs and
requirements to make the final product usable for them.
II. Objectives
1. Demonstrate an understanding on Universal Design by integrating

different design approaches.
2. Utilize an application design using paper prototypes, storyboards, and
video prototypes.
3. Evaluate the utilization of an application design using paper
prototypes, storyboards, and video prototypes.
In the software process particularly during the identifying of requirements for

an interactive system, requirements cannot be completely specified from the
beginning of the life cycle. The only way to be sure of any of the functionality of the
proposed design is to build them and test them on actual users. The design can then
be changed to correct any incorrect assumptions that have been discovered during
the testing process. Hence, iterative design is essential.

Iterative design is a purposeful design process which tries to overcome the
inherent problems of incomplete requirements specification through a repeated and
incremental process to improve the product. It is described by the use of prototypes,
artifacts that animates or simulates features of the intended system. There are
variety of techniques in creating prototypes such as paper prototyping, storyboarding,
and video prototyping, to name a few. Paper Prototyping is a design approach that
uses paper, post-it notes, and pencil or marker that mock ups a user interface
instead of doing it on a computer. Next, a storyboard is a graphic organizer in the
form of sequentially presented diagrams or photographs for the purpose of pre-
visualizing a series of videos, animations, motion graphics, or interactive media.
Lastly, Video prototyping offer significant advantages to your design process. First,
they can be really cheap and quick to make. .Second, they function as perfect tools
for communication. Lastly, it can be an essential tool in showing the context use of a
particular product. Using such design techniques will allow you to assess the users’
needs – what works well for them, what does not, and why.
Exercise 1. Create a Paper prototyping for a coffee application. Your paper

prototype for the coffee app should cater the following operations.
1. Allow the following drinks to be chosen

• Espresso – P57.50
• Macchiato – P60.00
• Cappuccino – P65.00
2. Allow the following sizes

• Regular (base price)
• Large – add P10.00
• Extra Large – add P15.00
3. Your app should not allow other substances like caramel or white chocolate to
be added to a perfectly good coffee. Issue a severe admonishment in that
case, clear the current order, and force the user to start over.
4. Allow multiple drinks to be ordered in a single submission.

5. Request a confirmation of each drink before adding it to the current order.
Allow modifying a drink order.

6. Calculate and display the total amount of each drink and of the total order.
7. Issue a confirmation of the total order before finally sending it to the barista.
Screenshots of Paper Prototypes
Exercise 2. Based on the designed paper prototypes, allow two persons to try your
design and pretend to be the customer and order some drinks, while the other two
people operate the app in response to their taps by shuffling pieces of the UI.
1. Provide pictures of the testing process.

Prototyping Testing process
2. Discuss your experience in doing the paper prototyping.

Exercise 3. Translate the Paper Prototypes to a Storyboard with the same concept
of the application and its operations. But this time, visualizations are important.
Storyboards

1. Allow the same persons to try your storyboard design
Storyboards Testing process
3. Discuss your experience in doing the storyboarding. How is the design

experience different from the paper based designing

Exercise 3. Translate your storyboard design into Video prototype. This allows you
to create a more interactive experience of the Coffee Ordering application.
Screenshots of Video Prototyping

1. Still, allow the same persons to try your application. Record their interactive
experience.
Video Prototype Testing Process

1. Discuss your design experience in doing the video prototyping in comparison
to the design experience using paper prototypes and story boards.
.
ACTIVITY 8: DESIGN PORCESS – DESIGN RULES
I. Introduction
One of the key issues that need to be addressed in a user-centered design

process is how to give designers the ability to determine the usability of their design
decisions. In Human-Computer Interaction (HCI), we require the design rules. These
are rules that can be followed by a designer to increase the usability of a possible
software product.
This activity will allow you to explore software environment and design to
assess its usability and the principles, guidelines, and standards being applied.
II. Objectives

1. Demonstrate an understanding on the abstract principles to support

usability
2. Assess the different standards and guidelines in user-centered design
3. Illustrate examples that will distinguish between principles, standards,
and guidelines
4. Demonstrate an understanding on the role of “golden rules” and
heuristics in interface designing.
The prime objective of the design of interactive systems is designing for

maximum usability. Abstract principles offer a more general sense of usability,
especially when expressed in a consistent catalogue. Design rules in the form of
standards and guidelines provide direction for design, both in general and more
concrete terms, to enhance the interactive design. The essential features of good
design are often summed up by 'golden rules' or heuristics. Additionally, design
patterns provide an effective, generative approach in capture and reuse design
knowledge.
Exercise 1. Demonstrate an understanding on the principles of usability by

completing the table below.
USABILITY PRINCIPLES OF
PRINCIPLES EACH U.P. DEFINITION AND EXAMPLES
1. Learnability
1. Predictability
Definition

2. Synthesizability
3. Familiarity
4. Generalizability
5. Consistency

2. Flexibility
1. Dialogue
initiative
Definition
2. Multi-Threading
3. Task
Migratability
4. Substitutivity

5. Customizability
3. Robustness 1. Observability
Definition
2. Recoverability
3. Responsiveness

4. Task
conformance
Exercise 2. Choose two (2) suitable examples for each of the following
environments.
a. Web Application Systems

• ____________________________________________________
• ____________________________________________________
b. Programming Environments
• ____________________________________________________
• ____________________________________________________
1. Provide screen shots of the interface design selected. Then, evaluate if the
interfaces meet the Schneiderman’s Eight Golden Rules that you had
learned during the class.

Web Application Systems
Programming Environments

2. Suggest potential improvements and recommendations. of the interface
design
Exercise 3. Choose two (2) suitable examples for each of the following
environments.
a. Multimedia Environment
• ____________________________________________________
• ____________________________________________________

b. Auto Teller Machines
• ____________________________________________________
• ____________________________________________________
1. Provide screen shots of the interface design selected. Then, evaluate if the
interfaces meet the Norman Seven (7) Design Principles that you learned
during the class.
Multimedia Environments
Auto Teller Machines (ATM)

2. Suggest potential improvements and recommendations. of the interface
design

ACTIVITY 9: DESIGN EVALUATION – EVALUATION METHODS
I. Introduction
Evaluation is an essential process in Human Computer Interaction specifically

on interaction design. This assesses a design based on known or standard cognitive
principles or empirical results to measure the usability and functionality of the
product. This activity will allow you to demonstrate an understanding on the different
evaluation methods used specifically demonstrate an understanding on the
importance of expert analysis in evaluating interactive systems through heuristics
assessment.
II. Objectives
1. Demonstrate an understanding on variety of evaluation methods

2. Identify appropriate methods for the given situations
3. Perform expert analysis method using heuristics assessment
4. Evaluate interactive systems to assess system usability and
functionality
Evaluation is the process of testing the usability, functionality, and

acceptability of an interactive system. It has three (3) main goals namely (1) to
assess the extent and accessibility of the system’s functionality (2) to assess users’
experience of the interaction (3) to identify any specific problems with the system.
Variety of methods can be used in evaluating interactive systems. These methods
are categorized into two evaluation approaches whether based on Expert Analysis or
based on User Participation.
In an expert evaluation, we identify any areas that are likely to cause difficulties
because they violate known cognitive principles, or ignore accepted empirical results.
Using this approach, does not involve user participation. Moreover, we can perform this
approach through the use of methods such as analytic, review-based, and model-based

methods. Such methods depend upon the designer or a human factors expert, taking the
design and assessing its impact on a typical user.
One essential method in expert analysis is through heuristics assessment. Jakob

Nielsen and Rolf Molich developed a method of structuring the system's critique using a
collection of fairly simple and general heuristics called heuristics evaluation. Heuristics
assessment is a review-based evaluation technique that may be conducted on a design
specification such that it is useful for evaluating early design. These can also be used on
designs such as prototypes, storyboards, and fully operating structures. The key concept
behind the heuristic assessment is that, multiple evaluators independently evaluate a
system in order to pose possible usability issues and to be able to determine how those
problems can be solved.
Meanwhile, using User Participation approach, we allow the users to be greatly

involve on the evaluation process. Like expert analysis, it also provides range of
methods such as experimental, observational, and query methods.
Exercise 1. Choose an appropriate evaluation method for each of the following

situations.
• You are at an early stage in the design of a spreadsheet package and you
wish to test what type of icons will be easiest to learn.
• You have a prototype for a theatre booking system to be used by potential
theatre-goers to reduce queues at the box office.
• You have designed and implemented a new game system and want to
evaluate it before release.
• You have developed a group decision support system for a solicitor’s
office.
• You have been asked to develop a system to store and manage student
exam results and would like to test two different designs prior to
implementation or prototyping.
1. In each case, identify:
• the participants
• the technique used
• representative tasks to be examined
• measurements that would be appropriate

• an outline plan for carrying out the evaluation.
SITUATIONS EVALUATION IDENTIFY THE FF.:

METHOD
Participants
Case 1:
You are at an early
stage in the design of
a spreadsheet
Techniques Used
package and you
wish to test what type
of icons will be
easiest to learn.
Representative Tasks
Appropriate Measurement
Evaluation Plan

METHOD

Participants
Case 2
You have a prototype
for a theatre booking
system to be used by
Techniques Used
potential theatregoers
to reduce queues at
the box office.
Evaluation Plan
Participants
Case 3
You have designed
and implemented a
new game system

METHOD
and want to evaluate Techniques Used
it before release.

Evaluation Plan
Participants
Case 4
You have developed
a group decision
support system for a
Techniques Used
solicitor’s office.

METHOD

Evaluation Plan
Participants
Case 5
You have been asked
to develop a system
to store and manage
Techniques Used
student exam results
and would like to test
two different designs
prior to
implementation or
prototyping. Representative Tasks
Evaluation Plan
Exercise 2. Choose two school websites and explore each its navigation and
functionality

Website 1:__________________________________________________________
Website 2:
__________________________________________________________
1. You evaluate and compare these websites by using the Nielsen’s 10

Heuristics Principles
NIELSEN’S SCHOOL/UNIVERSITY WEBSITE

HEURISTICS Website1: Website2:
PRINCIPLES
1. Visibility of
system status
2. Match between
system and the
real world
3. User control and

freedom

PRINCIPLES
4. Consistency and
standards
5. Error prevention
6. Recognition
rather than recall
7. Flexibility and
efficiency of use

PRINCIPLES
8. Aesthetic and
minimalist design
9. Help users
recognize,
diagnose and
recover from
errors
10. Help and

documentation

ACTIVITY 10: DESIGN EVALUATION – QUERY METHODS
I. Introduction
The choice of the evaluation method depends to a large extent on what is

needed for the evaluation. Evaluation methods differ at the point at which they are
widely used and where they can be used. One of the techniques in evaluating
interactive systems is through query methods. In this activity, you will learn on how to
develop a questionnaire to assess the usability and functionality of an interactive
system.
II. Objectives
1. Demonstrate an understanding on the use of query methods

particularly in doing questionnaires
2. Assess the different features of a website in relation to interaction
design
3. Develop a questionnaire based on the practical exploration of a
website.
There are several different approaches to evaluation through user

participation. One of these techniques that allows user participation during the
evaluation of the system's usability and functionality is through Query methods.
These are the process of asking the user directly whether in a form of interview and
questionnaire.
A questionnaire is an alternative method of querying the user during the

evaluation process. It involves a more flexible way of querying than interviews
because questions are fixed in advance, less probing, and can reach to a wider
range of participants. In formulating questions, it involves several styles such as
general, open-ended, scalar, multiple-choice, and ranked.

Exercise 1. From the website you had enumerated in Activity 9, choose one website.
1. Using the query method, create a questionnaire based on the chosen

website. You may use any type of questionnaire whether an open-ended
questions, Likert questions, dichotomous questions, or mixed-type of
questions.
2. Your questionnaire should assess the usability and functionality of the
website being chosen. It should consist of the following questions:
• Demographic information ( 5 questions )
• Usability of the system ( 10 questions )
• System Design (5 questions )
Screenshots of the Questionnaire

Exercise 2. Based on the
questionnaire you made, allow 10
persons to test the school website you
chose as basis for the derived
questions.
1. Present the results of the evaluation process in tabular and graphical

representations. Interpret the results presented and add screenshots of the
evaluation process.
Tabular & Graphical Representations

Interpretation of the Results
Screenshots of the Questionnaire ACTIVITY 11: DESIGN EVALUATION – USER

EXPERIENCE
I. Introduction
The emergence of technologies such as virtual reality, web, and mobile

computing in a variety of application areas, including entertainment, education,
home, and public areas, has given rise to a much wider range of concerns. In this
activity, you will be able to demonstrate an understanding of the importance of user
experience in improving product efficiency and productivity.
II. Objectives

1. Demonstrate an understanding on user experience in relation to

designing interactive systems.
2. Assess software application through identification of usability and user
experience goals
3. Utilize design and usability principles for evaluating the usability of an
interactive product.
Interaction Design involves two main goals such as Usability and User
Experience (UX). User Experience (UX) design is the process of interaction design
used to create products that provide users with meaningful and relevant experience.
This involves the designing of the entire process of product acquisition and
integration, including aspects of branding, design, usability, and function. Meanwhile,
one important aspect of UX is the usability of the product. It is the process of finding
the best match between a user’s needs and a product’s use.
Each goal of interaction design has a different set of goals. The Usability goals
include effectiveness, efficiency, safety, learnability, utility, and memorability.
On the other hand, the UX goals include satisfying, enjoyable, fun, entertaining,
helpful, motivating, aesthetically pleasing, supportive of creativity, rewarding, and
emotionally fulfilling.
Hence, we can say that UX design does not merely focus on what the product looks
or feels like but on how the product works and how usable the product to its intended
users.
Exercise 1. Choose one software application (e.g. mobile applications, information

systems, web applications, and the like) .Examine how it has been designed, paying
particular attention to how the user is meant to interact with it. To do this, answer the
given guide questions.
Chosen Software Application: _____________________________________

1. From your first impressions, write down what first comes to mind as to what is
good and bad about the way the software application works. Then list (i) its
functionality and (ii) the range of tasks a typical user would want to do using
it. Is the functionality greater, equal, or less than what the user wants to do?
2. Based on what you had learned during class discussions, compile your own
set of usability and user experience goals that you think will be most useful
in evaluating the software application. Decide which are the most important
ones and explain why.

3. Translate the core usability and user experience goals you have selected into
two or three questions. Then use them to assess how well your software
application fare (e.g., Usability goals. What specific mechanisms have been
used to ensure safety? How easy is it to learn? User experience goals: Is it
fun to use? Does the user get frustrated easily? If so, why?).
4. Repeat numbers 2 and 3 for usability principles (again choose a relevant

set).

5. Finally, discuss possible improvements to the interface based on your
usability evaluation.

ACTIVITY 12: UNIVERSAL DESIGN – PRINCIPLES AND CONCEPTS
I. Introduction
People have different capabilities and weaknesses. They come from different
backgrounds and cultures, can have different preferences, views and experiences;
they are different ages and sizes. These aspects have an impact on how an
individual will use a certain computing application and whether they can and not be
able to use it at all. With such diversity, we cannot assume a ‘typical’ user or design
will have the same impact to ours or from one person to the other.
In this activity, you will look at universal design in more detail. First, you will
examine the user experience towards the use of computer technology through
interview. the seven principles of universal design. Then look at different multi-modal
interactions and how these can help you provide redundancy in interaction through
interactive systems evaluation. Third, apply the different principles of Universal
Design through application development addressing human diversity. Lastly, perform
evaluation of the designed application.
II. Objectives
1. Demonstrate an understanding of the Universal Design and its

principles through interviews, analysis, design, and evaluation.
2. Evaluate an interactive game and the multi-modal interactions applied
in the game
3. Develop an educational learning application or game applying the
Universal Design principles
4. Perform Expert and User Participation Evaluation of the designed
learning application or game

There are range of design approaches that we can use in order to meet
interactive experience in the context of human diversity. Universal design is about
designing systems that are accessible to all users in all circumstances, taking into
account human diversity in terms of disability, age and culture. It helps everyone to
design a system that can be used by someone who is deaf or hard of hearing to
benefit others working in a noisy environment or without audio equipment. Designing
to be accessible to screen-reading systems will make websites more accessible to
mobile users and older browsers.
A group at North Carolina State University in the USA proposed seven

general principles of universal design during the late 1990s. The seven principles of
universal design are as follows:
1. Equitable Use
2. Flexibility in Use
3. Simple and Intuitive Use
4. Perceptible Information
5. Tolerance for Error
6. Low Physical Effort
7. Size and Space for Approach and Use
These principles were intended to cover all the areas of design and are
equally applicable to interactive systems design.
Multi-modal systems provide access to system information and functionality

through a variety of different input and output channels, exploiting redundancy.
These systems will enable users with visual, physical or cognitive impairments to
make the most effective use of the resources they can use. However, all users
benefit from multimodal systems that uses more of our senses in an interactive
experience.

V. Work/Practice Exercise
Exercise 1. Interview either (i) a person you know over 65 years of age or (ii) a child
you know under 16 years old about their experience, attitude and expectations of
computers. What factors would you take into account if you were designing an
interactive systems aimed at this person?
Discussions
Screenshots of the Questionnaire

Exercise 2. Play an interactive game and analyze its universal design specifically its
multi-modal interactions. You include the following details for the analysis.
1. Name of the Game

2. Description and Mechanism of the game
3. Identify specific features of the game for each type of Multi-modal
Interactions involved. Explain the multi-modal interactions involved and
how are these important in the game design.
4. How does the universal design of the game help or hinder you as you
play?
UNIVERSAL DESIGN ANALYSIS OF AN INTERACTIVE GAME
Name of the Game
Description and
Mechanism of the
game

Multi-modal
Interactions involved 1. Speech
2. Non-Speech

3. Touch/Haptic
4. Handwriting Recognition

5. Gestures Recognition
How does the universal

design of the game
help or hinder you as
you play? Give the
specific features or
interactions (e.g.
sound, background,
mechanics of the
game, etc.)
Exercise 3. Create an educational learning application or an Educational game for

kids applying the principles of Universal Design.
1. Perform Expert analysis and User Participation of the application or game

made.
2. Prepare and present a presentation which includes:

a. Visual Images of the learning app or game
b. Discussion on the principles of universal design applied in the learning
app or game
c. Demonstration of the learning app or game (how it works and its features)
d. Summary of Evaluation using Expert analysis and User Participation
e. Screenshots of the Evaluation process made
Exercise 4. Discuss the impacts of emerging technologies towards user interface in

the society.
1. Prepare and present a presentation which consists:

a. Introduction
b. Example of emerging technologies
c. Impacts of emerging technologies towards user interface in the
society.
Exercise 5. Discuss the following issues on emergence of technologies:
1. How wearable computing differs from mobile computing?
- Mobile Computing –paradigm in which users carry their personal computers

and retain connectivity to other machines- Handheld computing (use PDAs,
iPhones) Wearable Computing –paradigm where users carry wearable
computing devices on their person (clothes, watches, rings).
2. What is the difference between wearable computing and mobile computing?

- systems running on small, lightweight computing devices Facilitates high
level of mobility Portability Small Storage Capacity Low Power Small User
Interface Risks to Data Allows user to access information while moving
through physical space the computer is always with the user and always
interacting, completely intertwined with the user. should be a continuation of
its user, working like a natural part of the body, not an external apparatus
Facilitates high level of immersion into virtual space and mobility Allows the
user to explore virtual environments and see the real world with virtual
objects superimposed.
3. Why do we need sensors for wearable computing?

- Tracking eye movement is beneficial for detecting gaze-intensive activities
such as reading and focus-based gestures. A necessary component of
wearable computing is the sensor network that collects and disseminates
sensed data.
REFERENCES
1. Dix, A. Finlay J., Abowd, G, and Beale, R. (2004) Human Computer

Interaction 3rd ed., Pearson Education Limited
2. Rogers, Y., Sharp, H and Preece, J. (2007). Interaction Design: Beyond Human
Computer Interaction, Second Edition, Wiley & Sons
3. Norman, D. (2013). The DESIGN of EVERYDAY THINGS. Basic Books, A

Member of the Perseus Books Group
4. Weintraub, M. , Tip, F. (n.d.). User Exerience (UX)/ User Interface (UI). Retrieved
from https://course.ccs.neu.edu/cs5500sp17/09-UX.pdf


Human Computer Interaction 1

Uploaded by

Human Computer Interaction 1

Uploaded by

Human Computer Interaction |1

WESTERN MINDANAO STATE UNIVERSITY

INSTITUTE OF COMPUTER STUDIES

HCI is an interdisciplinary field that integrates theories and methodologies