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

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

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

2. Observer

• Stays behind and observers what user does

• Takes notes on each task-can also write down user comments

3. 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