IT 101

Human Computer
Interaction
LEARNING GUIDE

NOIME MUJERES-MANTE
2022
 No copies temporary or permanent, in whole or in part of
this IM shall be made without written permission from
Northwest Samar State University.

Vision: A provider of relevant and quality education to a society where citizens are competent, dignified and Page 2 of 15
community -oriented.
Mission: An academic institution providing technological, professional, research and extensions programs to form
principles men and women of competencies and skills responsive to local and global development needs.
 Vision

A provider of relevant and quality education to a society

where citizens are competent, skilled, dignified, and
community-oriented.

Mission

An academic institution providing technological,

professional, research and extensions programs to form
principles men and women of competencies and skills
responsive to local and global development needs.

Quality Policy

Northwest Samar State University commits to provide excellent, relevant, and

quality instruction, research, extension, and production by adhering to
regulatory and statutory requirements and pledging to continually improve its
Quality Management System, thereby satisfying client needs and producing
world-class professionals.

Core Values

Resilience. Integrity. Service. Excellence

 Learning Guide in

Title

IT 101: Human
Page

Computer
Interaction
 ii IT 101: Human Computer Interaction

Module 4: HCI IN Software

Process Usability Engineering
Module Overview/Description
In today's fast-paced world, interactive systems are an integral part of
our daily lives, ranging from mobile apps to web interfaces and beyond.
Ensuring that these systems are user-friendly and efficient is paramount. This
module, "Understanding HCI in Software Engineering," delves into the crucial
discipline of Human-Computer Interaction (HCI) and its role in creating
interactive systems that users love. The module begins by emphasizing the
importance of usability in the software development process, underlining that it
should be a fundamental concern from project initiation to completion.
The purpose of this module is to equip learners with a comprehensive
understanding of HCI's significance in the broader context of software
engineering. It navigates through the software life cycle, outlining the structured
approach to developing software and how usability becomes an inherent part
of it. The module examines essential activities, such as requirements
specification, architectural and detailed design, coding and unit testing,
integration and testing, and maintenance. Through practical examples and
case studies, learners will appreciate the complex relationship between
customers, designers, and end-users in the software development process.

Vision: A provider of relevant and quality education to a society where citizens are competent, dignified and Page 2 of 15
community -oriented.
Mission: An academic institution providing technological, professional, research and extensions programs to form
principles men and women of competencies and skills responsive to local and global development needs.
 iii

Lesson 4.2: Usability Engineering

Let’s Hit These (Objectives)

a. Explain the concept of usability engineering, emphasizing its

focus on user-centered design and incorporating usability
goals into the design process.
b. Recognize the importance of evaluating a product's usability
based on users' actual experiences and learn about various
methods used for usability evaluation.
c. Differentiate usability from functional features, understanding
that usability extends beyond just the outward interface and
includes the entire functional architecture of the system.
d. Explain the integration of usability specifications into the
software development life cycle, emphasizing the importance
of considering usability from the beginning of the design
process.
e. Understand how to create usability specifications that outline
attributes to assess usability, set specific measurements, and
provide a structured approach to incorporating usability into
the design process.

Let’s Read

Usability Engineering

Usability engineering is an approach to user-centered design that

emphasizes incorporating explicit usability goals into the design process. This
approach was suggested by researchers at IBM, Digital Equipment
Corporation, and Bellcore. Usability engineering relies on establishing a shared
understanding of usability criteria and how a product's usability will be
evaluated.
The following are the main ideas in usability engineering:
1. Usability Evaluation: The ultimate test of a product's usability is based
on users' actual experiences with it. Therefore, usability engineering
focuses on evaluating and improving the user interface, as users
interact directly with it. This makes sense because the user interface is
where the user interacts with the system.
2. Limited Focus: While the user interface is a critical aspect of usability,
it's important to note that usability extends beyond just the surface
features of the interface. Usability involves the entire functional
architecture of the system and an understanding of users' cognitive
capacities, as these factors influence meaningful measurements.
3. Challenges in Measuring Usability: Measuring usability beyond physical
interactions can be complex. Usability engineering faces challenges in
deriving meaningful measurements of user activity and experience.

Vision: A provider of relevant and quality education to a society where citizens are competent, dignified and Page iii of 15
community -oriented.
Mission: An academic institution providing technological, professional, research and extensions programs to form
principles men and women of competencies and skills responsive to local and global development needs
 iv IT 101: Human Computer Interaction

4. Integration into Software Life Cycle: Usability engineering includes the

creation of a usability specification, which is integrated into the
requirements specification within the software development life cycle.
This specification focuses on user-system interaction aspects that
contribute to a product's usability.
5. Usability Specification Example: Usability specifications outline
attributes of the system that can be used to assess usability. For each
attribute, specific items are defined in the usability specification. An
example provided in the text is a usability specification for designing
the control panel of a video cassette recorder (VCR).
In practice, usability engineering aims to make usability an integral part
of the design process, ensuring that usability goals and criteria are explicitly
considered and addressed throughout the development of interactive systems.
This approach helps in creating products that are not only functional but also
user-friendly and easy to use.

In this example, the usability attribute of interest is "recoverability,"

which refers to a user's ability to achieve a desired goal after recognizing an
error in their previous interactions with a system. Recoverability can be either
backward or forward, allowing users to undo their actions or proceed in a
different direction.
Here's how this concept is applied in the context of designing a new
VCR control panel:
• Backward Recoverability: In this case, the designer focuses on enabling
users to undo an erroneous programming sequence. For example, if a
user makes a mistake while programming the VCR to record a TV
program, they should be able to revert the VCR to its previous state.
• Measuring Concept: This concept makes the attribute more concrete
by defining it in terms of the actual product. In this example, backward
recoverability is measured by the number of explicit user actions
required to perform the undo, regardless of where the user is in the
programming sequence.
• Usability Specification Criteria: The usability specification includes
several criteria for evaluating the success of the product:
− Now Level: The current state or measurement of this attribute
with existing systems.
− Worst Case Value: The lowest acceptable measurement for this
attribute. It serves as a clear distinction between what's
acceptable and what's not in the final product.
− Planned Level: The target measurement for the design.

Vision: A provider of relevant and quality education to a society where citizens are competent, dignified and Page 4 of 15
community -oriented.
Mission: An academic institution providing technological, professional, research and extensions programs to form
principles men and women of competencies and skills responsive to local and global development needs.
 v

− Best Case: The best possible measurement given the current

state of development tools and technology.
In the VCR control panel example, the designers considered their
previous VCR products and those of their competitors to determine the "now
level." They found that no existing model allowed an undo feature that would
return the VCR to its previous state before programming. The "worst case
value" was determined based on the minimum acceptable undo facility, which
would require users to perform as many actions as they had done to program
the mistake. The designers aimed for a maximum of two explicit user actions
as the "best case."
These criteria provide a structured approach to incorporating
recoverability as a usability attribute into the design process. They set clear
goals for the design team to ensure that the new VCR control panel is more
user-friendly and allows users to recover from errors efficiently.
Tables 6.2 and 6.3, adapted from the work of Whiteside, Bennett, and
Holtzblatt, provide additional measurement criteria and ways to set targets for
other usability attributes. These measurements are often referred to as
"usability metrics" and are used to evaluate the usability of interactive systems.
The ISO standard 9241 also recommends the use of usability specifications as
a part of requirements specification for interactive systems. These usability
metrics are categorized into three main areas: effectiveness, efficiency, and
satisfaction, each contributing to the overall usability of the system.

Vision: A provider of relevant and quality education to a society where citizens are competent, dignified and Page v of 15
community -oriented.
Mission: An academic institution providing technological, professional, research and extensions programs to form
principles men and women of competencies and skills responsive to local and global development needs
 vi IT 101: Human Computer Interaction

Iterative Design and Prototyping

Iterative design and prototyping are essential methodologies in

the development of interactive systems. These approaches
acknowledge that it's challenging to specify all the requirements for an
interactive system upfront and that designing such systems is an
ongoing, iterative process. Iterative design aims to address these
challenges by cycling through multiple design iterations, progressively
improving the final product with each pass. There are several aspects to
consider:
1. Technical Side: Use of Prototypes:
Prototypes are central to the iterative design process, allowing
designers to create representations of the system to test and gather
feedback from users. There are three main approaches to using
prototypes:
− Throw-away Prototypes: These prototypes are built and tested,
providing valuable design knowledge. However, the actual
prototype is discarded. The design knowledge gained is then
used to build the final product.
− Incremental Prototyping: In this approach, the final product is
developed in separate components, one at a time. The overall
design is partitioned into independent and smaller components.
The final product is released as a series of increments, with each
subsequent release including one more component.
− Evolutionary Prototyping: Here, the prototype is not discarded
but serves as the basis for the next iteration of design. The system
evolves from a limited initial version to its final release.

2. Prototypes Vary in Functionality:

Prototypes differ in the amount of functionality and performance
they provide relative to the final product. Some prototypes might have
no real functionality or provide limited functionality to simulate specific
interactive behaviors. Others offer full functionality but may compromise
speed or error tolerance. Regardless of the level of functionality,
prototypes must maintain a level of projected realism to accurately
evaluate their usability.

3. Balancing Time and Evaluation:

Building prototypes takes time, and for throw-away prototypes, it
might appear to delay the actual design work. Rapid prototyping, where
prototypes are created quickly, is essential. However, a balance must be
maintained to ensure that the evaluation process is thorough and does
not lead to rushed decisions.

4. Planning and Management:

Vision: A provider of relevant and quality education to a society where citizens are competent, dignified and Page 6 of 15
community -oriented.
Mission: An academic institution providing technological, professional, research and extensions programs to form
principles men and women of competencies and skills responsive to local and global development needs.
 vii

Planning and managing an iterative design process that involves

prototyping can be challenging. Many project managers may not have
the experience necessary to adequately plan and budget such a
process. Managing the time, resources, and expectations requires
careful planning.

5. Non-functional Features:
Some of the most critical features of a system are non-functional,
like safety and reliability. Prototypes typically focus on functional
features, and non-functional elements might be compromised. This
could pose a challenge when evaluating the usability of a prototype, as
features such as response time, which might be critical for product
acceptance, can be affected.

6. Contracts and Documentation:

Contracts between the customer and designer often govern the
design process. Prototypes and other implementations cannot replace
legal contracts. There must be effective mechanisms to translate the
results derived from prototyping into formal documentation that serves
as a binding agreement between the parties.

Iterative design and prototyping are powerful approaches for

developing interactive systems, helping to ensure that the final product
meets user needs and expectations. However, these methods require
careful management, planning, and the ability to balance the trade-offs
between realism and speed.

Techniques for Prototyping

The development of prototypes is a critical aspect of interactive system
design. Prototypes allow designers and developers to create
representations of the system to test and gather feedback from users.
Various techniques are available for creating prototypes, depending on
the level of functionality and realism required. Here are some techniques
for prototyping interactive systems:
1. Storyboards:
Storyboards are graphical depictions of the outward
appearance of the intended system, without accompanying system
functionality.
Use: Storyboards provide snapshots of the interface at
specific points in the interaction. They help evaluate user
impressions and quickly determine if the design is heading in the right
direction.

Vision: A provider of relevant and quality education to a society where citizens are competent, dignified and Page vii of 15
community -oriented.
Mission: An academic institution providing technological, professional, research and extensions programs to form
principles men and women of competencies and skills responsive to local and global development needs
 viii IT 101: Human Computer Interaction

Tools: Storyboards can be created using modern graphical

drawing packages, allowing for realistic depictions of the final
system.

2. Limited Functionality Simulations:

In these simulations, some functionality is included to
demonstrate how the application will work. They are more interactive
than storyboards.
Use: Limited functionality simulations are used to evaluate the
interactive aspects of the system and experiment with different
options.
Tools: Various prototyping tools are available for rapidly
developing simulation prototypes, which often target small but highly
interactive applications. Tools like HyperCard, Macromedia Flash,
and Director allow the creation of graphical representations with
interactive behavior.

3. High-Level Programming Support:

High-level programming languages and User Interface
Management Systems (UIMS) simplify interactive programming by
abstracting hardware details and focusing on user interaction.
Use: These languages enable designers to attach functional
behavior to user interactions and create highly interactive prototypes.
Tools: HyperTalk is an example of a high-level programming
language. UIMS facilitates the separation of application functionality and
its presentation, allowing independent development of the interface
features.

The choice of prototyping technique depends on the project's

specific needs, the level of functionality required in the prototype, and
the available resources. Prototypes can vary from simple, static
representations to highly interactive simulations. The goal is to create a
representation that is realistic enough to gather valuable user feedback
and improve the final design iteratively.

Design Rationale

Design rationale plays a crucial role in the development of

computer systems, particularly in the context of Human-Computer
Interaction (HCI). It helps explain why a system is designed in a certain
way, providing insight into the decision-making process. Design
rationale can be seen as both a reflective and a documentation activity
that spans the entire software development life cycle.

Vision: A provider of relevant and quality education to a society where citizens are competent, dignified and Page 8 of 15
community -oriented.
Mission: An academic institution providing technological, professional, research and extensions programs to form
principles men and women of competencies and skills responsive to local and global development needs.
 ix

Here's why design rationale is essential:

1. Communication and Understanding:
− Design rationale acts as a communication mechanism
among team members. It helps ensure that design
decisions are well understood by the team.
− Later in the design or maintenance phases, design
rationale allows team members to comprehend critical
decisions and why they were made. This helps avoid
making incorrect assumptions.
2. Knowledge Transfer and Reuse:
− Accumulated design rationale can be reused for similar
projects with comparable needs. It can transfer what has
worked in one situation to another.
− It captures the context of design decisions, making it
possible for different design teams to determine if a similar
rationale is applicable to their product.
3. Enhanced Decision-Making:
− Creating a design rationale forces designers to carefully
deliberate on design decisions. This process of reflection
and documentation promotes thoughtful decision-making.
− Design rationale techniques provide guidance on how to
form arguments justifying or discarding specific design
options.

In the context of Human-Computer Interaction, design rationale is

even more critical due to the following reasons:
• HCI often involves trade-offs between different design
alternatives, as there is usually no single "best" solution.
Design rationale helps justify why one alternative was
chosen over others, considering factors like visibility,
screen space, and user context.
• Given the vast space of design alternatives, it's unlikely
that designers will discover the optimal solution. Design
rationale should document all considered alternatives,
allowing for later review and accountability.
• The usability of interactive systems is highly dependent on
the context in which they are used. Design rationale
captures the context in which design decisions are made,
which is invaluable for designing new products and
adapting to changing contexts.

Design rationale techniques can be classified into three categories:

1. Process-Oriented Design Rationale: These techniques provide a
historical record of design decisions and are integrated into the
design process. They are meant to support design discussions
and maintain a record of decision-making.

Vision: A provider of relevant and quality education to a society where citizens are competent, dignified and Page ix of 15
community -oriented.
Mission: An academic institution providing technological, professional, research and extensions programs to form
principles men and women of competencies and skills responsive to local and global development needs
 x IT 101: Human Computer Interaction

2. Structure-Oriented Design Rationale: This category focuses on

the structure of the design space and does not capture historical
information. It provides a comprehensive view of the design
alternatives, reconstructed after the design activity.
3. Psychology and Task-Oriented Design Rationale: These
techniques concentrate on capturing claims about the psychology
of users and the tasks they perform with interactive systems.

The choice of design rationale technique depends on its usability

within the design process, including whether it actively alters decision-
making, the cost of creating and accessing the rationale, the level of
computational support, and the information management capabilities.
Design rationale serves as a valuable tool in understanding, justifying,
and improving the design of interactive systems.

Vision: A provider of relevant and quality education to a society where citizens are competent, dignified and Page 10 of 15
community -oriented.
Mission: An academic institution providing technological, professional, research and extensions programs to form
principles men and women of competencies and skills responsive to local and global development needs.
 xi

NORTHWEST SAMAR STATE UNIVERSITY

San Jorge Campus

For inquiries, contact:

DANICA ZANDRA OCENAR

danica.zandra@nwssu.edu.ph
+63961225150

San Jorge Campus, San Jorge, Western Samar

Philippines 6723
sjc.imdo@nwssu.edu.ph
+639612251150

Vision: A provider of relevant and quality education to a society where citizens are competent, dignified and Page xi of 15
community -oriented.
Mission: An academic institution providing technological, professional, research and extensions programs to form
principles men and women of competencies and skills responsive to local and global development needs