Contextual Design - Understanding Users for Effective Design

Authors: Karen Holtzblatt, Hugh R. Beyer
Year: 2021
ITPDP26 - Design Rationales and Models.pdf Open PDF
Show converted presentation markdown

DESIGN RATIONALES AND MODELS

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

AARHUS UNIVERSITY

WHERE ARE WE NOW?

==> picture [451 x 254] intentionally omitted <==

==> picture [142 x 21] intentionally omitted <==

----- Start of picture text -----
DEPARTMENT OF COMPUTER SCIENCE
AARHUS UNIVERSITY
----- End of picture text -----

==> picture [184 x 15] intentionally omitted <==

----- Start of picture text -----
ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN
25. FEBRUARY 2026 LAB COORDINATOR
----- End of picture text -----

==> picture [36 x 35] intentionally omitted <==

WHAT TO DO NOW (THIS WEEK)?

You should now do:

  • Read literature for week 5 - and earlier weeks ;-)

  • Your own inspirational work – edging closer to final Problem Area decision.

  • Start planning empirical work. Requires narrowing down user group.

  • Tooling exercises.

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

STATUS AND MESSAGES

Monday trip!

How is it going?

Context, theme, subtheme, user group?

Any observations done? Places visited?

Choosing your topic? Done? Close?

Any questions?

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

SUB-ASSIGNMENT 1

  1. Motivation for choice of subtheme, context and user group.

  2. Initial positioning in relation to the theme (read some inspirational literature, introduce the field/theme and draw parallels + point out differences in approach)

  3. Tentative problem formulation (what will you actually do in this project, what are your tentative hypothesis around practice and use, and what could help/fix/better/enhance this?)

  4. Preliminary plan for your user research (who, when, what, how? Plans, contacts, emails, methods to try - this can be added as appendix if needed, but make sure to keep it concise).

DEPARTMENT OF COMPUTER SCIENCE

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

DESIGN RATIONALES AND MODELS

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

AARHUS UNIVERSITY

IN TODAY’S LECTURE

What is a design rationale?

Design Spaces

Contextual Design

Personas – representing users and roles

Working models

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

WHAT ARE IMPORTANT ASPECTS OF A GOOD DESIGN PROCESS? (2 MINUTES)

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS 25. FEBRUARY 2026

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

Result? The users liked it? The designer is proud of it? Sticking to the budget? Listening to the users? Getting paid? Getting promoted? Getting recognition? Teamwork? Fun? Cake every Friday? Societal impact? Many daily users?

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

ITPDP - RATIONALE AND MODELS 25. FEBRUARY 2026

A happy customer? Spearheaded by a hotshot? Spoken about in the media? Using the newest technologies? Being completely unique? Involving the user every step? Sales after launch? Scalability? Handover? Celebrating when it’s done? Instagram Influencers loving it? Trustpilot score? Certifications?

==> picture [36 x 35] intentionally omitted <==

WHAT IS THE MOST CRUCIAL ASPECT OF A GOOD DESIGN PROCESS?

DEPARTMENT OF COMPUTER SCIENCE ITPDP - RATIONALE AND MODELS 25. FEBRUARY 2026 AARHUS UNIVERSITY

==> picture [36 x 35] intentionally omitted <==

DOCUMENTATION!

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

ITPDP - RATIONALE AND MODELS 25. FEBRUARY 2026

==> picture [36 x 35] intentionally omitted <==

WHY?

Design processes are long and complex, and involves many variables and parties

You often do not nail it the first time

Iterations and Fluidity

Learning and revisitability

DEPARTMENT OF COMPUTER SCIENCE

SIMON HOGGAN CHRISTENSEN LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

ITPDP - RATIONALE AND MODELS 25. FEBRUARY 2026

DESIGN RATIONALE

A survey paper of representation methods for Design Rationale For this lecture we focus on understanding the concept (sect 1-3)

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS 25. FEBRUARY 2026

SIMON HOGGAN CHRISTENSEN LAB COORDINATOR

AARHUS UNIVERSITY

DESIGN RATIONALE (LEE AND LAI)

To document genealogy (tracing of lineage) of a design’s final appearance and the decisions that lead to it

To link issues to formal design decisions (example: global menu to reduce screen clutter)

Document selection and de-selection arguments

  • Supporting and counter arguments on issues for the design

May lead to generalizable patterns and reusable design-decision relations (Fischer 1991)

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR AARHUS UNIVERSITY

==> picture [36 x 35] intentionally omitted <==

WHAT IS DESIGN RATIONALE?

Design rationale is write-down of arguments and decisions made during a design process, and the reasons for why those arguments were brought up, and the decisions were made. Primary goal is to support designers by providing a means to record, describe, justify and communicate the argumentation and reasoning behind the design process (MacLean 1991), including but not limited to:

  • The reasons behind a design decision

  • The justification for a design decision

  • The other alternatives considered

  • The trade-offs evaluated

  • The argumentation that led to the decision (what if the argument was BS?)

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

WHAT IS DESIGN RATIONALE?

“Design rationale in the most general sense is an explanation of why an artifact is designed the way it is”

  • LEE AND LAI, 1992

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

==> picture [36 x 35] intentionally omitted <==

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [294 x 376] intentionally omitted <==

DESIGN SPACE

Design Space is a representation of alternative design options + analysis of pros/cons and relations.

From MacLean 1989:

“The design space consists of a decision space (alternative options which might be appropriate}, and an evaluation space(explicit reasons such as consistency and criteria for choosing from among the possible options).”

==> picture [36 x 35] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

AARHUS UNIVERSITY

==> picture [314 x 369] intentionally omitted <==

DESIGN SPACE

Evaluation Space

Mapped differently in a lot of HCI literature… Issue (and Design Rationale) being the most impactful difference from Lee and Lai, adding potential issue handling to your argument space.

Design Rationale vs Design Space

Design Rationale describes the Design Space (MacLean).

Using for example the QOC model to represent Design Space options, generates Design Rationale.

Interesting possible exercise: Part of group specs decision space, another the beginning of evaluation space

==> picture [36 x 35] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

ITPDP - RATIONALE AND MODELS 25. FEBRUARY 2026

SIMON HOGGAN CHRISTENSEN LAB COORDINATOR

==> picture [314 x 369] intentionally omitted <==

DESIGN SPACE

Long story short:

The map metaphor is a bit funky…

Think of products as clusters (buildings) on the map. The Design Space is the entire map, linking (making roads) and including/excluding certain alternatives (neighbourhoods).

QOC model used extensively in this process, and sticking to just this might be simpler.

==> picture [36 x 35] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

AARHUS UNIVERSITY

THE QOC MODEL

Developed by McLean at Xerox PARC A brilliant comparative tool Helps map Design Space Part of your Design Rationale

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

==> picture [525 x 326] intentionally omitted <==

==> picture [36 x 35] intentionally omitted <==

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

PARKING GATE: SAME CORE FUNCTIONALITY, SAME QUESTION – DIFFERENT DESIGNS

==> picture [329 x 247] intentionally omitted <==

Pay-by-plate is a radical change within/of design space

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

21

DESIGN SPACE

==> picture [401 x 349] intentionally omitted <==

----- Start of picture text -----
evaluation space
“How does the user
pay for parking?”
Pay-by-plate Privacy
Ease
Machine
Culture
with card
decision space
What happens if
user has lost ticket?
ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN
25. FEBRUARY 2026 LAB COORDINATOR
----- End of picture text -----

==> picture [142 x 21] intentionally omitted <==

----- Start of picture text -----
DEPARTMENT OF COMPUTER SCIENCE
AARHUS UNIVERSITY
----- End of picture text -----

==> picture [36 x 35] intentionally omitted <==

DESIGN SPACE

Is useful for emplacing your design and the alternatives/related design (for analysis, juxtaposition and distinctions)

Is useful for expanding horizons and taking different/novel interactions/systems into account.

It is a concrete way of making constraints visible and impactful in design

  • For example through questions or criteria in QOC

DEPARTMENT OF COMPUTER SCIENCE ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR AARHUS UNIVERSITY

==> picture [36 x 35] intentionally omitted <==

THE ROLE OF A DESIGN RATIONALE

Support and capture the design argumentation during a design process

When iterations occur, designers can go back and avoid mistakes or decisions already tested and rejected

Argument for why the final design appear as it does and support for designing the next version of the product

  • A formerly too expensive or too clunky solution has become feasible in the mean time, and the process can be started from better position

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

24

REPRESENTATIVE QUESTIONS

Made by Lee and Lai to provide a framework for assessing different representations Since it’s used to assess representations/models way of making Design Rationale; Also a brilliant set of questions to help your design rationale and status meets Can be used as a part of sit-down meetings to organize your team’s thoughts Not all representations and models answers all questions

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

REPRESENTATIVE QUESTION SET EXAMPLE

Italic: Maybe for status meets? Orange: Maybe for Ideation and Concept Dev.?

What are our user’s biggest issues? What are our biggest issues? What is the status of the current design?

What did we discuss last week and what do we need to do today/this week? What are alternative designs and what are their pros and cons?

What if we do not consider power/portability/user interface/GPU muscle/CPU muscle? Which issues are inherently linked?

What would the consequence of removing this aspect/part be? Which unresolved issues do we still have?

How do past designs or other fields deal with a similar issue?

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

WHY IN ITPDP?

Tools, representations, models to help keep track of design documentation Help structure solved problems and the user-centric elements of your design Graphical representations to use for the report, that shows field knowledge if used correctly. Future work for your report Preparation for your exam

Avoid having to say “… I don’t know we why did that, actually…” J DEPARTMENT OF COMPUTER SCIENCE ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

SUMMARY

Make sure to document your design issues, positions, arguments with decision. Use it for your internal discussions. And for feedback. And for the report. And for the demo.

When a reviewer ask ”why didn’t you put that button on the top instead of here?” Your design rationale will help you provide the answer.

  • the answer may be feasibility of construction, or the occurrence of accidental push during an evaluation or.

  • If you don’t have an answer, then the design may appear coincindental and not well argued…

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

CONTEXTUAL DESIGN AND CONTEXTUAL INQUIRY

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS 25. FEBRUARY 2026

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

CONTEXTUAL DESIGN

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS 25. FEBRUARY 2026

SIMON HOGGAN CHRISTENSEN LAB COORDINATOR

AARHUS UNIVERSITY

CONTEXTUAL DESIGN (BEYER & HOLTZBLATT)

User-centered design process

Focus on collecting and interpreting data of users in the field Focus on creation of prototypes and systems as end goal

“…Understand users in order to find out their fundamental intents, desires, and drivers. But these are invisible to the users - so the only way to glean this is to go out in the field and talk with people.”

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

CONTEXTUAL DESIGN (BEYER & HOLTZBLATT)

Step-wise method and principle-based

  • Especially helpful for people who will not specialize in field study

  • Fits into a software development cycle; products of field study work made visible

Guides analyst on how to understand & document what he/she sees

Not really users as co-designers

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

CONTEXTUAL DESIGN (BEYER & HOLTZBLATT)

Principle: System design must support and extend users’ work practice

Behavior, attitudes, goals, and intents of users; all part of work practice.

Work practice is part of the larger context – so is technology. Any and all system/tech change will impact work practice.

DEPARTMENT OF COMPUTER SCIENCE

==> picture [36 x 35] intentionally omitted <==

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

AARHUS UNIVERSITY

CONTEXTUAL DESIGN (BEYER & HOLTZBLATT)

Principle: People are experts at what they do – but are unable to articulate their own work practice

Field work = crucial to pick up on these practices/tendencies/events. Tacit knowledge. Multiple methods can help with this – participate in natural context.

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

CONTEXTUAL DESIGN (BEYER & HOLTZBLATT)

Principle: Good design requires partnership and participation with the users

Designers = experts in design. Users = experts in work practice. Partnership = proper design focused on context and practice. Step in and do your part – ask questions, offer interpretations!

DEPARTMENT OF COMPUTER SCIENCE

==> picture [36 x 35] intentionally omitted <==

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

AARHUS UNIVERSITY

CONTEXTUAL DESIGN (BEYER & HOLTZBLATT)

Principle: Good design is systemic

Good design considers the system as a whole, and it’s impact on it. Methods can support generating overview of possible outcomes and implications. Treat issues and problems to be solved as a part of the whole.

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

CONTEXTUAL DESIGN (BEYER & HOLTZBLATT)

Principle: Design depends on explicit representations

Use drawings, sketches, prototypes, mock-ups, models, videos, animations etc. Visual representation is key and makes design thoughts sharable.

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

CONTEXTUAL DESIGN PROCESS

==> picture [574 x 320] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

CONTEXTUAL INQUIRY - FIELD STUDIES

Often two elements: Direct Observation and Interviews (+ Contextual Interviews (TBA))

Field studies are useful to understand:

  • The use context

  • Challenges and potential value added by a new design

  • People and their roles (end-user, indirect user, manager)

  • Features of the place/space

  • Understand the activity that you want to support

  • Communications and patterns of interactions

  • Local culture

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

WHAT ARE FIELD STUDIES?

It is not simply “hanging out” with users Field studies are (and requires the analysists to be):

  • Systematic and careful

  • Without assumptions (as much as possible!)

  • Thoughtful

  • Respectful

  • Productive!!

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

WHY FIELD STUDIES?

“Ground” designs in real activity, not assumptions

Do NOT falsify empirical data…

Helps understand “situated activity” not “rationalized accounts”

  • See exceptions, exception handling, mechanics

  • User behavior needs to be understood at a low-enough level to design for it

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

AN EXAMPLE FROM DEVELOPMENT OF “FINDING NEMO”

==> picture [402 x 296] intentionally omitted <==

“Finding Nemo”-movie animators had to ”ground them selves” by practicing scuba diving to become familiar with under water phenomena in order to be able to draw and animate them.

==> picture [36 x 35] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

AARHUS UNIVERSITY

BASIC RULES & PRINCIPLES

Be an apprentice:

Carefully frame questions

  • Be polite –> the user is the expert in their domain

  • Be humble –> assume you don’t understand something

Be open-minded

  • Expect to see a lot of things you didn’t think you would

Check interpretations;

  • Do not ask leading questions

  • Do not ask Yes and No questions

  • Focus on getting concrete data

Don’t be too narrow… Don’t be too wide

  • Begin by observing more WIDELY than defined problem(!)

  • REDEFINE boundaries of problem

  • Work within that new “unit of analysis”

  • Reflect back to user; debriefing

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

INTERVIEW TECHNIQUES

In interviews – be concrete and relate to daily work examples

  • Ask about examples from yesterday or last week

  • Critical Incident Technique , Wendy Mackay (expanded upon next slide)

  • Page 7: https://www.lri.fr/~mackay/VideoForDesign/print/print.pdf

Exceptions are as important as the routine situation

  • Listen to user anecdotes and workarounds

  • Exceptions may reveal important requirements and conditions – or just common practice

Be aware of potential intention conflicts (culture/hierarchy)

  • Different user groups (or levels) do not necessarily share the same experience/intention

==> picture [36 x 35] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

AARHUS UNIVERSITY

EXAMPLES FOR CRITICAL INCIDENT TECHNIQUE

Ask for a concrete, critical incident

  • Positive: Can you remember the last time when you were really happy with the UI?

  • Negative: What happened the last time when you very disappointed by the system?

Let the user go through the entire scenario

  • Positive: Identify useful features and design rationales

  • Negative: Identify break down scenarios

Ask for as many details as possible

Ask why this situation was in particular memorable

Do not ask suggestive or general questions

  • Why is this UI so good?

  • E.g., Do you like the UI?

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS 25. FEBRUARY 2026

SIMON HOGGAN CHRISTENSEN LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

RECORDING YOUR DATA

Notes Pictures (get consent, adhere to GDPR regulations) Video (get consent, adhere to GDPR regulations) Sound (get consent, adhere to GDPR regulations) Sketches and drawings Scenarios (post hoc description) Notes on roles/personas

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

46

FIELD STUDIES - PREPARATION

You have already done some observations (right?) – but mainly inspirational!

For future field work:

Secure permission to be at the site

Plan ahead, don’t expect to get into calendars quickly – it’s good to have a foot in the door someway You want to observe the natural workflow of your users:

  • Ask that users not “clean up” their desks or desktops, calendars, and so on because you will be there. Politely explain that you want to see things as they normally occur

  • Prepare and test all data recording equipment

On arrival, be professional, courteous and patient. Remember that you are a guest. Some might see it as additional workload.

DEPARTMENT OF COMPUTER SCIENCE ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR AARHUS UNIVERSITY

==> picture [36 x 35] intentionally omitted <==

CONTEXTUAL INTERVIEWS

Not your typical Q&A interview

  • A mix of observation & questions

Who to interview: those doing the work, not just management

  • 2-3 hours of observing a user work, including “shadowing” them around the workplace

  • Observe the natural flow of activity and occasionally interrupt to explain and clarify what they are doing.

  • You can ask users to “think aloud” to understand their thought process.

  • Your questions are guided by what you see.

Recording: Notetaking, audio record, and perhaps video-record

Save the last 15 minutes with the user to review what you learned

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

HINTS AND ADVICE

Good idea to combine techniques

  • Observation and Interviewing have different strengths and weaknesses

  • Combination ensure quality of investigation

From pure analysis to design oriented activities

  • Scenario and mock-up design may reveal useful knowledge about current state of affairs

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

PERSONAS

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

ITPDP - RATIONALE AND MODELS 25. FEBRUARY 2026

==> picture [36 x 35] intentionally omitted <==

50

PERSONA

Persona is personified but generalistic. Not the same as an archetype (abstract) or a person (individual). A persona description gives details about the user group(s) you are designing your interactive system for It highlights the group specific requirements and context associated with persona.

More on that in lecture: Sketching User Experiences (Minna) https://www.interaction-design.org/literature/article/four-different-perspectives-on-user-personas DEPARTMENT OF COMPUTER SCIENCE ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

51

PERSONA

Sub-assignment 2

==> picture [404 x 200] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

52

– PERSONAS EXAMPLES A TRAVEL APP

DEPARTMENT OF COMPUTER SCIENCE ITPDP - RATIONALE AND MODELS 25. FEBRUARY 2026 AARHUS UNIVERSITY

==> picture [36 x 35] intentionally omitted <==

53

DEPARTMENT OF COMPUTER SCIENCE ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR AARHUS UNIVERSITY

54

55

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

56

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

25. FEBRUARY 2026
ITPDP - RATIONALE AND MODELS
LAB COORDINATOR
SIMON HOGGAN CHRISTENSEN

USE OF PERSONAS

Analyze and reveal requirements for system/app design from different perspectives (use scenarios, drivers, intent) Integrate in scenario descriptions (later assignments) Use persona description for your new design (or styling) Utilize for prototyping and evaluation planning

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

==> picture [36 x 35] intentionally omitted <==

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

57

REMEMBER THE NOT-AVERAGE

”Extreme characters” (also used for ‘Ideation’ later in the course) Extremes in travel app

  • The passionate business person and car-driver that almost never use public transportation

  • • Elderly who do not have knowledge of smartphones

==> picture [320 x 253] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

CONTEXTUAL INQUIRY – PROCESSING RESULTS

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS 25. FEBRUARY 2026

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

GOT DATA? NOW WHAT?

Create “models” that capture the data (order different from literature)

  1. Physical Model:

a map of the site with details about equipment location

  1. Flow Model:

Depicts work-flow between users/personas

  1. Sequence Model:

Depicts work tasks

  1. Artifact Model:

Describes the tools that people use to complete tasks

  1. Cultural Model:

Captures bigger context of cultural factors that influence how things are done

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

PHYSICAL MODEL – HOTEL CASE

==> picture [383 x 232] intentionally omitted <==

Map of site with important features

Include digital photographs to elaborate Include traffic and potential “incident” areas or bottle-necks.

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

FLOW MODEL

Represents how work is divided & coordinated Flow models for different types of workers

    1. Diagram who is involved in the work
    1. Show communication flows between people, and how those communications are achieved (through invoices, face-to-face, messages)
    1. Mark breakdowns in communication & coordination

DEPARTMENT OF COMPUTER SCIENCE

==> picture [36 x 35] intentionally omitted <==

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

AARHUS UNIVERSITY

FLOW MODEL – HOTEL CASE – STEP 1: ROLES

  • Define Personas (+tasks) in circles

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

==> picture [500 x 346] intentionally omitted <==

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

  • FLOW MODEL – STEP 2: FLOW - Define Personas in circles

  • Define Artifacts in squares

  • Define Relational Actions with arrows

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

==> picture [184 x 15] intentionally omitted <==

----- Start of picture text -----
ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN
25. FEBRUARY 2026 LAB COORDINATOR
----- End of picture text -----

SEQUENCE MODEL

Represents work tasks by point of view (POV), shown as a sequence of steps of actions

Diagram:

  1. Intent/Purpose of the action sequence

  2. Trigger that causes the action to start

  3. The steps that achieve the intent

  4. Breakdowns/problems in getting the task done

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

SEQUENCE MODEL EXAMPLE – HOTEL BOOKING

Diagram:

  1. Intent/Purpose of the action sequence

  2. Trigger that causes the action to start

  3. The steps that achieve the intent

  4. Breakdowns/problems in getting the task done

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

ARTIFACT MODEL

Artifacts are the things people use in to complete a tasks (documents, maps, notes, the web, spatial layout of items when planning something)

    1. Collect artifacts, pictures of artifacts
    1. Check with customers that you understand what they are for
    1. Annotate these to identify in detail their functions

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

ARTIFACT EXAMPLE – HOTEL DIARY

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

==> picture [184 x 15] intentionally omitted <==

----- Start of picture text -----
ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN
25. FEBRUARY 2026 LAB COORDINATOR
----- End of picture text -----

ARTIFACT EXAMPLE

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

CULTURAL MODEL

Understand the local culture and the cultural assumptions. This is the broader context.

For each point of view

  1. Start with each “influencer”—different groups of people, organizations, institutions—that affect how that person understands and does their work 2. Arrange these as bubbles or balloons that have different scope reflecting how much influence they have on the worker

  2. Identify breakdowns

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR AARHUS UNIVERSITY

==> picture [36 x 35] intentionally omitted <==

==> picture [471 x 420] intentionally omitted <==

----- Start of picture text -----
ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN
25. FEBRUARY 2026 LAB COORDINATOR
----- End of picture text -----

CULTURAL MODEL - EXAMPLE

Goals and relationships between user groups and organizational values Constraint focused

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

MODEL EXAMPLE EXERCISE!

Group 1, 2: Physical Model example of FORMLab or PROTOLab Group 4, 5, 6: Flow Model example from (one of) your jobs Group 7, 8, 3: Sequence Model example from a recent novel interaction/experience Group 12, 13, 16: Cultural Model example from a community Group 20, 11: Artifact Model 3 x examples of tools for work activities from your life (can be pictures) or Google J

15 minutes, then quick presentations.

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

SUMMARY:

The 5 models capture:

  1. How the physical environment supports the work [Physical model]

  2. The people, their relationships, and their communications [Flow models]

  3. How tasks are carried out [Sequence models]

  4. How artefacts support the work or are processed as part of the work [Artifact models]

  5. How work is constrained by organizational values [Cultural models]

DEPARTMENT OF COMPUTER SCIENCE

==> picture [36 x 35] intentionally omitted <==

ITPDP - RATIONALE AND MODELS SIMON HOGGAN CHRISTENSEN 25. FEBRUARY 2026 LAB COORDINATOR

AARHUS UNIVERSITY

SUMMARY

DEPARTMENT OF COMPUTER SCIENCE ITPDP - RATIONALE AND MODELS 25. FEBRUARY 2026 AARHUS UNIVERSITY

==> picture [36 x 35] intentionally omitted <==

74

SUMMARY

Document your design and design rationale!

Design needs to take the user, the context, and constraints of the problem domain into account Thus, user involvement in design is important.

Prepare for design through contextual inquiries

  • Capture your understanding in the five models, personas and scenarios

  • Triangulation

Later envisionment through prototyping become essential

  • Based on contextual inquiry models, personas, and scenarios

Plan your field study methods carefully - get help from TAs

DEPARTMENT OF COMPUTER SCIENCE

ITPDP - RATIONALE AND MODELS 25. FEBRUARY 2026

SIMON HOGGAN CHRISTENSEN LAB COORDINATOR

==> picture [36 x 35] intentionally omitted <==

AARHUS UNIVERSITY

==> picture [783 x 440] intentionally omitted <==

L4_Understanding Users & The Empathic Designer _2026.pdf Open PDF
Show converted presentation markdown

==> picture [97 x 41] intentionally omitted <==

UNDERSTANDING USERS & THE EMPATHIC DESIGNER ITPDP’26, L4

==> picture [152 x 296] intentionally omitted <==

Minna Pakanen

Department of Digital Design and Information Studies mpakanen @cc.au.dk

16[TH ] FEBRUARY 2026

MINNA PAKANEN

TODAY

  • Designers role

  • Empathic Designer

  • Understanding users

16[TH ] FEBRUARY 2026

MINNA PAKANEN

16[TH ] FEBRUARY 2026 MINNA PAKANEN

DESIGNERS ROLE

Harold G. Nelson & Erik Stolterman (2003) The design way. Intentional Change in an Unpredictable World. Foundations and fundamentals of design competence

16[TH ] FEBRUARY 2026

MINNA PAKANEN

5

DESIGN AS SERVICE RELATIONSHIP

  • A dynamic service relationship between service provider (designer) – those being served (clients, surrogate clients, customers and end users)

  • Design is about service on behalf of the other

  • The clear difference between traditions of design vs. art-science

16[TH ] FEBRUARY 2026

MINNA PAKANEN

==> picture [97 x 41] intentionally omitted <==

Own curiosity/ Own need for passion for knowing self-expression Self-serving

==> picture [72 x 35] intentionally omitted <==

‘Serves’ the client? Other-serving

MINNA PAKANEN

16[TH ] FEBRUARY 2026

DESIGNER AS SERVICE PROVIDER

  • Being in service does not mean

  • being a servant, or subservient

  • acting as a mere facilitator on behalf of someone else’s needs

  • service to exclude self-expression, but it is not as dominant as in art-science

  • Service is not about helping people to create what they already know they want

16[TH ] FEBRUARY 2026

MINNA PAKANEN

==> picture [97 x 41] intentionally omitted <==

Desiderata? & Designer’s role in it?

16[TH ] FEBRUARY 2026

MINNA PAKANEN

==> picture [171 x 171] intentionally omitted <==

==> picture [157 x 157] intentionally omitted <==

==> picture [171 x 171] intentionally omitted <==

==> picture [137 x 137] intentionally omitted <==

==> picture [171 x 159] intentionally omitted <==

==> picture [202 x 203] intentionally omitted <==

==> picture [160 x 159] intentionally omitted <==

==> picture [188 x 189] intentionally omitted <==

16[TH ] FEBRUARY 2026 MINNA PAKANEN

DESIDERATA

==> picture [39 x 39] intentionally omitted <==

==> picture [93 x 86] intentionally omitted <==

  • The success of the design process can best be determined when those being served experience the surprise of self-recognition

==> picture [106 x 109] intentionally omitted <==

  • → when the outcome of the design process meets and exceeds the client’s original expression of what is desired (usually only dimly perceived) is known as the client’s desiderata

==> picture [75 x 75] intentionally omitted <==

==> picture [85 x 85] intentionally omitted <==

  • The designer’s role is to midwife that desiderata!

  • Not fully imagined from the beginning, by either client or designer

  • to provide end results in the form of an expected unexpected outcome

==> picture [64 x 64] intentionally omitted <==

==> picture [52 x 52] intentionally omitted <==

16[TH ] FEBRUARY 2026

MINNA PAKANEN

SERVICE IS NOT SERVITUDE

  • Other party is seen as equal, but not as similar

  • Service is not about helping

“Helping is based on inequality; it is not a relationship between equals. . . Service is a relationship between equals. . . Helping incurs debt. When you help someone, they owe you one. But serving, like healing, is mutual. There is no debt.”

Remen (1996)

16[TH ] FEBRUARY 2026

MINNA PAKANEN

DESIGN EDUCATION

==> picture [97 x 41] intentionally omitted <==

Own curiosity/ Own need for passion for knowing self-expression Self-serving

==> picture [72 x 35] intentionally omitted <==

Objective and subjective understanding on behalf another’s interest Other-serving

reflective thought + practical action –> knowledge of ‘why’ + knowledge of ‘how’

16[TH ] FEBRUARY 2026

MINNA PAKANEN

==> picture [64 x 63] intentionally omitted <==

designer client

EMPATHIC DESIGNER

Harold G. Nelson & Erik Stolterman (2003) The design way. Intentional Change in an Unpredictable World. Foundations and fundamentals of design competence Peter Wright & John McCarthy (2010) Experience-Centered Design. Designers, Users, and Communities in Dialogue

16[TH ] FEBRUARY 2026

MINNA PAKANEN

16

LISTENING

  • Design communication is about listening

  • Helping people to express what they believe will help them live fuller lives.

    • design communication may at times include the use of rhetoric and persuasion, as is true of science and art
  • A good designer does not convince clients of needs or desires they have not authored –no ‘selling’!

  • It is the client’s own intentionality—in the form of their desiderata—that triggers the process.

  • Design is democracy

     - –> Heightened ability to ‘listen', utilize notitia (Hillman, 1992)
    
     - Notitia is an act of attention that is complete and uncompromising: ‘focus’
    

16[TH ] FEBRUARY 2026

MINNA PAKANEN

DESIGN COMMUNICATION

==> picture [291 x 312] intentionally omitted <==

  • A complex multi-dimensional and multi-phased process:

  • → initial phase of building trust (through conversation)

  • → finding common ground through dialogue (using logic) and developing a shared or common understanding

  • = creation of an uncommon understanding through diathenic graphologue (Greek: diatheno= to show through or let a thing be seen through; and grapho= image or representation).

  • → produces breakthrough insights in the form of rich, complex images that are difficult, if not impossible, to apprehend from a single perspective or cannot be represented in the linear format of text

  • → break the established common ground and bring the process back to a need for more dialogue, in order to find new common ground.

16[TH ] FEBRUARY 2026

MINNA PAKANEN

DESIGNER/CLIENT RELATIONSHIPS?

==> picture [563 x 303] intentionally omitted <==

----- Start of picture text -----
designer designer
designer technician
designer facilitator
client client
designer artist
designer designer
designer expert
client client
----- End of picture text -----

16[TH ] FEBRUARY 2026

MINNA PAKANEN

designer

designer

designer technician

==> picture [97 x 41] intentionally omitted <==

designer facilitator

client

designer client

client

designer client

designer artist

designer expert

16[TH ] FEBRUARY 2026

MINNA PAKANEN

==> picture [97 x 41] intentionally omitted <==

designer

designer

==> picture [210 x 184] intentionally omitted <==

==> picture [209 x 184] intentionally omitted <==

client client designer artist designer facilitator

16[TH ] FEBRUARY 2026

MINNA PAKANEN

designer designer client client designer expert designer technician

MINNA PAKANEN

16[TH ] FEBRUARY 2026

IDEAL SERVICE RELATIONSHIP

==> picture [296 x 297] intentionally omitted <==

----- Start of picture text -----
designer
client
----- End of picture text -----

16[TH ] FEBRUARY 2026

MINNA PAKANEN

DESIGNERS CHOISES OF RELATIONSHIPS

But any given process have more stakeholders…

  • People who influence …

  • People who are affected …

  • People who are using …

Key exercise is to identify them and decide which ones to satisfy, this needs to be designed!

==> picture [328 x 343] intentionally omitted <==

16[TH ] FEBRUARY 2026

MINNA PAKANEN

DESIGN RELATIONSHIPS

  • Interaction “protocols” describing a relationship

  • Can change along the way

  • I (designer) -> you

  • We (designer + specific stakeholder) -> them • I (designer) -> It / other

  • Everyday relations / partnership / alliances etc.

==> picture [373 x 349] intentionally omitted <==

16[TH ] FEBRUARY 2026

MINNA PAKANEN

EMPATHIC DESIGNER

  • ‘Makes meaning’ for a client by empathetically drawing out his or her pre-formed desires

  • Does not ask the client what fully-formed outcome is to be designed, but instead, through open communication, tries to discern the underlying intentions of that client’s vague ideas of desiderata

  • This symbiotic relationship is possible only if there is an exchange of empathy

  • Empathy in design means: ability to ‘be’ as the other, while remaining a whole self

  • Must be willing to let empathy lead the way!

16[TH ] FEBRUARY 2026

MINNA PAKANEN

UNDERSTANDING USERS

Peter Wright & John McCarthy (2010) Experience-Centered Design. Designers, Users, and Communities in Dialogue

16[TH ] FEBRUARY 2026

MINNA PAKANEN

29

BEYOND USABILITY

  • Computer systems started to spread from workplaces into home and leisure use context

  • Design for usability is only one of the many values that user-centered design could focus on (Blythe et al., 2003)

  • It no longer seemed enough for user-centered design to focus solely on usability, ease of learning, efficiency, and effectiveness, and for a transparent interface to be the ultimate criteria of success

  • • beautiful things work better” (Norman, 2004)

    • significant impetus toward experience-centered design

    • slogan opened up an interdisciplinary debate around beauty and pleasure as a design value and the relationship between aesthetics and usability (Sutcliffe, 2009) and (Hassenzhal, 2010)

16[TH ] FEBRUARY 2026

MINNA PAKANEN

EXPERIENCE

  • Developed from pragmatist philosopher John Dewey’s focus on human experiences (Art as Experience, 1938)

  • Thoughts and ideas do not exist separate from our bodies and separate from each other

  • There is no knowledge (or experience) without a knower, language without context or emotion without thought and action

  • We must engage with felt life — the full range of our embodied experiences

16[TH ] FEBRUARY 2026

MINNA PAKANEN

==> picture [97 x 41] intentionally omitted <==

Felt life?

16[TH ] FEBRUARY 2026

MINNA PAKANEN

==> picture [247 x 477] intentionally omitted <==

“FELT LIFE”

  • Life is felt in as much as the continuous sensory and sensual connection we have with it is integral.

  • This is a connection that is situated in and built up over .

  • time and space

  • It reminds us that the world of experience is a world that has a kickable reality both in the physical sense and also in terms of the way in which actions we take have consequences for us intellectually and .

  • emotionally

16[TH ] FEBRUARY 2026

MINNA PAKANEN

EXPERIENCE

  • Experience as sensation, emotion, intellect and action situated in a particular place and time

  • Most experiences consist of a subtle interplay and overlaying of unconscious and conscious action

  • Highly subjective, solitary and introspective process vs. social experience

  • Anticipation and expectation connect past experience to present and future experience

  • “Levels” of experience:

  • Aesthetic experience (flow — body directly connected to the world)

  • Pre-reflective experience (successful habitual interactions)

  • Reflective experience (engage in process of sense making)

16[TH ] FEBRUARY 2026

MINNA PAKANEN

WHAT AFFECTS ON THE EXPERIENCE OF DRIVING A CAR?

==> picture [556 x 371] intentionally omitted <==

16[TH ] FEBRUARY 2026

MINNA PAKANEN

EXPERIENCE-CENTERED DESIGN

Valuing the whole person behind ‘the user’

  • Focusing on how people make sense of their experiences

  • Seeing the designer and user as co-producers of experience

  • Seeing the person as part of a network of social (self-other) relationships through which experience is co-constructed

  • Seeing the person as a concerned agent, imagining possibilities, making creative choices, and acting.

16[TH ] FEBRUARY 2026

MINNA PAKANEN

STORIES IN EXPERIENCE-CENTERED DESIGN

  • Focus on stories over use-cases, requirements, etc.

  • Collecting and analysing stories (understanding the users)

  • Conceptualise and interpret for design

  • Scenarios (agents, goals, plot, action, events)

  • Personas (personal histories, goals, and feelings)

  • Drama and role-play (to connect and evoke)

  • Sharing stories as a way to involve participants

==> picture [140 x 387] intentionally omitted <==

16[TH ] FEBRUARY 2026

MINNA PAKANEN

EXPERIENCE-CENTERED DESIGN

Requires empathic understanding of the users –> Dialogical methods for:

  • Dialogue with the person for whom the object is designed, before and after the object is made

  • Dialogue with materials when the object is being made

==> picture [444 x 335] intentionally omitted <==

Cultural probes (Gaver et al., 1999)

16[TH ] FEBRUARY 2026

MINNA PAKANEN

BLOSSOM FOR ANA BY JAYNE WALLACE

==> picture [688 x 318] intentionally omitted <==

https://www.youtube.com/watch?v=DXdUNVBOtb0

16[TH ] FEBRUARY 2026 MINNA PAKANEN

==> picture [960 x 543] intentionally omitted <==

----- Start of picture text -----
16 [TH ] FEBRUARY 2026 MINNA PAKANEN
----- End of picture text -----

DIALOGUE IN BLOSSOM

  • Wallace uses the […] conversations to try to get a glimpse of the other person’s life, perspectives, and values, their own sense of who they are

  • She immerses herself in the materials produced by the participant and in the conversation they have had together

  • Wallace finds some threads that are familiar to her from her own experiences or with which she can empathize .

==> picture [426 x 308] intentionally omitted <==

16[TH ] FEBRUARY 2026

MINNA PAKANEN

EMOTIONAL RESPONSE TO BLOSSOM

  • Blossom piece provoked a strong emotional response and important insight.

"…when it blossomed, it kind of upset me that it was only the once, and I thought ‘oh my god!’ (laughs) but …if it wasn’t only once then that would defeat the object … for me anyway… I mean that was a kind of crucial point for me, when I started blubbing (laughs) when it said it ‘only blossoms once’ and I was just like ‘oh!’, ‘yeah!’ and it, I sort of got it, that it was sort of, represented life really and that, erm, you only live it once…”

(Ana interview transcript lines 155 – 161)

==> picture [390 x 297] intentionally omitted <==

16[TH ] FEBRUARY 2026

MINNA PAKANEN

DESIGN AS DIALOGUE

Separate knowing versus connected knowing

  • “Dialogue puts the focus clearly on processes between people. It sees communication, knowledge, and identity as constructed in relationships between people, not within individuals.”

  • “New understanding is created in the respectful, responsive engagement with dissimilarity. Trying to understand other people, including users, by foregoing one’s own perspective may reproduce existing knowledge but will not produce new understandings.”

16[TH ] FEBRUARY 2026

MINNA PAKANEN

==> picture [97 x 41] intentionally omitted <==

Listening?

MINNA PAKANEN

16[TH ] FEBRUARY 2026

==> picture [97 x 41] intentionally omitted <==

Listening by thinking about the situation in terms of problems and needs?

We already impose our frame of reference rather than listening to what the other person has to say.

16[TH ] FEBRUARY 2026

MINNA PAKANEN

In active listening we have minimum ~~of~~ preconceptions about what we will hear in the situation and the understanding that it may be necessary to change how we already think about the people, practices, and events we find there.

MINNA PAKANEN

Active listening is the way forward when aim is to do experience centered-design.

16[TH ] FEBRUARY 2026

LISTENING

“By thinking about the situation in terms of problems and needs, we already impose our frame of reference rather than listening to what the other person has to say.”

VERSUS

“Active listening involves going into a situation with the minimum of preconceptions about what we will hear and the understanding that it may be necessary to change how we already think about the people, practices, and events we find there.”

16[TH ] FEBRUARY 2026

MINNA PAKANEN

==> picture [97 x 41] intentionally omitted <==

Why you should not design to students who are studying in IT Product Development Program?

16[TH ] FEBRUARY 2026

MINNA PAKANEN

REFERENCES

  • Harold G. Nelson & Erik Stolterman (2003) The design way. Intentional Change in an .

  • Unpredictable World. Foundations and fundamentals of design competence. MIT Press

  • Wright, P., & McCarthy, J. (2010). Experience-centered design: designers, users, and communities in dialogue. Synthesis Lectures on Human-Centered Informatics, 3 (1), 1- 123. (chapters: 2-5)

16[TH ] FEBRUARY 2026

MINNA PAKANEN

L9_Sketching User Experience_2026.pdf Open PDF
Show converted presentation markdown

==> picture [97 x 41] intentionally omitted <==

SKETCHING USER EXPERIENCE ITPDP’26, L9

Dr. Minna Pakanen Department of Digital Design and Information Studies mpakanen @cc.au.dk

23[RD ] MARCH 2026

MINNA PAKANEN

==> picture [97 x 41] intentionally omitted <==

23[RD ] MARCH 2026 MINNA PAKANEN

TODAY

  • Interaction and UX design

  • Externalisation and design

  • Break

  • A bit more about scenarios

  • Storyboards

  • Sketching UX in storyboards

  • Concept selection

23[RD ] MARCH 2026

MINNA PAKANEN

INTERACTION DESIGN (IXD)

Design of the user interaction and experiences that occur during using a product

4. User experience evaluation

  • 1.User research • Interview

  • • Observation

  • • Shadowing

  • • Remote studies

  • 1.1. Creating personas & scenarios + sketching storyboards 2. UI sketching • wireframing

3. UI graphics & interaction design • Aesthetics

• Interactive content design

• User experience design

23[RD ] MARCH 2026 MINNA PAKANEN

USER EXPERIENCE (UX) DESIGN

A good user experience is one that meets a particular user’s needs in the specific context where a person uses the product

==> picture [634 x 131] intentionally omitted <==

----- Start of picture text -----
Why? How?
What?
Motivations for Functionality:
Functionality:
adopting the Accessibility &
Features
product Aesthetics
----- End of picture text -----

23[RD ] MARCH 2026 MINNA PAKANEN

INTERACTION DESIGN (IXD)

Design of the user interaction and experiences that a occur during using a product

==> picture [704 x 314] intentionally omitted <==

----- Start of picture text -----
4. User experience evaluation
Why?
1.User research How?

Interview
• 3. UI graphics & interaction design
Observation

Aesthetics

Shadowing

• Interactive content design
Remote studies

User experience design
1.1. Creating personas
& scenarios + sketching
storyboards
2. UI sketching

wireframing
----- End of picture text -----

==> picture [73 x 19] intentionally omitted <==

----- Start of picture text -----
What?
----- End of picture text -----

23[RD ] MARCH 2026 MINNA PAKANEN

==> picture [211 x 140] intentionally omitted <==

EXTERNALISATION AND DESIGN

Alan Dix & Layda Gongora (2011)

23[RD ] MARCH 2026

MINNA PAKANEN

9

EXTERNALISATION?

  • Is an active shaping of the world as an intellectual resource

  • a uniquely human ability & foundation of culture and civilisation

  • Involves the embodiment, representation and exploration of our own thoughts, feelings and interior life

  • The term externalisation itself reflects a philosophical and practical tension:

  • embodied interactions with external artefacts

  • process of making internal representations external

  • In art and design this reflects dual views of creativity as internal muse or embodied .

  • engagement

23[RD ] MARCH 2026

MINNA PAKANEN

KINDS OF KNOWING

Tacit knowledge

  • Unconscious or prenoetic

  • Slowly building up through trial and error

  • Relational

23[RD ] MARCH 2026

MINNA PAKANEN

KINDS OF KNOWING

Explicit knowledge • Conscious • Rational/logical • Learning through abduction or reasoning • a uniquely or at least largely human attribute

23[RD ] MARCH 2026

MINNA PAKANEN

==> picture [97 x 41] intentionally omitted <==

Tacit or Explicit? or Tacit and Explicit?

MINNA PAKANEN

23[RD ] MARCH 2026

3-LEVELS OF EXPERT KNOWING

1) in action knowing

2) reflection in action

  • 3) reflection on action

(Donald Schön,1984)

23[RD ] MARCH 2026

MINNA PAKANEN

==> picture [97 x 41] intentionally omitted <==

"knowing is in our action"

(Schön, 1984)

MINNA PAKANEN

23[RD ] MARCH 2026

==> picture [97 x 41] intentionally omitted <==

”reflection in action”

(Schön, 1984)

MINNA PAKANEN

23[RD ] MARCH 2026

==> picture [97 x 41] intentionally omitted <==

”reflection on action"

(Schön, 1984)

MINNA PAKANEN

23[RD ] MARCH 2026

EXTERNALISATION IN CRAFTS/PRODUCT DESIGN

  • Sketches

  • Mood boards

  • Full-scale mock-ups in blue foam, cardboard, or 3D printing

  • Production-line mold

  • CAD and other forms of simulation or virtual walkthroughs

23[RD ] MARCH 2026

MINNA PAKANEN

EXTERNALISATION IN IXD

  • Storyboards

  • • Personas

This lecture

  • Scenarios

  • • Paper prototypes

==> picture [218 x 271] intentionally omitted <==

==> picture [314 x 271] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

EXTERNALISATION IN PRODUCT DESIGN

Products

==> picture [248 x 176] intentionally omitted <==

==> picture [287 x 177] intentionally omitted <==

==> picture [184 x 177] intentionally omitted <==

==> picture [226 x 176] intentionally omitted <==

Sketches

Models

Prototypes

23[RD ] MARCH 2026

MINNA PAKANEN

EXTERNALISATION IN DESIGN PROCESS

Product Design

  • Problem space

  • Design space

  • Process

23[RD ] MARCH 2026

MINNA PAKANEN

EXTERNALISATION IN PROBLEM SPACE

  • Mood boards = values and ethos of the setting/ organisation

==> picture [471 x 326] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

EXTERNALISATION IN DESIGN SPACE

  • Series of alternative designs = sample of possible designs

  • Focus on context with constraints

  • Materials

  • Paper and pencil–>abstract list of properties

  • Plasticine or cardboard and glue –> exploring the design space by way of example

23[RD ] MARCH 2026

MINNA PAKANEN

EXTERNALISATION IN DESIGN PROCESS

  • Schedule

  • Stages

==> picture [391 x 381] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

PROPERTIES AND DIMENSIONS

Representation

  • Physical

  • the foam model

  • Schematic

  • sketch or floor plan

  • Symbolic

  • E.g., Mind map, equations on the blackboard

==> picture [232 x 175] intentionally omitted <==

==> picture [232 x 146] intentionally omitted <==

==> picture [222 x 146] intentionally omitted <==

23[RD ] MARCH 2026 MINNA PAKANEN

PROPERTIES AND DIMENSIONS

Modality

  • Written (also mathematical, and musical)

  • Speech

  • Drawn (sketches, diagrams, plans)

  • Aural, olfactory, or tactile

  • Body

23[RD ] MARCH 2026

MINNA PAKANEN

PROPERTIES AND DIMENSIONS

Persistence

  • Persistent

  • the words written on a page, the clay model, or the sketch on the back of an envelope

  • Ephemeral

  • the words in a conversation, the notes played on a keyboard, or the movements made during an improvisation session

23[RD ] MARCH 2026

MINNA PAKANEN

FUNCTIONS OF EXTERNALISATION

1) Informational 2) Formational 3) Transformational 4) Transcendental

23[RD ] MARCH 2026

MINNA PAKANEN

Informational

Formational Transformational

Transcendental

==> picture [277 x 101] intentionally omitted <==


==> picture [258 x 93] intentionally omitted <==


==> picture [233 x 87] intentionally omitted <==

==> picture [219 x 87] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

INFORMATIONAL

– passing on to others already formed ideas

==> picture [428 x 154] intentionally omitted <==

==> picture [344 x 212] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

FORMATIONAL

– vague ideas becoming clearer by the process of externalisation

==> picture [217 x 300] intentionally omitted <==

==> picture [419 x 156] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

TRANSFORMATIONAL

– thinking using materials

==> picture [403 x 159] intentionally omitted <==

==> picture [296 x 71] intentionally omitted <==

==> picture [296 x 90] intentionally omitted <==

==> picture [432 x 104] intentionally omitted <==

==> picture [432 x 115] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

TRANSCENDENTAL

– our thoughts and ideas become the object of thought

==> picture [421 x 154] intentionally omitted <==

==> picture [383 x 250] intentionally omitted <==

23[RD ] MARCH 2026 MINNA PAKANEN

TAPPING INTO TACIT

Rich personas and scenarios

  • Appeal directly to our tacit understanding

  • Deliberately far more detailed than crude user profiles

  • Include 'unnecessary' details that make the people, and the physical

  • situation seem real to us

  • By appealing to our imagination , they spark our natural social and physical understandings in a way that an abstracted 'user group' cannot.

23[RD ] MARCH 2026

MINNA PAKANEN

EXAMPLE PERSONA

Susa

Age: 30 Location: Rovaniemi, Finland Job: director of furniture shop Status: engaged

Susa loves snow and sports and that is why she lives in Northern Finland in Rovaniemi just a few kilometers from the nearest slopes and ski tracks. She has a full-time job, so as an opposite to that, she wants to spend most of the weekends and evenings on skies or on a snowboard. She often goes there with her boyfriend, Jyri. They both love snowboarding on fresh snow on untouched slopes.

==> picture [194 x 235] intentionally omitted <==

Needs and goals:

She wants to be able to get to the untouched slopes immediately after the right type of snow has fell.

Activities:

  • Snowboarding outside of slopes

  • Uses many weather apps with radar for the temperature and spotting the fresh snow

  • • Uses a navigation app in parallel to find the snowy hills.

Challenges:

  • There is no application that can tell her the consistency of the snow, so she needs to go out to test the snow

  • The day is very short in Lapland during winter months so she cannot go outside of lighted slopes during the late afternoons or evenings

  • Difficult to find slopes with fresh snow

  • • Difficult to navigate and use the weather app radar function at the same time while driving a car on slippery roads

  • • It is risky to snowboard alone outside of the slopes especially after sunset.

23[RD ] MARCH 2026 MINNA PAKANEN

SCENARIOS

John M. Carrol (1999) Peter Wright & John McCarthy (2010)

MINNA PAKANEN

23[RD ] MARCH 2026

42

==> picture [97 x 41] intentionally omitted <==

”a written outline of a film, novel, or stage work giving details of the plot and individual scenes”

(Oxford Dictionary of English, 2020)

23[RD ] MARCH 2026

MINNA PAKANEN

SCENARIOS

  • Stories about people and their activities often involving their use of technology

  • Setting of the activity = the physical location in which the activities occur (e.g., an office or a sitting room)

  • Agents and actors

  • Agents’ goals and objectives

  • The plot that moves the action and events of the scenario on

==> picture [69 x 52] intentionally omitted <==

  • State of the system in use with which the person is interacting with

  • Be sufficiently dynamic to accommodate goals being changed by the events that occur throughout

(Carroll, 1999)

23[RD ] MARCH 2026

MINNA PAKANEN

SCENARIOS

Why?

  • Evoke reflection in design

  • They are concrete and flexible

  • They are multifaceted and have multiple views ... they promote a workorientation

  • (help envision, design, communicated, collaborate etc.)

(Carroll, 1999)

23[RD ] MARCH 2026

MINNA PAKANEN

SCENARIO

Example

  • Context of design =

  • Agents and actors=

  • Agents’ goals and objectives=

  • The action and events =

  • State of the system in use=

Harry is interested bridge failures; as a child, he saw a small bridge collapse when its footings were undermined after a heavy rainfall. He opens the case study of the Tacoma Narrows Bridge and requests to see the film of its collapse. He is stunned to see the bridge first sway, then ripple, and ultimately lurch apart. He quickly replays the film and then opens the associated course module on harmonic motion. He browses the material (without doing the exercises), saves the film clip in his workbook with a speech annotation, and then enters a natural language query to find pointers to other physical manifestations of harmonic motion. He moves on to a case study involving flutes and piccolos.

(Carroll, 1999)

23[RD ] MARCH 2026

MINNA PAKANEN

SCENARIO

Example

  • Context of design =

  • Agents and actors=

  • Agents’ goals and objectives=

  • The action and events =

  • State of the system in use=

Harry is interested bridge failures; as a child, he saw a small bridge collapse when its footings were undermined after a heavy rainfall. He opens the case study of the Tacoma Narrows Bridge and requests to see the film of its collapse. He is stunned to see the bridge first sway, then ripple, and ultimately lurch apart. He quickly replays the film, and then opens the associated course module on harmonic motion. He browses the material (without doing the exercises), saves the film clip in his workbook with a speech annotation, and then enters a natural language query to find pointers to other physical manifestations of harmonic motion. He moves on to a case study involving flutes and piccolos.

(Carroll, 1999)

23[RD ] MARCH 2026

MINNA PAKANEN

EXPERIENCE-CENTERED SCENARIOS

Focus on

  • People’s activities

    • their motivation
  • feelings

    • the meanings they make of the interactions
    • social interactions around the activities in question
  • Good stories have the power to stimulate imagination, engage interest, and highlight specific aspects of a situation (real or imagined)

(Wright & McCarthy, 2010)

23[RD ] MARCH 2026

MINNA PAKANEN

AN EXAMPLE SCENARIO

Different elements

  • Context of design =

  • Agents and actors=

  • Agents’ goals and objectives=

==> picture [56 x 62] intentionally omitted <==

  • The action and events =

  • State of the system in use=

  • People’s activities

    • their motivation + feelings
    • the meanings of interactions
    • social interactions around the activity

==> picture [421 x 470] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

AN EXAMPLE SCENARIO

Different elements

  • Context of design =

  • Agents and actors=

  • Agents’ goals and objectives=

==> picture [56 x 62] intentionally omitted <==

  • The action and events =

  • State of the system in use=

  • People’s activities

    • their motivation
    • feelings
    • the meanings of interactions
    • social interactions around the activity

==> picture [417 x 486] intentionally omitted <==

MINNA PAKANEN

23[RD ] MARCH 2026

==> picture [97 x 41] intentionally omitted <==

”Constructing scenarios of use inescapably evokes reflection in the context of design.”

(Carroll, 1999)

23[RD ] MARCH 2026

MINNA PAKANEN

STORYBOARDS

Corrie van der Lelie (2006) The value of storyboards in the product design process. Pers Ubiquit Comput (2006) 10: 159–162.DOI 10.1007/s00779-005-0026-

23[RD ] MARCH 2026

MINNA PAKANEN

58

~~~~ , a sequence of drawings typically with some directions and dialogue, representing the shots planned for a film or television production.” (Oxford Dictionary of English, 2020)

23[RD ] MARCH 2026

MINNA PAKANEN

==> picture [632 x 532] intentionally omitted <==

----- Start of picture text -----
23 [RD ] MARCH 2026 MINNA PAKANEN
----- End of picture text -----

==> picture [234 x 123] intentionally omitted <==

A storyboard is a graphic organizer that consists of illustrations or images displayed in sequence for the purpose of previsualizing a motion picture, animation, motion graphic or interactive media sequence. The storyboarding process, in the form it is known today, Walt Disney Productions during the early 1930s, after several years of similar processes being in use at Walt Disney and other animation studios https://pencilpusher.carbonmade.com/projects/6733548 https://pencilpusher.carbonmade.com/projects/673354823[RD ] MARCH 2026

==> picture [415 x 350] intentionally omitted <==

http://www.pixartalk.com/wp-content/uploads/2009/06/casrsstoryboards4.jpg MINNA PAKANEN

STORYBOARDS

=Visual scenarios

  • Common visual language –> A tool for communication

  • Product-user interaction + context + time

  • Generating ideas and concepts based on the scenario

  • Getting a feel of the interaction with the product

==> picture [520 x 365] intentionally omitted <==

(Kettunen, 2001)

23[RD ] MARCH 2026

MINNA PAKANEN

VISUALISATION MANNER

Early phase

Late phase

==> picture [252 x 181] intentionally omitted <==

==> picture [303 x 182] intentionally omitted <==

Sketchy

Visually detailed & refined

23[RD ] MARCH 2026

MINNA PAKANEN

ANALYSIS PHASE

Using storyboard to consider:

  • Defining function and intended behavior (technical, psychological, social, economic, cultural)

  • Where, when, what, why, with who, for how long?

  • Situations, atmosphere, feelings ...

  • Exploring through scenario

23[RD ] MARCH 2026

MINNA PAKANEN

SYNTHESIS PHASE

Explore & integrate

  • Generating ideas and concepts based on the scenario

  • Getting a feel of the interaction with the product

  • Details are not yet important

==> picture [541 x 411] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

SIMULATION PHASE

==> picture [577 x 417] intentionally omitted <==

Evolving into

  • Create coherent narrative

  • Focus on the story line

  • Adding details

23[RD ] MARCH 2026

MINNA PAKANEN

STORYBOARDS IN EVALUATION PHASE The storyboard used for:

  • walkthrough with future users

  • Evaluating ideas based on the scenario

  • Allows studying product and its values and qualities

==> picture [56 x 7] intentionally omitted <==

----- Start of picture text -----
MINNA PAKANEN
----- End of picture text -----

23[RD ] MARCH 2026

VISUALISATION MANNER

Affects to user feedback

==> picture [252 x 181] intentionally omitted <==

==> picture [303 x 182] intentionally omitted <==

Sketchy

Visually refined

Evoke comments and suggestions

Is accepted as final ‘as is’

23[RD ] MARCH 2026

MINNA PAKANEN

VISUALISATION MANNER

Drawing vs. tracing

==> picture [367 x 264] intentionally omitted <==

==> picture [414 x 264] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

VISUALISATION MANNER

Drawing vs. tracing

==> picture [398 x 304] intentionally omitted <==

==> picture [410 x 288] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

EVALUATION PHASE

Example storyboard: Evaluation of the AR application

==> picture [960 x 290] intentionally omitted <==

Note that many pictures are missing in between!

23[RD ] MARCH 2026

MINNA PAKANEN

SHOWING THE CONTEXT

Photo + tracings + colors

==> picture [668 x 403] intentionally omitted <==

----- Start of picture text -----
23 [RD ] MARCH 2026 MINNA PAKANEN
----- End of picture text -----

SHOWING THE CONTEXT

Photo + tracing + colors

==> picture [673 x 390] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

SHOWING THE CONTEXT

Photo + dimming + tracing + colors

==> picture [643 x 385] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

SKETCHING STORYBOARDS

23[RD ] MARCH 2026 MINNA PAKANEN

76

SKETCHING STORYBOARDS

Basic humans + a bit of context + things to interact with Remember to zoom in and out!

==> picture [376 x 220] intentionally omitted <==

==> picture [449 x 226] intentionally omitted <==

(Baskinger, 2008)

23[RD ] MARCH 2026

MINNA PAKANEN

BASIC SHAPES

==> picture [428 x 264] intentionally omitted <==

==> picture [459 x 206] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

HUMANS

==> picture [392 x 66] intentionally omitted <==

(Baskinger, 2008)

==> picture [515 x 364] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

EXAMPLE

Johannes Valentin Berg & Rasmus Hvilshøj

23[RD ] MARCH 2026

MINNA PAKANEN

HANDS AND FINGERS

==> picture [311 x 306] intentionally omitted <==

==> picture [265 x 232] intentionally omitted <==

==> picture [426 x 294] intentionally omitted <==

----- Start of picture text -----
23 [RD ] MARCH 2026 MINNA PAKANEN
----- End of picture text -----

DEVICES

==> picture [220 x 147] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

HANDS + DEVICES= INTERACTION

==> picture [493 x 349] intentionally omitted <==

==> picture [362 x 362] intentionally omitted <==

==> picture [137 x 17] intentionally omitted <==

----- Start of picture text -----
23 [RD ] MARCH 2026 MINNA PAKANEN
----- End of picture text -----

HANDS + DEVICES = INTERACTION

==> picture [441 x 347] intentionally omitted <==

==> picture [440 x 311] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

SHOWING INTERACTION

==> picture [384 x 382] intentionally omitted <==

==> picture [157 x 91] intentionally omitted <==

==> picture [157 x 162] intentionally omitted <==

==> picture [319 x 314] intentionally omitted <==

23[RD ] MARCH 2026 MINNA PAKANEN

TRACING

23[RD ] MARCH 2026

MINNA PAKANEN

88

TRACING

Constructing the context and people

==> picture [484 x 309] intentionally omitted <==

==> picture [241 x 117] intentionally omitted <==

You can also create a suitable picture of the context with AI!

23[RD ] MARCH 2026

MINNA PAKANEN

RESPECT COPYRIGHTS!

==> picture [269 x 311] intentionally omitted <==

Hetkiä by Maija Louekari, 2003 competition entry to Marimekko

==> picture [251 x 295] intentionally omitted <==

Markus Leppo in Helsinki ja helsinkiläiset, 1966

https://yle.fi/uutiset/3-6921730

23[RD ] MARCH 2026

MINNA PAKANEN

THINK TWICE BEFORE GENAI!

==> picture [494 x 279] intentionally omitted <==

Vesa-Matti Väärä, 2020

GenAI illustation, 2026

Use of AI is problematic also point of view of your learning and consumption of natural resources!

23[RD ] MARCH 2026

MINNA PAKANEN

RESPECT COPYRIGHTS!

To avoid violating other peoples copyrights when tracing and especially if you use photos in the background:

a) Take the pictures yourself

b) Use royalty-free photos (Stock Adobe, Shutterstock, Getty Images, etc.) c) Combine many sources (combine images well and use only small pieces from each) d) (Buy the right to use the photos)

23[RD ] MARCH 2026

MINNA PAKANEN

LINE TRACING An example

==> picture [374 x 371] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

LINE TRACING + COLORING

==> picture [318 x 319] intentionally omitted <==

==> picture [137 x 17] intentionally omitted <==

----- Start of picture text -----
23 [RD ] MARCH 2026 MINNA PAKANEN
----- End of picture text -----

NO COLOR VS. GREYSCALE VS. COLORS?

Depends on the case

==> picture [311 x 198] intentionally omitted <==

==> picture [311 x 198] intentionally omitted <==

==> picture [312 x 198] intentionally omitted <==

23[RD ] MARCH 2026 MINNA PAKANEN

LINE TRACING An example

==> picture [239 x 411] intentionally omitted <==

23[RD ] MARCH 2026 MINNA PAKANEN

LINE TRACING + PICTURES OF THE PRODUCT

==> picture [238 x 410] intentionally omitted <==

==> picture [449 x 357] intentionally omitted <==

----- Start of picture text -----
= =
23 [RD ] MARCH 2026 MINNA PAKANEN
----- End of picture text -----

==> picture [125 x 376] intentionally omitted <==

Illustrator tutorials on tracing and drawing any shape: https://youtu.be/j69a3-shkGE https://youtu.be/RbbQl2sU-ag https://www.youtube.com/watch?v=Rk-JGsriJ4o

23[RD ] MARCH 2026

MINNA PAKANEN

CONCEPT SELECTION

Ulrich, K. T., & Eppinger, S. D. (2016). Product design and development. McGraw-hill. (Pages 146-156)

https://www.slideshare.net/slideshow/productdesignanddevelopmentkarltulrichstevendeppingeredisi/266164184

23[RD ] MARCH 2026

MINNA PAKANEN

99

CONCEPT SELECTION

==> picture [812 x 104] intentionally omitted <==

Identify Make a Generate Select Concept Final Prototype
ITPDP user design design 3 presentations concept design &
needs brief concepts concepts + feedback idea develop.

23[RD ] MARCH 2026 MINNA PAKANEN

CONCEPTS

==> picture [624 x 347] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

WAYS OF SELECTING CONCEPTS

Choose what fits the best to the design phase and case

  • External decision = Customer, client or other external entity

  • Product champion = An influential member (head of design) of product design team chooses the concept based on personal preference

  • Intuition = Concept is chosen by its perceived feel, and it's fit to the case

  • Multivoting = Each member votes for (3-5) concepts with or I , the most voted concept/s wins

  • Pros & cons =The team lists strengths and weaknesses of each concept and makes a group decision

  • Decision matrices =The team rates each concept against prespecified selection criteria, also possible to compare your concepts against existing product

  • Prototype & test = Developed prototypes are evaluated against each other by users.

23[RD ] MARCH 2026

MINNA PAKANEN

EXAMPLE 1

Selection by intuition

==> picture [537 x 311] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

CONCEPT SCREENING MATRIX

6-step process

  1. Conduct multivoting to select ideas for concept screening

  2. Prepare the selection matrix

  3. Rate the concepts

  4. Rank the concepts

  5. Combine and improve the concepts

  6. Select one or more concepts

==> picture [332 x 128] intentionally omitted <==

  1. Reflect the results and the process

Note that matrices always focus on the customer/ user needs and other decisions criteria defined based on the case!

23[RD ] MARCH 2026 MINNA PAKANEN

EXAMPLE 1

Multivoting

  • I conducted multivoting with a few classmates to narrow down the number alternatives

  • • Each could vote for max 3 concepts

==> picture [515 x 366] intentionally omitted <==

23[RD ] MARCH 2026

MINNA PAKANEN

EXAMPLE 1

4 concepts presented with images and short textual descriptions (each in own A4 )

Reference product that the concepts are evaluated against Adjustability Storage space Cleanability Aesthetics Multifunctionality Novelty Ergonomics Durability Likeness Storability Score Rating

Concept screening

Selection criteria drawn from user studies and competition requirements + = Better than reference – = Worse than reference 0 = Same as reference

23[RD ] MARCH 2026 MINNA PAKANEN

Reference product

EXAMPLE 2

==> picture [371 x 86] intentionally omitted <==

Novo Pen Concepts

23[RD ] MARCH 2026 MINNA PAKANEN

EXAMPLE 2: SELECTION MATRIX

==> picture [806 x 311] intentionally omitted <==

23[RD ] MARCH 2026 MINNA PAKANEN

REFERENCES

  • Carroll, J. (Ed.) (1999). Five Reasons for Scenario-Based Design. IEEE Proceedings of the 32nd Hawaii International Conference on System Sciences

  • Dix, A., & Gongora, L. (2011, October). Externalisation and design. In Proceedings of the second conference on creativity and innovation in design (pp. 31-42).

  • Ulrich, K. T., & Eppinger, S. D. (2016). Product design and development. McGraw-hill. (Chapter 8, pp. 146-156).

https://www.slideshare.net/slideshow/productdesignanddevelopmentkarltulrichstevendeppinge redisi/266164184

  • Van der Lelie, C. (2006). The value of storyboards in the product design process. Personal and ubiquitous computing, 10(2-3), 159-162.

  • Wright, P., & McCarthy, J. (2010). Experience-centered design: designers, users, and communities in dialogue. Synthesis Lectures on Human-Centered Informatics, 3(1), 1-123. (pages: 33-34)

23[RD ] MARCH 2026

MINNA PAKANEN

SKETCHING HUMANS & STORYBOARDS Sketching tutorial in class. Bring your pencil/s, pens, and 3 shades of grey markers with you!

25th March 10.00-12.00

23[RD ] MARCH 2026

MINNA PAKANEN

110

ITPDP26 - Physical Prototyping.pdf Open PDF
Show converted presentation markdown

PHYSICAL PROTOTYPING

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

==> picture [43 x 44] intentionally omitted <==

AARHUS UNIVERSITY

AGENDA

Messages

Project planning and prototyping Using prototypes in concept evaluations Digital Fabrication

Electronics

Supervision after lecture

DEPARTMENT OF COMPUTER SCIENCE

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

MESSAGES

DEPARTMENT OF COMPUTER SCIENCE

==> picture [43 x 44] intentionally omitted <==

AARHUS UNIVERSITY

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

THE ITPDP PROJECT

==> picture [634 x 357] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

THE ITPDP PROJECT

==> picture [634 x 357] intentionally omitted <==

==> picture [35 x 35] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

THE ITPDP PROJECT

From Brightspace under “ITPDP 2026” Presented at first lecture about course introduction

Eligibility for exam

To be eligible for the exam, each student must hand in all tooling exercises and supporting assignments, and every group must hand in the final report, be represented in the plenary sessions, and - of course - the exam related demo session and oral exam.

Goals and requirements for the final project

The IT product must be placed clearly in relation to one of the three subthemes (or have deviation agreed upon with course educator).

The group must demonstrate an understanding of the target user group's needs and conditions, using theory and tools introduced in this course, and/or theory/tools presented earlier in their study programme.

The solution must position itself as relevant to the future users, utilizing ethnomethodological work and user-centered design to ensure validity. A successful evaluation is however not a requirement, but reflection and analysis of validity, process and outcome is the main end result.

The context of use and the challenges identified in the user studies must be taken into account.

The solution must include multiple clients/components and the cloud (typically via web technology). Several subcomponents and resources that can communicate, e.g., a system with a mobile app, a physical installation, and with automatic storage of sensor data in the cloud.

The IT product may involve a smartphone as part of the solution, but there must be an interaction with physical/tangible components in the environment or on the user, which you have designed and fabricated yourself.

Arguments must be made based on the needs of the users, usage of theory and methods, and the business potential in relation.

==> picture [43 x 44] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

WORKLOAD AND EXPECTATIONS

Euro ean standard: 1 ECTS = 25-30 hours of work. p

For Aarhus University, it has been set at 28 hours.

ITPDP is slightly different.

First part (seen as a 5 ECTS course): 140 hours per person, including lectures/TØ, from 26th of January to 17th of March.

Second part (seen as a 15 ECTS course): 420 hours per person, including lectures/TØ, from 18th of March to June 17th. This is equal to a minimum of 32 hours per week. The rest of the course schedule is exam period and exam preparation time.

==> picture [43 x 44] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

WORRYING TENDENCIES

Resource hour overview:

Estimated teaching time: 68-70 hours, not including supervision.

1 person group: The overall project should reflect 490 hours of work. 2 person group: The overall project should reflect 980 hours of work. 3 person group: The overall project should reflect 1470 hours of work. 4 person group: The overall project should reflect 1960 hours of work.

In the current state, your project should currently represent roughly 230 hours per person. For a three person group = 425 hours of work (30% deducted, prioritization)

Can you honestly say that you have put this time into the project, preparation, lectures, reading etc.? If yes, then great!

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

==> picture [43 x 44] intentionally omitted <==

AARHUS UNIVERSITY

PROJECT PLANNING

A course. university

Project planning and implementation is part of the learning outcomes – we cannot guide and/or hand-hold you the entire way.

Make sure to keep yourself updated via the Course Schedule on Brightspace. Please ignore all other sources, as mentioned multiple times.

Be present… We cannot teach or supervise students who do not show up.

You can technically stay away from now until final report and exam, as long as Interview Assignment and Tooling Exercises are done. But don’t.

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

==> picture [43 x 44] intentionally omitted <==

AARHUS UNIVERSITY

PHYSICAL PROTOTYPING

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

==> picture [43 x 44] intentionally omitted <==

AARHUS UNIVERSITY

MVP

DEPARTMENT OF COMPUTER SCIENCE

==> picture [43 x 44] intentionally omitted <==

AARHUS UNIVERSITY

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

“… Version of a product with just enough features to be usable by early customers”

DEPARTMENT OF COMPUTER SCIENCE

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

MINIMUM VIABLE PRODUCT (MVP)

Often a term used in “Agile Prototyping”.

A way to create clear goals to be able to evaluate/validate a prototype/concept.

What is the minimum features our prototype needs to have, in order to solve the identified problem and/or answer the research question?

Build towards simplistic representations of your vision – not individual small parts.

==> picture [613 x 98] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

Agile Prototyping for technical systems – Schuh et al.

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

BUT HOW DO YOU PLAN THIS?

==> picture [713 x 300] intentionally omitted <==

https://activecollab.com/blog/project-management/moscow-method

==> picture [43 x 44] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

MOSCOW EXAMPLE - KITCHEN TIMER

    • Time can be set (up to two hours) Timer can be set (up to 24 hours) - - Hours and minutes are separate Hours, minutes and seconds - - The user gets notified User gets multimodal feedback - - The timer can be reset Multiple concurrent timers - - Timer can be paused Small enough to carry - - Fits in the kitchen Battery lasts for full longitudinal - Battery lasts more than max. timer study duration Must have Should have - - Timer = multiple weeks? Could have Will not have Cloud-connection - - Smartphone connected Statistics and food categorization - - Contextual multimodal feedback Credit-card like footprint - Fusion sensing (thermometer?) - Solar panel

But… how do we prioritize these??

DEPARTMENT OF COMPUTER SCIENCE

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

HOW TO PRIORITIZE POST MOSCOW

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

==> picture [43 x 44] intentionally omitted <==

AARHUS UNIVERSITY

HOW TO PRIORITIZE IN MOSCOW

Aim high, scope appropriately – you should push yourself. Free Features First

Impact-analysis (Remember scenarios? Personas? Contextual Design?) The art of choosing the right ecosystem/backbone Pessimistic approximations

DEPARTMENT OF COMPUTER SCIENCE

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

AIM HIGH, SCOPE APPROPRIATELY

Push yourselves, but lean into your skillset.

Always scope based on project goals (in this case course goals and delimitations). Do not let an overly simple MVP set you back.

An MVP is built to be your fallback – leave it alone, document, take pictures, make videos. Your MVP is then baseline for next iteration.

DEPARTMENT OF COMPUTER SCIENCE

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

IMPACT ANALYSIS

Focus on scenario-based design and contextual design – use it!

Which features will have the most (positive) impact?

You understand your user and the context – use the analysis to strengthen arguments for feature prioritization.

==> picture [356 x 119] intentionally omitted <==

==> picture [43 x 44] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

IMPACT ANALYSIS - KITCHEN TIMER

-
Time can be set (up to two hours)
-
Hours and minutes are separate
-
The user gets notified
-
The timer can be reset
-
Timer can be paused
-
Fits in the kitchen
-
Battery lasts more than max. timer
Must have
-
Timer can be set (up to 24 hours)
-
Hours, minutes and seconds
-
User gets multimodal feedback
-
Multiple concurrent timers
-
Small enough to carry
-
Battery lasts for full longitudinal
study duration
Should have
-
Timer = multiple weeks?
-
Smartphone connected
-
Contextual multimodal feedback
Could have
-
Cloud-connection
-
Statistics and food categorization
-
Credit-card like footprint
-
Fusion sensing (thermometer?)
-
Solar panel
Will not have

==> picture [43 x 44] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

“FREE FEATURES FIRST”

Free features are not necessarily free, but requires very little technical reiteration.

Hardware vs. software Simple additions or changes

==> picture [254 x 210] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

==> picture [140 x 153] intentionally omitted <==

==> picture [135 x 114] intentionally omitted <==

==> picture [191 x 144] intentionally omitted <==

==> picture [135 x 114] intentionally omitted <==

==> picture [258 x 199] intentionally omitted <==

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

IMPACT ANALYSIS - KITCHEN TIMER

-
Time can be set (up to two hours)
-
Hours and minutes are separate
-
The user gets notified
-
The timer can be reset
-
Timer can be paused
-
Fits in the kitchen
-
Battery lasts more than max. timer
-
Timer can be set (up to 24 hours)
-
Hours, minutes and seconds
-
User gets multimodal feedback
-
Multiple concurrent timers
-
Small enough to carry
-
Battery lasts for full longitudinal
study duration
-
Timer = multiple weeks?
-
Smartphone connected
-
Contextual multimodal feedback
-
Cloud-connection
-
Statistics and food categorization
-
Credit-card like footprint
-
Fusion sensing (thermometer?)
-
Solar panel
Must have
Should have
Could have
Will not have
-
Time can be set (up to two hours)
-
Hours and minutes are separate
-
The user gets notified
-
The timer can be reset
-
Timer can be paused
-
Fits in the kitchen
-
Battery lasts more than max. timer
-
Timer can be set (up to 24 hours)
-
Hours, minutes and seconds
-
User gets multimodal feedback
-
Multiple concurrent timers
-
Small enough to carry
-
Battery lasts for full longitudinal
study duration
-
Timer = multiple weeks?
-
Smartphone connected
-
Contextual multimodal feedback
-
Cloud-connection
-
Statistics and food categorization
-
Credit-card like footprint
-
Fusion sensing (thermometer?)
-
Solar panel
Must have
Should have
Could have
Will not have
-
Time can be set (up to two hours)
-
Hours and minutes are separate
-
The user gets notified
-
The timer can be reset
-
Timer can be paused
-
Fits in the kitchen
-
Battery lasts more than max. timer
-
Timer can be set (up to 24 hours)
-
Hours, minutes and seconds
-
User gets multimodal feedback
-
Multiple concurrent timers
-
Small enough to carry
-
Battery lasts for full longitudinal
study duration
-
Timer = multiple weeks?
-
Smartphone connected
-
Contextual multimodal feedback
-
Cloud-connection
-
Statistics and food categorization
-
Credit-card like footprint
-
Fusion sensing (thermometer?)
-
Solar panel
Must have
Should have
Could have
Will not have
-
Time can be set (up to two hours)
-
Hours and minutes are separate
-
The user gets notified
-
The timer can be reset
-
Timer can be paused
-
Fits in the kitchen
-
Battery lasts more than max. timer
Must have
-
Timer can be set (up to 24 hours)
-
Hours, minutes and seconds
-
User gets multimodal feedback
-
Multiple concurrent timers
-
Small enough to carry
-
Battery lasts for full longitudinal
study duration
Should have
-
Timer = multiple weeks?
-
Smartphone connected
-
Contextual multimodal feedback
Could have
-
Cloud-connection
-
Statistics and food categorization
-
Credit-card like footprint
-
Fusion sensing (thermometer?)
-
Solar panel
Will not have

==> picture [43 x 44] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

https://www.uxpin.com/studio/blog/design-sprints/

TIME AND SPRINTS

A gile development methodologies often refer to the term “sprint”.

I strongly suggest using this approach for testing feasibility in feature-based prototyping.

Suggested framework for prototype sprint: Inspired by the often used “5-day design sprint” (or similar artzy naming scheme) Following MoSCoW prioritization and free-features-first analysis. Have initial brainstorm about implementation strategy. Divide most crucial features up, and sprint them in pairs. Work 24-72 hours on each feature depending on impact (two features being worked on simultaneously). End with feasibility assessment and construct time plan based on last sprint. Or scrap.

==> picture [43 x 44] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

PROTOTYPE EVALUATION

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

==> picture [43 x 44] intentionally omitted <==

AARHUS UNIVERSITY

THE FALLACY OF FLAWLESS

Prototypes are inherently flawed.

Small factors and variance makes a difference for replicability and comparability.

The obvious end-goal is a self-sustained and robust system.

Often that is not the case… and maybe not the best and easiest way to add additional features?

DEPARTMENT OF COMPUTER SCIENCE

==> picture [184 x 183] intentionally omitted <==

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

WIZARD OF OZ

==> picture [518 x 357] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

https://www.nngroup.com/articles/wizard-of-oz/

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

==> picture [43 x 44] intentionally omitted <==

AARHUS UNIVERSITY

FINISH, FIDELITY, FEEDBACK

Maryam Tohidi, William Buxton, Ronald Baecker, and Abigail Sellen. 2006. Getting the right design and the design right.

and

End goal of a prototype evaluation:

  • To validate concept

  • Evaluate user appropriation

  • Problem-solution fit

  • Feedback on future iterations

Prototype fidelity matters!

==> picture [131 x 206] intentionally omitted <==

Youn-Kyung Lim, Erik Stolterman, and Josh Tenenberg. 2008. The anatomy of prototypes: Prototypes as filters, prototypes as manifestations of design ideas.

Users find it easier to critique lower fidelity prototypes.

Sometimes using multiple low-fidelity, feature-focused prototypes is the right way… … For evaluation J

DEPARTMENT OF COMPUTER SCIENCE

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

DIGITAL FABRICATION

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

==> picture [43 x 44] intentionally omitted <==

AARHUS UNIVERSITY

MANUFACTURING METHODS

Additive Manufacturing Subtractive Manufacturing 3D printing as example CNC (Computer Numerical Control) millin as exam le g p Adding layer by layer Taking away layer by layer Material base = often lastic Material base = often metals/wood p Often used for fast initial rotot in Often used for sturd construction p yp g y

==> picture [152 x 152] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

Combo = Hybrid Process

==> picture [184 x 185] intentionally omitted <==

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING 13. APRIL 2026

SIMON HOGGAN CHRISTENSEN LAB COORDINATOR

AARHUS UNIVERSITY

Meh?

1. What type of features does your product have?

  • small organic and intricate features → additive methods

  • large or sharp features, drilled and tapped holes or other fastening features →subtractive methods

2. What type of material do you want to work with?

  • thermoplastics and resins → additive methods

  • materials like metals, wood, or foam → subtractive methods

  1. How many units do you want to produce?
  • low-volume production or iterative prototyping → additive methods

  • large-volume production runs → subtractive methods

  • Meh?

RAPID PROTOTYPING

Purpose: Rapidly creating tangible artifacts or prototypes to filter/validate certain aspects.

Addendum: In house. By yourself. Something you hopefully made. Without ruining yourself… … or the equipment J

Most common practice and understanding: Utilizes digital fabrication, due to speed and work/process synchronizity.

Any fabrication occupying more than a few days is no longer rapid prototyping – it’s invested construction.

Invested construction is not a bad thing – perfect for prototyping towards final demo. Rapid prototyping is your tool to quickly test, validate and scrap. Anything too detailed - and invested - in can become hard to scrap.

DEPARTMENT OF COMPUTER SCIENCE

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

RAPID PROTOTYPING

Mastering techniques, process, equipment = Absolute control regarding time and scope

DEPARTMENT OF COMPUTER SCIENCE

==> picture [446 x 441] intentionally omitted <==

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

ARDUINO

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AGENDA

  • Why Arduino for prototyping

  • Alternative prototyping platforms (and what you will be taught about in other courses)

  • Code examples

  • ESP32 Wizard of Oz

DEPARTMENT OF COMPUTER SCIENCE

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

ARDUINO AS PROTOTYPING PLATFORM

Readily available here and big part of our lab-ecosystem

Lots of documentation and code examples + tutorials

Easy prototyping, hook-up, HATs, powering etc.

Many variations, sizes and beefiness

==> picture [251 x 251] intentionally omitted <==

Often limiting: CPU/GPU power, threading/cores, memory, GPIO pin amount, buffer sizes, communication.

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

==> picture [43 x 44] intentionally omitted <==

AARHUS UNIVERSITY

ALTERNATIVE PLATFORMS

Wemos D1 Mini (cheap WiFi board based on ESP8266)

ESP 32 (great platform with lots of possibilities)

RPI (when you want something in between a PC and an Arduino) ATMEL MCU family (used in PhysComp. When you want to create custom circuits) NUCs/Smartphones (for webapps/apps, graphics-intense tasks)

==> picture [43 x 44] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

ARDUINO IDE

~~Arduin~~ o is an open-source electronics platform based on easy-to-use hardware and software. https://www.arduino.cc/en/software

==> picture [708 x 285] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

ESP32

~~ESP32~~ is widely used in System-on-Chip (SoC) solutions designed for Internet of Things (IoT) applications due to its:

  • Integrated WiFi and Bluetooth

  • Lower power consumption with deep sleep modes

  • More I/O Features (than Arduino)

==> picture [264 x 263] intentionally omitted <==

==> picture [43 x 44] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

PINOUTS?

==> picture [558 x 400] intentionally omitted <==

==> picture [43 x 44] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

ESP32

==> picture [737 x 374] intentionally omitted <==

==> picture [43 x 44] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

ARDUINO V.S. ESP32 V.S. ESP8266

==> picture [850 x 352] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

ARDUINO COMPONENTS

DEPARTMENT OF COMPUTER SCIENCE AARHUS UNIVERSITY

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

==> picture [43 x 44] intentionally omitted <==

COMPONENTS – WHAT OPTIONS DO WE HAVE?

  • ~~Many~~ components will be covered in Physical Computing next semester: - Entire lecture set on sensors and what types we have in lab as inspiration. Engineering Interactive Technologies delves further into making novel sensing techniques.

  • Entire lecture set on actuators – even more time to delve into actuators in Multimodal Interaction and Shape Changing Objects and Spaces

  • For now: Use Johannes’ component inspiration kit and chomskylab.dk – and talk to supervisors/TAs/Labtools for further advice/inspiration.

==> picture [43 x 44] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

ARDUINO CODE EXAMPLES

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

==> picture [43 x 44] intentionally omitted <==

AARHUS UNIVERSITY

ARDUINO CODE EXAMPLES

“AnalogInOutSerial.ino”

“Arrays.ino”

”Smoothing.ino”

“switchCase.ino”

WiFi network examples (third-party examples)

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

==> picture [43 x 44] intentionally omitted <==

AARHUS UNIVERSITY

ANALOGIN OUTSERIAL

Example of map Example of analogRead Example of Serial.print

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

ARRAYS

Array example because slightly different syntax compared to java

DEPARTMENT OF COMPUTER SCIENCE

SIMON HOGGAN CHRISTENSEN LAB COORDINATOR

PHYSICAL PROTOTYPING 13. APRIL 2026

AARHUS UNIVERSITY

RUNNING AVG

”Smoothing.ino” in Arduino--> Examples Running average data smoothing Useful for sensor and input with noise Noise = variance in data without change in input

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

SWITCHCASE

Crucial for ITTT cases and sensing

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

ESP32 EXAMPLE – YOUR WOZ CHEATSHEET

ESP32 is a brilliant platform for the Wizard of Oz method.

Example code in Brightspace.

Simple UI via WiFiServer à interaction with ESP32 Easily adaptable.

Of course only used for evaluation and prototyping, not the final demo J

==> picture [216 x 390] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

INSTALL THE ESP32 BOARD IN ARDUINO IDE

  • Open IDE and go to Tools > Board > Boards Manager

  • Search "ESP32", select " esp32 by Espressif Systems ", and click Install

  • Reopen Arduino IDE

  • Under Tools>Board you should see esp32 à ESP32 Dev Module option

==> picture [224 x 449] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

INSTALL USB CABLE DRIVER

~~Downl~~ oad Link: https://www.silabs.com/developer-tools/usb-to-uart-bridge-vcp-drivers

  • Windows Users: The Arduino Installer should install the USB Driver automatically. But in case it doesn't work, download from the link. Windows 10 users should use CP210x Universival Windows Driver , and Windows 8.1,8 and 7 users can use CP210x Windows Driver.

  • MacOS Users: Download the CP210x VCP Mac OSX Driver . After installing, accept Privacy changes and prompts. If install fails, install legacy driver variant.

  • Testing if the USB driver works (all OS): in the Arduino menu Tools>port before plugging in your ESP with the USB cable. You should see either none or one entry listed. Now plug in your ESP microcontroller and take another look at Tools>port . You should hopefully see one more entry. On Windows this will often be something like COM3 . On Mac it will be USB_to_UART or cu.usbserial

==> picture [43 x 44] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

TESTING AND GETTING INFO

  • Open FileàExamples à Basics à BareMinimum and test that upload works to your ESP32.

  • During upload the device MAC adress will be written (including other useful info)

==> picture [613 x 162] intentionally omitted <==

  • Now it’s time to get on WiFi, by either using your phone hotspot as WiFi, or connect to AU-IoT via Simon (bring him your device MAC address)

==> picture [43 x 44] intentionally omitted <==

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

GETTING ON WIFI

include const char ssid = "AU-IoT"; const char password = "test1234"; void setup(){ Serial.begin(921600); delay(1000); WiFi.mode(WIFI_STA); //Optional WiFi.begin(ssid, password); Serial.println("\nConnecting"); while(WiFi.status() != WL_CONNECTED){ Serial.print("."); delay(100); } Serial.println("\nConnected to the WiFi network"); Serial.print("Local ESP32 IP: "); Serial.println(WiFi.localIP()); }

DEPARTMENT OF COMPUTER SCIENCE

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

void loop(){}

Or your phone hotspot SSID + pass

==> picture [43 x 44] intentionally omitted <==

AARHUS UNIVERSITY

GETTING ON WIFI

  • Result 1:

==> picture [613 x 108] intentionally omitted <==

  • Result 2: Endless connecting loop (retry SSID/pass or another WiFi)

  • Result 3: Connection failed (retry)

  • Result 4: Gibberish (check baud rate).

DEPARTMENT OF COMPUTER SCIENCE

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

REACTING TO ONLINE INPUT

  • Open the .ino file from Brightspace called ”ESP32_WifiWorkshopFinal” (unedited code can also be found via link, remember to change SSID credentials and baud).

  • Read through to understand what it does. It is a very basic HTTP-request ”ESP32 as web server”-setup, and is great for future prototyping!

  • Set up a breadboard with your ESP and two LEDs to pin 26 and 27 (remember a 220 ohm resistor to each + GND pin)

  • Use your computer/phone to control the pins (write the IP in the URL-field in a browser)

  • Optional - IoT Doorbell: Edit the code to work with a single buzzer instead of two LEDs – maybe even make a little melody?

DEPARTMENT OF COMPUTER SCIENCE

Idea and code from: https://randomnerdtutorials.com/esp32-web-server-arduino-ide/

==> picture [43 x 44] intentionally omitted <==

PHYSICAL PROTOTYPING SIMON HOGGAN CHRISTENSEN 13. APRIL 2026 LAB COORDINATOR

AARHUS UNIVERSITY

==> picture [176 x 88] intentionally omitted <==

L12_GUI_design_2026.pdf Open PDF
Show converted presentation markdown

==> picture [97 x 41] intentionally omitted <==

GUI DESIGN ITPDP’26, L12

Dr. Minna Pakanen Department of Digital Design and Information Studies mpakanen @cc.au.dk

22[ND] APRIL 2026

MINNA PAKANEN

==> picture [717 x 404] intentionally omitted <==

==> picture [243 x 404] intentionally omitted <==

22[ND] APRIL 2026 MINNA PAKANEN

CONTENTS

  • Visual perception

  • Gestalt principles

  • UI design guidelines

  • Interaction patterns

  • Break

  • UI design process

  • Layout of GUIs

  • Aesthetic styles

  • Color on screen

22[ND] APRIL 2026

MINNA PAKANEN

VISUAL PERCEPTION

==> picture [275 x 155] intentionally omitted <==

Jeff Johnson (2013) Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design guidelines

22[ND] APRIL 2026

MINNA PAKANEN

4

WE PERCEIVE WHAT WE EXPECT

Our expectations & perceptions—are biased by three factors:

  • The past: our experience

  • The present: the current context

  • The future: our goals

22[ND] APRIL 2026

MINNA PAKANEN

BIASED PERCEPTION

By our experience

==> picture [640 x 202] intentionally omitted <==

Jeff Johnson (2013)

22[ND] APRIL 2026 MINNA PAKANEN

BIASED PERCEPTION

By our experience Design implication: Be consistent!

  • Place information and controls in consistent locations

  • Controls and data displays that serve the same function on different pages should be placed in the same position on each page, and have the same colour, text fonts, shading, and so on

Jeff Johnson (2013)

==> picture [247 x 452] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

BIASED PERCEPTION

By current context

==> picture [565 x 132] intentionally omitted <==

Jeff Johnson (2013)

22[ND] APRIL 2026

MINNA PAKANEN

BIASED PERCEPTION

By current context

==> picture [366 x 160] intentionally omitted <==

Jeff Johnson (2013)

==> picture [245 x 139] intentionally omitted <==

==> picture [276 x 157] intentionally omitted <==

MINNA PAKANEN

22[ND] APRIL 2026

BIASED PERCEPTION

By our goals

Is there a screwdriver in the next picture?

22[ND] APRIL 2026

MINNA PAKANEN

BIASED PERCEPTION

By our goals

==> picture [683 x 249] intentionally omitted <==

Jeff Johnson (2013)

22[ND] APRIL 2026

MINNA PAKANEN

BIASED PERCEPTION

By our goals

Was there a screwdriver in the prior picture?

22[ND] APRIL 2026

MINNA PAKANEN

BIASED PERCEPTION

By our goals

Was there a tape roll in the picture?

22[ND] APRIL 2026

MINNA PAKANEN

BIASED PERCEPTION

By our goals

==> picture [683 x 249] intentionally omitted <==

Jeff Johnson (2013)

22[ND] APRIL 2026

MINNA PAKANEN

DESIGN IMPLICATIONS

Avoid ambiguity

  • Test your design to verify that all users interpret the display in the same way

  • Where ambiguity is unavoidable, either rely on standards or conventions to resolve it, or prime users to resolve the ambiguity in the intended way

  • For example, computer displays often shade buttons and text fields to make them look raised in relation to the background surface.

==> picture [256 x 94] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

DESIGN IMPLICATIONS

Understand user goals!

  • Users come to a system with goals they want to achieve

  • Goals may vary, and goals strongly influence what users perceive

• Ensure that at every point in an interaction, the information users need is available, prominent, and maps clearly to a possible user goal, so users will notice and use the information

22[ND] APRIL 2026

MINNA PAKANEN

GESTALT PRINCIPLES

Gordon, I. E. (2004). Theories of visual perception. Psychology press.

22[ND] APRIL 2026

MINNA PAKANEN

GESTALT

==> picture [272 x 326] intentionally omitted <==

==> picture [260 x 326] intentionally omitted <==

==> picture [154 x 155] intentionally omitted <==

==> picture [165 x 161] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

“The whole of something is more important to our understanding than the individual parts.”

22[ND] APRIL 2026

MINNA PAKANEN

GESTALT PRINCIPLES

  • Describe how the human eye perceives visual elements

  • Aim to:

  • show how complex scenes can be reduced to more simple shapes

  • explain how the eyes perceive the shapes as a single, united form rather than the separate simpler elements involved.

22[ND] APRIL 2026

MINNA PAKANEN

GESTALT PRINCIPLES

1) Similarity

2) Proximity

  • 3) Common region

  • 4) Closure

  • 5) Continuation

6) Figure-ground

  • 7) Focal point

22[ND] APRIL 2026

MINNA PAKANEN

1) SIMILARITY

==> picture [79 x 80] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 80] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

When things appear to be similar to each other we group them together. And we also tend to think they have the same function.

==> picture [80 x 79] intentionally omitted <==

==> picture [299 x 178] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [288 x 82] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

2) PROXIMITY

==> picture [80 x 79] intentionally omitted <==

==> picture [79 x 177] intentionally omitted <==

==> picture [80 x 276] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 177] intentionally omitted <==

==> picture [80 x 275] intentionally omitted <==

==> picture [79 x 275] intentionally omitted <==

==> picture [80 x 80] intentionally omitted <==

==> picture [80 x 177] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

EXAMPLE: PROXIMITY

When elements are close together, appear to be more related to each other than objects with more proximity to each other

  • separate or build relationship using empty space between objects

==> picture [716 x 187] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

3) COMMON REGION

==> picture [80 x 79] intentionally omitted <==

==> picture [79 x 178] intentionally omitted <==

==> picture [80 x 276] intentionally omitted <==

==> picture [398 x 301] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

EXAMPLE: COMMON REGION

The principle of common region is highly related to proximity. It states that when objects are located within the same closed region, we perceive them as being grouped together.

Adding borders or other visible barriers is a great way to create a perceived separation between groups of objects—even if they have the same proximity, shape, color, etc.

==> picture [294 x 455] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

4) CLOSURE

==> picture [111 x 129] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

EXAMPLE: CLOSURE

==> picture [272 x 155] intentionally omitted <==

==> picture [131 x 129] intentionally omitted <==

gizmodo.com

www.worldwildlife.org

https://commons.wikimedia. org/wiki/File:NBC_logo.svg

==> picture [129 x 129] intentionally omitted <==

==> picture [353 x 129] intentionally omitted <==

==> picture [235 x 330] intentionally omitted <==

https://www.fairtrade.net

22[ND] APRIL 2026

MINNA PAKANEN

5) CONTINUATION

22[ND] APRIL 2026

MINNA PAKANEN

EXAMPLE: CONTINUATION

==> picture [431 x 272] intentionally omitted <==

https://juliankay.com/development/principles-and-actions-for-metro-app/

==> picture [268 x 268] intentionally omitted <==

https://en.wikipedia.org/wiki/The_Dark_Side_of_the_Moon#/ media/File:Dark_Side_of_the_Moon.png

22[ND] APRIL 2026

MINNA PAKANEN

EXAMPLE: CONTINUATION

==> picture [352 x 453] intentionally omitted <==

----- Start of picture text -----
22 [ND] APRIL 2026 MINNA PAKANEN
----- End of picture text -----

6) FIGURE-GROUND

==> picture [196 x 219] intentionally omitted <==

People perceive objects as either being in the foreground (figures) or the background (grounds)

==> picture [272 x 236] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

EXAMPLE: FIGURE-GROUND

==> picture [239 x 347] intentionally omitted <==

==> picture [239 x 347] intentionally omitted <==

22[ND] APRIL 2026 MINNA PAKANEN

EXAMPLE: FIGURE-GROUND

==> picture [960 x 301] intentionally omitted <==

https://www.usertesting.com/blog/gestalt-principles

22[ND] APRIL 2026

MINNA PAKANEN

7) FOCAL POINT

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 80] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 80] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [80 x 80] intentionally omitted <==

==> picture [77 x 77] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 80] intentionally omitted <==

==> picture [80 x 79] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 80] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

==> picture [79 x 80] intentionally omitted <==

==> picture [79 x 79] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

EXAMPLE: FOCAL POINT

==> picture [585 x 296] intentionally omitted <==

https://www.instagram.com

==> picture [340 x 296] intentionally omitted <==

https://dribbble.com/shots/10003996-focal-pointlogotype/attachments/2021673?mode=media

22[ND] APRIL 2026

MINNA PAKANEN

UI DESIGN GUIDELINES Jeff Johnson (2013) Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design guidelines. W3C Web Accessibility Initiative WAI (n.d.) Accessibity guidelines. https://www.w3.org/WAI/fundamentals/accessibility-principles/#standards

22[ND] APRIL 2026 MINNA PAKANEN

CHALLENGES WITH UI DESIGN GUIDELINES

Following guidelines is not as straightforward as following cooking recipes

  • › Design rules often describe goals rather than actions › Very general to make them broadly applicable

  • › Open to interpretation › Design rules often contradict, i.e., they suggest different designs

22[ND] APRIL 2026

MINNA PAKANEN

UI DESIGN GUIDELINES

Conflicts & tradeoffs

Bright screen & Lightweight & Multifunctional & Powerful & High resolution & WYSIWYG &

Long battery life Sturdy Easy to learn Simple Fast loading Usable by blind people

22[ND] APRIL 2026

MINNA PAKANEN

2 BEST KNOWN UI DESIGN GUIDELINES

Shneiderman (1987);
Shneiderman and Plaisant (2009)
Nielsen and Molich (1990)

Strive for consistency

Cater to universal usability

Offer informative feedback

Design task flows to yield closure

Prevent errors

Permit easy reversal of actions

Make users feel they are in control

Minimize short-term memory load
• Consistency and standards
• Visibility of system status
• Match between system and real world
• User control and freedom
• Error prevention
• Recognition rather than recall
• Flexibility and efficiency of use
• Aesthetic and minimalist design
• Help to recognize, diagnose, and recover from errors
• Provide online documentation and help

22[ND] APRIL 2026 MINNA PAKANEN

OTHER UI DESIGN GUIDELINES STONE ET AL. (2005)

  • Visibility : First step to goal should be clear

  • Affordance : Control suggests how to use it

  • Feedback : Should be clear what happened or is happening

  • Simplicity : As simple as possible and task-focused

  • Structure : Content organized sensibly

  • Consistency : Similarity for predictability

  • Tolerance : Prevent errors, help recovery

  • Accessibility : Usable by all intended users, despite handicap, access

  • device, or environmental conditions

22[ND] APRIL 2026

MINNA PAKANEN

ACCESSIBILITY GUIDELINES

W3C WEB ACCESSIBILITY INITIATIVE WAI

Focus on

  • Perceivable information and user interface

  • Text alternatives for non-text content

  • Captions and other alternatives for multimedia

  • Content can be presented in different ways

  • Content is easier to see and hear

  • Operable user interface and navigation

  • Functionality is available from a keyboard

  • Users have enough time to read and use the content

  • Content does not cause seizures and physical reactions

  • Users can easily navigate, find content, and determine where they are

  • Users can use different input modalities beyond keyboard

  • Understandable information and user interface

  • Text is readable and understandable

  • Content appears and operates in predictable ways

  • Users are helped to avoid and correct mistakes

  • Robust content and reliable interpretation

  • Content is compatible with current and future user tools

https://www.w3.org/WAI/fundamentals/accessibility-principles/#standards

22[ND] APRIL 2026

MINNA PAKANEN

OTHER UI DESIGN GUIDELINES JOHNSON (2007)

  • Focus on the users and their tasks, not on the technology

  • Consider function first (conceptual model), presentation later

  • Conform to the users’ view of the task

  • Design for the common case

  • Don’t complicate the users’ task

  • Facilitate learning: consistency!

  • Deliver information, not just data

  • Design for responsiveness

Johnson, J. (2007). GUI bloopers 2.0: Common user interface design don’ts and dos

22[ND] APRIL 2026

MINNA PAKANEN

INTERACTION PATTERNS Jenifer Tidwell (2010) Designing Interfaces: Patterns for Effective Interaction Design

22[ND] APRIL 2026

MINNA PAKANEN

12 INTERACTION PATTERNS

  1. Safe exploration

  2. Instant gratfication

  3. Satisficing

  4. Changes in midstream

  5. Deferred choices

  6. Incremental construction

  7. Habituation

  8. Spatial memory

  9. Prospective memory

  10. Streamlined repetition

  11. Keyboard only

  12. Other people’s advice

22[ND] APRIL 2026

MINNA PAKANEN

1. SAFE EXPLORATION

”let me explore without getting lost or in trouble”

==> picture [92 x 115] intentionally omitted <==

==> picture [267 x 114] intentionally omitted <==

==> picture [364 x 317] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

2. INSTANT GRATIFICATION

”I wan’t to accomplish something NOW, not later”

==> picture [491 x 274] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

2. INSTANT GRATIFICATION

”I wan’t to accomplish something NOW, not later”

==> picture [348 x 212] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

3. SATISFICING (SATISFYING + SUFFICE)

”this is good ennough, I dont want to spend time learning it better”

==> picture [668 x 376] intentionally omitted <==

----- Start of picture text -----
22 [ND] APRIL 2026 MINNA PAKANEN
----- End of picture text -----

3. SATISFICING (SATISFYING + SUFFICE)

This means several things that interaction designers should consider:

  • Use “calls to action” in the interface: give the user directions what to do first, type here or drag things here, and tap the button to begin…

  • Make labels short, plainly worded, and quick to read (includes menu buttons)

  • Use the layout of the interface to communicate the meaning

  • Make it easy to move around the interface, the back button!

  • Avoid visual complexity, as novice users look for the first thing that might work

22[ND] APRIL 2026

MINNA PAKANEN

4. CHANGES IN MIDSTREAM

”I changed my mind about what I was doing”

==> picture [567 x 341] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

5. DEFERRED CHOICES

”I don’t want to

answer that now, let me finish later”

==> picture [560 x 356] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

6. INCREMENTAL CONSTRUCTION

”let me change this. No that doesn’t look right; let me change it again. That looks better”

==> picture [473 x 370] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

7. HABITUATION

”that gesture works everywhere else, why doesn’t it work here?”

Ctrl+C, Ctrl+V, Ctrl+X, Ctrl+S, Ctrl+A, Ctrl+Z

==> picture [273 x 435] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

8. SPATIAL MEMORY

”I swear that button was here a minute ago. Where did it go?”

==> picture [372 x 331] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

8. SPATIAL MEMORY

”I swear that button was here a minute ago. Where did it go?”

==> picture [960 x 140] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

9. PROSPECTIVE MEMORY

”I am putting this here to remind myself to deal with this later”

==> picture [510 x 311] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

9. PROSPECTIVE MEMORY

”I am putting this here to remind myself to deal with this later”

==> picture [280 x 271] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

10. STREAMLINED REPETITION

”I have to repeat this how many times?”

==> picture [202 x 486] intentionally omitted <==

22[ND] APRIL 2026 MINNA PAKANEN

10. STREAMLINED REPETITION

”I have to repeat this how many times?”

==> picture [449 x 163] intentionally omitted <==

==> picture [324 x 269] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

11. KEYBOARD ONLY

”Please don’t make me use a mouse”

==> picture [579 x 234] intentionally omitted <==

==> picture [239 x 239] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

12. OTHER PEOPLE’S ADVICE

”What did everyone else say about this”

==> picture [329 x 372] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

A LITTLE ABOUT THE UI DESIGN PROCESS…

22[ND] APRIL 2026

MINNA PAKANEN

UI DESIGN PROCESS

  1. Strategy

  2. Scope

  3. Structure

  4. Skeleton

  5. Surface

22[ND] APRIL 2026

MINNA PAKANEN

1. STRATEGY

  • › What is the problem you are trying to solve?

  • › What are your user needs?

  • › How is problem best solved?

==> picture [283 x 307] intentionally omitted <==

https://shft.run

22[ND] APRIL 2026

MINNA PAKANEN

2. SCOPE

  • › Specification: what should it do? And in what way?

  • › Prioritised features: the most important elements (and why)?

==> picture [231 x 251] intentionally omitted <==

==> picture [444 x 251] intentionally omitted <==

https://shft.run

22[ND] APRIL 2026

MINNA PAKANEN

3. STRUCTURE

  • › User flow: what are the most logical steps for your users to take, to gratify their needs

  • › Information architecture: how to structure your system

==> picture [138 x 43] intentionally omitted <==

==> picture [125 x 83] intentionally omitted <==

==> picture [125 x 84] intentionally omitted <==

==> picture [125 x 129] intentionally omitted <==

https://careerfoundry.com/en/blog/ux-design/what-are-user-flows/22[[ND]]

22[[ND]] APRIL 2026

MINNA PAKANEN

4. SKELETON

==> picture [619 x 354] intentionally omitted <==

On the structure: › Placing elements in relation to one another › Presentation of the information –> facilitates understanding

==> picture [156 x 13] intentionally omitted <==

----- Start of picture text -----
https://www.above.se/shft
----- End of picture text -----

22[ND] APRIL 2026

==> picture [56 x 7] intentionally omitted <==

----- Start of picture text -----
MINNA PAKANEN
----- End of picture text -----

WIREFRAMING TOOLS

Wireframe.cc

==> picture [566 x 361] intentionally omitted <==

https://wireframe.cc

22[ND] APRIL 2026

MINNA PAKANEN

WIREFRAMING TOOLS

Balsamic

==> picture [602 x 349] intentionally omitted <==

https://balsamiq.com/wireframes/

22[ND] APRIL 2026

MINNA PAKANEN

5. SURFACE

  • › What should the interface look like?

  • › How can the visual support the desired interaction?

  • › How can it best communicate the brand, product, value, and functionality in one cohesive image?

  • › What is the sensory experience desired?

22[ND] APRIL 2026

MINNA PAKANEN

SURFACE

==> picture [413 x 346] intentionally omitted <==

==> picture [169 x 290] intentionally omitted <==

https://shft.run

22[ND] APRIL 2026

MINNA PAKANEN

LAYOUT OF GUIS

==> picture [456 x 361] intentionally omitted <==

To avoid the common mistakes …

• Uxplanet

https://uxplanet.org/common-webpage-design-mistakes-59eed9831bd7

  • Material design

https://material.io/design/

22[ND] APRIL 2026

MINNA PAKANEN

RESPONSIVE LAYOUT

Columns, gutters, and margins

==> picture [631 x 271] intentionally omitted <==

----- Start of picture text -----
2. Gutters:
Spaces between
columns
3. Margins:
Space between
content and left
and right edges of
the screen
----- End of picture text -----

==> picture [134 x 52] intentionally omitted <==

----- Start of picture text -----
1. Columns:
where the content
is placed
----- End of picture text -----

https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

22[ND] APRIL 2026

MINNA PAKANEN

Larger gutter

RESPONSIVE LAYOUT

Gutters and margins

Gutter & margins width can be different from each other

==> picture [478 x 231] intentionally omitted <==

==> picture [311 x 178] intentionally omitted <==

Gutter and margins for horizontal scroll

https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

22[ND] APRIL 2026

MINNA PAKANEN

EVEN SPACING

Gutters and margins

Gutter & margins width can be different from each other

Gutter and margins for horizontal scroll

https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

22[ND] APRIL 2026

MINNA PAKANEN

RULE OF THIRDS

==> picture [574 x 414] intentionally omitted <==

----- Start of picture text -----
41% 20%
25% 14%
22 [ND] APRIL 2026 MINNA PAKANEN
----- End of picture text -----

WHITE SPACE

Negative space

==> picture [404 x 157] intentionally omitted <==

https://medium.muz.li/the-effective-utilization-of-white-space-in-ui-design-c944009b2540

==> picture [405 x 305] intentionally omitted <==

https://designwoop.com/minimalist-app-design

https://www.w3.org/WAI/tips/designing/ 22[ND] APRIL 2026 MINNA PAKANEN

ORGANIZE AND PRIORITIZE THE CONTENTS

Size: The more important a headline is, the larger its font size should be Prominence: The more important the headline or content, the higher up the page it should be Content Relationships: Group similar content types by displaying the content in a similar visual style, or in a clearly defined area.

==> picture [505 x 168] intentionally omitted <==

==> picture [368 x 175] intentionally omitted <==

(Jeff Johnson, 2013)

https://m2.material.io/design/layout/applying-density.html#layout

22[ND] APRIL 2026 MINNA PAKANEN

ORGANIZE THE CONTENTS PROPERLY

Locate important things in predictable locations:

  • Display the company name and logo prominently in the top left corner of the homepage

  • Remember to enable users using logo as going back to landing page

  • The most important content should be above the fold (i.e. the area of the page visible without scrolling, the landing site) , and lead users down the page when there is more content to see.

  • Primary navigation in a highly noticeable place

    • Menu, language selection, search fields should be in the header area

    • The most crucial tasks should be visually prominent on the page

  • Describe actions in a way that resonates with your target audience's goals. What are they hoping to achieve on your homepage?

  • Links should be named descriptively

  • Keep it simple and make sure your design scales to different GUIs (mobile, tablet and computer)

https://www.nngroup.com/articles/homepage-design-principles/

22[ND] APRIL 2026

MINNA PAKANEN

ORGANIZE THE CONTENTS PROPERLY

Examples: vr.fi and dsb.dk

==> picture [477 x 251] intentionally omitted <==

==> picture [450 x 251] intentionally omitted <==

  • Where are the logo, menu, language selection, search field, and the most important contents for the user’s task completion?

  • What is in the header, main area, and footer?

  • Is the most priority content prominently presented?

  • How is the navigation designed, does it work well both in mobile and computer?

22[ND] APRIL 2026

MINNA PAKANEN

TYPOGRAPHY

Note that print and screen need different kind of typography!

==> picture [73 x 73] intentionally omitted <==

==> picture [83 x 83] intentionally omitted <==

==> picture [47 x 32] intentionally omitted <==

==> picture [301 x 151] intentionally omitted <==

----- Start of picture text -----
S S
Sans serif
Serif
----- End of picture text -----

==> picture [47 x 32] intentionally omitted <==

==> picture [74 x 73] intentionally omitted <==

==> picture [73 x 73] intentionally omitted <==

==> picture [38 x 39] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

TYPOGRAPHY ON SCREEN

  • Avoid hard to read and decorative fonts

  • Consider font size

  • Avoid text on noisy background

  • Avoid long sections of bold, italic, or uppercase text.

  • Avoid centered text in text blocks

How about this?

Or this?

  • Left-aligned text for large sections, as this gives readers a consistent starting point for each line of text.

  • Centered, right-aligned, or justified text .

  • can be used for headings or short sections

Jeff Johnson (2013)

22[ND] APRIL 2026

MINNA PAKANEN

ACCESSIBILITY OF SCREEN FONTS

Focus on size, spacing, contrast, font

==> picture [450 x 237] intentionally omitted <==

==> picture [449 x 237] intentionally omitted <==

https://www.audioeye.com/ultimate-guide-to-accessible-web-design/

22[ND] APRIL 2026

MINNA PAKANEN

MINIMIZE THE NEED FOR READING

==> picture [295 x 214] intentionally omitted <==

==> picture [333 x 221] intentionally omitted <==

==> picture [228 x 52] intentionally omitted <==

Jeff Johnson (2013)

22[ND] APRIL 2026

MINNA PAKANEN

STATES OF AN INTERACTIVE ELEMENT

Distinct, additive & consistent visual representations

==> picture [374 x 227] intentionally omitted <==

==> picture [184 x 223] intentionally omitted <==

==> picture [379 x 227] intentionally omitted <==

https://material.io/design/interaction/states.html#usage

22[ND] APRIL 2026

MINNA PAKANEN

STATES OF AN INTERACTIVE ELEMENT

Distinct, additive & consistent visual representations

==> picture [443 x 279] intentionally omitted <==

==> picture [443 x 273] intentionally omitted <==

https://material.io/design/interaction/states.html#usage

22[ND] APRIL 2026

MINNA PAKANEN

ERROR MESSAGES

==> picture [231 x 59] intentionally omitted <==

Sorry!

Put it in where users are looking

  • People focus in predictable places when interacting with graphical user interfaces

  • Mark the error

  • indicate clearly what is wrong

Reserve red for errors

  • Using red for any other information on a computer display invites misinterpretation

  • Use another color for errors or mark them with an error symbol if designing for cultures where red is positive color (Chinese)

Your password was not correct. Please try again. OK

==> picture [231 x 123] intentionally omitted <==

==> picture [230 x 107] intentionally omitted <==

Jeff Johnson (2013)

22[ND] APRIL 2026 MINNA PAKANEN

GUI DESIGN & PROTOTYPING

Figma

==> picture [601 x 357] intentionally omitted <==

https://www.figma.com

22[ND] APRIL 2026

MINNA PAKANEN

AESTHETIC STYLES

==> picture [382 x 194] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

SKEUOMORPHISM

==> picture [501 x 376] intentionally omitted <==

http://www.originalgreen.org/blog/2013/skeuomorphism---how-steve.html

22[ND] APRIL 2026

MINNA PAKANEN

SKEUOMORPHISM

Benefits

Skeuomorphism may be used in many different ways to help familiarise users to a new product and technology

  • For example, if an object casts a shadow, our brains automatically visualise that as a 3D shape that has volume

==> picture [263 x 94] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

SKEUOMORPHISM

Challenges

  • The problem is when borrowing features from the original design, you often also bring its limitations with it, even when these limitations have no reason to exist anymore • There is also the problem of getting skeuomorphism wrong: making something look like a physical object but not work like it

http://www.originalgreen.org/blog/2013/skeuomorphism---how-steve.html

22[ND] APRIL 2026

MINNA PAKANEN

FLAT

==> picture [531 x 345] intentionally omitted <==

https://mspoweruser.com/developers-31-days-of-windows-phone-metro-design-from-microsoft-ux-designer/

==> picture [353 x 220] intentionally omitted <==

==> picture [330 x 186] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

FLAT

Challenges

• Taking the approach too far to minimalism can have serious consequences on usability because when all the affordances of the design are removed it is harder for the user to know how to interact with the interface

==> picture [268 x 195] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

FROM SKEUOMORPHISM TO FLAT DESIGN

==> picture [388 x 291] intentionally omitted <==

==> picture [399 x 290] intentionally omitted <==

skeuomorphic

flat

22[ND] APRIL 2026 MINNA PAKANEN

FROM SKEUOMORPHISM TO FLAT DESIGN

==> picture [190 x 336] intentionally omitted <==

==> picture [189 x 336] intentionally omitted <==

skeuomorphic

flat

22[ND] APRIL 2026 MINNA PAKANEN

WHAT IS NEXT?

==> picture [598 x 203] intentionally omitted <==

https://smithhousedesign.com/new-logo-instagram-marks-beginning-end-flat-design/

22[ND] APRIL 2026

MINNA PAKANEN

NEUOMORPHISM

==> picture [426 x 320] intentionally omitted <==

https://dribbble.com/shots/7994421-Skeuomorph-Mobile-Banking

22[ND] APRIL 2026

MINNA PAKANEN

NEUOMORPHISM

==> picture [401 x 301] intentionally omitted <==

==> picture [401 x 301] intentionally omitted <==

https://envato.com/blog/skeuomorphism-is-back/

22[ND] APRIL 2026

MINNA PAKANEN

STYLE: WHICH PATH TO CHOOSE?

Good designers design for context, picking the best option for the specific case

  • Take all the good things from flat design and skeuomorphism/realism and apply them in a way that is still usable. (e.g. Skeuominimalistic or neumorphism)

  • Consider implications when using realism

  • Simplification should not affect usability, and maximize skeuomorphic affordances to the point where it does not affect the simple beauty of minimalism

==> picture [236 x 418] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

ANIMATION ON WEBPAGES

==> picture [601 x 337] intentionally omitted <==

https://www.handwrytten.com

22[ND] APRIL 2026 MINNA PAKANEN

ANIMATION EASTER EGGS

==> picture [614 x 343] intentionally omitted <==

22[ND] APRIL 2026 MINNA PAKANEN

COLOR IN GUI

How to use colours in GUI design

22[ND] APRIL 2026

MINNA PAKANEN

112

COLOR

==> picture [291 x 258] intentionally omitted <==

Primary colors

Johannes Itten, 1961

https://www.wikiwand.com/en/Johannes_Itten

22[ND] APRIL 2026

MINNA PAKANEN

COLOR

==> picture [291 x 258] intentionally omitted <==

Secondary colors

Johannes Itten, 1961 https://www.wikiwand.com/en/Johannes_Itten

22[ND] APRIL 2026

MINNA PAKANEN

COLOR

==> picture [292 x 258] intentionally omitted <==

Full color wheel

Johannes Itten, 1961 https://www.wikiwand.com/en/Johannes_Itten

22[ND] APRIL 2026

MINNA PAKANEN

COLOR SPACE

RGB

For any kind of screen:

  • computers, smartphones, tablets, TVs, cameras, etc.

  • For digital images and elements

  • Web & app design

RGB

  • Icons

  • Buttons

  • Graphics

  • File formats: JPG, PNG, GIF

• Web: HEX#(RRGGBB)

https://99designs.dk/blog/tips/correct-file-formats-rgb-and-cmyk/

MINNA PAKANEN

22[ND] APRIL 2026

Warm

==> picture [75 x 33] intentionally omitted <==

----- Start of picture text -----
Energizing
Happiness
----- End of picture text -----

MEANINGS

==> picture [689 x 375] intentionally omitted <==

----- Start of picture text -----
Cheerful
Energetic
Harmony
Natural Change/movement
Renewal GREEN Vitality
ORANGE
BLUE RED Bold
Calm
Aggression/danger
Refreshing
Love
Reliability/ strength
Hot
PURPLE
Wisdom
Luxury
----- End of picture text -----

Note the cultural differences:

https://www.smashingmagazine.com/2010/01/color-theory-for-designers-part-1-the-meaning-of-color/22[ND] APRIL 2026 MINNA PAKANEN

COLOR HARMONY

==> picture [152 x 153] intentionally omitted <==

==> picture [152 x 152] intentionally omitted <==

==> picture [152 x 152] intentionally omitted <==

==> picture [832 x 202] intentionally omitted <==

----- Start of picture text -----
Complimentary
Monochromatic Analogous
Split-complimentary Triadic Rectangle Square
----- End of picture text -----

22[ND] APRIL 2026

MINNA PAKANEN

==> picture [105 x 105] intentionally omitted <==

COLOR HARMONY: COMPLIMENTARY

==> picture [196 x 83] intentionally omitted <==

==> picture [137 x 239] intentionally omitted <==

==> picture [466 x 313] intentionally omitted <==

==> picture [98 x 98] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

==> picture [105 x 105] intentionally omitted <==

COLOR HARMONY: ANALOGOUS

==> picture [154 x 131] intentionally omitted <==

==> picture [412 x 331] intentionally omitted <==

==> picture [179 x 195] intentionally omitted <==

==> picture [114 x 104] intentionally omitted <==

https://www.mastercard.dk/da-dk.html

22[ND] APRIL 2026

MINNA PAKANEN

COLOR HARMONY: TRIADIC

==> picture [137 x 140] intentionally omitted <==

==> picture [132 x 176] intentionally omitted <==

==> picture [125 x 174] intentionally omitted <==

==> picture [112 x 114] intentionally omitted <==

==> picture [105 x 105] intentionally omitted <==

==> picture [327 x 296] intentionally omitted <==

https://www.burgerking.dk/menu

22[ND] APRIL 2026

MINNA PAKANEN

COLOR HARMONY: TRIADIC

==> picture [105 x 105] intentionally omitted <==

==> picture [237 x 157] intentionally omitted <==

==> picture [250 x 151] intentionally omitted <==

==> picture [482 x 291] intentionally omitted <==

https://indicius.com

22[ND] APRIL 2026

MINNA PAKANEN

DISTINGUISHING COLORS

by saturation and brightness as well as hue

  • Avoid subtle color differences

  • Make sure the contrast between colors is high

==> picture [241 x 125] intentionally omitted <==

Paleness of the color >

Patch size <

==> picture [46 x 126] intentionally omitted <==

==> picture [47 x 126] intentionally omitted <==

==> picture [46 x 126] intentionally omitted <==

Separation >

==> picture [47 x 126] intentionally omitted <==

Jeff Johnson (2013)

22[ND] APRIL 2026

MINNA PAKANEN

DISTINGUISHING COLORS

==> picture [385 x 293] intentionally omitted <==

==> picture [384 x 292] intentionally omitted <==

Jeff Johnson (2013)

https://colorbrewer2.org

22[ND] APRIL 2026

MINNA PAKANEN

DISTINGUISHING COLORS

==> picture [387 x 293] intentionally omitted <==

==> picture [384 x 292] intentionally omitted <==

Jeff Johnson (2013)

22[ND] APRIL 2026 MINNA PAKANEN

DISTINGUISHING COLORS

==> picture [388 x 178] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

SEPARATE STRONG OPPONENT COLORS

==> picture [182 x 291] intentionally omitted <==

==> picture [182 x 291] intentionally omitted <==

==> picture [182 x 291] intentionally omitted <==

Jeff Johnson (2013)

22[ND] APRIL 2026 MINNA PAKANEN

ACCESSIBLE COLORS

Avoid color pairs that color-blind people cannot distinguish

  • Red – green

  • Blue - yellow

==> picture [68 x 62] intentionally omitted <==

==> picture [381 x 137] intentionally omitted <==

  • Accessible colors: https://color.adobe.com/create/color-accessibility

  • Check images to see how people with various color vision deficiencies would see them: https://www.color-blindness.com/coblis-color-blindnesssimulator/

  • Find predefined suitable themes for infographics from: Jeff Johnson (2013)

  • https://colorbrewer2.org

22[ND] APRIL 2026 MINNA PAKANEN

DESIGNING WITH COLOURS

The basic rules

  • Remember that colors evoke feelings and moods (e.g., red = love, passion, strength, and aggression), note also cultural differences

  • Try to match the color to the overall tone and feel of the brand or product

  • One color only might work, some brands are recognizable by their distinct color (e.g., McDonalds, Ferrari)

  • :

  • Consider using color harmony

  • Colors near to each other on the color wheel (e.g. for a “warm” palette: red, orange, and yellow hues or a cold palette…)

  • Complementary colors (e.g., other sides of the color wheel)

  • Don’t use colors that are so bright that they are hurting eyes (chock colors)

  • Remember color blind users!

22[ND] APRIL 2026

MINNA PAKANEN

TEXT COLOR

Text on colored backgrounds

  • Black text on light backgrounds

  • White text on dark backgrounds

  • Color backgrounds or typography change the rules regarding text opacity and different states of the text

  • Avoid long color text on color backgrounds!

https://material.io/design/

==> picture [208 x 371] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

DESIGNING WITH COLORS

GUIs

  • Start with neutrals

  • Grey tones, white, black

==> picture [409 x 45] intentionally omitted <==

  • Add 1-3 colors that fits with the brand

  • Use colors wisely!

  • Remember the white space!

==> picture [409 x 148] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

DESIGNING WITH COLORS

GUIs

  • https://m2.material.io/design/color/ the-color-system.html#color-themecreation

==> picture [375 x 378] intentionally omitted <==

22[ND] APRIL 2026

MINNA PAKANEN

ADOBE COLOR

==> picture [487 x 368] intentionally omitted <==

https://color.adobe.com/

22[ND] APRIL 2026

MINNA PAKANEN

ADOBE COLOR

==> picture [518 x 362] intentionally omitted <==

https://color.adobe.com/trends/Interaction

22[ND] APRIL 2026

MINNA PAKANEN

FIGMA TUTORIAL MONDAY 27[TH] APRIL (12:00-15:00)

https://www.figma.com

  • Maja will visit to teach you Figma prototyping with Julia

  • Before Monday:

  • Watch Julia’s Figma Intro (in Bs today afternoon)

• Make a Figma account and try it to get familiar with the basic functions!

==> picture [523 x 313] intentionally omitted <==

https://brightspace.au.dk/d2l/le/lessons/202542/topics/2569575

22[ND] APRIL 2026

MINNA PAKANEN

BACKGROUND LITERATURE

  • › Löwgren & Stolterman (2007) Thoughtful Interaction Design

  • › Jeff Johnson (2013) Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design guidelines

  • › Johnson, J. (2007). GUI bloopers 2.0: Common user interface design don’ts and dos

  • › Jenifer Tidwell (2010) Designing Interfaces: Patterns for Effective Interaction Design

  • › https://www.usertesting.com/blog/gestalt-principles/

  • › https://medium.com/hh-design/crash- course-ui-design-25d13ff60962

› https://webdesign.tutsplus.com/articles/a- beginners-guide-to-wireframing-- webdesign 7399

  • › https://www.interaction-design.org/literature/article/laws-of-proximity-uniform-

  • connectedness-and-continuation-gestalt-principles-2

  • › https://www.nngroup.com/articles/homepage-design-principles/

22[ND] APRIL 2026

MINNA PAKANEN

Thank you for today! Questions?

22[ND] APRIL 2026

MINNA PAKANEN

L13_ Evaluation_2026.pdf Open PDF
Show converted presentation markdown

==> picture [97 x 41] intentionally omitted <==

EVALUATION ITPDP’26, L13, W15/19

Assoc Prof. Minna Pakanen Department of Digital Design and Information Studies mpakanen @cc.au.dk

6[TH] MAY 2026

MINNA PAKANEN

==> picture [97 x 41] intentionally omitted <==

6[TH] MAY 2026 MINNA PAKANEN

TODAY

› Ways of evaluating

  • › Usability testing

  • › Early development phase UX evaluations

  • › Prototypes in early development phase evaluations

  • › Data gathering and recording methods

  • › Evaluation planning and roles in the evaluation

  • › TA session: Planning of the evaluation of your own ITPDP product!

6[TH] MAY 2026

MINNA PAKANEN

WAYS TO EVALUATE

6[TH] MAY 2026

MINNA PAKANEN

4

WHY DO WE EVALUATE?

We are not designing for ourselves › Feedback on the design process

› Iterative development › ”Fail early, fail often"

6[TH] MAY 2026

MINNA PAKANEN

“Iterative design, with its repeating cycle of design and testing, is the only validated methodology in existence that will consistently produce successful results. If you don’t have user-testing as an integral part of your design process, you are going to throw buckets of money down the drain .”

(Bruce Tognazzini)

6[TH] MAY 2026

MINNA PAKANEN

THREE WAYS TO EVALUATE

Usability testing/ UX evaluation

  • Test and evaluation setting controlled by the evaluator

  • With users

Field evaluation

  • Evaluation in a natural environment with real users and their actions

  • The user’s surroundings and tasks set the evaluation frame

Analytical evaluation

  • No users are involved!

  • Heuristic evaluation

You will learn this in the coming HCI course!

  • Walkthroughs

Combination of these!

6[TH] MAY 2026

MINNA PAKANEN

DIFFERENCES OF EVAL. APPROACHES
Usability testing
UX evaluation
Field studies
Analytical
Users
Do task
Do tasks/ natural
interactions
Natural interactions Not involved
Location
Lab/controlled
Lab/natural
Natural
Anywhere
When
Prototype
Early, prototype,
late
Early + late
Prototype
Data
Quantitative
Qualitative/ mixed
Qualitative
Problems
Feedback
Measures & errors
Experiences/
feelings
Descriptions
Problems
Type
Applied
Applied/
naturalistic
naturalistic
Expert
DIFFERENCES OF EVAL. APPROACHES
Usability testing
UX evaluation
Field studies
Analytical
Users
Do task
Do tasks/ natural
interactions
Natural interactions Not involved
Location
Lab/controlled
Lab/natural
Natural
Anywhere
When
Prototype
Early, prototype,
late
Early + late
Prototype
Data
Quantitative
Qualitative/ mixed
Qualitative
Problems
Feedback
Measures & errors
Experiences/
feelings
Descriptions
Problems
Type
Applied
Applied/
naturalistic
naturalistic
Expert
DIFFERENCES OF EVAL. APPROACHES
Usability testing
UX evaluation
Field studies
Analytical
Users
Do task
Do tasks/ natural
interactions
Natural interactions Not involved
Location
Lab/controlled
Lab/natural
Natural
Anywhere
When
Prototype
Early, prototype,
late
Early + late
Prototype
Data
Quantitative
Qualitative/ mixed
Qualitative
Problems
Feedback
Measures & errors
Experiences/
feelings
Descriptions
Problems
Type
Applied
Applied/
naturalistic
naturalistic
Expert
DIFFERENCES OF EVAL. APPROACHES
Usability testing
UX evaluation
Field studies
Analytical
Users
Do task
Do tasks/ natural
interactions
Natural interactions Not involved
Location
Lab/controlled
Lab/natural
Natural
Anywhere
When
Prototype
Early, prototype,
late
Early + late
Prototype
Data
Quantitative
Qualitative/ mixed
Qualitative
Problems
Feedback
Measures & errors
Experiences/
feelings
Descriptions
Problems
Type
Applied
Applied/
naturalistic
naturalistic
Expert
DIFFERENCES OF EVAL. APPROACHES
Usability testing
UX evaluation
Field studies
Analytical
Users
Do task
Do tasks/ natural
interactions
Natural interactions Not involved
Location
Lab/controlled
Lab/natural
Natural
Anywhere
When
Prototype
Early, prototype,
late
Early + late
Prototype
Data
Quantitative
Qualitative/ mixed
Qualitative
Problems
Feedback
Measures & errors
Experiences/
feelings
Descriptions
Problems
Type
Applied
Applied/
naturalistic
naturalistic
Expert
DIFFERENCES OF EVAL. APPROACHES
Usability testing
UX evaluation
Field studies
Analytical
Users
Do task
Do tasks/ natural
interactions
Natural interactions Not involved
Location
Lab/controlled
Lab/natural
Natural
Anywhere
When
Prototype
Early, prototype,
late
Early + late
Prototype
Data
Quantitative
Qualitative/ mixed
Qualitative
Problems
Feedback
Measures & errors
Experiences/
feelings
Descriptions
Problems
Type
Applied
Applied/
naturalistic
naturalistic
Expert
DIFFERENCES OF EVAL. APPROACHES
Usability testing
UX evaluation
Field studies
Analytical
Users
Do task
Do tasks/ natural
interactions
Natural interactions Not involved
Location
Lab/controlled
Lab/natural
Natural
Anywhere
When
Prototype
Early, prototype,
late
Early + late
Prototype
Data
Quantitative
Qualitative/ mixed
Qualitative
Problems
Feedback
Measures & errors
Experiences/
feelings
Descriptions
Problems
Type
Applied
Applied/
naturalistic
naturalistic
Expert
Usability testing UX evaluation Field studies Analytical
Users Do task Do tasks/ natural
interactions
Natural interactions Not involved
Location Lab/controlled Lab/natural Natural Anywhere
When Prototype Early, prototype,
late
Early + late Prototype
Data Quantitative Qualitative/ mixed Qualitative Problems
Feedback Measures & errors Experiences/
feelings
Descriptions Problems
Type Applied Applied/
naturalistic
naturalistic Expert
6THMAY 2026 MINNA PAKANEN

6[TH] MAY 2026 MINNA PAKANEN

USABILITY TESTING PLEASE DO NOT USE THIS IN YOUR EVALUATION!

6[TH] MAY 2026

MINNA PAKANEN

11

AIMS OF USABILITY TESTING

  • › Interested of how easy it is for the user to use the system

  • :

  • › Usability is defined by 5 quality components

  • Learnability : How easy is it for users to accomplish basic tasks the first time they encounter the design?

  • Efficiency : Once users have learned the design, how quickly can they perform tasks?

  • Memorability : When users return to the design after a period of not using it, how easily can they re-establish proficiency?

  • Errors errors : How many do users make, how severe are these errors, and how easily can

  • they recover from the errors?

  • Satisfaction : How pleasant is it to use the design?

  • (https://www.nngroup.com/articles/ten-usability-heuristics/)

6[TH] MAY 2026

MINNA PAKANEN

USABILITY TESTING

› Three ways of conducting:

  • Laboratory-based user observations

  • Controlled user testing

  • › facilitator can help the user if the user does not know how to proceed, but this needs to be marked down in the observation notes!

  • Expert inspection techniques

  • › Analytical evaluation methods you will be learning more in the HCI course

(Greenberg & Buxton, 2008)

6[TH] MAY 2026

MINNA PAKANEN

USABILITY TESTING

Controlled laboratory-based user (covert) observations & studies

==> picture [405 x 194] intentionally omitted <==

==> picture [284 x 194] intentionally omitted <==

==> picture [257 x 194] intentionally omitted <==

https://www.brighton.ac.uk/business-services/consultancy/user-centre-design-lab/index.aspx https://www.volkside.com/2009/12/tip-print-out-your-usability-testing-tasks/ https://www.testingtime.com/en/blog/in-house-usability-tests/ https://ux247.com/usability-lab-dead/

==> picture [224 x 49] intentionally omitted <==

6[TH] MAY 2026

MINNA PAKANEN

What are the challenges of usability evaluations conducted in an early design phase according to Greenberg & Buxton (2008)?

6[TH] MAY 2026

MINNA PAKANEN

EARLY DESIGN IDEAS AND PROTOTYPES

  • Early designs are “sketches”

  • Illustrate the essence of an idea, but have

  • many underdeveloped aspects to it

  • Can be represented in many forms

  • Work as externalization of the idea and help the designer to iterate the design

  • Early prototypes

  • Have many holes and undeveloped attributes

(Greenberg & Buxton, 2008)

==> picture [348 x 311] intentionally omitted <==

6[TH] MAY 2026

MINNA PAKANEN

CHALLENGES OF USABILITY STUDIES IN EARLY DESIGN PHASE

› Usability study is not the best approach to evaluate early designs or prototypes because

  • It focuses on negative aspects:

  • Errors & bugs

  • Task completion time: faster the better

  • –> Abandoning a promising idea too early –> Focus on developing aspects that can be measured, usually something we are already familiar with

  • –> Limit the number of alternative ideas

==> picture [392 x 273] intentionally omitted <==

(Greenberg & Buxton, 2008)

6[TH] MAY 2026

MINNA PAKANEN

EARLY PHASE USER EXPERIENCE EVALUATIONS

6[TH] MAY 2026

MINNA PAKANEN

19

USER EXPERIENCE EVALUATION

  • UX studies focus on lived experiences

  • A holistic view of the user’s interaction with a product

    • Emotions, enjoyment & aesthetics
  • Focuses on positive aspects of the use

    • Hedonic and non-instrumental aspects of use (non-task related)
  • Dynamic and situational aspects

    • Different time spans (before, during, after the use)and momentary experiences (changes over time spans)

    • Context impacts the experience

(Bargas-Avila & Hornbæk, 2011)

6[TH] MAY 2026

MINNA PAKANEN

AIMS OF UX EVALUATIONS

  • To find out how the user feels about the system and interaction

  • with it

  • Qualitative or mixed-methods approach in research

    • Interviews, focus groups, observations

    • Questionnaires

    • Constructive and creative techniques (drawing & collages)

  • UX studies can be conducted at any phase of the design process (concept ideas – – – –>final products)

(Bargas-Avila & Hornbæk, 2011)

6[TH] MAY 2026

MINNA PAKANEN

EARLY DEVELOPMENT PHASE UX EVALUATIONS

  • Early phase user experience evaluations are done to

  • › help to choose the best design for the development

  • › Evaluating that the development is on the right track

  • › Examining if the final product can meet the set UX targets

(Stone et al. 2005)

6[TH] MAY 2026

MINNA PAKANEN

ANTICIPATED USER EXPERIENCE (AUX)

can ”Anticipated UX happens before the first use, or it happen also within the other time spans of UX, e.g. during and after the use and over time, as a person may imagine also during those time spans. A person can have indirect experience prior the first use through formed expectations brand of existing experience with related technologies, , advertisements , presentations, and other peoples’ opinions.”

(Roto et al., 2011)

6[TH] MAY 2026

MINNA PAKANEN

ANTICIPATED EXPERIENCE

”Anticipated user experience means the experiences and feelings that are expected to occur when the user is imagining using an interactive product.”

(Yogasara et al., 2011)

6[TH] MAY 2026

MINNA PAKANEN

PROBLEMS WITH THIS DEFINITION?

==> picture [467 x 380] intentionally omitted <==

----- Start of picture text -----
?
6 [TH] MAY 2026 MINNA PAKANEN
----- End of picture text -----

ANTICIPATED USER EXPERIENCE (AUX)

Users should not be put in a situation where they have to imagine their future needs without giving . concrete options for them

(Von Hippel, 1986)

6[TH] MAY 2026

MINNA PAKANEN

ANTICIPATED USER EXPERIENCE (AUX)

” needs wishes that result from Experiences, , and anticipated interaction with a concept of the product before the actual product exists.”

(Pakanen, 2015)

6[TH] MAY 2026

MINNA PAKANEN

PROTOTYPES IN EARLY DEVELOPMENT PHASE UX EVALUATIONS

6[TH] MAY 2026

MINNA PAKANEN

29

PROTOTYPES IN AUX EVALUATIONS

  • Prototypes should

  • › evoke people’s dreams for the future (van den Hende 2010)

  • › give a sense of experience before the actual artefact exists (Roto et al. 2011)

  • › allow envisioning the concept and prevent unwanted confusion

    • (Kuutti et al. 2001, Gegner & Runonen 2012)
  • › focus subject’s attention on studied things (Lim & Stolterman 2008)

  • › allow utilizing concepts key characteristics directly to the design (Law 2011).

6[TH] MAY 2026

MINNA PAKANEN

MIXED FIDELITY PROTOTYPES

5 filter dimensions of prototypes

Appearance

  • size; color; shape; margin; form; weight; texture; proportion; hardness; transparency; gradation; haptic; sound

The functionality

  • system function; users’ functionality need

The interactivity

  • input behavior; output behavior; feedback behavior; information behavior

The data

  • data size; data type (e.g., number; string; media); data use; privacy type; hierarchy; organization

The spatial structure

  • arrangement of interface or information elements; relationship among interface or information elements— which can be either two- or three-dimensional, intangible or tangible, or mixed

(Lim & Stolterman, 2008)

6[TH] MAY 2026

MINNA PAKANEN

MANIFESTATION DIMENSIONS

==> picture [484 x 311] intentionally omitted <==

(Lim & Stolterman, 2008)

6[TH] MAY 2026

MINNA PAKANEN

FILTER-FIDELITY-PROFILES IN EVALUATION

5 filter-dimensions of prototypes

  • Appearance

  • Size, color, shape, weight, hardness, haptic, sound, & arrangement

  • The functionality

  • Breadth (functions realized) & depth (completeness)

==> picture [163 x 125] intentionally omitted <==

• The interactivity

  • Action, reaction, input modality, & output modality

  • The data

  • Closeness to the reality, information architecture, data model, & amount and type of data

  • The physicality

  • Spatial position, coherence of tangibles, & tangible embodiment

(Kohler & Hochreuter, 2014)

==> picture [163 x 124] intentionally omitted <==

6[TH] MAY 2026

MINNA PAKANEN

PROTOTYPES IN EARLY UX EVALUATIONS

==> picture [450 x 345] intentionally omitted <==

==> picture [503 x 346] intentionally omitted <==

6[TH] MAY 2026 MINNA PAKANEN

COMPARABLE VISUAL MATERIALS IN AUX EVALUATIONS

Extending the existing prototype and comparing alternative visualization styles for GUIs When preparing comparable visual materials, make sure the comparable examples and items under evaluation are same in: 1) Relative size

  • 2) Color scheme, unless you compare different color options

3) Level of detail and visualization style (sketch, line drawing, shaded, …)

Note that your alternative visualizations should all be presented in same application context (contextualization).

6[TH] MAY 2026

MINNA PAKANEN

EXAMPLE: VIRTUAL AVATARS FOR AR & VR IN COLLABORATIVE SETTING

==> picture [832 x 352] intentionally omitted <==

(Pakanen et al. 2022)

6[TH] MAY 2026 MINNA PAKANEN

EXAMPLE: RESEARCH/ BENCHMARKING

(Pakanen et al. 2022)

6[TH] MAY 2026

MINNA PAKANEN

EXAMPLE: EXAMPLES

  • 1) Relative size

  • 2) Color scheme

  • 3) Level of detail & visualization style

==> picture [455 x 466] intentionally omitted <==

6[TH] MAY 2026

MINNA PAKANEN

(Pakanen et al. 2022)

EXAMPLE: CONTEXT

Examples are shown both in AR & VR context

(Pakanen et al. 2022)

6[TH] MAY 2026

MINNA PAKANEN

COMPARABLE VISUAL MATERIALS

==> picture [722 x 370] intentionally omitted <==

----- Start of picture text -----
6 [TH] MAY 2026 MINNA PAKANEN
----- End of picture text -----

(Pakanen 2015)

PROTOTYPES IN EARLY UX EVALUATIONS

==> picture [642 x 321] intentionally omitted <==

(Pakanen et al. 2014)

6[TH] MAY 2026 MINNA PAKANEN

VISUAL MATERIALS TO HELP EVALUATING PROTOTYPES

==> picture [422 x 299] intentionally omitted <==

==> picture [531 x 301] intentionally omitted <==

(Pakanen et al. 2014)

6[TH] MAY 2026

MINNA PAKANEN

Reporting of the study in your report:

› How the visual materials were used?

› When they were used in the evaluation?

6[TH] MAY 2026 MINNA PAKANEN

VISUAL MATERIALS IN AUX EVALUATIONS

Example from paper 1

Paula and her husband p lanned in the morning that she will buy groceries, and her husband will collect her from the shop. Hence, now prior leaving from the office, she pre-writes a message on her phone “At the checkout desk!” (1) and assigns it to a t urquoise color that she can remember.

When she arrives at t he checkout, she uses the bracelet device on her wrist to browse the messages that she has created with the phone (2). She finds the turquoise message (with inner ball) that she created at her office.

Then she selects the receiver, Matt, her husband (with outer ball) and sends it to him (3).

Matt is arriving to the parking lot, when Paula’s message arrives to his phone, he knows that it will only take a few minutes for Paula to come out of the shop, so rather than parking, he drives to waits at the front of the store (4).

==> picture [434 x 309] intentionally omitted <==

(Pakanen et al. 2014)

6[TH] MAY 2026

MINNA PAKANEN

VISUAL MATERIALS IN AUX EVALUATIONS

  • Help user to see over limitations of the prototype by creating a model to show the appearance

  • A nice rending/ visualization of the concept idea in use context held by a human (print/screen)

  • A physical unfunctional mock-up (can be hold in hand by the user)

  • A set of images + use case story (prints/ Powerpoint slides/video)

  • Make sure you show this use case story before evaluating the partial and unfinished appearance (in this case size, weight, shape, materials), functionality (only two types of interactions were compared [interactivity]) or the prototype.

  • Think of what aspects you need to realize as close to the final prototype (physicality as in this case tangible embodiment was almost realistically realized)

6[TH] MAY 2026

MINNA PAKANEN

VISUAL MATERIALS IN AUX EVALUATIONS

Example from paper 2

Collect feedback for the further development

  • 2 Altered visualizations of possible solutions presented on screenshots taken from the model

  • Make sure you show the alternative vualizations after evaluating the partial and unfinished prototype

  • appearance (no visualizations)

  • functionality (only moving was realized in the prototype).

  • Think of what aspects you need to realize as close to the final prototype (Appearance and the animations)

==> picture [199 x 393] intentionally omitted <==

(Kukka et al. 2017)

6[TH] MAY 2026

MINNA PAKANEN

VISUAL MATERIALS IN AUX EVALUATIONS

Example from paper 4 Collect feedback for the further development

  • One virtual environment with alternative interior and functionalities

  • Make sure you let the participants see the alternative visualization after evaluating the partial and unfinished prototype

  • appearance (no visualizations)

  • functionality (only moving was realized in the prototype).

  • Think of what aspects you need to realize as close to the final prototype (Appearance, functionalities, and the interactions)

==> picture [539 x 302] intentionally omitted <==

6[TH] MAY 2026

MINNA PAKANEN

(Pakanen et al. 2020)

WIZARD OF OZ

6[TH] MAY 2026

MINNA PAKANEN

48

WIZARD OF OZ TECHNIQUE ALLEN MUNRO AND DON NORMAN, 1975

› The Wizard of Oz method is a moderated research method in which a user interacts with an interface that is not really working, but the system responses are initiated by a human operator

==> picture [817 x 236] intentionally omitted <==

----- Start of picture text -----
Video
camera User
Operator
https://www.nngroup.com/articles/wizard-of-oz/#:~:text=Definition%3A%20The%20Wizard%20of%20Oz,Norman%20at%20UC%20San%20Diego.
----- End of picture text -----

6[TH] MAY 2026

MINNA PAKANEN

WIZARD OF OZ TECHNIQUE AN EXAMPLE IN LAB SETTING

==> picture [385 x 267] intentionally omitted <==

==> picture [565 x 205] intentionally omitted <==

(Colley et al. 2016)

6[TH] MAY 2026

MINNA PAKANEN

WIZARD OF OZ TECHNIQUE

AN EXAMPLE IN FIELD WITH A MOBILE OPERATOR

==> picture [697 x 352] intentionally omitted <==

Pakanen et al. 2022

==> picture [44 x 6] intentionally omitted <==

----- Start of picture text -----
6 [TH] MAY 2026
----- End of picture text -----

==> picture [56 x 7] intentionally omitted <==

----- Start of picture text -----
MINNA PAKANEN
----- End of picture text -----

Reporting of the study in your report:

› What kind of Wizard of OZ evaluation was conducted?

› How was the Wizard of OZ method described in the paper? Paper: 3

MINNA PAKANEN

6[TH] MAY 2026

==> picture [377 x 326] intentionally omitted <==

----- Start of picture text -----
User
< 2m
----- End of picture text -----

WIZARD OF OZ TECHNIQUE MOBILE

==> picture [87 x 87] intentionally omitted <==

Operator

6[TH] MAY 2026

MINNA PAKANEN

PLANNING OF WIZARD OF OZ STUDY

Remember

› Assign group members to be:

  • 1) Facilitator, introduces the tasks and interviews the participants

  • 2) Operator/”observer” who operates the protype based on participants input/ other type of input. Make sure there is either direct or indirect (through live video feed) visibility to participants interaction with the

prototype with, so that you can operate the prototype well. If the operator is to be in the same space, then say to participants that this person is an observer

› Do not break the illusion!

  • › Plan the tasks carefully and think all the possibilities what the user could do?

  • If participant does unexpected things, facilitator should say: unfortunately the prototype does not function in that way, can you think any other way how it could work? (and at the end show how to use it).

  • › Make sure the operator have a direct view to the participant and their interaction with the prototype

6[TH] MAY 2026

MINNA PAKANEN

USER STUDY DATA GATHERING METHODS

Blandford, Ann, Dominic Furniss, and Stephann Makri. ”Qualitative HCI research: going behind the scenes." Synthesis lectures on human-centered informatics 9, no. 1 (2016): 1-115.

6[TH] MAY 2026

MINNA PAKANEN

55

OBSERVATION

Observer observes

  • › ”Fly on the wall” (Blandford et al. 2016)

  • › What do people do and how do they do it?

==> picture [156 x 155] intentionally omitted <==

  • › Difficulties or errors with the interaction?

  • › What do they get enthusiastic about?

  • › How do they operate the system?

  • › Are their actions supporting what they say?

  • › e.g., if they seem to have problems and they claim it is easy to use

6[TH] MAY 2026

MINNA PAKANEN

PLANNING OBSERVATION

Pay attention to

  • › Select setting(s)

› It is not possible to observe everything, so decide what is to be documented in each observation.

› Plan an observation form for collecting observations for each task › When a participant does something very interesting, you can mark down the time, which helps finding that incident from the video or audio recording.

6[TH] MAY 2026

MINNA PAKANEN

THINK ALOUD

› Technique can be used in usability testing, user experience evaluation, and even in field studies › Start by explaining to the participant how to think aloud › It is not about what they do, but what they think while doing it › The tasks: chosen by participants (naturalistic) or defined by you › Thinking aloud does not come naturally to all

› You can prompt silent participant by asking: “What are you thinking” › You should politely steer too chatty participant back to the tasks › UX and usability studies have different rules

› Intervention in minimum (usability) | UX interventions for seeking clarifications

6[TH] MAY 2026

MINNA PAKANEN

INTERVIEW

› allows understanding people's perceptions and experiences

==> picture [401 x 314] intentionally omitted <==

Different types

Unstructured

  • › not directed by a script (ethnographic)

  • Structured

  • › tightly scripted, almost like a questionnaire

  • Semi-structured (most used)

  • › guided by a script, interesting issues explored in more depth by asking for further details

MINNA PAKANEN

6[TH] MAY 2026

INTERVIEWING

The interviewer interviews the participant/s › Form the topics and questions: open, broad & narrow

  • › Next slide what to avoid when forming questions

  • › Opening the conversation

  • › assure your interest in participants’ replies as an expert in the topic

› Ask the question and wait that the person gives a reply › Ask for clarifications if a person’s reply is not complete or if it is just yes or no/ good/bad

› You said that it is good, in what way/s it is good/ what features make it good?

You wished the information on the screen was clearer, in which way?

6[TH] MAY 2026 MINNA PAKANEN

INTERVIEW QUESTIONS

When creating questions avoid:

› Long questions

  • › Compound sentences - split them into two

  • › Jargon and language that the interviewee may not understand › What did you think of this AR feature? –> ….the feature where you can see items appearing on this real space we are in?

  • › Leading questions that make assumptions

› Isn’t this feature good in…

  • › Unconscious biases e.g., gender/age… stereotypes

  • › As a/n elderly/woman/child you probably found this as complicated…

6[TH] MAY 2026

MINNA PAKANEN

DATA RECORDING

6[TH] MAY 2026

MINNA PAKANEN

62

VIDEO RECORDING

Pros and cons

› A rich way to capture interaction in the context + user comments are automatically in sync with user interaction

› Video recording can make participant anxious

› Placing the video camera in a more discrete location usually helps users to forget it

==> picture [86 x 86] intentionally omitted <==

==> picture [405 x 348] intentionally omitted <==

6[TH] MAY 2026

MINNA PAKANEN

AUDIO RECORDING

==> picture [74 x 73] intentionally omitted <==

When and why

  • › In some of the interviews it is fine to record audio only

  • If you do not have any prototypes or visual materials, an audio recording is more discrete than a video.

› It is good to also record audio when you use video recording as sometimes it is hard to hear from the video what the user is saying especially if the camera is located far away from the user

6[TH] MAY 2026

MINNA PAKANEN

PHOTOGRAPHS

Records the moment › Capture moments as they happened. They help in reporting results and important moments in the interaction for example in project reports and publications

==> picture [73 x 73] intentionally omitted <==

==> picture [423 x 375] intentionally omitted <==

6[TH] MAY 2026

MINNA PAKANEN

OBSERVATION NOTES

==> picture [80 x 81] intentionally omitted <==

Fast in situ note taking

› Observation notes are a good way of getting the most important things marked down, you can even mark the time when a user did or said something that was unexpected or interesting in some other way

› Notes can be used also as the basis of analysis (i.e., themes)

6[TH] MAY 2026

MINNA PAKANEN

LOG DATA

==> picture [74 x 73] intentionally omitted <==

Recording user interaction on the device › records user actions in the device log

› You can find errors and quantify your results easily with log data, but remember that you need the before-mentioned methods to understand why people made mistakes or did things in certain ways

6[TH] MAY 2026

MINNA PAKANEN

UX EVALUATION AND DATA CAPTURING METHODS

==> picture [709 x 475] intentionally omitted <==

----- Start of picture text -----
https://experienceresearchsociety.org/ux/evaluation-methods/
6 [TH] MAY 2026 MINNA PAKANEN
----- End of picture text -----

~~R~~ eporting of the study in your report: › What kind of data collection and recording methods were used?

› Were there some methods that were not described here?

6[TH] MAY 2026

MINNA PAKANEN

EVALUATION PLANNING TASKS, PROCEDURE, & INTERVIEW QUESTIONS

6[TH] MAY 2026

MINNA PAKANEN

78

PLANNING

  1. Prepare procedure – steps, tasks…”script of the evaluation” 2. Prepare interview (+questionnaires) questions – background, task related, end

  2. Pilot study – try out your procedure, tasks, forms, questions & how long the evaluation will be

  3. Iterate your procedure – if something needs to be changed 5. 2[nd] Pilot – test if changes work better

  4. Recruit participants – amount depends of the study, from 6-14-30-…, set also times for the studies and let them know the estimated duration

  5. Prepare for the evaluation – cameras, video cameras, tripods, audio recording, print forms, get gifts for the participants, book rooms…

  6. Conduct your study- follow your procedure, record the data and store it for analysis, remember to thank your participants after the evaluation! 6[TH] MAY 2026 MINNA PAKANEN

PROCEDURE Applied from Leena Arhippainen, UX researcher and Minna’s Phd supervisor

6[TH] MAY 2026

MINNA PAKANEN

80

PROCEDURE

  1. Consent from filling- participant agrees on the study (See L3: GDPR)

  2. Intro to the study- who, why and what

  3. Background info of the users- questionnaire or interview

  4. Ice breaking task – easy task to get user familiar with the prototype 5. Actual task(s) with the prototype – design the task so that you are able to get feedback on right things

  5. Post questionnaires- preferences and quantitative data

  6. Semi-structured interview – get more detailed understanding how user felt using your prototype and what s/he thought about the design idea in general 6[TH] MAY 2026 MINNA PAKANEN

PROCEDURE

Example of procedure:

  • Everything is explained so it is easy to follow in the actual evaluation
  1. Consent & background questionnaire form filling 2. Who are we and explanation of the purpose of the study (even if explained in the consent form in detail)

  2. Actual tasks are written down so that each participant is instructed in a similar way

  3. Questionnaire fillings are marked in the procedure 5. Interview questions for post-interview (can also be on different paper)

  4. Thank and reward the participants

==> picture [348 x 492] intentionally omitted <==

6[TH] MAY 2026 MINNA PAKANEN

PROCEDURE

2. Introduction to the study

  • Who are we

  • Short description of the study aim

  • Tell the user once more that they can withdraw from the study

    • whenever they feel like it
  • Ask the user to think aloud during the tasks (+how to do it)

  • In Usability evaluation: explain if you will not help the participant during the tasks

  • Ask if the user has any questions

6[TH] MAY 2026

MINNA PAKANEN

EXAMPLE

2. Introduction to the study

MINNA PAKANEN

6[TH] MAY 2026

Reporting of the study in your report:

› Was there differences in the example procedure that was given to your group?

MINNA PAKANEN

6[TH] MAY 2026

PROCEDURE

3. Background information

  • What do you need to know about your user?

    • Age

    • Gender: male/female/nonbinary

    • Educational background/ profession

    • Prior experience with similar technology that you are evaluating

    • Prior experience with the use context (e.g., fab labs, pottery, chemical lab, etc.) of your system

6[TH] MAY 2026

MINNA PAKANEN

EXAMPLE

3. Background questionnaire

Note that you do not necessarily need this, especially if you have only a few things to ask. The questions can also interviewed in the beginning or at the end of the evaluation!

==> picture [353 x 457] intentionally omitted <==

6[TH] MAY 2026 MINNA PAKANEN

Reporting of the study in your report:

› How the participants were described in the paper, and what kind of information was given about them? › What way the description was written?

6[TH] MAY 2026

MINNA PAKANEN

PROCEDURE

4. Icebreaking task

  • Idea is to familiarize your user with the thing under evaluation

  • Easy and short task

  • Reduces nervousness of the participant

6[TH] MAY 2026

MINNA PAKANEN

EXAMPLE

4. Icebreaking task

  • Explore the prototype freely for a while

1. Familiarization with the current 3D City model

  1. Familiarize yourselves with the 3D City model simply by looking at it and giving your initial thoughts before interacting with it.

  2. Now you can start interacting with the model by controlling an avatar (WASD and arrows) and explore the model freely. While exploring the 3D model, please think aloud and comment on anything that caught your attention.

6[TH] MAY 2026

MINNA PAKANEN

PROCEDURE

5. Actual task(s)

  • The idea is to plan tasks that the user can do and by doing the tasks you will learn if your product is understandable for the user or how they do experience the prototype

    • Try to keep them short and not too complicated to conduct

    • Test how your core use case activities are working

6[TH] MAY 2026

MINNA PAKANEN

EXAMPLE

5. Tasks

1st task:

  1. First you want your handbag to match with these red shoes over here, what would you do?

  2. Next you can try to make the bag imitate the fabric and color of this of this scarf here.

  3. And then this shirt here.

Questions after the tasks are completed What did you think of this idea? Would it be useful for you?

Is the idea fun?

6[TH] MAY 2026

MINNA PAKANEN

PROCEDURE

6. post questionnaire

  • Sometimes you might need user feedback on different designs so you can use certain questionnaires to help assess different things.

• The attractiveness of the product: Attrakdiff https://www.attrakdiff.de/index-en.html (online service was discontinued from January 2025 L)

  • Can be used for

  • Single evaluation

  • Comparison

  • Before-after

6[TH] MAY 2026

MINNA PAKANEN

EXAMPLE

6. Post questionnaire With Attrakdiff questionnaire

==> picture [547 x 189] intentionally omitted <==

==> picture [351 x 496] intentionally omitted <==

(Colley et al. 2016)

6[TH] MAY 2026

MINNA PAKANEN

EXAMPLE

  • Visual presentation of Attrakdiff findings in the report

(Pakanen et al. 2014)

6[TH] MAY 2026

MINNA PAKANEN

PROCEDURE

7. Semi-structured interview

  • The last part of the evaluation is for asking questions from the user to find out their thoughts about the prototype and the interaction with it

    • What is good/bad in the design idea and the prototype?

    • What was difficult?

    • What would make it easier to use?

    • What would you like to change in it to make it more interesting to you?

    • Try to avoid questions that can be replied to just with yes or no!

6[TH] MAY 2026

MINNA PAKANEN

EXAMPLE

7. Post-interview questions

  • Describe your experiences with the system.

  • What do you think of using this kind of technology for remote collaboration?

  • What was easy/natural and what was difficult/unnatural in the interaction?

  • Were there any critical moments in the interaction? If yes, describe it/them.

6[TH] MAY 2026

MINNA PAKANEN

HOW DO YOU DESCRIBE YOUR STUDY IN THE REPORT?

How procedure is reported in the paper?

› How is the procedure description in the paper differentiating from the study procedure, or is it doing that at all?

6[TH] MAY 2026

MINNA PAKANEN

Reporting of the study in your report:

› How the procedure is reported in the paper?

› Is the procedure description in the paper differentiating from the study procedure, if so, how?

6[TH] MAY 2026

MINNA PAKANEN

ROLES IN THE EVALUATION

6[TH] MAY 2026

MINNA PAKANEN

102

ROLES IN THE EVALUATION

  1. Facilitator/interviewer
  • Facilitates the study, gives tasks, interviews, handles questionnaires
  1. Observer
  • Stays behind and observers what user does

  • Takes notes on each task-can also write down user comments

  1. Documenter (can be also facilitator)
  • Videos/photos/audio recording

Pick a role that fits best for you!

6[TH] MAY 2026

MINNA PAKANEN

ROLES IN THE EVALUATION

An example

==> picture [369 x 283] intentionally omitted <==

6[TH] MAY 2026

MINNA PAKANEN

QUALITATIVE DATA ANALYSIS Thematic Analysis

Braun, V., & Clarke, V. (2012). Thematic analysis. In H. Cooper, P. M. Camic, D. L. Long, A. T. Panter, D. Rindskopf, & K. J. Sher (Eds.), APA handbook of research methods in psychology, Vol. 2. Research designs: Quantitative, qualitative, neuropsychological, and biological (pp. 57–71). American Psychological Association. https://doi.org/10.1037/13620-004

6[TH] MAY 2026

MINNA PAKANEN

105

PLEASE REVISIT MY SLIDES FROM L5

› https://brightspace.au.dk/d2l/le/lessons/202542/topics/256 9495 › There is detailed explanation how to conduct thematic analysis!

6[TH] MAY 2026

MINNA PAKANEN

Reporting of the data analysis in your report:

› How the qualitative data analysis was reported in the papers?

6[TH] MAY 2026 MINNA PAKANEN

Reporting of the findings in your report:

› Check the example papers for tips how to report qualitative findings in your report ›How participants were identified? ›How participants quotes were written? › Pay attention to the story!

6[TH] MAY 2026

MINNA PAKANEN

PLANNING YOUR OWN EVALUATION TA SESSION FROM 13:15-> TODAY!

6[TH] MAY 2026

MINNA PAKANEN

132

TASK FOR TA

Start planning your evaluation

  • Who are your participants? You need 5 participants

  • Think of your research question

  • Think what kind of tasks and questions would help you to answer to your research question

  • Make an early draft of your procedure

  • Think about the roles: facilitator, observer, video recorder…

6[TH] MAY 2026

MINNA PAKANEN

WHEN THE PROTOTYPE IS “READY”

Conduct a pilot evaluation

  • Get participant/s from the other group/s

  • Follow your procedure rigorously

  • Act like you do not know your participant beforehand

  • After the pilot you have an understanding whether your tasks are easy to understand or too complicated to pass and if your questions can reveal knowledge you were hoping for -> Iterate your procedure, tasks and questions, do another

  • pilot study before you go to the actual evaluations!

6[TH] MAY 2026

MINNA PAKANEN

COURSE LITERATURE REFERENCES

  • Blandford, Ann, Dominic Furniss, and Stephann Makri. "Qualitative HCI research: Going behind the scenes." Synthesis lectures on human-centered informatics 9, no. 1 (2016): 1-115.

  • Greenberg, Saul, and Bill Buxton. 2008. Usability evaluation considered harmful (some of the time). In Proc. CHI '08. ACM, New York, NY, USA, 111–120.

  • Arnold P. O. S. Vermeeren, Effie Lai-Chong Law, Virpi Roto, Marianna Obrist, Jettie Hoonhout, and Kaisa Vaananen-Vainio-Mattila. 2010. User experience evaluation methods: current state and development needs. In Proc. NordiCHI '10. ACM, New York, NY, USA, 521–530. https://doi.org/10.1145/1868914.1868973

  • Lim N-K & Stolterman E (2008) The anatomy of prototypes: Prototypes as filters, prototypes as manifestations of design ideas. ACM Transactions on Computer-Human Interaction 15(2): A7.

  • Braun, V., & Clarke, V. (2012). Thematic analysis. In H. Cooper, P. M. Camic, D. L. Long, A. T. Panter, D. Rindskopf, & K. J. Sher (Eds.), APA handbook of research methods in psychology, Vol. 2. Research designs: Quantitative, qualitative, neuropsychological, and biological (pp. 57–71). American Psychological Association. https://doi.org/10.1037/13620-004

6[TH] MAY 2026

MINNA PAKANEN

OTHER REFERENCES

  • Javier A. Bargas-Avila and Kasper Hornbæk. 2011. Old wine in new bottles or novel challenges: a critical analysis of empirical studies of user experience. In Proc. CHI '11. ACM, New York, NY, USA, 2689–2698. https://doi.org/10.1145/1978942.1979336

  • Ashley Colley, Minna Pakanen, Saara Koskinen, Kirsi Mikkonen, and Jonna Häkkilä. 2016. Smart Handbag as a Wearable Public Display - Exploring Concepts and User Perceptions. In Proceedings of the 7th Augmented Human International Conference 2016 (AH '16). Association for Computing Machinery, New York, NY, USA, Article 7, 1–8. https://doi.org/10.1145/2875194.2875212

  • Gegner L & Runonen M (2012) For what it is worth: Anticipated experience evaluation. In: Brassett J, Hekkert P, Ludden G, Malpass M & McDonnell J (eds) Proceedings of the 8th International Conference on Design and Emotion. URI: https://reseda.taik. fi/Taik/jsp/taik/Publication_Types.jsp?id=23583813. Cited 2015/08/15.

  • Hende, EA van den (2010) Really new stories the effect of early concept narratives on consumer understanding and attitudes. Doctoral dissertation. Delft University of Technology.

  • Hippel E von (1986) Lead Users: A source of novel product concepts. Management Science 32(7): 791–805.

  • Kuutti K, Battarbee K, Sade S, Mattelmaki T, Keinonen T, Teirikko T, & Tornberg A-M (2001) Virtual prototypes in usability testing. Proceedings of the 34th Hawaii International Conference on System Sciences. IEEE: 1–7.

6[TH] MAY 2026

MINNA PAKANEN

OTHER REFERENCES

  • Law ELC (2011) The measurability and predictability of user experience. Proceedings of the 3rd ACM SIGCHI Symposium on Engineering Interactive Computing Systems. New York NY, ACM: 1–10.

  • Pakanen M (2015) Visual design examples in the evaluation of anticipated user experience at the early phases of research and development. Doctoral dissertation. University of Oulu.

  • Pakanen, M., Alavesa, P., Van Berkel, N., Koskela, T., & Ojala, T. (2022). “Nice to see you virtually”: Thoughtful design and evaluation of virtual avatar of the other user in ar and vr based telexistence systems. Entertainment Computing, 40, 100457.

  • Roto V, Law E, Vermeeren A, & Hoonhout J (eds) (2011) UX white paper. https//allaboutux.org/uxwhitepaper. Cited 2015/03/08.

  • Stone D, Jarrett C, Woodroffe M, & and Minocha S (2005) User interface design and evaluation. Morgan Kaufmann Series in Interactive Technologies. San Francisco CA, Morgan Kaufman.

  • Tognazzini, B. 1990. User Testing on the cheap. In Tog on Interface, Addison Wesley publ.

  • Yogasara T, Popovic V, Kraal B, & Camorro-Koc M (2011) General characteristics of anticipated user experience (AUX) with interactive products. Proceedings of the 4th World Conference on Design Research: Diversity and Unity. Delft, Delft University of Technology: 1-11. URI: http://eprints.qut.edu.au/47035/. Cited 2015/06/15.

6[TH] MAY 2026

MINNA PAKANEN