Interactive ecosystems

(Magistral)

1. Human centered technology and interaction ecologies

2. Paradigms, styles and principles of interaction
3. Advanced Interactive Applications: Ubiquitous computing, IoT, wearables,
collaborative computing
4. Participatory and people-centered design. Problem Framing
5. Understanding users. Ethical considerations
6. Presenting synthetic knowledge. Briefing stakeholders. Embodied design techniques I
7. Creativity and Design thinking techniques: divergent design. Embodied design
techniques II
8. Design thinking techniques: convergent design. Prototyping.
9. Prototyping and iterating the design. Design Crits and Internal Validation.
10. Briefing stakeholders. Capturing and presenting a vision and design concepts.
11. User experience and evaluation.
12. Final Considerations: engaging stakeholders with a design vision. Critical analysis
 1. Human centered technology and interaction ecologies

Holon: technology as both a whole and a part (how components interact)

micro analysis: focus on the components
macro analysis: focus on the technology

PACT model: People, Activities, Contexts (Physical, Social, Organizational), Technologies.

A human-centered framework to think about interactive systems.

2. Paradigms, styles and principles of interaction

Waves:
1. Focus, Challenges
2. Main metaphors
3. Examples
4. Theory and concepts, Methods
5. Contribution and Values

Predecessors

Human Factors: is concerned with the application of what we know about people, their
abilities, characteristics, and limitations to the design of equipment they use, environments in
which they function, and jobs they perform.

Ergonomics: is the design and engineering of human-machine systems for the purpose of
enhancing human performance.

1st wave: emergence of HCI (from 1980s), research at unis and labs
Focus: better cognitive coupling human-machine, information-processing phenomena,
machine-centered notion, task-based actions, evaluation of existing systems, analysis of
features.
Metaphor: Mind and computer as a coupled information processor
(from engineering, cognitive psychology, industrial and information design, etc.)
Concepts: “user friendly”, efficiency, efficacy, effectiveness, satisfaction
Decrease the cognitive load
Gulfs of evaluation and execution
Affordances: (introduced by Gibson,1979) Refers to he perceived and actual properties of
the thing, primarily those fundamental properties that determine just how the thing could
possibly be used (Used by Norman, 1988).
Acting on a perceptible affordance leads to information indicating new affordance
(Gaver,1991)
Gestalt: perceptions of patterns, configurations instead of individual elements.
principles that describe how we perceive: proximity, similarity, continuity, closure, etc.)

Methods: modelling the user = processor (GOMS (Goals, Operators, Methods, and Selection
Rules), KLM, PUMs)
Goals: little effort, cost, time
Lab- setting/experiments
Assumption: can be generalized
Assumes no error, user know how to
Human factors modeled as a set of specifications
Rigid guidelines
Systematic testing: usability testing (usefulness, efficiency, efficacy, learnability, satisfaction)

Contributions and values:

evaluating systems, analyzing tasks, specifications for design
values in usability (user friendly), important as a way of hypothesis testing. HCI research,
science, truth.

Recap:
• Focus on the fit, emphasis on cognition. Humans and computers
modeled as information processors
• Concepts: mental models, gulf of execution and evaluation, affordances…
• Methods: In-lab. Usability: efficiency, effectiveness, usefulness, …

2nd wave: 1990s, concern beyond analysis, DESIGN

a move from user requirements to iterative prototyping, a move towards User-centered
Design (UCD) processes
Focus:
From “users” to “humans”
From product to process
From individual, to groups
From the lab to the workplace
From novices to experts
From analysis to design
Looking at the interaction, rather than at the computer
Group work
Context-based: the workspace and people around

3. Advanced Interactive Applications: Ubiquitous computing, IoT, wearables,

collaborative computing

2nd wave
Theories: Situated action
Interaction is “situated”: how ppl use their circumstances to achieve intelligent action, rather
than attempting to abstract action away from its circumstances
Relationship between action structures and environment:
- Interactionist view – Situation: resources for actions to construct meaning.
- Ecological view – Situation: organization of action partially taken care by the
environment
Methods: ethnographic (observations, interviews,...)
Inspired interesting concepts: seamless and seamful design

Distributed cognition (Hutchins, 1990)

From cognitive science.
Cognition and knowledge not confined within the individual
“The mind in the world” distributed across a “cognitive system”
subjects, individuals, artefacts, and tools in the environment.
Uses: workplace studies (traffic control, call centers, air flight cabins…)
Analyze: The distributed problem-solving taking place
• Interaction between individuals, coordinating mechanisms used
• Ways communication takes place, role of verbal and non-verbal action
• How information is shared and accessed, the representational media used, and the
environment in which activity takes place.
• Annotate: breakdowns, incidents, problems, communication pathways (especially
if hindered, or if information distorted..)

Interactionist, ecological
Study: complex and real situations in the work environment
IMP context: interaction w other ppl, objects, in the context of ongoing activities and
practices
coordination of joint action: awareness, collaboration, cooperation

Methods:
- Proactive
- User-centered design processes
 - Participatory design
- Contextual inquiry and design
- Analysis: sociology, anthropology, ethnomethodology (field work: in the wild,
observation techniques, micro analysis)

Contributions and values:

Growth of field CSCW (Computer Supported Cooperative Work): collaborative computing,

focus: larger groups, collaborative and cooperative tasks.
Situated perspective
Design as a discipline (design science
Focus on the process and participation of users: user-centered design (UCD) and participatory
design

3rd wave
2000s, from users to actors or participants
Extended context and application domain (from workplace to home, from work to leisure)
Importance: from performance to culture, emotions, experience
Technology: from desktop to mobile, tangible,wearables, hybrid spaces

Mobile technology
Waves: portability, miniaturization, connectivity, convergence, divergence, apps, digital
ecosystems

Ubiquitous computing
Any device, any time, any place, any data across any network
Instead of one powerful computer, multiple distributed devices

Tangible computing
From abstract cognition to physical world
Interface moves to the environment
Technology manifests in the world
Interacting with digital info= interacting w the world
Exploit our skills w real world objects
New concerns:
- managing attention
- incorporating context
- combining devices
Tangibility and materiality of interface (new affordances)
New interaction styles

Internet of Things
Connecting any device to the Internet and to other devices
IoT – big network of connected things and people
Collecting and sharing data about how they are used and their environment

Wearable computing
Wearing tech
Part of ubiquitous computing
Challenges: HW, integration, interaction, acceptance

Theory:

From cognitive to emotional

Aesthetic experience
Embodied interaction (draws from social computing and tangible computing)
“Embodiment is the property of our engagement with the world that allow us to make it
meaningful”
Approach to design that centers on physical and social context
All interactions are embodied

Methods:

Very explorative
Design at the center:
- “Design thinking”: practice based, thinking out of the box, centers on innovation
- Embodied design methods: use embodied engagement of designers and users
- Research through design: knowledge generation, captured on designs

Contributions and values:

• From information centered to action/emotion/sensation centered

• Concepts: “situated,” sensing and “sense-making” and “meaning making,” embodiment
• Artefacts: deeper personal and social purposes and meaning
• Aesthetic emphasis: emotion, sensation, enjoyment, pleasure, social, playful, embodied,
fun…
• Embodied Interaction as an approach
• Methods: Design at the center
• From objective to subjective interpretation and value

Inspirational bits and provocations

VR/AR/MR
Flexible electronics and interfaces
3D printing, DIY prosthetics
Smart jewelry
Interactive arts
Metaverse
4. Participatory and people-centered design. Problem Framing

User experience: “person's perceptions and responses resulting from the use and/or
anticipated use of a product, system or service”
Includes emotions, beliefs, preferences, behaviors, accomplishments that occur before,
during, and after use
Consequence of brand image, presentation, functionality, system performance

Problem framing: important to frame a guiding question for research and design, and to scope
our design context or problem space
Design context: characterization of the situation, phenomenon, practice or activity designed
for
Assumptions: smthn that u take for granted w/o supporting evidence (requires further
investigation)
Claim: statement of supposed “thruths” w/o supporting evidence, they put the design proces
at risk

People centered approaches: they involve users, involvement can vary

Involving users after a product release: data and user feedback , based on experience and day
to day use, customer reviews. Error reporting systems (ERSs) or online crashing analysis
Participatory design (PD): coop design, democratizing solutions, end users participants in
decision making, and co designers in design process. Crowdsourcing design ideas: diff
stakeholders, shared contribution and ownership, diff “voices”, + user satisfaction. Citizen
engagement: involving population, empowerment through tech

User-Centered Design (UCD) (pca)

1. Centered on the users
Their needs, desires… Users involved through the whole design process. (prior, after, in
between)
Users’ tasks and goals are the driving forces
Users’ behavior and context are studied, and system designed to support them
Users’ characteristics
They are consulted through the process
2. Empirical evidence
Select and study design context or problem space (research)
Identify specific goals
Product empirically evaluated
3. Iterative design process
Designs refined based on feedback
Research in design context will turn into needs, aspirations, requirements
Then into possible design qualities, features,etc. Exposed to users and design context.
Feedback improves design

Iterative cycles (pca)

Cyclical divergent and convergence phases
- Research the design context
- Identify and specify user requirements
- Designing alternatives and prototyping
- Evaluating design concepts and final designs

Design thinking

Approach to design, driven by creativity and innovation

Integrative thinking: working with opposites to find innovative solutions
Grounded in design-oriented disciplines
Strong hands-on engagement with the design material
Process: Non-linear and iterative
To: understand users, challenge assumptions, (re-)define problems, and create innovative
solutions to prototype and test

Tool to tackle problems

Complex problems: many independent factors, science not so useful
Complexity in science is different
- Reality is complex (never explored in its entirety)
- Time does not limit science
- Objective: articulate universal, objective, and replicable truths
- Objective: explain reality, reduce complexity
- Success measure: methodological rigor

Wicked problems: they cannot be definitely described, there is no objective definition of

equity, policies that respond to social problems cannot be meaningfully correct or false, there
are no solutions in the sense of definitive and objective answers.

Design thinking is well suited to tackle wicked problems. It centers on what does not yet
exist. Iterative process of framing and reframing problems and solutions. Hands on approach:
prototyping and testing. Success measure: “ultimate particular”

Design models

IDEO
Company known for their design thinking approach and methods.
Creative tools for designers and non-designers
Start with a good question focused on a change
Starting from people
Build to think : “Instead of thinking about what to build, building in order to think”
Involving users
Double Diamond Model

Universally accepted, based on divergence and convergence processes. Iterative process of

framing and reframing problems and solutions

Phases: (EDIPT)
- Empathize
- Define
- Ideate
- Prototype
- Test

Design thinking and UCD: both centered on users, iterative, UCD more traditional, design
thinking more innovative, similar goals

PCA, why?
understanding users is essential, it can help designers design good user experiences, one
size fits all rarely works, it can reveal incorrect assumptions of designers, expensive errors
late in the design process.

involving users is essential

Ensure end product is usable and will be liked, desired and used by…
- Designers/Engineers/even product owners…. are NOT user
- + empathy, + ethical design
- Involving their activities, contexts… - human error and + safety, better ecosystem
design
Expectation management: adequate and timely training, hands-on demonstrations, pre´release
versions
Ownerships: those involved feel they contributed, hence ownership and support
Fulfilling needs, expectations, wants… + sales, - customer service, -accidents, + satisfaction

Problem framing
- Select and scope our design context (what do we know ab it? how can we know
more?)
- Frame a guiding question for research and design

5. Understanding users. Ethical considerations

Design thinking phases

1. Empathize
Central key in a person-centered design process. Understand ppl and their context.
Important bc you are not the user, insights are key to create innovative solutions
Observe, watch, listen…then ENGAGE (interviews, stories, show and tell, walk-throughs, se
the environment as prompts)

Techniques to gather data

- Traditional: precious research and documentation, interviews, questionnaires
- Techniques in IxD, and design thinking: focus group, cultural probes, design thinking,
embodied design/research activities

● Existing research and documentation:

- Manuals, standards, activity logs, regulations…
- Direct feedback
- Scraping from the web and second source data
- Social Media
- Review of state-of-the-art (insight ab competitors)
● Interviews
Conversations w a purpose
(open ended or unstructured, structured or semi structured)
 Structured interviews: pre-defined set of questions, standardized, short closed and
clear questions. Useful when there is a clear goal, not much time, specific set of
questions and expected answers.

● Questionnaires: good for getting answers to specific questions, similar to interviews,

+ outreach, - depth/richness, clarity + important
Avoid: long confusing questions, leading questions (make them neutral), double
barreled questions
Use everyday language

● Focus groups
Group interviews, led by a facilitator, frequent in marketing, political campaigns,
social sciences. Look out for: group dynamics, salient and sensitive topics, common
and different opinions and stances

● Observations- direct in the field

Participants: hard to articulate what they do or why
Hard to have the big pic
Provides details of how target users behave, what they do, how…
+ rich data
[!] non trivial: logistics, access, analysis
Degree of participation: insider vs. outsider // active vs. passive

Contextual inquiry: mix between interview and observation, contextual interview (1-
on-1 field interview), active role- master/apprentice, participants talk as they do,
emerge hidden and specific details of what ppl do and why, looking for cool concepts,
data collection (annotations or recordings)

● Observations- direct in the lab

Controlled environment, +formal and +control, + intrusive, + control of variables, -
artificial situation and - apprehension. Focus on action and concrete behavior, data:
video, pics, annotations

Observations-useful technique
Think aloud: participants think out loud as they are acting. Useful to understand what
users think and feel, their thought and mental models, expectations, fears, doubts.

● Indirect observations
- Diaries: self documentation of daily activities, regular basis, useful when
participants unreachable, location is private, to report feelings. + not much
time for researchers, good for long term studies. - rely on participant
remembering and engaging. Experience Sampling Method (ESM)- diary w
prompts for action
 - Probes: self-documentation technique, a set of artefacts given to participants to
interact with. Prompts for action. After a while: back to the researcher,
capturing action and engagement.
- Interaction logs: using SW to record users’ activity, usually in combo w other
techniques. + not intrusive, automatic logging of data, ok for large volumes of
data. !ethical aspect. Logistics: visualization tools to handle large data and
statistical methods
- Data scraping: examining online trail of activity, focus on social media

● Other techniques
- Design thinking techniques: good to tackle wicket problems, key for innovation
(thinking outside of the box)
- Embodied design activities: 1st person experience, perspective and understanding,
immersion and engagement w contexts and users, empathy towards users, improves
communication and work, facilitate exploration of situations that might be hard to
observe, create from experience.

Key aspects to collect data:

Relationship w participants: clear and professional. IMP: data protection and informed
consent. Processing of personal data!

Processing of Personal Data & RGPD

Identifiers
Personal characteristics
Data ab family and personal circumstances
Academic and professional data
“Processing”: If we do interviews, or questionnaire, we are processing personal data. If we
access or have databases with personal data, we are also processing personal data.
Especially protected data: racial/ethnic, political, religious, health, sexual orientation

Pilot study
reduced version of the study, test your study protocol prior to the real study

Documentation techniques
important for posterior analysis and synthesis, some are auto-document themselves
(questionnaires, diaries, interaction logging) some dont (observations, interviews)

Sound data- reliable sources

Triangulation: investigation through at least 2 perspectives

Proposals within the design thinking field (slides)

- Interview preparation (how to): brainstorm questions, identify and order themes,
refine questions.
 - Interview for empathy (how to ): ask why, never say usually when asking a question,
encourage stories, look for inconsistencies, pay attention to nonverbal cues, dont be
afraid of silence, dont suggest answers
- Steps for interview
- Steps for group interview
- Steps for expert interview
- Extreme users and how to engage w them: determine who is, engage, look at the
extreme in all of us
- Extremes and mainstreams
- Immersion
- Guided tour
- How to assume a beginner’s mindset: dont judge, question everything, be truly
curious, find partners, listen
- Use what how and why
- Embodied design activities

6. Presenting synthetic knowledge. Briefing stakeholders. Embodied design techniques I

Embodied design activities

Representation, improvisation, re-enactment of daily activities of users

Who? the design team
Techniques: disentangling actions, frozen images, enactment of “personas”

Forum theatre: group of actor play a piece of theater, the audience suggest changes according
to their preferences.
Who? design team and actors
Techniques: scripts and improvisations, adaptable scenarios, pause and play

Enactment, improvisation
Who? design team and users
Techns: contextual inquiry+participatory design, scenarios created by users, users enacting
“present” and improvising possible futures, onsite and real time ideation and test

Design phases- Define

Define-what
Clarity and focus to the design process
Defining the problem, challenge, question
== sensemaking
Synthesizing info and insights (from empathize phase)
Developing a point of view or POV
making info actionable and guiding the design process
Define-why

Key in design process

The POV, problem statement, and vision of a preferred state
- Provides clarity, focus, direction
- Inspires the team
- Inform ideas
- Empower the team to make good decisions
- Capture the heart & mind of target user
- Focus on the concrete (not design for all)
- Establish “the right problem” – “designing the right thing”
- Key for quality and quantity of ideas in the next stage

Define-how

What stood out in the empathize phase (observations, conversations, interviews…)

Any pattern?Anything interesting? Why?
Develop and synthesize POV: user-need-insight

The user experience is the driving force behind the design

What do we need to communicate?

- Design context or problem space (who our users are, their goals, what where action
takes place, what tools techs users use, what problems,etc. )
- The envisioned user experience and design

Storytelling: illustrative and intuitive way to communicate ideas and experiences

Reflect real data as told by users, constructs based on results from field studies
Useful to keep user at center of design process, illustrate data, inspire design, ground and test
design concepts and ideas against

Personas: embody target user, made up, reflect empirical data, IMP: detailed description

Scenarios: informal narrative description of users’ activities, tasks and goals. Allows
identification of important aspects of design context. Everyday language, can include tech or
not.

Example: describing existing situation.

- Understand users’ practices and actions,
- explore limitations, context,
- help discover and concretize requirements

Example: describing a situation w a future technology

- Describe use case,
 - highlights users’ needs and key design aspects
- highlight possible problems of design solution

Personas and scenarios:

- Both use storytelling
- Common error: mix both
- Persona: characterize target user
- Scenario: describe situation ft that persona
- Tightly connected
- Often presented together

Maps to build common ground:

Building a common understanding of goals, user needs and behaviors, and component
processes through visualizations.
Combine: storytelling+visualization
To help teams understand and address users needs

1. Empathy mapping
Articulates what we know about a type of user.
It helps understand user’s mindset, creates a shared understanding of user type, helps in
decision making, builds empathy for users.
At beginning of design process, to help classify data from interviews

How? Split into key quadrants (says, feels, thinks, does), show user’s perspectives on actions,
behavior, tasks, related to product. Not chronological, 1 persona.

2. Experience map

Visualization of an entire end-to-end experience that “a generic” person goes through to

accomplish a goal
Not tied to a specific product or service
Early, to understand general human behavior
How? many diff types and complexity, chronological, not tied to specific product/service
4 popular lanes: phases, actions, thoughts, emotions
 3. Customer journey map
•“They illustrate a user’s path or journey through the product or service and are usually
created for a particular persona and based on a particular scenario, hence giving the
journey sufficient context and detail to bring the discussions to life”

- Analytic technique
To analyze both existing products and future products
To collect design issues
- Envisioning technique
Help designers consider and overall experience
Explore and question the designed experience

Focus on specific interaction w product or service

Visualization of process a person goes through to accomplish their goal w a particular
product
visualizes customer needs and pain points

Anytime in the design process, to create a shared understanding of the customer journey, take
ownership of key touchpoints.
How? many diff types and complexity, actions ordered chronologically in timeline, 1
interaction w product/service, captures diff issues. Tied to specific prod/serv, 1 persona.
Draw a timeline w goals and actions. Show user’s perspectives (mindset, thoughts, emotions)
4 popular lanes: phases, actions, thoughts, mindsets/emotions.
 4. Service blueprint

Counterpart to customer journey

Visualizes relationships service components and processes tied to touchpoints
Why? To discover weaknesses in organization, identify opportunities for optimization, join-
cross department efforts, shared organization-wide understanding of service provided
How? chronological and hierarchical, tied to service/product, focus on organization’s
perspective.
When? after customer journey, before making organizational/process changes
4 main lanes: customer actions, frontstage actions, backstage actions, and support processes
User stories

Feature and functionality planning.

Description of functionality from a user’s point of view, focused on what user wants to do
and how the feature will help.
Agile- method for SW project management
Captures what the product needs to do (useful to start conversations between stakeholders, to
plan sprints, basis of design)

Block of functionalities: functional (features), and non functional (usability and UX)
Consists in: description, time/effort estimation, verification test
Epics: complex user story (weeks or months), split into smaller efforts (user stories)
Tasks: spit user stories into smaller chunks
Epic format: As a <role>, I want <behavior> so that <benefit>.

Proposals within the Design Thinking field

1. 2x2 matrix how to
2. why-how laddering how to
3. POV how to
4. Design guidelines how to
5. How might we questions how to

7. Creativity and Design thinking techniques: divergent design. Embodied design

techniques II

Design thinking phases- Ideate

What? Idea generation, divergence: open up the design space, base to prototype, key for
innovation
Why? Early in design process, transition from identifying problems to creating solutions,
expand the possibility space
How? Balance between conscious and non conscious, rational thinking and imagination.
Techniques: brainstorming, building, sketching, body storming. Co-designing, building ideas
together, feeding on one another. Productive constraints, quantity over quality (quality comes
later)

Classical techniques

Brainstorming: define the problem or goal to envision the preferred state and possible
ultimate particulars. Gather relevant participants, visual, set the rules, no discussion, just
generation.
Prompts and timer:
• To guide thinking: “Let’s bring about ideas about X”
• To entice immediate action: “let’s bring about ideas about X, NOW!” “two more minutes!”
• To think out of the box. E.g. completely unrelated prompts: “write (post-it) the name of a
fruit: three, two, one, now!”

Analysis
- Affinity diagram: organization, arrangement and visualization of large amounts of
data. Data organized in groups and themes, hierarchically. Highlight differences and
similarities. Mainly inductive process.
Key in qualitative analysis:
- open coding: break data up into small and discrete bits of data, code each piece q a
descriptive label
- axial coding: find connections and relationships between codes. Group and condense
codes into broader categories
- selective coding: find overarching categories, identify connections between
categories, remove those w/o enough supportive data, back and forth between source
code and overarching categories

Embodied design activities

Brainstorming in the wild, in the context you are going to design for, who?design team.
Techniques: brainstorming, location as inspiration and prompt – divergent thinking, location
immediate feedback – convergent thinking.

Use Case Theatre. Who? design team. Techniques: role-playing, prompts and staging, scripts
to guide interaction, improvisation, wizard of Oz

Embodied sketching

Characterizes multiple design activities that use physical engagement of designers and other
stakeholders to generate and polish concepts.
It leverages the embodied experience of designers to understand, explore and design
experiences
Focus: sketching key aspects of the future experience through bodily engagement.
Early in design process.
Several roles: sensitizing participants, ideation (creating smthn from scratch), evaluation.
Participants: designers, users, stakeholders
Holistic and ecological design
Designing the whole activity through key actions or embodied core mechanisms, extended
repertoire of design resources. Movement and play: goals and means.

Sensitizing

Early in design process, pre-design activity.

Goal: sensitize participants, create a shared vocabulary, inspire new ways of thinking and
innovative ideas.
Who? designers and facilitators
Techniques: join engagement w a relevant activity, hands on exploration w relevant design
materials. Logistics: use of props and tools, selection of space. Facilitation and instruction.
Examples: Sensory explorations, previous to sensory bodystorming. Anti gravity yoga to
design for experiences that subvert gravity.

Bodystorming

Early in design process. Process driven by embodied core mechanisms and design resources.
Goal: open and populate the design space “embodied sketches”
Fast pace of ideation, focus on quantity.
Who? designers and facilitators.
Techniques: brainstorming (turn taking, co-creation, exhaustive exploration)
Logistics: space selection, props and tools
Envisioning (and faking) tech
Seeing problems in the moment and on site

Astire Project- embodied sketching

Designing of a hybrid mixed reality (MR) game.

Sensitizing through commercial VR games and warm-up games (physical, social, emotional)
Bodystorming: design resources, play w affordances of design resources, alter and experience
traditional ways

Proposals within the Design Thinking field (slides)

8. Design thinking techniques: divergent and convergent design. Prototyping.

Iteration key
Both in UCD and in Design Thinking: iterative design process

Divergence and Convergence are key

Through the whole design process. Some very characteristic of specific phases (ideation-
divergence). But both likely needed in all phases

Design thinking phases- ideation

- We have a good understanding of the current design context

- We have been delineating the preferred state (envisioning future situations and design
through HMW questions)
- We are using designerly tools (storytelling, maps, classical ideation e.g.
brainstorming, innovative design tools)
Next:
- From research, exploration of design context→ insight statements
- Vision of the future “preferred state”
- Important to find good HMW questions (not 2 broad not 2 narrow)
- HMW ideas → populate design space w design concepts
Now:
- Need to converge
- Select a design concept, from conceptual design → more concrete design
- Tools: sketching and prototyping
- First, filter, group and classify

Sensitizing and ideation→ divergent phase

Evaluation → convergent phase
Super Trouper Project- embodied sketching

Designing technology-supported activities for training for children with Sensory-based Motor
Disorder
- Sensitizing designers through sensory bodystorming
- Sensitizing end users: warm up games
- Bodystorming w designers
- Emergent bodystorming (end users)

Ideation: Convergent stage

Ideas are filtered, grouped, clustered, classified

Ideas are evaluated, compared, ranked
Some are discarded, some are selected
Those selected will initiate new divergent phases

Dot-voting
Write each idea
Give a num of votes to participants
Vote
Color variations possible: degree of preference, for traceability, to vote on aspects that need
prioritizing)
- Method 1: note-and-vote
- Method 2: heat map (similar to note-and-vote w/o formal vote
- Method 3: straw poll (vote with names, give rationale behind vote, to find personal or
team preferences)
Provide good number of dots, depending on num of ideas and participants
(+ideas→+votes, +voters→ -votes), clustering(- votes if clustered), and phase in design
process(early→ +votes, late→ -votes)
Pitfalls to avoid
- No parity between things
- Redundancies
- Poor understanding of concepts
- Mixing basic expectations with differentiators
- Not for pieces in the system
- Dont mix problems and solutions
- Careful w relationships between things voted on

Dot-voting pros
Prevents HiPPO effect, equal voice and contribution, converging expertise to inform
decisions, productive and time efficient, focus discussion on few prioritized possibilities,
shared material for discussion.
Dot-voting pros
Persuaded voting, split voting, group voting, anti-group voting, familiarity bias

Alternatives
Feedback frames
Anonymous voting with well structured rubric
Priorization matrix

Design thinking phases- prototype

What?
Iterative artefact generation
To answer questions: + broader at first, + concreted later
Anything that takes a physical form
Anything with which users can interact

Why?
To explore, inspire, ideate and problem solace, communicate, start a convo, test possibilities,
quickly fail and cheaply, bring you closer to end solution, manage solution-building process,
gain empathy.

How?
ID a variable- what is being tested
Prototypes act as filters
Start building
No big attachments
Build with the user in mind

Classical techniques

Sketch- distinctive way of drawing, handy tool for conceptual design.

Early in design process. To propose, explore and communicate ideas. Minimalistic.
Multiplicity and abundance (divergent phase)
AdvantagesÇ: quick and convenient, cheap, illustrative, thinking through sketching
Prototype vs sketch
Complementary, non interchangeable
Prototypes
Not a finished product, materializations of design concepts.
Economic principle: the best is the most simple and efficient
Act as filters
Different kinds, take many forms
From conceptual design to concrete design
Fidelity (refinement, details) depends on when in design process

Pros
Useful communication tool, proofs of concepts, quick revisions, improves design prior to
development, allows testing multiple design concepts

Cons
Not for errors and bugs, little specificity, not for usability studies, limitations, requires
facilitation

Wizard of OZ (WoZ)
Simulation of functionality, less costly than functional implementation, centers on
interactivity and experience

High fidelity prototype

Pros
Almost completely functional, interactive, centered on the user, clearly defines
navigation/interaction schema. Use: exploration, test, evaluation. Look and feel of final
product, a live or evolving requirement, tool for marketing and sales

Cons
More resources and development time, + costly modifications, not efficient as proofs of
concepts, can be mistaken for final product, unrealistic expectations
Prototypes- trade offs
Horizontal vs. vertical prototyping
Level of robustness vs. changeability

Wording in web design

Different: goal, stage in the design process and level of polishing:

Wireframe
• Cost: ↓ ↓ ↓
• Fidelity: low (- medium)
• Basic visual representation of the interface (structure)
• For: documentation and communication
Mockup
• Cost: ↓ ↓
• Fidelity: medium - high
• + precise representation: content, functions, look
• For: discussing with clients and investors
Prototype (Careful!)
• Cost: ↓
• Fidelity: (medium )- high
• Center on interactivity
• For: Usability studies, evaluations, UI design

Wireframes
Most basic prototype, design skeleton
Low fidelity: structure, main content, basic UI
Cheap and quick
Documentation and communication: center on functionality, not aesthethics
Wireflow== wireframe+flowchart. Screen by screen changes, center on interactivity, variable
resolution

Paper prototyping + WoZ

User studies, low fi wireframes, create the screens of each wireflow.
Roles: 1 wizard, 1 facilitator, the rest: annotating interaction, logistics

Mockups
Medium to high fidelity
Centered on aesthetics, more costly, requires specific SW
Discuss w clients and investors

Proposals (slides)

9. Prototyping and iterating the design. Design Crits and Internal Validation.

Design phases- prototype

Evaluations

2 kinds:
- Summative evaluation: when design is complete
To assess the success of the design solution. To polish, improve, fix a final design. To
discover bugs and usability problems, add new features.
- Formative evaluation: during design
Done with designs in different polishing states, to check design is on track, discover
new requirements and needs, to iterate the design

Expert review or critique

Constructive analysis to help improve design
Analysis of design, feedback of meeting objectives
Expert reviews product looking for potential problems
2 types:
- Standalone critiques
- Design reviews: researcher acting as end user, analysis of aspects of the interface,
identify potential usability problems, at any stage. (2 popular: heuristic evaluation,
cognitive walkthroughs)

Expert methods- Heuristic evaluation

Expert assess if elements of design fulfill heuristics: reflect high level design principles
(consistency, clear)
Critique: accuracy and precision, bias, lack of experience
How? choose right elements, several inspections, each interation: identify usability problems,
suggest solutions
Expert methods- cognitive walkthrough
From cognitive psychology. Simulation of a problem-solving process by user going through
each step of iteration.
Steps:
- Preparation: prototype + scenario of use & tasks (specifying sequence of actions)
- 1-2 UX experts do the analysis
- Annotate critical information: potential problems and solutions
- Design report and revision: problem prioritizing and propose solutions
How? write each of the steps to fulfill goal. For each step respond to questions ( will the user
know what/ how to do?), critical information. Final brief summary w problems and solutions.

Design crits
At any point, multiple through the process, if not used to it start soon and small, if used to it
bring external voices.
It is NOT brainstorming, user evaluation, user research.

Why? make sure we are on track, improve design by incorporating perspectives, internal
exposure beneficial and needed to avoid mistakes and for better designs. Affords change
before design is final. Less cost, time, energy. Supports team building, enables cooperation
and collaboration.
Roles: presenter, critiquer, facilitator
Approaches:
- Round robin: participants share perspectives one by one (democratic)
- Quotas: each participant has a number of pros and cons
- Presentation format: 1st questions then feedback
- Reverse/blind forma: 1st feedback then questions

Facilitator responsibilities:

- Time boxing
- Keeping focus and goal
- Filter feedback
- Negotiating and discussing tensions
- Promote equal participation
- Creating and distributing scope and agenda
- Ask right questions
- Reformulate questions
- Documenting discussion
- Wrap up and next steps

Presenting
Vulnerable position
Not take feedback personally
Mindset: improve your product
- Summarize
- Send your work beforehand
- Tell a story
- Request specific feedback
- Request follow up questions if needed

Critiquer
3-4 ppl
help presenter achieve design goal
- Ask clarifying questions
- Talk in terms of tradeoffs
- Empathize w presenter
- Be specific
- Advocate for the user and the project goal
- Provide directional suggestions, avoid problem solving
- Feedback or ideas beyond scope of design crit

10. Briefing stakeholders. Capturing and presenting a vision and design concepts.

Briefing and involving stakeholders

Why? To consider different possible designs, to choose between design alternatives, to make
design decisions, to get feedback/approval
Design decisions should be informed by:
- Empirical material (insights from field study, workshop w users and stakeholders)
- Expertise
- Project’s goals, constraints, etc.
- Ultimately: by the user experience

How do we reflect upon/ provoke an experience?

Personas and scenarios (tema 6)

Maps to build common ground: empathy map, customer journey map, experience map
(tema 6)
Service Blueprint (tema 6)

Others that materialize the design

Documentation
Traditional way to communicate design.
Too static, hard to capture the dynamics of behavior, IMP for an interactive product
Prototypes
“It involves producing a limited version of the product with the purpose of answering specific
questions about the design’s feasibility or appropriateness. ”
- Give a sense of the user behavior and experience
- Different kinds depending on stage in the design process
- Different goals spending on when in dessign process

To choose between alternatives

Stakeholders experience and interaction with design

- Observe them
- Discuss their experience, preferences, and suggestions for improvement
How? Designs materialized in a form that is accessible and understandable by stakeholders
But… how well can they help envision, feel, explore the envisioned design concept and user
experience? Other tools to assist: experience/embodied design methods

Experience prototyping

- Experience is dynamic, complex and subjective.

- It emerges and evolves.
- Depends on perceptions and on contextual factors
- Hard to reflect, capture, and represent by a single prototype
- Embodied design activities: 1st pers experience…(t5) forum theatre, enactment,
improvisation (t6) (temas 5 y 6)
- “Any kind of representation, in any medium, that is designed to understand, explore
or communicate what it might be like to engage with the product, space or system we
are designing”
- Includes: classical design techniques (storyboards, scenarios, sketches, protoypes)
- Instead of seeking passive engagement from stakeholders, they aim for an embodied
experience.
- They use embodied design methods and techniques
- Good to explore design options and to communicate ideas

Video prototypes

Use video to illustrate: future design concepts and features, how the user will interact, the
resulting experience-
Build on previous design tools: personas, scenarios and storyboards (foundation of video
prototype), prototypes, embodied design activities.
Why? fast, right fidelity (useful), focus on what matters, helps communicate and envision,
allows understanding and anticipate issues, co-create with viewers.
How?
- select concept to be prototyped
- bodystorming
 - prepare the storyboard (focus on 1 concept, make it short, capture key moment of
interaction)
- prepare the props (create lightweight props with basic affordances)
- Shooting (no need high quality)
- Prepare interfaces
- Post production (SW, adobe’s creative suite)

(Future) Concept videos

Different from video prototypes
Visionary videos designed to impress and inspire:
- narrative of future
- they may gloss over details of how the system works
- not possible: prototyping or testing with people
- efforts: aesthetics, visuals
- usually: get funding

Recommendations (slides)
- how to shoot videos
- how to edit videos

11. User experience and evaluation

Is my product usable / satisfactory if…?

Why? well-designed products:

- those that are usable, useful, sensorially pleasing, attractive
- that support a rich, pleasant, engaging experience
- that solve problems, respond to a need, support the users’ ways of being and doing or
facilitate new ways
Have a great value and can be sold well
To improve a product in a way that is informed, motivated, and well grounded (centered in
users’ needs, problems, and ways of doing)
To test that we are on track and that the product fulfills our goals

Design Thinking phases- Evaluation

Integral part in design process
Involves data collection and analysis
Different: we now have a prototype to evaluate/test/explore with users
Goal: evaluate user experience

UCD, Design thinking

Highlight an important aspect of UCD/DT approaches regarding the iterative process

Phases that lead to earlier ones
Not just evaluation → design solutions
But also, evaluation → understanding context

When? At different times

- Formative evaluation: during design process
Check design is on track, discover new requirements and needs, iterate design, with
designs in different polishing state
- Summative evaluation: when design is complete
to assess the success of the design solution. To polish, improve, fix a final design
How?
Use known tools:
- T5 interviews, questionnaires, focus groups, observations, ethical considerations
- T8 protoypes
- T9 external and internal validation: design crits, expert methods
- T10 experience prototyping and video prototypes

Evaluation steps:

- Define the goal

- Design an evaluation protocol: prototypes, location, study, data collection, define user
tasks, roles, logistics.
- Pilot test
- Participants research
- Conducting the evaluation
- Documenting the evaluation
- Analysis
- Insights and takeaways

Evaluation goals:

Check that the design fulfills its promise

Depends on specific goals → different kinds of evaluation
Main goal: will it be used? will it help users do…? will it support users feel? will it offer
users a new way to do / feel?

What can be evaluated?

- Designs, solutions, services, products.

- Prototypes
- Different level of refinement and polishing: from all kinds of prototypes to final
design
- Different scope and focus: from concrete design aspects to whole system
Where?

- It depends on the goal of the evaluation and what’s evaluated

- In lab studies: to assess usability aspects, specific design features. More control over
variables such as external estímulo. Less artificial experience
- “In-the-wild” studies: in target place where action will take place, to assess user
experience. More realistic, Less control over variables.
- Remote studies: moderated/ non-moderated
- Mixed solutions- e.g. living labs

Evaluation types:

Many. Depends on kind of product, prototype, design concept, objective for designers
With users: observing or interacting
- Controlled environments: lab
- Natural environment: in the wild
Without users: expert studies, behavior modeling and analytics.

Controlled User Studies

● Experiments
From experimental psychology
Hypothesis
Generally in controlled spaces: eliminate confounding variables, study effects of particular
feature, same study protocol

● Usability studies
Mainly in lab
Goals: study how specific users fulfill specific tasks, and what they think/feel
Qualitative and quantitative methods: video recordings of users interactions with design,
questionnaires, interviews

Measures regarding performance and acceptance/satisfaction degree: efficiency (time),

efficacy (error rate), easy to learn ( training/learning time, time of task completion after X
training), user’s experience/perception and satisfaction (scores and ranges in questionnaires)

Established and accepted questionnaires: User Experience Questionnaire (UEQ) (measures

opposite pairs of different aspects)

SUS: System Usability Scale. 10 questions, 5 point likert scale, alternating positive and
negative bias. Score 0-100 (>68 acceptable usability). Quick and easy to do, OK for small
samples.
Other established questionnaires: Computer System Usability Questionnaire (CSUQ),
Questionnaire for User Interface Satisfaction (QUIS), Perceived Usefulness and Ease of Use
(PUEU), After Scenario Questionnaire (ASK), Technology Acceptance Model (TAM).

● Studies with users in natural spaces

In-the-wild studies
less control, more ecological validity
Goals:
- Ecological and situated study of the reception, usage, and experience of a
design/technology
- Study use and experience in new contexts or with new user groups
- Identify design opportunities
- Evaluate requirements and establish new ones
Qualitative and quantitative methods: observations, recordings, interviews
Some collected by researchers (observations), others by participants (diaries), other
“automatic” (data logs)

● Without users present

Why? often to complement evaluation w users. At times it is not practical or feasible
involving users, no time, difficult to find users. It is NEVER a substitute.

Often with experts that provide feedback ab potential issues

Different spaces: often in lab, online
Based on understanding of users through: knowledge coded in heuristics, data remotely
collected, users’ performance models.
Imagine or model how the interface will be used and its effects

Kinds
- Inspection methods (design reviews): investigator, acting as users. Inspect design
aspects and identify potential problems
- A/B testing: comparative experimental method. Usually remote. Random experiment
with 2 variables, one is control variable, other is modified variable. Comparing effect
of both in users’ actions and experiences. Same instructions. More control, less
artificial situations.
- Analytics: User Interaction Logging
- Predictive modeling: analysis of physical and mental operations needed to fulfill the
task under study, operationalized w quantitative metrics

Innovative embodied and experimental techniques

Embodied sketching (tema7)

- Sensitizing
- Body storming
- Participatory embodied sketching:
 When? prototype. Prior to production, commercialization, release.
Goals: evaluating and iterating the prototype
Semi-structured activity: free exploration and guided activities
Results: unexpected uses, prototype test, exploration of modifications, design.

- Super Trouper Project ( sensitizing, bodystorming with stakeholders)

- Experience prototyping (t10)
- Video prototypes (t10)

Pilot study

Reduced version of the study that is tested before the real study.
- Test protocol, equipment, instructions, questions…
- Difficult with real users, then with other partners
- Identify problems and learn from mistakes
- Iterate the study protocol

Recommendations for analysis and synthesis ( slides )

Pros and cons of evaluation types

• In the lab studies

+ usability problems
- capturing context of use, information about complex experiential aspects
• In-the-wild studies
+ ecological and situated validity: how people use technology in real situations
- time, logistics…
• Models and predictive evaluations
+ faster
- missing (usability, user experience)
• Analytics
+ capture usage well (e.g. Web)
- don’t capture what users feel, their experience, why they behave as they do…

Final considerations

Validity
- General (rigor and validity) about the method and how it is implemented
- Replicability (validity and generalizability)- same results in different tests under same
condition
- Ecological validity- considers how the environment affects the evaluation and results

Bias: always there, think about how to mitigate it

Scope vs generalizability power
Methods and tips (slides)
Case studies (slides)

12. Final Considerations: engaging stakeholders with a design vision. Critical analysis

Implementation phase

● Roadmap
Timeline and plan of action to get your idea into the world. Helps keep on time and on target
● Resource assessment
What is going to take to execute idea. Understand feasibility of the solution.
● Build Partnerships
Getting partners to help to get concept to market
● Ways to grow framework
Understand whom your design solution is for and what implementation will look like.
● Funding strategy
Get the money needed to get the solution off the ground
● Pilot
Longer-term test of the solution and a critical step before going to market
● Keep iterating
Testing, getting feedback, and iterating will help get a great solution to market and let you
know where to push it when you do
● Create a pitch
Great way to communicate your idea, how it works, why it counts and who it benefits to
funders, partners, consumers, etc.
● Monitor and evaluate
Design the ways to measure and grow your goals
● Keep getting feedback
Never ending process and critical as you push your idea forward

What have we done?

We have experienced a cycle in the UCD (User-Centered Design) process
• Field study / User research
• Design phase
• Implementation / Prototyping
• Briefing stakeholders
• Deployment & user study

Present and future interactive technology and applications

Tools to critically reflect upon technology & socio-technical systems:
• Concepts, e.g., affordances
• PACT model
• Analysis of futuristic scenarios