Human Computer Interaction

(HCI)
Lecture 1b

Adapted from materials from: Albrecht Schmidt (https://hci-lecture.org/). Luigi De Russis, Alberto Monge Roffarello, and Tommaso Calò (https://elite.polito.it/teaching/02jsk-hci/info)
Interactive Design Process
• The interaction design (IxD) process is the methodological approach
designers use to create solutions centered on users’ needs, aims, and
behavior when interacting with products.
• Designers unearth user demands and behaviors through painstaking
research and analysis, which paves the way for intuitive interface design.
• Everyday digital encounters are shaped by interaction design, from smart
devices to smartphone apps. Being an expert in interface design is crucial
to producing engaging user experiences in a cutthroat market.
Interactive Design Process
• The IxD process has five stages:
• Understanding user needs and wants
• Analyzing the needs
• Designing a potential solutions
• Prototyping
• Implementing and deployment

Implementatio
What user
Analysis Design Prototyping n and
needs/wants
Deployment
Interactive Design Process
Stage 1: Understand user needs and wants
• This initial phase involves researching and understanding users' needs, goals,
and contexts of use.
• Designers gather insights through user research, including interviews,
surveys, observations, and personas.
• Two helpful research exercises include:
• Contextual inquiry: here, designers immerse themselves in the user's environment.
• For instance, designers could observe how patients and doctors interact with existing
systems if designing a healthcare app.
• User interviews and surveys: These exercises help designers gather direct insights
from their target audience.
• For instance, a designer might explore shopping habits and pain points for a retail app.
Interactive Design Process
Stage 2: Analyze user research findings
• This phase involves setting clear objectives, specifying user requirements,
and establishing design principles to guide the project.
• Creating user stories and scenarios and conducting task analyses help
clarify how proposed solutions fit into the users' lives.
• Two ways designers can analyze and organize their findings:
• Personas: These are created based on research and should be as detailed as
possible.
• Personas might include students, teachers, and administrators with distinct needs
and goals for a new educational platform project.
• Journey mapping: helps designers visualize a user’s interactions with a product.
• This can highlight friction points in current systems, like booking a service or
completing a purchase.
Interactive Design Process
Stage 3: Design
• Designers brainstorm, sketch, and design potential solutions.
• This step often involves creating low-fidelity wireframes, flow diagrams,
and sketches that explore different design options and how users will
interact with the system.
• Two approaches to designing at this point in the design process:
• Sketching: this rapid, freehand drawing helps designers quickly visualize ideas,
layout arrangements, and user interfaces.
• Storyboarding: involves creating a series of drawings to depict the user journey or
specific interactions with a product.
Interactive Design Process
Stage 4: Prototyping
• Here, ideas are transformed into tangible artifacts that can be tested and
evaluated.
• Prototypes range from low-fidelity sketches to high-fidelity, interactive
simulations that closely mimic the final product.
• Two main types of prototypes:
• Low-fidelity prototyping: paper prototypes or basic digital mockups can easily
demonstrate ideas and design.
• This approach is cost-effective and allows for rapid iteration based on initial
feedback.
• High-fidelity prototyping: for a more profound test of interactions, designers can
create high-fidelity prototypes using tools like Sketch or Figma.
Interactive Design Process
Stage 5: Implementation and Deployment
• Developers build the interaction design into the product.
• Designers work closely with developers to ensure the design's fidelity and
adjust the interaction design based on technical constraints or new
insights.
Benefits of Interactive Design Process
• Enhanced Usability: The goal of interaction design is to create user-friendly,
intuitive interfaces.
• Enhanced User Satisfaction: Customers that are happy with a product are more
likely to stick with it, refer it to others, and think favorably of the company.
• Increased User Engagement: Users are more likely to find value in a product
through engaging and meaningful interactions, which increases engagement and
loyalty.
• Simplified Development Process: Iterative testing and feedback loops are used in
the Interaction Design process to help find and address design issues early on.
• This can expedite the development process, saving money and time on post-launch
redesigns and adjustments.
• Competitive Advantage: A product might stand out in the market if it provides an
excellent user experience through clever interface design.
Human Centered Design Process
A process for designing interactive systems with a focus on usability
User-Centered Design (UCD)
• It is a design framework that develops solutions to problems by involving
the human perspective in all steps of the problem-solving process.
(Wikipedia)

• UCD takes the actual end users' needs, wants, and limitations into account
during each phase of the design process.
• User-centered design issues are discovered during the early stages.

• It is the process of ensuring that people’s needs are met, that the resulting
product is understandable and usable, that it accomplishes the desired
tasks, and that the user experience is positive and enjoyable.
(Norman, The design of everyday things)
User-Centered Design (UCD)
• Benefits: systems are more straightforward to learn, have faster
performance and fewer human errors, encourage users to discover
advanced features, and avoid “building the wrong system.”

• Issues:
• How do you find users?
• How many?
• How motivated?
• How do you speak their language?
• How do we extract user needs, business needs, and organizational implications?
ISO 9241
Ergonomics of human–system interaction
• This document consists of many parts with specific parts
• Part 210: Human-centered design for interactive systems

Rationale for adopting human-centered design

• “Using a human-centered approach to design and development has
substantial economic and social benefits for users, employers, and
suppliers. Highly usable systems and products tend to be more
successful both technically and commercially.“

ISO 9241-210:2019(EN) Human-centered design for interactive systems

ISO 9241
Ergonomics of human–system interaction
• “Systems designed using human-centered methods improve
quality, for example, by:
a. increasing the productivity of users and the operational efficiency of
organizations;
b. being easier to understand and use, thus reducing training costs;
c. increasing usability for people with a wider range of capabilities
d. improving user experience;
e. reducing discomfort and stress;
f. providing a competitive advantage
g. contributing towards sustainability objectives.”
ISO 9241-210:2019(EN) Human-centered design for interactive systems
ISO 9241-210
Human-centered design for interactive systems
• Principles of human-centered design
a. the design is based upon an explicit understanding of users, tasks and
environments
b. users are involved throughout design and development
c. the design is driven and refined by user-centered evaluation
d. the process is iterative
e. the design addresses the whole user experience
f. the design team includes multidisciplinary skills and perspectives”
Human-Centered Design Process

Scenarios
Task analysis
What is wanted
Guidelines
Principles
Analysis
Precise
Interviews
Specification
Ethnography Design

What is there Dialog Implement and

Vs. notations deploy
What is wanted Evaluation
Prototyping
Heuristics
Architecture
Documentation
Help
Human-Centered Design Process
• Needfinding – what is wanted
• What exactly is needed?
• How are people currently accomplishing the goal?
• User observation, interviews, ...

• Analysis
• Formalize and structure the needs
• Create interaction scenarios, stories, tasks
• Compare current situation with expected new situation
Human-Centered Design Process
• Design
• The main choices to shape the system
• Rules, guidelines, design principles
• Considering different types of users
• Modeling and describing interaction
• Visual layout
• Consider all inputs from cognitive models, communications theories,
organization issues
Human-Centered Design Process
• Iteration and prototyping
• Design must be supported by intermediate verification
• Evaluate the design in its partial forms:
• Prototypes
• Evaluation metrics
• Involving users

• Implementation and deployment

• Hardware and software implementation
• Documentation
Agile Design
• Borrows ideas from Agile development in software engineering
• Key: evolutionary development
• System is built incrementally in rapid release cycles
• Rapid prototyping techniques (for hardware, software and physical
objects)
• Focus on low-cost many-iterations prototypes
• Requires fast usability inspection (extreme usability, XU)
• Makers’ culture (only if it involves users!)
Agile Design
• The agile process is a highly collaborative way to design and
develop new products by breaking tasks into small chunks
performed in sprints.
• These sprints ensure that the product is not delivered immediately but
instead focuses on steady and meaningful progress.
• There will be questions to which you won’t have answers, and the agile
methodology will unravel the answers as the iterations move forward.
• The client and stakeholders’ invaluable feedback can consistently
take the product toward what the users need.
Agile Design Principles
• Agile designs are emergent, they’re not defined up front: Your overall
system design will emerge over time, evolving to fulfill new requirements
and take advantage of new technologies as appropriate.
• Support from Executives: A seamless product is only possible when the
executives understand the role design plays in a product and are willing to
support the designers through the phase.
• Cross-functional Teams: Connecting with relevant groups help to build trust
among the team members and helps gauge the exact problems that can
provide a targeted solution.
• Project Backlog and Planning Management: The Backlog should be
prioritized and evaluated according to the value they provide to the final
product.
Agile Design Principles
• Multiple models: Effective developers realize that each type of model has
its strengths and weaknesses, therefore they need to apply the right
model(s) for the job at hand.
• Accurate Timelines for the Next Release: Besides highlighting features,
designers should also highlight the time required to get the product
market-ready.
• Research and Testing: User research and testing are essential tools that can
help the Agile design process. This allows the team avoid wasting time on
redundant activities and adds the value that the users seek.
• Keeping the Team Changes to a Minimum: Teams require a positive team
spirit and the dynamics of the people who are a part of it. A new change
can disturb the internal processes directly impacting the team’s
performance.
Agile Design Principles
• Hiring a Scrum Master: It requires dedicated and experienced personnel
who will act as a coordinator for agile product design activities and help the
methodology integrate well within the team.
• Feedback is your friend: Expect to receive feedback
• Consistent Communication: A very significant aspects of any project, and it
also serves the same purpose within an agile team. Apart from the team,
the stakeholders and the clients benefit from consistent communication.
• Iterate, iterate, iterate: With an iterative approach to development you
work a bit on requirements, do a bit of analysis, do a bit of design, some
coding, some testing, and iterate between these activities as needed.
Agile (Project) Lifecycle

https://agilemodeling.com/essays/agiledesign.htm
Design Thinking
• Design thinking is a non-linear, iterative process that teams use to
understand users, challenge assumptions, redefine problems, and create
innovative solutions to prototype and test.
• “A human-centered approach to innovation that draws from the designer’s
toolkit to integrate the needs of people, the possibilities of technology, and
the requirements for business success.”
Tim Brown, IDEO’s Executive Chair
• Design teams use design thinking to tackle ill-defined/unknown problems
(aka wicked problems)
Three lens of Design Thinking
• The design thinking
process aims to satisfy Start here
three criteria: What do people desire?
• Desirability
• what do people
Desirable
Is it technically Can the company
desire?
possible to build profit from the
• Feasibility the solution? solution?
• is it technically
possible to build the
solution?
• Viability
Feasible Viable
• can the company
profit from the
solution?
Design Thinking Process Stages
Five-phases EMPATHIZE
1. Empathize – research users’
needs
2. Define – state the found needs TEST DEFINE
3. Ideate – challenge assumptions
and ideate
4. Prototype – create solutions
5. Test – try the solutions out
PROTOTYPE IDEATE
Stage 1: Empathize – research users’ needs
• The team aims to understand the problem, typically through user research.
• Conduct a user-centric research.
• Empathy is crucial to design thinking because it allows designers to set
aside their assumptions about the world and gain insight into users and
their needs.
• The main aim of the Empathize stage is to develop the best possible
understanding of your users, their needs and the problems that underlie
the development of the product or service you want to create.
Stage 2: Define – State users’ needs and problems
• Organize the information gathered during the Empathize stage
• Once the team accumulates the information, they analyze the observations
and synthesize them to define the core problems.
• These definitions are called problem statements.
• The team may create personas to help keep efforts human-centered.
• The Define stage will help the design team collect great ideas to establish
features, functions, and other elements to solve the problem at hand or, at
the very least, allow actual users to resolve issues themselves with minimal
difficulty.
Stage 3: Ideate – create ideas
• During the ideate stage, teams are ready to generate ideas.
• The design team starts to look at the problem from different perspectives
and ideate innovative solutions to your problem statement.
• They brainstorm alternative ways to view the problem and identify
innovative solutions to the problem statement.
• There are hundreds of ideation techniques such as Brainstorm, Brainwrite,
Worst Possible Idea, and SCAMPER.
Stage 4: Prototype – Start to create solutions
• The design team will now produce several inexpensive, scaled-down
versions of the product (or specific features found within the product) to
investigate the critical solutions generated in the ideation phase.
• The aim is to identify the best possible solution for each problem.
• This may be as simple as paper prototypes.
Stage 5: Test – Try the solutions
• Designers or evaluators rigorously test the complete product using the best
solutions identified in the Prototype stage.
• The team tests these prototypes with real users to evaluate if they solve
the problem.
• The test might throw up new insights, based on which the team might
refine the prototype or even go back to the Define stage to revisit the
problem.
• The ultimate goal is to understand the product and its users as deeply as
possible.
Design Thinking
Design Thinking Vrs. Human-Centered Design
• Differences are not clear-cut.
• Conceptually very similar.
• Design Thinking comes from a design tradition and can apply to any design
(not specific to interactive technologies)
• HCD comes out of a more technology-centered tradition (first user-
centered design)
• Design Thinking emphasizes solving the right problem and ideating more
than HCD.
Definitions
Usability (ISO definition)
• Usability: “extent to which a system, product or service can be
used by specified users to achieve specified goals with
effectiveness, efficiency and satisfaction in a specified context of
use”
• Note 1: The “specified” users, goals and context of use refer to the
particular combination of users, goals and context of use for which
usability is being considered
• Note 2: The word “usability” is also used as a qualifier to refer to the
design knowledge, competencies, activities and design attributes that
contribute to usability, such as usability expertise, usability engineering,
usability testing, etc.
Usability
• Usability: how well users can use the system’s functionality
• Dimensions of usability:
• Usefulness: does it do something people want?
• Learnability: is it easy to learn?
• Memorability: one learned, is it easy to remember?
• Effectiveness: does it allow reaching the goal?
• Efficiency: once learned, is it fast to use?
• Visibility: is the state of the system visible?
• Errors: are errors few and recoverable?
• Satisfaction: is it enjoyable to use?
Usability
• A definition by Jakob Nielson

• “Usability is a quality attribute that assesses how easy user

interfaces are to use.

• The word ‘usability’ also refers to methods for improving

ease-of-use during the design process.”

Jakob Nielsen's Alertbox, August 25, 2003: Usability 101: Introduction to Usability https://www.nngroup.com/articles/usability-101-introduction-to-usability/
 Usability Goals
• Effective to use
• Efficient to use
• Safe to use
• Have good utility
• Easy to learn
• Easy to remember how to use

www.id-book.com
 Usability has five quality components
Usability 101 by Jakob Nielson
• Learnability: How easy is it for users to accomplish basic tasks
the first time they encounter the design?
• Efficiency: Once users have learned the design, how quickly can
they perform tasks?
• Memorability: When users return to the design after a period of
not using it, how easily can they reestablish proficiency?
• Errors: How many errors do users make, how severe are these
errors, and how easily can they recover from the errors?
• Satisfaction: How pleasant is it to use the design?
Jakob Nielsen's Alertbox, August 25, 2003: Usability 101: Introduction to Usability https://www.nngroup.com/articles/usability-101-introduction-to-usability/
Software Engineering Processes
• Software design methodologies
• Agile (Scrum)
• Waterfall
• Iterative waterfall
• Software reuse
• Where does HCI fit in?
• Always a step ahead
Always a step ahead
• Before • User-centered steps are
• Every design step cheaper than development
• Every implementation step • User research about users’
• Any product iteration (or sprint) needs to decide what to design
•… • Heuristic evaluations before
• You need a user-centered step testing with users
• Evaluate usability • Evaluating prototypes instead of
• Experiment with users full-fledged products
• Evaluate alternative flows • Anticipate critical decision
• Evaluate alternative layouts
points later in the project
•…
Always a step ahead
• Usability, Safety, Performance, are part of Non-Functional
Requirements
• User-centered steps are cheaper than development
• User research about users’ needs to decide what to design
• Heuristic evaluations before testing with users
• Evaluating prototypes instead of full-fledged products
• Anticipate critical decision points later in the project
• Example: Iterative Waterfall process
• Each step must be
• Preceded with user evaluation of the design choices and formalized
requirements
• Followed with user evaluation of the result
Interactive Systems
• An Interactive System is a computational system that allows
users to interact in real-time1. Interactions receive instant
feedback visible to the user.
• Interactive computing is used in a similar way, with a focus that
is less on the systems aspect.
• Examples
• Graphical user interfaces, such as Windows 10 or MacOS
• Mobile devices, such as an Android phone
• gaming consoles, such as Xbox with Kinect or Nintendo Switch
• Ticket vending machines, such as the DB-ticket machine
• Command line interfaces, such as an SSH console
User Experience
• How users perceive a product, such as whether a smartwatch is
seen as sleek or chunky, and their emotional reaction to it, such
as whether people have a positive experience when using it.
(Hornbæk and Hertzum, 2017)
• Hassenzahl’s (2010) model of the user experience
• Pragmatic: how simple, practical, and obvious it is for the user to
achieve their goals
• Hedonic: how evocative and stimulating the interaction is to users
• User’s perceptions and responses that result from the use and/or
anticipated use of a system, product, or service.
User Interface
• The part of a system where a user can interact with a system, device
or application.
• The user interfaces can support input, output or both.
• User interfaces are not restricted to digital technologies or interactive
systems
• Similar terms:
• Human-computer interface (HCI)
• Man-machine interface (MMI) or Human-Machine-Interface (HMI)
• Examples:
• Graphical user interface (GUI) on a web page
• Voice user interface in a smart speaker (e.g. Alexa)
• Buttons, switches, wheels and levers in a cockpit
User, Interactive System, and User Interface
Definitions according to ISO 9241-210:2019 (en)

• User: “person who interacts with a system, product or service”

• Context of Use: “ combination of users, goals and tasks,
resources, and environment”
• Interactive System: “combination of hardware and/or software
and/or services and/or people that users interact with in order to
achieve specific goals”
• User Interface: “all components of an interactive system
(software or hardware) that provide information and controls for
the user to accomplish specific tasks with the interactive system”
 User Interface Design and Interaction Design
• User Interface Design refers to the conception and design of the
user interface, including the choice of modalities, interface
elements selection, and placement.

Interaction Design
• “Designing interactive products to support people in their daily and
working lives.”
Jennifer Preece, Yvonne Rogers, Helen Sharp (2002) Interaction Design, ISBN: 0471492787, http://www.id-book.com/, Chapter 9

• Winograd (1997): “The design of spaces for human communication

and interaction.”
Utility and Usability
• Utility refers to how a product can reach a particular goal or
perform a specific task.

• Usability relates to the question of quality and efficiency.

• Refers to the extent to which specified users can use a system,
product, or service to achieve goals with effectiveness, efficiency, and
satisfaction in a specified context.
• For example, how well does a product support the user in reaching a
specific goal or performing a particular task?
User Interface Design vs. Interaction Design vs. User
Experience Design
• User Interface Design refers to the conception and design of the user
interface, including the choice of modalities, interface elements selection,
and placement.
• “Interaction Design (IxD) is the design of interactive products and services in
which a designer’s focus goes beyond the item in development to include
the way users will interact with it.”
(https://www.interaction-design.org/literature/topics/interaction-design)

• User Experience Design describes the more holistic approach to designing

the experience a person will encounter when interacting with devices,
systems, or applications. It considers the user interface design in the broader
context of use.
The Languages/Dimensions of Interaction Design
Gillian Crampton Smith in “What is Interaction Design”

• “1-D includes words and poetry.

• The 2-D languages that interaction design can borrow from include
painting, typography, diagrams, and icons.
• 3-D languages are those of physical, sculptural form. If something has a
handle, for example, we know we are meant to grab it
• The fourth dimension is time. The 4-D languages include sound, film, and
animation.”

• Foreword “What is Interaction Design?”. Interview with Gillian Crampton Smith. Moggridge, Bill, and Bill Atkinson. Designing interactions. Vol. 17.
Cambridge, MA: MIT press, 2007. page xvii
The 5 Dimensions of Interaction Design
• Originally by Gillian Crampton Smith (4 dimensions); Kevin
Silver added the fifth.
• 1D: Words should be meaningful and simple to understand.
• 2D: Visual representations supplement the words used to
communicate information to users.
• 3D: Physical objects or space looks at what physical objects do
users interact with the product (laptop, mouse, touchscreen,
https://www.interaction-design.org/
phones, etc.)? These all affect the interaction between the
user and the product.
• 4D: Time refers to media that changes with time (e.g.
animation, videos, sounds).
• 5D: Behavior includes the mechanism of a product. How do
users perform actions?
by Yu Siang Teo https://www.interaction-design.org/literature/article/what-is-interaction-design
References
• Interaction Design Foundation - IxDF. (2020, June 14). What is the Interaction Design
Process?. Interaction Design Foundation - IxDF. https://www.interaction-
design.org/literature/topics/interaction-design-process