Interaction

Design Basics
Module 4
Interaction Design Basics
Interaction design refers to the design of interactive digital products, environments,
systems, and services. Its goal is to create engaging interfaces with well-thought-out
behaviors that users can easily understand and navigate.
Example:
§ A shopping app that allows users to easily add items to their cart by simply clicking a
button that changes color or displays an icon to signify that the item has been added.
KEY PRINCIPLES INCLUDE:
1. Usability: Ensuring the product is easy to use and learn.
§ Example: Consider a navigation app like Google Maps. It offers clear, concise
instructions and displays a simple user interface that highlights key actions, such as
search, route selection, and starting navigation. Users can easily enter a destination,
choose between driving, walking, or biking modes, and follow real-time directions
without needing prior training.
• The map interface is easy to navigate, and common features like zooming, panning, and
switching between map views are intuitive.
• The app also provides an estimated time of arrival and traffic conditions, enhancing the
usability for commuters.
Interaction Design Basics
2. Consistency: Using familiar patterns, elements, and designs to make user
interfaces predictable.
§ Example: In Microsoft Office applications (Word, Excel, PowerPoint), the ribbon
interface at the top follows a consistent pattern across all tools. Whether users are
editing a Word document or creating a PowerPoint slide, they find similar actions like
“Save,” “Undo,” and “Print” in the same locations.
• The consistent placement of menus and commands helps users quickly learn one
tool and transfer that knowledge to others.
• Icons like the floppy disk for saving or the arrow for undoing changes are universally
recognized, reducing the learning curve.
Interaction Design Basics
3. Feedback: Providing clear responses to user actions, like a sound or visual cue
after clicking a button.
§ Example: When you send an email using Gmail, a confirmation message pops
up at the bottom of the screen with a “Your message has been sent” notification.
Additionally, Gmail offers a few seconds to undo the email, giving real-time feedback
on the action just taken.
• This instant response reassures the user that the email was successfully sent,
reducing anxiety about whether the task was completed.
• The option to undo provides additional control over the action, enhancing the user
experience.
Interaction Design Basics
4. Affordance: Designing elements that intuitively show how they should be used
(e.g., a button should look clickable).
§ Example: In most modern websites and apps, buttons have a 3D effect or are
designed with shading, colors, or borders that make them look clickable. For
instance, in Amazon’s product page, the “Add to Cart” and “Buy Now” buttons are
styled prominently with contrasting colors, often with rounded corners or shadows,
inviting users to click.
• The button’s shape, size, and color afford its functionality, meaning users know
instantly that it is interactive.
• Links are usually underlined or change color when hovered, giving users a clear sign
that they can click.
Interactions and Interventions
§ Interactions refer to the ways users engage with a system, which could be through
touch, voice, gestures, or typing.
§ Interventions, on the other hand, are the moments when the system steps in to
assist, correct, or guide the user. A well-designed intervention supports user tasks
without being intrusive or frustrating.
§ Examples:
§ When filling out an online form, if a user inputs the wrong format for their phone
number, an intervention would be a pop-up message highlighting the error and
suggesting the correct format.
§ Online shopping websites, such as Shoppe or Lazada; Interaction – browsing items,
add to cart, paying. Intervention – system make recommendation like suggesting
similar products or prompting “low stock alert”
Design Process
The design process in HCI typically follows a user-centered approach and is iterative in
nature. Some common stages include:
• Research & Understanding: Identify user needs and behaviors through user research,
interviews, or observations.
• Ideation & Conceptualization: Generate ideas based on the research. Develop initial
sketches or wireframes of the system.
• Prototyping: Build low- or high-fidelity prototypes that users can interact with.
• Testing & Evaluation: Collect feedback from real users through usability testing and
iteratively refine the design based on this feedback.
Example:
§ Designing a task management app for office workers. The design process would start
with interviewing users to understand their needs (e.g., organizing tasks by deadlines,
integrating calendars), then move on to sketching wireframes of potential interfaces,
followed by testing prototypes and refining the app based on user input.
Design Process
1. Research and Understanding
§ This is the discovery phase where designers gather insights into the users, their needs,
behaviors, environments, and the context in which they interact with the system.
Activities Involved:
• User Research: Techniques like interviews, surveys, focus groups, and observations are
used to collect data directly from potential users. The goal is to understand what users
need, their pain points, and how they currently solve problems.
• Contextual Inquiry: Observing users in their natural environment (e.g., watching
someone using an existing system) to gain insights into their workflows, motivations,
and challenges.
• Competitive Analysis: Studying existing solutions in the market to understand what
works and where there are opportunities for improvement.
§ Example:
§ When designing a new food delivery app, the research phase might involve interviewing
frequent food delivery users to understand their challenges, like waiting times, search
filters, or payment issues.
Design Process
2. Define Requirements
§ In this phase, the insights from research are synthesized into clear user needs and functional
requirements. This helps to define what the design must achieve to meet user expectations.
Activities Involved:
• User Personas: Fictional representations of key user segments, each with specific goals,
behaviors, and frustrations, are created. Personas help the design team keep the focus on real user
needs.
• User Scenarios: Describing how personas will interact with the system in a given context, from
start to finish. This helps envision how the system will fit into users’ daily lives.
• Task Analysis: Breaking down tasks that users perform with the system into smaller steps to
ensure the design supports these tasks efficiently.
§ Example:
§ For the food delivery app, a key user persona might be “Alice,” a busy professional who often
orders food on the go and values quick reordering of her favorite meals. The scenario might involve
Alice using the app to order lunch during a busy workday, emphasizing her need for efficiency and
minimal interaction.
Design Process
3. Ideation and Conceptual Design
§ Once the problem and requirements are clear, the next step is brainstorming possible solutions. The
goal is to generate ideas and explore different ways to meet user needs.
Activities Involved:
• Sketching and Wireframing: Quick, low-fidelity drawings that outline the layout and structure of
the interface without worrying about details like colors or fonts. Wireframes help the team visualize
different interface options and plan navigation.
• Brainstorming and Collaborative Workshops: Team members and stakeholders come together
to generate creative solutions for user needs. No idea is dismissed at this stage to encourage
creativity.
• Storyboarding: A visual representation of how users will interact with the system over time. This
helps explore the flow of interactions and how each touchpoint will support user tasks.
§ Example:
§ For the food delivery app, designers might sketch various ideas for the home screen, showing quick
access to recent orders, popular items, and personalized recommendations. They could explore
several layouts to determine what feels most intuitive.
Design Process
4. Prototyping
§ Prototyping involves creating a working model of the product to bring the ideas from
the conceptual stage into a tangible form. This could range from low-fidelity paper
prototypes to high-fidelity interactive prototypes.
Activities Involved:
• Low-fidelity Prototypes: Early prototypes that might be simple paper mockups or
basic digital sketches. They allow designers to test concepts quickly and gather user
feedback before investing time in more polished designs.
• High-fidelity Prototypes: More detailed prototypes that closely resemble the final
product, often built using design tools like Figma or Adobe XD. These prototypes can
simulate actual user interactions, helping test usability and functionality.
• Rapid Prototyping: Quickly iterating on prototypes based on feedback from user
testing, making changes and testing again to refine the design.
§ Example:
§ The food delivery app team could create a clickable wireframe that simulates key
features like searching for restaurants, viewing menus, and placing an order. This allows
them to test how easy it is for users like Alice to complete the ordering process.
Design Process
5. User Testing and Evaluation
§ This phase focuses on testing the prototype with real users to identify any usability issues,
inefficiencies, or areas for improvement. It’s essential to test the design early and often in the
process to gather insights that will improve the user experience.
Activities Involved:
• Usability Testing: Observing real users as they interact with the prototype, often in a
controlled environment. Designers collect feedback on what works well and what needs
improvement.
• A/B Testing: If multiple design options are available, A/B testing can help determine which
version performs better by comparing how users interact with different layouts or features.
• Heuristic Evaluation: Experts review the design against usability principles (heuristics) to
identify any violations or areas where the design could be improved.
§ Example:
§ The food delivery app team could conduct usability testing by asking a group of users to order
a meal from start to finish while being observed. Any areas where users struggle—such as
finding specific restaurants or navigating the payment process—are noted and addressed.
Design Process
6. Implementation
§ Once the design has been validated through testing and refinement, the next step is
implementation, where developers build the final product based on the design
specifications. Even during this phase, the interaction design team stays involved to
ensure the final system aligns with the intended design.
Activities Involved:
• Collaborating with Developers: Designers work closely with the development
team to ensure the design is translated into the final product. This may involve
creating detailed design specifications, assets (icons, images, fonts), and interaction
details.
• Design Handoff: Tools like Zeplin or Figma are often used to hand off designs to
developers, ensuring all aspects of the design, including spacing, colors, and
behaviors, are implemented correctly.
Design Process
7. Launch and Post-Launch Evaluation
§ Once the product is launched, the design process doesn’t end. It’s crucial to gather
feedback from users to continue refining the system. Post-launch evaluation helps
identify areas for continuous improvement.
Activities Involved:
• User Feedback Collection: Designers collect data on how users are interacting
with the system in real-world conditions through analytics, surveys, or support
channels.
• Iterative Improvements: Based on feedback, the design can be continuously
improved in updates, addressing any issues or enhancing features.
§ Example:
§ After launching the food delivery app, the team might track metrics like average
time to place an order or user satisfaction scores. If many users report confusion
with the payment process, they might revisit the design and make improvements.
Summary of the Interaction Design Process
1. Research and Understanding: Learn about user needs and behaviors.
2. Define Requirements: Set clear user goals and system requirements.
3. Ideation and Conceptual Design: Generate and sketch potential solutions.
4. Prototyping: Create prototypes to simulate the design and interactions.
5. User Testing and Evaluation: Test with real users and refine based on
feedback.
6. Implementation: Work with developers to build the final product.
7. Launch and Post-Launch Evaluation: Monitor, collect feedback, and make
improvements.
Scenarios
§ Scenarios are narrative descriptions of how users will interact with a
system. These help designers anticipate potential challenges or
requirements that may arise in real-world contexts. Scenarios are
useful for understanding the flow of interaction and the user’s
journey.
§ Example:
§ A scenario for a fitness tracker could involve a user who wants to
monitor their heart rate while exercising. The scenario describes how
the user interacts with the app during a workout, how they check
their heart rate, and what kind of feedback or data visualization they
expect afterward.
Types of Scenarios in HCI
1. Activity Scenarios: Focus on the high-level tasks users
perform with the system.
2. Interaction Scenarios: Describe step-by-step interactions
between users and the system.
3. Design Scenarios: Include design details and specific
features that support user goals.
4. Use Case Scenarios: More structured than narratives,
focusing on system requirements and user actions.
Scenario Components:
[Link] User: The person interacting with the system, often based on
a persona.
[Link] Goal: The objective the user is trying to achieve.
[Link] System: The product, application, or interface the user
interacts with.
[Link] Context: The environment or situation in which the
interaction takes place.
[Link] Flow: The sequence of actions and events that occur as the
user interacts with the system.
Example
§ Scenario: Persona: Linda, a 35-year-old working mother of two,
who manages her family’s groceries while balancing a busy work
schedule. She is comfortable with technology but values
convenience and efficiency in her online shopping experience.
§ Goal: Linda wants to order her weekly groceries online during her
lunch break so that they are delivered by the time she gets home
from work.
§ Context: It’s midday on a Wednesday, and Linda is on her lunch
break at work. She has 15 minutes to place her grocery order, and
she needs the process to be quick and easy.
 Step-by-Step Interaction Flow in the Scenario:
1. Opening the App:
• Linda opens the grocery app on her smartphone. She’s greeted by a personalized home screen
that shows her most frequently purchased items, as well as recommendations based on her past
orders.
2. Starting the Order:
• Linda taps on the "Favorites" section to quickly add items like milk, eggs, and bread to her cart.
These items are pre-selected based on her previous shopping history, making the process faster.
4. Searching for New Items:
• Linda needs a few additional ingredients for a recipe she plans to try over the weekend. She uses
the app’s search bar to quickly find "pasta" and "tomato sauce." The search results appear, and she
selects the brands she prefers.
5. Checking for Discounts:
• Before proceeding to checkout, Linda checks the “Deals” section of the app. She notices a discount
on fresh vegetables, which are part of her usual order. She adds a couple of items to her cart with
a single tap.
Step-by-Step Interaction Flow in the Scenario:
6. Selecting Delivery Time:
• Linda proceeds to the checkout screen, where she chooses a delivery time. The
app automatically suggests delivery slots that fit her usual schedule—after 6 PM
when she’s home from work.
7. Reviewing and Placing the Order:
• Before confirming, the app displays a summary of her order, including her total,
estimated delivery time, and payment details. Linda quickly reviews and taps
“Place Order.”
8. Receiving Confirmation:
• Linda receives a confirmation notification that her order has been placed and will
be delivered at the requested time.
9. Post-Order Actions:
• On her way home, Linda receives a notification that her groceries are en route,
with real-time tracking available in the app. She can see the delivery van’s
estimated time of arrival.
Analysis of the Scenario:
1. The User: Linda is a busy working mom who values efficiency and quick access to frequently
ordered items. The system (grocery app) is designed to minimize the time and effort required for
her to complete her task.
2. The Goal: Linda’s goal is to order groceries during her limited break time at work. The app helps
her achieve this goal by providing shortcuts like "Favorites" and personalized suggestions based
on her shopping history.
3. The System: The grocery app provides an intuitive interface with features that align with Linda’s
needs, such as an efficient search function, personalized deals, and convenient delivery time
suggestions. The app provides feedback at every step (e.g., confirming that items have been added
to the cart, confirming the order).
4. The Context: Linda uses the app in a time-constrained environment (during her lunch break). The
design is optimized for mobile use and quick interactions, allowing her to complete the task
quickly.
5. The Flow: The step-by-step flow of actions follows a logical and streamlined process. Linda is
able to add items, review deals, check out, and receive confirmation, all within a short time frame.
Network Diagrams
§ In HCI, network diagrams illustrate the architecture of a system, showing how
different components are connected and communicate.
§ These diagrams help designers understand the flow of data and interactions
across devices, users, and systems, which is crucial for designing efficient and
user-friendly interfaces.
§ Example:
§ In a smart home system, a network diagram might show how different devices
(smart lights, security cameras, thermostats) are interconnected and controlled
via a central user interface, such as a smartphone app. It might show the
communication between the devices (Wi-Fi, Bluetooth) and the server that stores
user preferences.
Screen design and layout
§ Screen design and layout in Human-Computer Interaction (HCI) is crucial in
creating user interfaces that are intuitive, functional, and aesthetically pleasing.
§ It involves organizing and structuring the elements of a screen (like text, buttons,
images, and navigation bars) to ensure usability and efficiency in user interactions.
Key Principles of Screen Design and Layout in HCI:
1. Consistency:
§ Definition: The interface should maintain consistency across screens in terms of design
patterns, colors, fonts, and iconography.
§ Example: If a button style is used for “Submit” in one screen, the same style should be
used for similar actions across other screens to avoid user confusion.

2. Simplicity:

§ Definition: The design should avoid unnecessary complexity. Users should not feel
overwhelmed by too much information or too many actions available on a single screen.
§ Example: A login screen with only two fields (username and password) and a single
"Login" button makes the task simple and clear for the user.
Key Principles of Screen Design and Layout in HCI:
3. Affordance:
• Definition: The design of interactive elements should suggest how they are to be used. The
appearance of buttons, sliders, or text fields should indicate their functionality.
• Example: Buttons should look clickable (e.g., with shadows or contrasting colors), and input
fields should have borders or background changes to signal that they are editable.
4. Feedback:
• Definition: The interface should provide immediate feedback to the user about their
actions. Visual cues like animations, sound, or changes in button state inform users that
their inputs have been acknowledged.
• Example: A button changing color when clicked or a loading spinner appearing after a form
submission are both forms of feedback.
5. Hierarchy:
• Definition: Visual hierarchy refers to the arrangement of elements in a way that suggests
their importance or the order in which they should be interacted with.
• Example: Headlines and important actions like “Submit” or “Next” should be larger or more
prominent than secondary information, such as descriptions or additional options.
Key Principles of Screen Design and Layout in HCI:
6. Proximity:
• Definition: Related items should be grouped together, and unrelated items should be
separated. Proximity in design suggests a relationship between elements.
• Example: In a shopping cart, item names, prices, and quantities should be close together to
indicate that they are related, whereas unrelated items like “Search” or “Customer Support”
should be placed elsewhere.
7. Alignment:
• Definition: Elements should be aligned consistently to create a sense of order. Misaligned
elements create a disorganized, chaotic look that can confuse users.
• Example: Text, images, and buttons should align on a grid to make the layout feel balanced
and clean, which also helps users scan and understand content faster.
8. Whitespace (Negative Space):
• Definition: Whitespace refers to the empty areas of the screen that separate elements. It
helps avoid clutter and ensures that users are not overwhelmed with information.
• Example: By increasing the space between sections (like a header and a body of text),
users can more easily differentiate between content types.
Key Principles of Screen Design and Layout in HCI:
9. Responsiveness:
• Definition: The layout should adapt to different screen sizes, ensuring that it
works equally well on mobile phones, tablets, and desktops.
• Example: A responsive website might show a navigation bar at the top of the page
on a desktop screen, but collapse that navigation into a "hamburger menu" on a
mobile screen to save space.
10. Accessibility:
• Definition: The design should be usable by people with varying abilities, including
those with visual, auditory, or motor impairments. Accessible design often includes
considerations like color contrast, text size, and support for screen readers.
• Example: Text should be large enough to read without zooming, and color contrast
should be sufficient for users with vision impairments to distinguish between
elements.
 Screen Design Layout Patterns
1. Grid Layout:
• Definition: Organizing elements in
a grid creates a structured and
predictable interface. A grid helps
with alignment, consistency, and
readability.
• Example: E-commerce websites
often use grid layouts to display
products with uniform image sizes,
descriptions, and prices in a
structured format.
Screen Design Layout
Patterns
2. F-pattern Layout:
• Definition: Studies show that users
tend to scan websites in an "F"
shape, focusing on the top and left-
hand side of the screen. This means
placing key information in these
areas will increase visibility.
• Example: News websites often
have headlines, summaries, and
images aligned in an F-pattern,
allowing users to quickly scan the
most important content.
Screen Design
Layout Patterns

3. Z-pattern Layout:
• Definition: On screens with fewer text-
heavy elements, users tend to scan in a
Z-pattern, moving from the top left to
the right, then diagonally down to the
bottom left and across to the right again.
• Example: Landing pages often use the
Z-pattern to draw attention to a call to
action at the bottom right corner of the
screen after leading the user through an
introduction or description.
Screen Design
Layout Patterns
4. Card Layout:
• Definition: Information is displayed
in "cards" or panels that group
related content together. This layout
is highly modular and works well for
displaying multiple items or
categories.
• Example: Social media feeds, like
Pinterest or Twitter, often use card
layouts, where each post or tweet is
displayed in its own card for easy
viewing and interaction.
Screen Design Layout
Patterns
5. One-Column Layout:
• Definition: A one-column
layout provides a clear path
for the user, typically used
for mobile devices or
focused tasks like reading
or form completion.
• Example: A blog post or
news article often follows a
one-column layout,
ensuring the text is easy to
follow, without distractions
from sidebars or additional
content.