Steps of Interaction Design

Understanding the Problem Space:

It starts by knowing what the users need and the issues they face with a product or system.
For instance, if designing a cooking app, understanding what users struggle with while
finding recipes or organizing ingredients is crucial.

Importance of Involving Users:

Expectation management
• Realistic expectations
• No surprises, no disappointments
• Timely training
• Communication, but no hype

Ownership
• Make the users active stakeholders
• More likely to forgive or accept problems
• Can make a big difference in acceptance and
success of product

Users' opinions and experiences matter. Their input helps designers create something that
solves their real problems. Imagine building a navigation app without asking users how they
prefer seeing maps or getting directions—it might not be helpful.
 Degrees of User Involvement:

It varies. Sometimes, users are directly involved in design decisions through interviews,
tests, or workshops. In other cases, designers observe how users interact with a product
without directly involving them.

User-Centered Approach:
This means making everything about the design revolve around the users—their needs,
preferences, and abilities. Designers focus on creating something that fits users like a glove,
making it easier for them. Think of a website that adjusts its layout based on what users find
easy to see or click.

Four Basic Activities of Interaction Design:

- Identifying Needs: Understanding what users require from the product.

- Developing Alternatives: Coming up with various design solutions.
- Building Prototypes: Creating models to test these solutions.
- Evaluating: Checking if the design meets user needs.
User-centered design rests on three principles

▪ Early focus on users and tasks

▪ Empirical measurement using quantifiable and
measurable usability criteria
▪ Iterative design

Simple Lifecycle Model for Interaction Design:

Imagine creating a music streaming app. The lifecycle involves steps like:
- Research: Understand what music lovers struggle with in current apps.
- Design: Sketch different ways the app could solve these problems.
- Prototype: Create a basic version of the app to test ideas.
- Test: Have users try the app and see if it's easy and fun.
- Refine: Improve the app based on what users liked or didn't.

This simple cycle keeps repeating to ensure the product stays user-friendly and solves real
issues.
Prototype
What is a prototype?
A prototype is a preliminary version of a product or system used for testing and validating
ideas before creating the final version. For instance, when designing a new smartphone app,
a prototype might be a basic version of the app that allows users to navigate through
screens and perform essential functions, even if it lacks all the features of the final product.

Why prototype?

Prototyping helps designers and stakeholders:

- Test Concepts: Understand how users interact with the product.

- Identify Problems: Discover and fix issues early in the design process.
- Receive Feedback: Gather input from users or stakeholders to refine the design.
- Save Time and Money: Avoid investing heavily in a final product that might need
significant changes later.

Different kinds of prototyping:

- Low Fidelity: Imagine designing a new website. A low-fidelity prototype might be

hand-drawn sketches or simple digital wireframes. These sketches help visualize the layout
and structure without focusing on intricate details.

- High Fidelity: Continuing with the website example, a high-fidelity prototype could be a
fully functional digital prototype that closely resembles the final website. It includes
interactive elements, images, and content, providing a more realistic experience for users to
test.

Compromises in prototyping:

- Vertical: Suppose you're creating a new smartphone. A vertical prototype might focus
intensely on perfecting the screen and touch interface while leaving other features, like the
camera or the internal components, in simpler forms. This allows in-depth exploration of a
specific feature.

- Horizontal: In contrast, a horizontal prototype would cover various features of the

smartphone but might not dive deeply into any one area. It could include basic versions of
the camera, screen, and other functionalities to give an overall feel of the device.

Final product needs to be engineered:

While prototypes are crucial for testing and refining ideas, the final product requires full
engineering. For instance, a prototype car might look great and drive well in tests, but
engineering ensures it meets safety standards, environmental regulations, and durability
expectations before mass production.

By using prototypes, designers can gather insights early, make necessary adjustments, and
ensure the final product meets user needs while also being technically feasible and robust.
Types of Interaction

Another way of conceptualizing the design space is in terms of the

interaction types that will underlie the user experience.
five types of interaction
• Instructing
▪ Issuing commands and selecting options
• Conversing
▪ Interacting with a system as if having a conversation
• Manipulating
▪ Interacting with objects in a virtual or physical space by
manipulating them
• Exploring
▪ Moving through a virtual environment or a physical space
• Responding
▪ The system initiates the interaction and the user chooses
whether to respond

1. Instructing
• Where users instruct a system and tell it what
to do
▪ For example: Tell the time, print a file, or save a file
• Very common conceptual model underlying a
diversity of devices and systems
▪ For instance: Word processors, VCRs, and vending
machines
• The main benefit is that instructing supports
quick and efficient interaction
▪ Good for repetitive kinds of actions performed on multiple
objects

2. Conversing
• Underlying model of having a conversation
with another human
• Ranges from simple voice recognition menudriven systems to more complex ‘natural
language’ dialogs
• Examples include timetables, search engines,
advice-giving systems, and help systems
• Also virtual agents, chatbots, toys, and pet
robots designed to converse with you

Pros and cons of conversational

model
• Allows users, especially novices, to interact
with a system in a way that is familiar to them
▪ Can make them feel comfortable, at ease, and less scared
• Misunderstandings can arise when the
system does not know how to parse what the
user says
▪ For example, voice assistants can misunderstand what
children say

3. Manipulating
• Involves dragging, selecting, opening, closing and
zooming actions on virtual objects
• Exploit’s users’ knowledge of how they move and
manipulate in the physical world
• Can involve actions using physical controllers (for
example, Nintendo Wii) or air gestures (such as,
Microsoft Kinect) to control the movements of an onscreen avatar
• Tagged physical objects (for instance, balls) that are
manipulated in a physical world result in physical/digital
events (such as animation)

Direct Manipulation (DM)

• Ben Shneiderman (1983) coined the term DM
• Three core properties:
▪ Continuous representation of objects and actions of
interest
▪ Physical actions and button pressing instead of
issuing commands with complex syntax
▪ Rapid reversible actions with immediate feedback on
object of interest

Benefits of direct manipulation

• Novices can learn the basic functionality quickly
• Experienced users can work extremely rapidly to carry
out a wide range of tasks−even defining new functions
• Intermittent users can retain operational concepts over
time
• Error messages rarely needed
• Users can immediately see if their actions are furthering
their goals, and if not, do something else
• Users experience less anxiety
• Users gain confidence and mastery and feel in control

Disadvantages of DM
• Some people take the metaphor of direct
manipulation too literally
• Not all tasks can be described by objects, and
not all actions can be done directly
• Some tasks are better achieved through
delegating, for example, spell checking
• Can become screen space ‘gobblers’
• Moving a cursor using a mouse or touchpad can
be slower than pressing function keys to do the
same actions

4. Exploring
• Involves moving through virtual or physical
environments
▪ Users can explore aspects of a virtual 3D
environment
▪ Physical environments can also be embedded with
sensors that when detect the presence of someone
will trigger digital or physical events to happen
• Many examples of virtual environments,
including cities, parks, buildings, rooms, and
datasets
▪ Enable users to fly over them and zoom in and out of
different parts

5 Responding
• System takes the initiative to alert user to something
that it “thinks” is of interest
• System does this by:
▪ Detecting the location and-or presence of someone in a
vicinity and notifies them on their phone or watch,
▪ What it has learned from their repeated behaviors
• Examples:
▪ Alerts the user of a nearby coffee bar where some friends
are meeting
▪ User’s fitness tracker notifies them of a milestone reached
• Automatic system response without any requests
made by the user

Potential cons of system-initiated

notifications
• Can get tiresome or frustrating if too many
notifications or the system gets it wrong
• What does it do when it gets something
wrong?
▪ Does it apologize?
▪ Does it allow the user to correct the advise or
information?

Choosing an interaction type

• Direct manipulation is good for ‘doing’ types of
tasks, for example, designing, drawing, flying,
driving, or sizing windows
• Issuing instructions is good for repetitive tasks, for
example, spell-checking and file management
• Having a conversation is good for certain services,
for instance, finding information or requesting
music
• Hybrid conceptual models are good for supporting
multiple ways of carrying out the same actions