UNIVERSITY OF BERGEN

Cognitive Aspects + Design &

Prototyping

INFO162 - Chapters 4,12

Outline - what we’ll talk about today
• Chapter 4 – Cognitive • Chapter 12 – Design &
Aspects Prototyping
– What is cognition? – What is a prototype?
– Attention – Why prototype?
– Perception – Low & High fidelity
– Various cognitive prototyping
concepts
• Chapter 13 (will not be in
exam)
 Learning Outcomes
• Chapter 4
– know the key concepts and terms used in evaluation
– identify suitable methods for evaluating interactive
technologies
• Chapter 12
– discuss the advantages and disadvantages of low-
fidelity and hi-fidelity prototypes
– produce simple prototypes of interactive products

https://www.uib.no/en/course/INFO162
Cognitive Aspects, Chapter 4
HCI is Interdisciplinary

Neuroscience Psychology
Understanding
cognitive processes
will help us to
understand our users.
Cognition –

“The mental action or process of

acquiring knowledge and
understanding through thought,
experience, and the senses.” (Lexico)
Different types of cognition
• Various cognitive processes –
– thinking, remembering, learning, day-dreaming, decision making,
seeing, reading, writing, etc.

• Experiential and Reflective Cognition, Fast and Slow Thinking

(Norman + Kahneman)

– Experiential (Fast) - perceive, act, and react to events around us

intuitively and effortlessly
– Reflective (Slow) - mental effort, attention, judgment, and
conscious decision making
Six perspectives on cognitive processes

• Attention
• Perception
• Memory
• Learning
• Reading, speaking and listening
• Problem-solving, planning, reasoning, and decision-making
Attention (& Selective Attention)

https://www.youtube.com/watch?v=xNSgmm9FX2s
 Attention
• “selecting things on which to concentrate, at a point in
time, from the range of possibilities available, allowing us to
focus on information that is relevant to what we are doing.”
(Preece et al.)

• Attention affects our sensory perception

– For example: paying attention to an image boosts
perceived colour contrast (Carrasco et al.)

Carrasco, Marisa, Sam Ling, and Sarah Read. "Attention alters appearance." Nature neuroscience 7.3 (2004): 308-313.
Designing for attention
Keep it simple – less
distractions = more
attention

Multimodal interactions
– short sounds and
vibrations are good for
attracting user attention

Design for the user’s

goals
Designing for attention

• Keep it simple – less distractions = more attention

• Multimodal interactions – short sounds and vibrations are

good for attracting user attention

• Design for the user’s goals

How to evaluate user attention?

• Eye-Tracking
• Think-Aloud
• Performance measures (indirect)
– Reaction time, completion time, etc.
Perception – what is this?
 Perception – what is this?

Image from Nintendo

 Defining Perception
• “how information is acquired from the environment via the
five sense organs (vision, hearing, taste, smell, and touch)
and transformed into experiences of objects, events,
sounds, and tastes.” (Roth and Frisby)

• Different dominant senses for different people

– Vision dominant for most sighted people

Roth, Ilona, and John P. Frisby. Perception and representation: A cognitive approach. Open University Press, 1986. Image from Attentive Teaching by James Rossi
Multimodality and Perception
• Multimodality - Input and output with multiple modalities
– Modality – a single channel of sensory input/output
• Sound, Vision, Touch, etc.

https://www.youtube.com/watch?v=2k8fHR9jKVM
 Gestalt principles
• “the whole is more than the sum of its parts” (Sternberg and Sternberg)

Sternberg, Robert J.; Sternberg, Karin (2012). Cognitive Psychology (6th ed.). Belmont, CA: Cengage Learning. Image from https://www.toptal.com/designers/ui/gestalt-principles-of-design
 Gestalt principles
• Set of laws, describing how we typically interpret objects by
patterns
– We group similar elements, simplify complex images
and distinguish between elements in different ways

https://www.toptal.com/designers/ui/gestalt-principles-of-design
Gestalt - Similarity
• Objects that look similar appear grouped together, all other
things being equal
 Gestalt - Closure
• We perceive objects such as shapes, letters, pictures, etc.,
as being whole even when they are not complete

https://www.interaction-design.org/literature/article/the-laws-of-figure-ground-praegnanz-closure-and-common-fate-gestalt-principles-3
Design implications for perception

• Utilize the Gestalt principles

• Consider differences in perception – color blindness

How to evaluate user perception?

• Eye-Tracking
• Think-Aloud
• Performance measures (indirect)
– Reaction time, completion time, etc.
Memory
• Do you remember my unverified claims and assumptions
from lecture 3?
– Show of hands
Making assumptions and claims is
risky!

• When designing this presentation I assumed 5% of

students will be willing to actively participate. What
happens if I am wrong?

• I claim that students learn better when they are required to

actively participate.
Memory
• Do you remember my unverified claims and assumptions
from lecture 3?
– Show of hands

• Our memory is fallible, complex, limited and personal

 Processing in memory
• Encoding and attention affect what we remember
– “The more attention that is paid to something and the more it is
processed in terms of thinking about it and comparing it with
other knowledge, the more likely it is to be remembered.”
(Preece et al.)

• Context affects memory encoding and retrieval

– “If you have music going on in the background when you study,
it’s going to be easier to recall that information if you also have
music on in the background when you take the exam” (Anderson)

https://liberalarts.tamu.edu/blog/2021/03/10/does-listening-to-music-really-help-you-study/
 Designing for Memory
• Recognizing an icon is
easier than remembering
command line commands

• Showing partial search

results while a user it typing
mixes recall and recognition

• Browser history

Image from https://www.nngroup.com/articles/ten-usability-heuristics/

Image from https://userguiding.com/blog/user-onboarding-examples/
Learning
• Accumulation of skills and knowledge

• Incidental Learning – learning without an intention or goal

– Learning English from TV
• Intentional Learning – the goal is to learn something and
remember it
– Learning Figma with a tutorial
 Designing for Learning
• We learn by doing – users usually prefer experimentation
over reading manuals

• Design for exploration

• Constrain and guide users – protect them from getting

lost and confused while exploring

Image from http://www.getcoloringpages.com/treasure-map-coloring-pages

Reading, Speaking, Listening
• Language based cognitive activities
• Different personal preferences

• Reading (and writing)

– Permanent, the text is always there (almost always)
– Enables scanning for information
– Visually impaired users? Braille writing
– Dyslexia makes reading and writing difficult
Reading, Speaking, Listening

• Speaking and Listening

– Transient - we need to pay attention
– Requires less cognitive effort
– Hearing impaired users? Speech-to-text and sign
language
– Text-to-speech is used by visually impaired users
Designing for Reading, Speaking,
Listening

• Support replay of audio

• Provide important information via reading and listening

• Make speech-based information short

Problem-solving, planning,
reasoning and decision-making

• High effort, slow thinking, reflective cognitive processes

• Information overload and choice overload are taxing

– Users ignore most of the available information
Design implications

• Do not overload users with information or choices

• Use personalization to accommodate user interests and

preferences
– Allow users to change settings and choose what
information is relevant to them

• Games - make sure choices are interesting and rewarding

Understanding
cognitive processes
will help us to
understand our users.
 Mental Models
• “what the user believes about the system at hand” (Nielsen)
• Constantly evolving model which changes when the user
interacts with the system
– For example – good error messages can evolve our
mental model

https://www.nngroup.com/articles/mental-models/ Image from https://blog.prototypr.io/writing-microcopy-e77d7bac1c0e

 Mental Models and Conceptual
Models
• A conceptual model is created by the designer as a high-
level plan for how the product will work and fit together.1
– Conceptual model - how the designer planned the
system
– Mental model - how the user thinks the system works

• When there is a big gap between these two models, users

get frustrated

1 - https://uxdesign.cc/understanding-mental-and-conceptual-models-in-product-design-7d69de3cae26
Designing for users Mental Models

• Present clear error messages when things go wrong

• Design according to current design conventions

• Provide help and tutorials to clarify your conceptual

model
Does understanding
cognitive processes
help us to understand
our users?
Design & Prototyping, Chapter 12
Outline recap
• Chapter 4 – Cognitive • Chapter 12 – Design &
Aspects Prototyping
– What is cognition? – What is a prototype?
– Attention – Why prototype?
– Perception – Low & High fidelity
– Various cognitive prototyping
concepts
 Context of Design & Prototyping

https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/
 What is a prototype?
• A basic version or mockup of the product we want to build
• Enables stakeholders to understand and experiment with
the product

Image from https://www.justinmind.com/prototyping/paper-prototype

Rotimi Solola and Cait Miklasz via https://weandthecolor.com/vespa-cam-design-concept-rotimi-solola-cait-miklasz/35050
 Why prototype?
• Concrete - gets everyone on the same page
– Stakeholders and team members
• Testable – technical feasibility, integration with other
products, user evaluations, etc.

https://www.theverge.com/2012/12/7/3739626/nintendo-wii-u-history-prototypes
 Prototype fidelity
Low-Fidelity High-Fidelity
• Simple, cheap, quick, basic • Complex, expensive, rich
• Far from a finished product interactions, detailed
• Closer to the finished product
• Interactions are simulated
• Interactive

Jensen, Lasse Skovgaard, et al. "Prototyping in mechatronic product development: How prototype fidelity levels affect user design input." DS 92: Proceedings of the DESIGN 2018 15th International Design Conference. 2018.
Low fidelity prototyping methods

• Storyboards
• Paper Prototyping
• Wireframing
• Wizard of Oz
 Storyboards

https://www.nngroup.com/articles/storyboards-visualize-ideas/
 Paper prototyping
• Using pen and
paper to emulate
a digital product

• Easy to make
• Testable with
users

Stockinger, Tobias, et al. "Prototyping for the Digital City." (2014).

Paper prototyping

https://youtu.be/PJ8Q37WQKbg?t=85 (1:25-3:05)
 Wireframing
• Determine the
structure of the
design before
defining the
visual aesthetics

• Prioritize content
• Size, position, etc.

• Plan user flows

https://www.figma.com/community/file/915647337333327091
Wizard of Oz

https://youtu.be/-RQxD4Ff7dY?t=34 (0:34-1:30)
 Wizard of Oz

• Fake it till
before you
make it

• Mechanical Turk
– 18th century
chess robot
prototype

https://furhatrobotics.com/blog/using-wizard-of-oz-for-user-studies-with-furhat/
High fidelity prototyping tools

• Interface design software (Figma)

• 3D Printing
• Software development and Tinkering
Figma
• Web based vector design tool
*Works offline as well
• Feature rich
– Interactive prototyping,
commenting, collaboration,
version control, etc.
• Not just for designers
– Used by software
developers, marketing,
product managers, etc.
What makes Figma special?
• Free(mium)
• Collaboration features
• Multi-platform
• All-in-one
• Plugins!
• Extremely popular?

• Purchased by Adobe!
 3D Printing

• Great for physical product

prototypes

• Requires technical
knowledge and modelling
skills

https://medium.com/@ZMorph/designing-a-3d-printed-wireless-mouse-25277d082b8d
 Software development & Tinkering

• Modifying existing software

or hardware to create a
prototype

• Requires access to code\

hardware and technical
skills

https://www.theverge.com/2012/12/7/3739626/nintendo-wii-u-history-prototypes
Discuss – What
prototyping methods
are you using in your
project? Why? (4 minutes)
Thank you!

Questions?