Chapter 3: Process of Interaction Design

At the end of this module, students should be able to:

• Explain who is involved in interaction design and what activities are part of the
process.
• Apply basic principles to design intuitive navigation structures and well-organized
screens.

Interaction Design

The goal of Interaction Design is to create interactive products that enhance how people
communicate and interact. Therefore, it is important to identify, understand, and engage different
stakeholders in the development process.

Sometimes, the term "stakeholders" is used specifically for business managers, product owners, or
decision-makers who set the overall goals and objectives of the design process. However, according to
Rogers et al. (2023), a broad range of individuals have a stake in the development of a successful product,
and these individuals are collectively referred to as "stakeholders."

According to the BBC Bitesize (n.d.), stakeholders are individuals or groups with an interest in a
business's activities and decisions. They can influence or be influenced by the organization's actions,
objectives, and policies. Stakeholders are categorized into two main types:

• Internal Stakeholders – These are individuals or groups within the organization, such as
employees, managers, and owners. Examples are:
o Employees – Individuals working in various roles within the organization,
contributing their skills and expertise.
o Managers – Leaders responsible for strategic decision-making and overseeing
daily operations.
o Owners or Shareholders – Individuals or entities holding ownership stakes,
invested in the organization's profitability and growth.
o Designers – Professionals responsible for creating user-friendly and visually
appealing designs that enhance user experience.
o Developers – The technical team that builds and implements the interactive
system based on design specifications.
o Marketing teams – They ensure that the product aligns with business goals,
market needs, and branding strategies.

• External Stakeholders – These are entities outside the organization, including customers,
suppliers, creditors, the local community, and government agencies. Examples are:
o End-users –The end users of the product, including direct users, occasional users,
and those indirectly affected by the system. Their feedback and behavior drive
design decisions.

IT 321 – CHAPTER 3 | LENY B. VELARDE PAGE 1

 o Suppliers – Provide essential goods or services to the organization, playing a
critical role in the supply chain.
o Local Communities: Residents and groups in areas where the organization
operates, affected by its economic and environmental practices.
o Competitors & Industry Analysts – Other companies and analysts who influence
design trends and innovation within the industry.
o Regulatory Bodies & Legal Experts – Organizations that enforce compliance
with accessibility, privacy, and security laws

Activities in Interaction Design

Dix et al. (2004) introduced a simplified model with four main phases and an iteration loop,
focusing on the design of interaction.

Figure 3.1 Interaction Design Process

Source: Human-Computer Interaction 3rd ed. 2004 p. 195

Rogers et al. (2023) describe the four fundamental activities in the interaction design process.
These activities align closely with the process of design in Dix et al.’s book but are more specific to
designing interactive products. Both frameworks advocate for an iterative, user-centered approach to
system development.

Figure 3.2 Simple Interaction Design Life Cycle Model

Source: Interaction Design: Beyond Human-Computer Interaction 6th ed. 2023 p. 51

IT 321 – CHAPTER 3 | LENY B. VELARDE PAGE 2

• Discovering Requirements –The first step involves understanding what users need from
 the product. This includes gathering information about their goals, preferences, and
challenges to ensure the design addresses real user problems.
• Designing Alternatives – Designers generate multiple possible solutions rather than settling
on a single idea too early. This activity can be divided into two subactivities: conceptual
design and concrete design. Conceptual design involves creating a concept model of the
product, showing what users can do with it and the key ideas needed for interaction.
Concrete design focuses on the details of a product, such as colors, sounds, words,
images, menus, and icons.

• Prototyping – This phase involves creating prototypes, allowing designers and users to test
and refine the product before full development. There are various ways to create
prototypes, and not all need working software. For example, paper-based prototypes are
simple and inexpensive, helping to spot issues early. Role-playing can also help users
experience how the product will work in real life.

• Evaluating – The final step in the design process evaluates a product’s usability and
acceptability based on various usability and user-experience criteria. Evaluation methods
help identify areas for improvement before the product is finalized.

Navigation Design

Imagine a user trying to book a flight on a travel website but struggling to find the right options
due to a confusing menu layout and unclear labels. This frustration highlights the importance of well
structured navigation design in human-computer interaction. Navigation design ensures that users can
efficiently move through a system, locate information, and complete tasks with ease. By providing clear
pathways, intuitive menus, and logical organization, it reduces cognitive load and enhances the overall
user experience. Whether in websites, mobile apps, or software interfaces, effective navigation design
plays a key role in guiding users smoothly and improving usability. Navigation design is a key part of
screen design.

Figure 3.3 Goal-driven Behavior of Interaction

Source: Human-Computer Interaction 3rd ed. 2004 p. 205
 IT 321 – CHAPTER 3 | LENY B. VELARDE PAGE 3
According to Dix et al. (2004), interaction often involves goal-driven behavior. Users have an idea
of what they want and partial understanding. For goal-seeking, each system state or screen should provide
users with enough information to guide them toward their goal. When interacting with a web page, screen,
or device, users need clear guidance to navigate effectively. Four key aspects to consider are:

• knowing where you are - The interface should clearly indicate the user’s current location
within the system or interaction.

• knowing what you can do – Users should easily identify interactive elements, such as
buttons or links, and understand their available actions. Poorly designed pages often blur
the line between decorative images and clickable elements, leading to confusion.

• knowing what will happen next – Before taking action, users should have a clear
expectation of the outcome. While an undo feature can help, it’s better if users don’t have
to rely on trial and error. Slow response times make this uncertainty even more
frustrating.

• knowing where you’ve been or what you’ve done – After completing an action, users need
confirmation that it was successful. Even confident users benefit from clear feedback,
which reassures them that the system has registered their input.

Additionally, understanding where you’ve been enhances a sense of control and helps users
navigate the system more efficiently. Providing clear feedback and navigation cues improves the overall
user experience, making interactions smoother and more intuitive.

Screen Design

A well-executed screen design goes beyond navigation by ensuring a clear visual hierarchy,
consistency, and responsive feedback. Elements such as buttons, forms, and interactive components
should be strategically placed to align with user expectations and natural reading patterns. It plays a
crucial role in creating intuitive and user-friendly digital experiences by enhancing usability and guiding
users effortlessly. Additionally, screen design should adapt to different devices, providing a seamless
experience across desktops, tablets, and smartphones. By prioritizing clarity and efficiency, it minimizes
confusion, reduces errors, and improves overall engagement.

Screen design is the overall arrangement of elements on a digital interface. It includes layout,
navigation, interactions, responsiveness, and usability to ensure a smooth user experience.

According to Dix et al. (2004), the basic aspects of screen design align with broader interaction
design principles:

• Ask –What task is the user performing?

• Think – What information does the user need? What comparisons might they have to
make? In what sequence should the information be presented?

• Design - Form follows function: the design of a screen or interface should be shaped by
its intended use.
 IT 321 – CHAPTER 3 | LENY B. VELARDE PAGE 4
Visual Hierarchy

A system can be structured using a hierarchical approach, often based on functional divisions
(grouping similar elements together). However, hierarchy can also be organized by user roles, types of
users, or even more specialized classifications, such as modules in an educational platform. When applied
to interface design, visual hierarchy plays a crucial role in guiding users through this structure, ensuring
that key elements stand out and information is presented in an intuitive way. In both digital and physical
interfaces, it plays a role in guiding user interactions by making key functions more prominent and
intuitive.

Visual hierarchy is a design principle that organizes elements in a way that guides users' attention
and helps them process information efficiently. It ensures that the most important content stands out,
improving usability and user experience. Designers can use elements such as size, color, contrast, spacing,
and typography to organize content in a way that aligns with users' natural reading habits and cognitive
processes.

Visual Design Principles (Interaction Design Foundation - IxDF, 2016):

• Size – Larger elements tend to capture users' attention more quickly.

• Color – Vibrant colors generally draw more focus than subdued tones.

• Contrast – Strong color contrasts are more visually striking.

• Alignment – Elements that break alignment naturally stand out.

• Repetition – Consistent styling can indicate a connection between elements. •

Proximity – Elements placed close together are perceived as related.

• Whitespace – Extra spacing around an element helps direct attention to it.

• Texture and Style – Detailed textures tend to be more noticeable than flat designs.

Creating a strong visual hierarchy is key to design, helping users navigate content easily and
naturally. By understanding and leveraging natural reading patterns, designers can create interfaces that
lead users toward desired actions or information. Users often follow predictable reading paths influenced
by cultural norms. For instance, in cultures where text is read from left to right, users typically scan
content in an "F" or "Z" pattern:
 Figure 3.4 F-Pattern and Z-Pattern
Source: https://www.interaction-design.org/literature/topics/visual-hierarchy

IT 321 – CHAPTER 3 | LENY B. VELARDE PAGE 5

• F-Pattern: Common in text-heavy designs, users start at the top-left, move horizontally,

then scan down the left side, making shorter horizontal movements as they proceed. • Z-
Pattern: Typical in designs with minimal text, users' eyes move from the top-left to the top-
right, then diagonally down to the bottom-left, and finally to the bottom-right.

By considering those factors, you can design interfaces that highlight the most important
information for users as they work toward their goals in different situations.

According to the Interaction Design Foundation (2016), key principles of visual hierarchy

include: • Gestalt Principles – These help the human eye naturally group elements, making it
easier for users to identify important content and build trust in your brand.

• Consistency – Using familiar icons, menu structures, and colors creates a seamless
experience for users.

• Center Stage – This UI pattern highlights key information, ensuring users see what
matters most right away.

• Whitespace – A clean, uncluttered design improves focus, guiding users' eyes to

essential elements.

• Typography and Style – While decorative fonts may fit certain industries, overly ornate

text or effects (e.g., embossed or faded text) can be distracting and reduce usability. • Mobile
UX Considerations – Smaller screens require clear, easily noticeable elements and smooth
navigation.
References:

• Rogers, Y., Sharp, H., & Preece, J. (2023). Interaction Design: Beyond Human-Computer
Interaction (6th ed.). Wiley.
• Dix, A., Finlay, J., Abowd, G., & Beale, R. (2004). Human-Computer Interaction (3rd ed.). Pearson. •
BBC Bitesize. (n.d.). Stakeholders. BBC.
https://www.bbc.co.uk/bitesize/guides/z6scbdm/revision/1
• Interaction Design Foundation - IxDF. (2016, August 31). What is Visual Hierarchy?. Interaction
Design Foundation - IxDF. https://www.interaction-design.org/literature/topics/visual
hierarchy

IT 321 – CHAPTER 3 | LENY B. VELARDE PAGE 6