ITPDP2026- WEEK 3: DESIGN PROCESSES, PROJECT MANAGEMENT, AND DESIGN ETHICS

Clemens Nylandsted Klokmose Department of Computer Science Human-Centered Computing Section clemens@cs.au.dk

AARHUS UNIVERSITY

https://studypedia.au.dk/haandter-pensum/laesestrategier

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

2

AARHUS UNIVERSITY

PLAN

› Design processes

› Involving users

› Project management

› Design ethics

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

› GDPR

==> picture [47 x 40] intentionally omitted <==

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

----- Start of picture text -----
ITPDP 2026
----- End of picture text -----

AARHUS UNIVERSITY

PEOPLE AND PROTOTYPES

• › Chapter in Moggridge (2006) describes IDEO's methods

• › What is design? (Covered in FIT-DES)

• › It is important to understand the needs and desires of users

• › Observation and participation

• › Often tacit and implicit knowledge that can only be uncovered experimentally

• › Many versions of prototypes are needed (Later lecture)

• › Prototypes are tangible and visible proposals

• › User can "experience" a prototype and thus better evaluate proposed solutions

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUS UNIVERSITY

THE GOOD DESIGN?

• Transparency and tacit knowledge (Polanyi, Bødker, and more)

• › Fluid use without breakdowns

• › Leverages the users' intuition* (that is uncovered experimentally)

• › Scientific verification is often long and complex

Examples of assessment criteria for design projects:

• The height of creativity/innovation

• Aesthetics/quality

• Whether human factors/values are taken into account

• Performance and technology

• Finish and presentation

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUS UNIVERSITY

THE GOOD DESIGN: AFFORDANCES (BILL GAVER)

› Perceptible possibilities (Gibson, 1979)

› We sense immediately

• › That one can walk up a flight of stairs

› Sitting on a chair

› Tilting a door handle › Turning on faucet

• › Computer user interfaces should be designed with equally clear affordances...

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUS UNIVERSITY

AFFORDANCES

==> picture [47 x 40] intentionally omitted <==

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

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

2026

ITPDP

7

AARHUS UNIVERSITY

Need to repair a design that does not ”afford" the right action possibilities to the user

==> picture [47 x 40] intentionally omitted <==

==> picture [504 x 378] intentionally omitted <==

----- Start of picture text -----
ITPDP 2026
----- End of picture text -----

DESIGN DISCIPLINES AND TECHNIQUES

How do we understand the problem area and the needs of users?

AARHUS UNIVERSITY

LIMITATIONS WITH INCREASING COMPLEXITY

› For a holistic understanding of groups, organizations, society and the globe

›

› From the facts of human proportions and physics

ITPDP 2026

›

AARHUS UNIVERSITY

ANALYSIS METHODS

==> picture [116 x 121] intentionally omitted <==

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUS UNIVERSITY

ITERATIVE DESIGN PROCESS

• › Same type of activity is repeated to reduce uncertainty about the design

• › Many cross-cutting jumps between activities

• › From limitations to idea generation over prototyping less uncertainty back to remaining limitations

==> picture [47 x 40] intentionally omitted <==

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

2026

ITPDP

AARHUS UNIVERSITY

IDEO: 51 WAYS TO LEARN ABOUT USERS › IDEO Method cards

• › 4 Categories

• › Learn – from facts that can be collected

• › Look – at what users do

• › Ask – about their contributions;

• › Try – out ideas

• › The entire collection of 51 cards is available as a book/card box

› https://stoutbooks.com/products/ideo-method-cards-51-ways-to-inspire-design-61457

• › In the chapter, only 4 examples from each category

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUSUNIVERSITY LEARN

› Analyze the information you’ve collected to identify patterns and insights.

› FLOW ANALYSIS

• › How Represent the flow of information or activity through all phases of a system or process.

• › Why This is useful for identifying bottlenecks and opportunities for functional alternatives.

• › Example Designing an online advice Web site, flow analysis helped the team to gain a clearer sense of how to make it easy to find your way around the site.

› COGNITIVE TASK ANALYSIS

• › How List and summarize all of a user’s sensory inputs, decision points, and actions.

• › Why This is good for understanding users’ perceptual, attentional, and informational needs and for identifying bottlenecks where errors may occur.

• › Example Logging the commands that would be involved in controlling a remotely operated camera helped the team establish priorities among them.

› HISTORICAL ANALYSIS

• › How Compare features of an industry, organization, group, market segment or practice through various stages of development.

• › Why This method helps to identify trends and cycles of product use and customer behavior and to project those patterns into the future.

• › Example A historical view of chair design helped to define a common language and reference points for the team members from the client and consultancy.

› AFFINITY DIAGRAMS

• › How Cluster design elements according to intuitive relationships, such as similarity, dependence, proximity, and so forth.

• › Why This method is a useful way to identify connections among issues and to reveal opportunities for innovation.

• › Example This affinity diagram shows what’s involved in transporting young children, and helps to identify the opportunities to improve the design of a stroller.

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUSUNIVERSITY LOOK

• › Observe people to discover what they really do—not what they say they do.

› FLY ON THE WALL

• › How Observe and record behavior within its context, without interfering with people’s activities.

• › Why It is useful to see what people do in real contexts and time frames, rather than accept what they say they did after the fact.

• › Example By spending time in the operating room, the designers were able to observe and understand the information that the surgical team needed.

› A DAY IN THE LIFE

• › How Catalog the activities and contexts that users experience for an entire day.

• › Why This is a useful way to reveal unanticipated issues inherent in the routines and circumstances people experience daily.

• › Example For the design of a portable communication device, the design team followed people throughout the day, observing moments at which they would like to be able to access information.

› SHADOWING

• › How Tag along with people to observe and understand their day-to-day routines, interactions, and contexts.

• › Why This is a valuable way to reveal design opportunities and show how a product might affect or complement user’s behavior.

• › Example The team accompanied truckers on their routes in order to understand how they might be affected by a device capable of detecting drowsiness.

› PERSONAL INVENTORY

• › How Document the things that people identify as important to them as a way of cataloging evidence of their lifestyles.

• › Why This method is useful for revealing people’s activities, perceptions, and values as well as patterns among them.

• › Example For a project to design a handheld electronic device, people were asked to show the contents of their purses and briefcases and explain how they use the objects that they carry around everyday.

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUSUNIVERSITY ASK

› Enlist people’s participation to elicit information relevant to your project.

› CONCEPTUAL LANDSCAPE

• › How Ask people to diagram, sketch, or map the aspects of abstract social and behavioral constructs or phenomena.

• › Why This is a helpful way to understand people’s mental models of the issues related to the design problem.

• › Example Designing an online university, the team illustrated the different motivations, activities, and values that prompt people to go back to school.

› COLLAGE

• › How Ask participants to build a collage from a provided collection of images and to explain the significance of the images and arrangements they choose.

• › Why This illustrates participants’ understanding and perceptions of issues and helps them verbalize complex or unimagined themes.

• › Example Participants were asked to create a collage around the theme of sustainability to help the team understand how new technologies might be applied to better support people’s perceptions.

› FOREIGN CORRESPONDENTS

• › How Request input from coworkers and contacts in other countries and conduct a crosscultural study to derive basic international design principles.

• › Why This is a good way to illustrate the varied cultural and environmental contexts in which the products are used.

• › Example A global survey about personal privacy helped to quickly compile images and anecdotes from the experiences of the correspondents.

› CARD SORT

• › How On separate cards, name possible features, functions, or design attributes. Ask people to organize the cards spatially, in ways that make sense to them.

• › Why This helps to expose people’s mental models of a device or system. Their organization reveals expectations and priorities about the intended functions.

• › Example In a project to design a new digital phone service, a card-sorting exercise enabled potential users to influence the final menu structure and naming.

2026

ITPDP

AARHUSUNIVERSITY TRY

• › Create simulations and prototypes to help empathize with people and to evaluate proposed designs.

› EMPATHY TOOLS

• › How Use tools like clouded glasses and weighted gloves to experience processes as though you yourself have the abilities of different users.

• › Why This is an easy way to prompt an empathic understanding for users with disabilities or special conditions.

• › Example Designers wore gloves to help them evaluate the suitability of cords and buttons for a home health monitor designed for people with reduced dexterity and tactile sensation.

› SCENARIOS

• › How Illustrate a character-rich storyline describing the context of use for a product or service.

• › Why This process helps to communicate and test the essence of a design idea within its probable context of use. It is especially useful for the evaluation of service concepts.

• › Example Designing a community Web site, the team drew up scenarios to highlight the ways particular design ideas served different user needs.

› NEXT YEAR’S HEADLINES

• › How Invite employees to project their company into the future, identifying how they want to develop and sustain customer relations.

• › Why Based on customer-focused research, these predictions can help to define which design issues to pursue for development.

• › Example While designing an Intranet site for information technologists, the team prompted the client to define and clarify their business targets for immediate and future launches.

› INFORMANCE

• › How Act out an “informative performance” scenario by role-playing insights or behaviors that you have witnessed or researched.

• › Why This is a good way to communicate an insight and build a shared understanding of a concept and its implications.

• › Example A performance about a story of mobile communications shows the distress of a frustrated user.

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUS UNIVERSITY

REMEMBER THE EXTREMES

› ”Extreme characters”

Example

• › Extremes in IT design for the home

• › The homeless living in a shopping cart

› The film actor with uniformly decorated apartments in New York, Paris, Tokyo and LA

==> picture [47 x 40] intentionally omitted <==

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

2026

ITPDP

IDEATION

AARHUS UNIVERSITY

IDEO - IDEA GENERATION

• › 8-10 participants – responsible for documentation appointed

• › 50-100 ideas in an hour

• › Rules

• › No critical assessments

• › Stimulate wild ideas

• › Build on other people's ideas

• › Stay focused on the topic

• › Hold on to one "thread" at a time

• › Really good ideas can stop the process and restart it somewhere new

• › Ideas are taken over into an "envisionment" activity, where it is visible and tangible

›

2026

ITPDP

AARHUS UNIVERSITY

FUTURE WORKSHOPS

› Critique phase

› Brainstorming problems in current practice

› No discussion – just get problems on the board › Group issues and prioritize importance

› Fantasy phase

› Brainstorm wild/utopian ideas (that can solve the problems identified)

› No discussion – just get ideas on the board

› Group ideas and prioritize them in terms of value creation

› Realization phase

› Take the high-priority ideas › Delimit to realistic visions

• › Prepare concrete proposals for realization

==> picture [47 x 40] intentionally omitted <==

(Jungk & Müllert, 1987;Kensing & Halskov, 1991)

2026 21

ITPDP

THE ROLE OF THE DESIGNER & THOUGHTFUL INTERACTION DESIGN

Löwgren and Stolterman

AARHUS UNIVERSITY

LÖWGREN & STOLTERMAN

Places the designer at the core of the process

L&S argue that the responsibility for the vision at the designer (p.34ff)

L&S argue that the responsibility for the design process is at the designer (p.38ff)

L&S argue that the designer should engage and manage the relations in the design process (p.32ff).

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

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUS UNIVERSITY

LÖWGREN & STOLTERMAN Designing the design process

› Design starts earlier than project owners may think

› Select appropriate methods/techniques

• › Pay attention to and care for a common vision

• › Pay attention to roles and stakeholders

==> picture [240 x 190] intentionally omitted <==

• › Pay attention to design as a project

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUS UNIVERSITY

LÖWGREN & STOLTERMAN

Divergence

“Designer expands her thinking to cover broader issues, find alternatives, and explore more opportunities” (L&S, p. 29)

Convergence

“Convergence is about focusing on a specific solution or a synthesis of several ideas” (Ibid.)

• What is the primary issue?

• • Who to involve and how?

• How would the shape look like?

• • What is the interaction modality?

• • What kind of feedback it give?

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

Design choices

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUS UNIVERSITY

LÖWGREN & STOLTERMAN

• › Vision : The first organising principle that help the designer respond to the situation at hand

• › Operative Image : The first (and consecutive) externalisations of the vision

• › Specification : The final “design”

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

• specification

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUS UNIVERSITY

LÖWGREN & STOLTERMAN

› Leaping between detail and the whole

• › Focusing on dilemmas in the domain

• › Alternatives and contraditions

• › Get the dilemmas and

trade offs on the table early in the Vision activity

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

INVOLVING USERS

AARHUS UNIVERSITY

PERSPECTIVES ON PEOPLE AND MACHINES

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUS UNIVERSITY

USER INVOLVEMENT

• None, very little, and/or only at the end

• User-centred design

• Participatory design

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUS UNIVERSITY

USER-CENTERED DESIGN

• Involvement of users in all parts of the design process

• Focus groups for ideation

• Evaluation of low-fidelity prototypes

• Evaluation of new features through AB testing and interviews

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUS UNIVERSITY

PARTICIPATORY DESIGN

• More radical approach to user involvement than user-centred design

• Users as direct design partners and active first-class members of the product design team

• Developed in Scandinavia in the 70s and 80s (Aarhus University was a key player)

• Methodology developed laid the foundation for user-centred design

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUS UNIVERSITY UTOPIA PROJECT

Early participatory design project

• Alliance between typesetters union and IT researchers

• How to empower instead of replace typesetters with computers

• Design of computer systems based on the people on the shop floor rather than the management

• Introduced low-fi prototyping in systems design

==> picture [47 x 40] intentionally omitted <==

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

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

ITPDP 2026

Morten Kyng & Susanne Bødker

AARHUS UNIVERSITY

PARTICIPATORY DESIGN TECHNIQUES

• › Ethnographic field studies

• › Observations, interview and video analysis

› "Fictional inquiries”

• › Playful analysis in a fictional setting

• › Structured brainstorming

• › Future Workshop, Metaphorical Design, Inspiration Cars, Organizational Games

• › Scenarios

› Descriptions, tableau, video

› Mock-ups

• › Physical models, paper windows

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

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

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

› Video prototyping

› Stop-motion, blue studio techniques

• › Prototyping

• › Exploratory, experimental, evolutionary, cooperative

==> picture [23 x 8] intentionally omitted <==

----- Start of picture text -----
2026
----- End of picture text -----

ITPDP

AARHUS UNIVERSITY

INTERNATIONAL BOOKS AND ARTICLES ON SCANDINAVIAN PARTICIPATORY DESIGN

• › Bødker, S., Grønbæk, K., & Kyng, M. (1995). Cooperative Design: Techniques and Experiences from the Scandinavian Scene. In R. M. Baecker, J. Grudin, & W. A. S. Buxton (Eds.), Readings in Human-Computer Interaction: Toward the Year 2000 . San Francisco: Morgan Kaufmann Publishers, Inc., 215-224.

• › G. Bjerknes, P. Ehn, & M. Kyng (Eds.) (1987) Computers and Democracy . Aldershot: Avebury. › Greenbaum, J., & Kyng, M. (1991). Design at Work: Cooperative Design of Computer Systems . Hillsdale, NJ: Lawrence Erlbaum Associates.

• › D. Schuler & A. Namioka (Eds.) (1993) Participatory Design: Principles and Practices . Hillsdale, New Jersey: Lawrence Erlbaum Associates, 157-175.

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUS UNIVERSITY

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

==> picture [214 x 282] intentionally omitted <==

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

36

AARHUS

UNIVERSITY

==> picture [47 x 40] intentionally omitted <==

ITPDP

2026

37

PROJECT MANAGEMENT

AARHUS UNIVERSITY

UNCERTAINTY ABOUT THE PRODUCT SHOULD BE REDUCED

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

----- Start of picture text -----
Now Deadline Exam
----- End of picture text -----

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUS UNIVERSITY

PROJECT MANAGEMENT: SYSTEMATIC APPROACH

==> picture [14 x 6] intentionally omitted <==

----- Start of picture text -----
Now
----- End of picture text -----

==> picture [113 x 6] intentionally omitted <==

----- Start of picture text -----
Deadline Exam
----- End of picture text -----

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

==> picture [436 x 77] intentionally omitted <==

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUS UNIVERSITY

PROJECT MANAGEMENT

Project management

› Focus on the project, starting point, purpose, budget etc.

› Focus on deadlines, deliveries, quality etc.

› Focus on progress, evaluation, success/failure Leadership

› Focus on competencies and roles

› Focus on performance and well-being

• › Focus on the team over time (and more projects)

• Self-management

• › Focus on your own tasks, satisfaction, prioritization, progression!

›

2026

ITPDP

AARHUS UNIVERSITY

PITFALLS

› Technical Rationality (Gedenryd 1998)

› Believe that you can follow a linear process

• › Optimistic estimation (Brooks 1975)

› Software is highly malleable compared to other materials

• › Brooks Law (Brooks 1975)

• › Believe that you can finish faster by putting more people on a project

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUS UNIVERSITY ILLUSION OF TECHNICAL RATIONALITY

• Most straightforward model of a project • Most projects to some degree or the other follows this model • Pitfall • Paralysis by fear of wrong requirements can halt the process • Mistakes are expensive too fix late in the process

==> picture [47 x 40] intentionally omitted <==

Schön 1987; Gedenryd 1998

2026

ITPDP

AARHUS UNIVERSITY

AGILE INTERACTION DESIGN / AGILE DEVELOPMENT

• Break design process down in small iterations each involving all phases

• Iteratively develop software in working (and deployable) increments

• The software is never finished (for good … and for ill)

• Affords extensible software architectures that enables rapid prototyping of new features

==> picture [47 x 40] intentionally omitted <==

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

----- Start of picture text -----
ITPDP
----- End of picture text -----

2026

AARHUS UNIVERSITY

MAKE A GOOD PLAN WITH ROOM FOR ERRORS AND ITERATIONS

==> picture [14 x 6] intentionally omitted <==

----- Start of picture text -----
Now
----- End of picture text -----

==> picture [113 x 6] intentionally omitted <==

----- Start of picture text -----
Deadline Exam
----- End of picture text -----

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

==> picture [436 x 77] intentionally omitted <==

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

ETHICS

AARHUS UNIVERSITY

WHY DO WE EVEN TALK ABOUT ETHICS

› We build things

› … that affects people’s lives

• › … potentially a lot of people

• › ... that change their perspectives on things

• › … even their possibilities of action, self-understanding and daily life

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

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUS UNIVERSITY

UNETHICAL TECHNOLOGY?

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

AARHUS UNIVERSITY

UNETHICAL TECHNOLOGY?

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

52

AARHUS UNIVERSITY

THREE SCHOOLS OF ETHICS

› Consequentialism (da: nytteetik )

› Cares for consequences: “The truth can hurt”

› Deontology (da: pligtetik )

• › Cares for rules: “You must not lie”

› Virtue ethics (da: dydsetik )

› Cares for principles: “I always tell the truth”

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

ETHICS

Verbeek’s Materializing Morality

AARHUS UNIVERSITY

VEERBEEK’S CLAIM

› ‘If technology mediates how we perceive and act in the world, it can also be designed to mediate perception and action in ethical or unethical ways.’

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

55

AARHUS UNIVERSITY

MEDIATION OF PERCEPTION

• › Simple : Me -> World

› Mediated : Me -> Technology -> World

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

56

AARHUS UNIVERSITY

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

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

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

57

AARHUS UNIVERSITY

MEDIATION OF ACTION

• › Inscription

› ‘The designer, who can be seen as the inscriber of scripts.’ › When we design

• › Scripts

› The influence of artifacts on human actions is a “script”

› Typical patterns of action

• › Translation

• › To new (or less) action possibilities (e.g., citizen+gun)

› Typical(/possible) outcomes

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

58

AARHUS UNIVERSITY

MEDIATION OF ACTION - EXAMPLES

==> picture [47 x 40] intentionally omitted <==

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

2026

ITPDP

59

AARHUS UNIVERSITY

MEDIATION OF ACTION - EXAMPLES

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

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

60

ETHICS

Dark Patterns

AARHUS UNIVERSITY

DARK PATTERNS

• › Basic assumption that UX features can be linked to similar user behavior

• › (Dark) patterns as a way to describe design → ‘scripts’ (cf Verbeek)

• › Pattern use suggests a causal relationship between intention → feature → behavior

• › Gray et al paper

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

62

AARHUS UNIVERSITY

DARK PATTERNS

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

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

63

AARHUS UNIVERSITY

DARK PATTERNS

==> picture [331 x 261] intentionally omitted <==

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

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

2026

ITPDP

64

AARHUS UNIVERSITY

DARK PATTERNS & SOCIAL MUSIC THEME?

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

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

65

GDPR

AARHUS UNIVERSITY

GDPR

• › General Data Protection Regulation is an EU regulation aimed at strengthening and harmonising the protection of personal data in the European Union.

• › Must protect the individual's rights and processing of personal data – consent, security, the right of access and the right to be forgotten, etc.

• › It is something we must relate to when we involve others than ourselves in the design

• process

• › Until now, you have mostly been the 'data subject' – now you will potentially also be data responsible!

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

67

AARHUS UNIVERSITY

GDPR RULES

• › Consent must be clearly obtained independently of other requests.

› Consent must be obtained with clear information about scope, purpose, responsibility and contact persons

• › In case of security breach, participants must be informed no later than 72 hours after discovery

• › The right to be forgotten must be implemented as a procedure in the process

• › A responsibility to be taken seriously ( but no need for further concern )

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

68

AARHUS UNIVERSITY

GDPR IN STUDENT PROJECTS

• › https://studerende.au.dk/en/it-support/information-security/data-protectiongdpr/projects

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

69

AARHUS UNIVERSITY

DOCUMENTS

• › Consent statement is used to obtain consent from participants – customize template as needed

• › The register of purposes is used to explain the purpose of the data collection

• › Data responsibility is used, as a group, to enter into an internal agreement on joint data responsibility

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

70

AARHUS UNIVERSITY

DOCUMENTS

› You are responsible for the preparation of the documents

› You are responsible for storing the documents

› You are responsible for the storage of data and GDPR

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

71

AARHUS UNIVERSITY

TIPS

• › Just get it done and learn that it is part of the study and our practice

• › Don't collect data you don't know what you need for (sensor data?)

• › Try to anonymize and 'get away from' data as early as possible (Clemens → Respondent M1)

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

72

AARHUS UNIVERSITY

WHAT CAN WE HELP WITH?

› Read through the documents when they are finished (to help)

› Answer questions

› Not so much more – it's agreements and your responsibility

› TA session where you’ll look at it!

==> picture [47 x 40] intentionally omitted <==

2026

ITPDP

73

==> 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

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