MENTAL MODELS

CONCEPTUAL MODELS
AND DESIGN
690A- Advanced Methods in HCI

Prof. Narges Mahyar

Slides from Prof. Joanna McGrenere and Dr. Leila Aflatoony

Includes slides from Prof. Karon MacLean and Jessica Dawson 1
TODAY
• CommunityClick test

• Mental models [40 min]

• Conceptual models
• Conceptual design

• In class activity [20 min]

• Conceptual design

• Discussion of readings [20 min]

2
LEARNING GOALS
• define mental models, describe their characteristics.
• give examples of how a mental model can be acquired.
• explain what Norman’s 7-stage model is good for:
• use gulfs/stages to analyze interactions with a system
• be able to identify a mismatch in mental models
• give examples of situations or interfaces where
mismatch occurs
• explain the difference between internal and external
cognitive frameworks

3
WHY LOOK AT COGNITION?
part of doing good design is understanding how people reason
and react to interface experiences

cognitive frameworks: help us do this!

• theoretical models that provide predictive and
explanatory power for understanding user behaviour
• based on theories of cognition

internal frameworks: about the mental process inside users

head
external frameworks: account for interactions with
technologies, environment, context

4
MENTAL MODELS
"In interacting with the environment, with others, and with the
artifacts of technology, people form internal, mental models of
themselves and of the things with which they are interacting. ”
-Norman (in Gentner & Stevens, 1983)

people use their mental models to:

• reason about a system
- how to interact with it; how it works
• figure out what to do when things go wrong

5
MENTAL MODELS VS. CONCEPTUAL
MODELS/DESIGN
mental models: something the user has (forms)
• users “see” the system through mental models
• users rely on mental models during usage
• there are various forms of mental models
• mental models can support users’ interaction

conceptual models and conceptual design

• this is what the designer does, to foster good mental model
formation by the user.

6
INTRODUCTION TO
CONCEPTUAL MODELS

https://www.youtube.com/watch?v=pAOyWFOFhsg
7
THE DESIGNER’S MODEL,
THE USER’S MODEL, AND THE
SYSTEM IMAGE.
the user also has a mental model.
they don’t necessarily match.

(No connection)

8
RECALL OUR
DESIGN CONCEPTS:
the basics: other concepts:
(elements of these in • findability
many of the others)
• transfer effects
• affordance • cultural associations
• signifiers • individual differences
• mapping
• constraints
• feedback

à all inform a user’ mental model

9
AN OBJECT THAT HELPS YOU FORM A
MENTAL MODEL:
SCISSORS
affordances:
• holes for something to be inserted
constraints:
• big hole for several fingers, small hole for thumb
mapping:
• holes-for-fingers suggested / constrained by appearance
positive transfer and cultural idioms
• learnt when young; constant mechanism
mental model:
• physical object implies how the operating parts work

A reasonable mental model can be formed by just looking at and perhaps

holding the object.
• Some things you don’t understand you do anyway: why big blade down?
10
AN OBJECT THAT HINDERS MENTAL MODEL
FORMATION:
“OLD STYLE” DIGITAL WATCH 12:00
affordances - mixed:
• four buttons are clearly for pushing and the screen shows a number –
but unclear what the entire object affords
telling time? setting alarms, timers, viewing heartrate, other data?
visibility – lousy:
• what will happen if you push each button? what mode is watch in?
constraints and mapping - unknown:
• no visible relation between buttons, possible actions and end result
transfer of training:
• little relation to analog watches. But, maybe from other digital devices.
cultural idiom:
• some standardized core controls and functions but others variable
mental model:
• must be taught, or learned by trial/error

11
NORMAN’S SEVEN-STAGE MODEL

https://www.coursera.org/lecture/uva-darden-running-design-sprints/usability-with-
donald-normans-7-steps-model-8dFEC

12
 WHAT MENTAL MODELS TELL THE
USER
what do I want to do establishing what did I do to make
with the system next? the system do that?
goals
evaluation of what did the
intention to act interpretations system just do?
what can I do next?

sequence of actions interpreting the what am I now

what if I do this? perception seeing?

to do it, I’ll do execution of the

this, then this action sequence perceiving the state
of the world what will I see as
a result?

the world
13
NORMAN’S SEVEN-STAGE MODEL
WHAT IS IT GOOD FOR?

internal framework: best for exploratory learning

• but this is just one way to form a mental model of a system

less applicable to highly learned, semiautomatic behavior

• user has already developed strong expectation of what will
happen/how it will happen
• gulfs in these cases tend to be very small (scissors example)

14
ACQUIRING MENTAL MODELS
during system usage:
• the user’s own activity leads to a mental model
• explanatory theory, developed by the user
• often used to predict future behavior of the system
observing others using the system:
• casual observation of others working
• asking someone else to “do this for me”
• formal training sessions
reading about a system
• documentation, help screens

this is done by the user (not the designer)

15
SOME CHARACTERISTICS
OF MENTAL MODELS
• incomplete
• constantly evolving
• not accurate representation
• (contain errors and uncertainty measures)

• provide a simple representation of a complex phenomena

• can be represented by a set of if-then-else rules

16
CONCEPTUAL MODELS &
CONCEPTUAL DESIGN

17
LEARNING GOALS
• explain the purpose of a conceptual model and how it differs
from a user’s mental model.
• explain the difference between a conceptual model and an
interface design.
• what are the risks and limitations of getting conceptual design
wrong?
• list some of the components a conceptual model should include
(e.g. metaphors, interaction types, objects/attributes, etc)
• be able to perform an object/operation analysis
• give examples of methods you could use to represent a
conceptual model.
CONCEPTUAL MODELS &
CONCEPTUAL DESIGN:
• conceptual models describe how an interactive system is
organized
• the user also has a mental model. they don’t necessarily match.

• conceptual model = the foundation of the interface.

• different user interfaces could be built upon it
• there are many ways to represent a conceptual model

• goal of conceptual design, how do conceptual models fit?

• interface design translates the CM into things we can see and
interact with. It involves design choices, but must stay faithful to the
concepts and terminology of the CM.

19
WHAT IS CONCEPTUAL DESIGN?
crossing the gap from requirements to a solution

starts with brainstorming; multiple iterations to narrow down

a conceptual design
- can take many different forms
- be built through many approaches
- is essentially a set of ideas

20
MENTAL MODELS VS. CONCEPTUAL
MODELS
mental models: something the user has (forms)
• users “see” the system through their own mental models
• users rely on mental models during usage
• there are various forms of mental models
• mental models can support or impede users’ interaction

conceptual models: articulation of designer’s (i.e. your) mental model

• what users will be able to do
• what concepts or knowledge users will need, in order to interact
• how they will interact with system (at a very high level)

21
 GOALS User Interface Design Process: Evolving Iterations

Understand USERS: Understand DESIGN: REFINE Design: CONFIRM & debug:

• who they are • design space and risks • by element • performance in
• their key tasks • choose design approach • considering task real use
• varied contexts

Release!
Make use of: Make use of:
• requirements • graphical design
Examine existing:
MATERIALS / METHODS

• task analysis • interface guidelines

• user tasks &
• real & virtualized users • style guides
• objectives
• technology options • real & virtualized
• contexts
• company IP users
• interfaces
Field
testing
Evaluate w/: Evaluate w/:
Evaluate w/: • observation • usability testing –
• observation • interview/quest controlled,
– many kinds uncontrolled
• participatory
• ethnography interaction • heuristic evaluation
• interviews, • task walk-throughs
questionnaires
• task analysis h
med/ hig
ty elity
low fideliing fid
g
p prototypin
PRE prototy
methods
EARLY metho ds MID LATE
DESIGN DESIGN DESIGN DESIGN
PRODUCTS

• user and task • throw-away prototypes • testable medium- • alpha/beta

descriptions • design direction fidelity prototypes systems or
• design requirements • risk analysis • complete
specification

K MACLEAN - DERIVED FROM VERSION BY SAUL GREENBERG (U CALGARY) 22

A CONCEPTUAL MODEL
EXCLUDES
• low level presentation
• implementation details
• menu and screen designs
• widgets
• etc.

if you started here,

you will probably get into trouble

23
A CONCEPTUAL MODEL CAN
INCLUDE:
• any central design metaphors and analogies
e.g. the “desktop metaphor”

• concepts – objects, actions you can do to them; user roles; attributes

of both.
e.g., files and folders; both can be opened, have names;

• relationships among concepts

e.g., files are contained in folders

• mappings from concepts to the user experience envisioned;

e.g., the users can browse files, and mark favorites

• terminology that will be used (consistently) to tie it all together

• interaction types; how will they interact with it?

e.g. give commands, perform operations, explore

• interface types; is it/should it be constrained? how would different interfaces

affect result?
24
Johnson & henderson
METAPHORS
well known concepts you can rely on to help users understand and
interact with the system

many kinds, e.g.,

interactions
• swipe to turn page in an ebook
• move backwards through time to explore file backups

ecological, contextual, broader system structure, e.g.

• dropbox: a box you drop everything into
• iCloud: central mother ship to which everything connects

personal relationships, e.g.,

• siri as a personal assistant

25
EXAMPLE: THE DESKTOP
METAPHOR
unifying set of concepts employed in graphical
user interfaces to help users understand and
easily interact with a computer

computer monitor à user’s desktop

objects à documents, folders
you can do things with these objects:
• place documents upon desktop
• open documents into a window à paper copy
• organize in folders
extend desktop with desk accessories à
calculator, notepad

26
RELATIONSHIPS AMONG
CONCEPTS
what actions or attributes are shared between objects?
- e.g. song, podcast, audiobook all have timelines that users
want to navigate (i.e. fast forward, rewind, etc.)

containment and hierarchy

- e.g., a song is contained by an album

27
MAPPING OF CONCEPTS TO ACTUAL
ACTIVITIES
How do the concepts map to what people will actually do?
one easy way to tell:
“run” a task example on it
person card
PIN insert
learn:
ask
• are these the right objects?
debit
• can I do all the operations? machine
account
• do they match what people PIN
inquire
want to do?
update check
• can I do them in a consistent
way? access
example: debit machine 28
TERMINOLOGY
What terms will you use to communicate concepts?

terminology should match your concepts

choose your terminology and stick to it!
easy to go from planning to interface and minimize confusion

does your user login to a system with a user-id? a username? a

member id? or an email address?
29
CONCEPTUAL MODELS:
INTERACTION AND INTERFACE

Interaction type:
what the user is doing when interacting with a system.
• e.g., command line (how you talk to it), intelligent (function),
gestural (hardware), touch (both hardware and interaction type)
Interface type:
the kind of interface used to support the mode.
• e.g. speech, menu-based, gesture

30
INTERACTION TYPES
Instructing
instruct a system and tell it what to do; issuing commands and selecting
options (e.g. print a file, save a file)
Conversing
interacting with a system as if having a conversation (e.g. search
engines, advice-giving systems, help systems, virtual agents)
Manipulating
interacting with objects in a virtual or physical space by manipulating
them (e.g. dragging, selecting, opening, closing and zooming actions on
virtual objects)
Exploring
moving through a virtual environment or a physical space (e.g. google
maps, GPS)
31
INTERFACE TYPES
many different kinds (we won’t examine each in detail)
• includes: mobile, GUI, touch, tangible, haptic, desktop, command
line, data visualizations…

32
WHAT DOES A CONCEPTUAL
MODEL LOOK LIKE?
however best helps you describe and understand its
components:
• lists and tables
• diagrams
• storyboards and sketches
• written descriptions
• mood boards
• physical ‘sketches’

different methods might capture different parts of more

effectively than others

è you’ll likely use a combination of more than one!

33
CONCEPTUAL MODEL FOR A
DEBIT MACHINE
- using a diagrammatic approach
- shows concepts, relationships, terminology

1 * 1
owner account

1
1 *
1 *
user use accesses
* *
1
debit
machine
34
STORYBOARDS AND SKETCHING
• flexible methods for representing conceptual design!
• can be used to show what the user is thinking/feeling
• communicate metaphors
• interface types and styles of interaction
• environments and contexts in which system is used
• can be very low investment
• note: you don’t need to be good at drawing to communicate
your ideas
• sketches and storyboards can vary in fidelity

Ben Crothers. Storyboarding & UX –

Part 2: Creating your own. Oct 17, 2011 35
THIS CONCEPTUAL DESIGN REPRESENTATION
EMPHASIZES
OBJECTS AND RELATIONSHIPS FOR AN E-TICKET SYSTEM

Akshay Sharma, Virginia Tech Department of Industrial Design

36
from The UX Book: Process and Guidelines for Ensuring a Quality User Experience, Rex Hartson and Pardha S. Pyla
STORYBOARDS
guidelines for storyboards:
• decide what you want trying to communicate
• consider characters, plot, environment, user’s thought
process and emotions
• iterate: start with text and arrows & move up to more
involved drawings

37
Ben Crothers. Storyboarding & UX – Part 2: Creating your own. Oct 17, 2011.
SUMMARY:
A GOOD CONCEPTUAL MODEL:
• must make sense
e.g., metaphors that build on something the user knows,
and translates well
• has to be consistent
e.g., in terminology, in how objects are interacted with, etc.
• has a minimal set of concepts
keep it simple as possible; Conceptual model will be
apparent to user if they can see all of it
• focuses on elements of task user wants to do

• *need to settle on it EARLY in the process*

38
ACTIVITY: SCENARIO [20 MIN]
Imagine: you’ve been hired to (eventually) build a new
user web interface for reserving rooms in the UMass CS
department.

In this system, users must be able to:

• log on with their department ID
• see what rooms exist (list or map view)
• see and search room availability
• reserve a room (if it is available), and receive an email
confirmation sent to their department ID
• hold one future room reservation at a time
• see their own future reservation, if any.

If a room has already been reserved by someone else, students

should not be able to find out who has reserved it, but users with
tech staff credentials should be able to find this information.

39
ACTIVITY: STEPS
get into groups of 2-3
1) What COULD a conceptual model for a room-booking system
contain?

è brainstorm on each dimension of conceptual models that

we’ve discussed

2) create a visual representation(s) of a conceptual model based

on your brainstorming

3) if time: is there a DIFFERENT conceptual model that you

could create based on your brainstorming?

40
DISCUSSION ON REQUIREMENT
READINGS [20 MIN]
Get into group of 3-4 answering the following
questions:
• What surprised you? or
• What you disagreed with?
• Others?

41
ON DECK…
Next class …
• Readings (as posted) and researcher journal
• Third project milestone: Ideate
• due on March 18th

42
EXTRA SLIDES

43
SYSTEM DESIGN VS. INTERFACE
DESIGN?
• system designers and implementers may have more
concepts or details going on in the background
• but conceptual model (and eventually interface)
should only contain what users need
• system concepts should only be included when they
can foster a good mental model

44
IDENTIFYING CONCEPTS:
OBJECT / OPERATION ANALYSIS
method from Johnson and Henderson
èwhat are all the ‘concepts’ that a user will need in the system?
èimplication: should be what people use to interact with the interface!

INCLUDE: all objects, attributes, operations of tasks that users need to be

aware of or understand to use system
• user-understandable entity types (objects, people, …?)
• attributes of each entity-type
• operations that users can perform on each type of object
• note where these concepts may be different for different users

task examples are a great resource for these!

45
IDENTIFYING CONCEPTS:
EXAMPLE:
objects attributes operations
album, title, artist, descriptions, play, preview, pause, stop,
currently playing, # times played rewind, fast forward, add
songs date added to system to play list, send to a
friend
title, artist, description, play, stop, add to play list,
compilation, currently playing, # send to a friend
album times played, date added to
system
title, description, date created, # play, stop, skip song,
playlist times played choose song, send to a
friend

username, favorite albums, review songs, review

user profile favorite songs, credit card #, albums,

46
INTERACTION TYPES
1. Instructing
instruct a system and tell it what to do; issuing commands and selecting
options (e.g. tell the time, print a file, save a file)
2. Conversing
interacting with a system as if having a conversation (e.g. search
engines, advice-giving systems, help systems, virtual agents)
3. Manipulating
interacting with objects in a virtual or physical space by manipulating
them (e.g. dragging, selecting, opening, closing and zooming actions on
virtual objects)
4. Exploring
moving through a virtual environment or a physical space (e.g. google
maps)
47
1. INSTRUCTING
use when:
• user needs to tell system what to do
RSP defines as indirect (as opposed to ‘direct manipulation’)

common conceptual model:

• word processors (open, close, save, etc.)
• VCRS/DVD players (play, rewind, pause, etc.)

benefit: supports quick and efficient operations

• good for repetitive actions on more than one object
• must be aware of the possibilities – learned
2. CONVERSING
use when:
user needs have a dialogue, i.e. back-and-forth.
• really a dialogue, not just a series of options and selections.
• more of a 2-way conversation than in instructing

examples: often implemented with natural language

• many online help centers (have you ever been fooled?)

• SIRI (can also be instructing)
• edge case: typing queries into a web search engine
• compare with: kiosk operation like buying a bus ticket

benefit: when/WHY to use?

• good for novices, the computer phobic, specialized applications, etc.
 3. MANIPULATING
use when:
• makes sense to directly manipulate objects
• benefit: leverages what people do in the real world; (e.g., drag/drop)
• but CAN be used for non-realistic actions too (e.g., zoom)

• principles:
• representation is always available (visible)
• incremental, reversible actions (“undo”)
• physical actions (drag/drop) rather than syntactic commands

• examples of tasks that could use “manipulating”

• file operations (open, close, save)
• moving selected block of text around on a powerpoint slide
• touch interaction with maps (pinch, zoom, slide)
4. EXPLORING
use when:
• user needs to explore and interact with an ‘environment’.
• can exploit user’s previous knowledge of how they move through
spaces (digital and physical)

examples of tasks that could use “exploring”

• finding a location in google maps:
using street view
• identify location using ‘dot’ on GPS:
physically move through actual environment with phone
INTERACTION TYPES
instructing, manipulating most common historically; but
conversing and exploring increasingly used

• not exclusive
• you can do multiple within one interface for DIFFERENT
objects
• or for the SAME objects, e.g.,
è instructing AND manipulating of files
(open, close, save, etc.)
è instructing AND conversing for help functions
è conversing AND exploring for following GPS directions
ICLICKER OPTIONS
A- Agree
B- Disagree
C- Important
D- Need more info
E- Have question

53