Week 8 Conceptual Model Flashcards
System-Related Models (CIRM)
Conceptual model
Implementation model
Representational model
Mental model
Overall: Tools for…
* designing
* creating,
* understanding and
* interacting with
a system easily
What is a Conceptual Model?
Teaching Tool (in general)
* A visual representation used to teach and/or
understand a physical, chemical, biological,
electronic, or psychological system.
* E.g., Model Human Processor
UI Design Tool
Software Implementation Tool
Both above * “A high-level description of how a
system is organized and operates.”
* (Johnson and Henderson, 2002, p. 26)
* E.g.?
Conceptual Model: What It Is in HCI? IOM
Idealized view
* of how a system works
Ontological structure
* of a system…
* contains task-domain objects,
* their relationships, and control structures
Mechanism
* by which users accomplish the tasks
the system is intended to support
Conceptual Model – Specifies and Describes…
Design metaphors & analogies
Concepts system exposes to user (task-domain objects, attributes, and actions)
Relationships between concepts
Mappings between concepts and task domain
What a Conceptual Model of an Interactive System is Not?
Not the UI as a whole
* i.e., how the system looks or feels
Not the interactive or data elements in the UI
* screen graphics and layout, navigation schemes,
* commands, controls, dialog boxes,
* data presentation, or error messages.
Not the actions performed by the user using the UI
* keystrokes
* mouse-actions
Not an implementation architecture
* technological concepts, objects, attributes,
actions, relationships, and control structures
needed to implement system, e.g., UML
Not the user’s mental model
Breadcrumbs for Web site navigation. Do they show…
a) the history of pages you have gone through to arrive here, or
b) the place of this page in the hierarchy of pages?
Advantages of Conceptual Models in HCI?
Design tool:
* a way for designers to think through and straighten out
their thinking before they start laying out UI widgets.
* gives the designer a clear target for what the UI has to look like or deliver to the user.
Reference tool:
* provides the design and development teams with
a reference or central point to rally around.
Documentation tool:
* provides the documentation team with the material
(e.g., help) to help user learn the system.
Usability testing tool
* designing a UI from conceptual model yields simpler, more coherent, and easier to learn system.
* allows the development team to write task-based scenarios at a
level of description that matches the target task-domain, e.g.:
* As a new user, use the system to make $50 deposit into your
checking account.
* As an old user, use the system to check the balance in your
checking account.
* As a frequent user, use the system to transfer funds ($100)
from your checking account into your savings account.
Conceptual Model: Conceptual Model of mid-1970’s Office
Metaphors and analogies
* Office Desktop
Concepts
* Document
* Folder
* In-Tray
* Copier
Relationship
* Discards
* Contains
* Copies
Mapping
* Copier on the computer desktop mapped
to a physical printer in an office
Conceptual Model: in UI Design (Read)
“…describes abstractly — in terms of tasks, not keystrokes, mouseactions, or screen graphics — what users can do with the
system and what concepts they need to be aware of. The idea is that by carefully crafting a conceptual model, then designing a user interface from that, the resulting application will be cleaner, simpler, and easier to understand.”
Conceptual Models: Designer’s Obligation (Read)
“The designer has an obligation to provide an appropriate
conceptual model for the way that the device works. It
doesn’t have to completely accurate but it has to be
sufficiently accurate that it will help in both the learning of
the operation and also dealing with novel situations.”
How Do We Build a Conceptual Model in UI Design(6 Things)
Interaction modes
* What will the users be doing when interacting with the
system (i.e., carry out their tasks)?
* E.g., MICE
Interaction styles
* What kind of interface will be used to support the mode
* E.g., speech, menu-based, gesture?
Interface metaphors
* What kind of interface metaphor, if any, will be appropriate?* E.g., website: shopping cart or basket or bag?
Information architecture
* How is content organized and structured?
Terminology
* How familiar are task-domain objects?
Content strategy
* What are the guiding rules for types
of content in the UI?
What is an Interface Metaphor?
UI designed to be similar to a
physical entity, e.g..
* Desktop
* Web portal
* Shopping cart
Can be based on an activity, object.
* or a combination of both
Utilize user’s familiar knowledge
* helping them to understand ‘the unfamiliar’
How Do We Choose an Interface Metaphor?
Identify items among data and functionsthat
should be targets
Identify sources of metaphorical reference
Generate many possible metaphors
Identify and evaluate matches and
mismatches
Revise metaphors to strengthen effective
matches and reduce harmful mismatches
What are Some Challenges with Interface Metaphors?
They can constrain designers in the way
they conceptualize a problem space
* limits their imagination in coming up
with new conceptual models
They break conventional and cultural rules:
* E.g., recycle bin on desktop
Users only understand the system in terms
of the metaphor
When existing bad design used, it can
transfer to the new design
Interaction Types – MICE-R
Manipulating
* Manipulate objects in a virtual or physical space
Instructing
* Tell a system what to do
* Issue commands and select options
Conversing
* Interact with a system as though having a conversation
Exploring
* Navigate a virtual or physical environment
Respond
* System initiates interaction and user chooses to respond
- Instructing
Users instruct a system on
what it should do, e.g.
* Tell the time
* Print a file
* Save a file
Common in many devices
* Word processors
* VCRs
* Vending machines
Can use different interaction
modalities
* Menus, multitouch screens
* Speaking, gesturing
* Pressing buttons
Supports quick and efficient
interaction
* Suitable for repetitive actions performed on multiple
- Conversing
- Examples: (Voice oriented)
- timetables, search engines, advice-giving systems, help systems,
- virtual agents, toys and pet robots
designed to converse with users
- Manipulating
- Users drag, select, open, close, and
zoom on virtual objects - Exploit’s users’ knowledge of how
they move and manipulate in the
physical world
- Direct Manipulation Examples
- Technical drawing
- Circuit diagram
- Progenitor
- GUI
- CAD
- Computer Graphics
- Exploring
- Involves users moving through a virtual or
physical environment - Uses: physical environment with embedded
sensors - Enables: users to use familiar knowledge of
physically moving around - Examples:
- Google Maps
- Smart rooms
- Pokemon Go
- Responding
- System alerts users to something it “thinks”
is of interest (automatic without explicit user
request) - Uses: users’ location or past behaviors
- Examples:
- Alerting user of nearby coffee shop where
friends are meeting - Fitness tracker notifies user of a milestone
reached - Challenge:
- knowing what the user will find important
given their context?
Conceptual Model for UI Design Decision
Make a choice of a high-level set of task-domain
objects and decisions about
Design a set of rules for the consistent use of UI
elements and the assignment of behavioral properties
Design a set of rules for when (not) to use the different
UI widgets
Decide on when (not) to use action bars in windows,
the labeling of picks, and the design of the organization
Decide on how to organize functionality and design
navigation to best support the users’ task
Decide on effective use of colors in UI design
Assessment of the Implication of Conceptual
Models using 5 Human Performance Factors
Mental models and understanding
* If you understand it, you can use it!
Location awareness
* If you know where you are, you can get to your
destination!
Visual search effectiveness
* If you can find what you look for, you can accomplish
your goal!
Operational (executing actions) load
* If you do fewer actions, your effort is reduced!
Working memory load
* If you are not required to remember much, you can
do more!
Mental Model (Read)
“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.
“These models provide predictive and
explanatory power for understanding the
‘interaction’”
Norman’s Mental Model
Designer, User, System (Good Image on slide 55)
Designer’s model:
conceptual model of the
system (i.e., designer’s
understanding of the
system)
User’s model: user’s
understanding of the
system; developed
through interaction with
system
System image: the
designer’s materialized
mental model. Mediates
between designer and
user’s mental model.
Normans: Designer’s model:
conceptual model of the
system (i.e., designer’s
understanding of the
system)
Normans: User’s model:
user’s understanding of the system; developed
through interaction with system
Normans: System image:
the designer’s materialized mental model. Mediates between designer and user’s mental model.
Model Mismatch with Norma’s (I.e. Issues with it)
Mismatch between
designer’s conceptual
model and user’s mental
models leads to:
* Slow performance
* Errors
* Frustration
How Do Users’ Build a Mental Model?
User’s interaction with the
system
Explanation of the system
to the user e.g., through an
analogy or documentation
Observing others use the
system
Build a Mental Model? Observing others use the system:
Casual observation
Asking someone else to “do
this for me”
Formal training
How Do Users’ Build a Mental Model? Reading about the system:
Documentation
Help
Reference books
Mental Models are often Incomplete
The idea that we need the goal of the creation to follow the model that a user would interoperate it work as. IE make the model easily interpretable and work on first intuition
- What do we do if the user’s mental model is incorrect/incomplete?
- Best to redesign the UI as changing user’s mental models is more timeconsuming…
- When re-design is not possible, education is an option…
How Can We Facilitate Development of Accurate Mental Models?
(Big List)
Simplicity
Familiarity
Recognition
Flexibility
Feedback
Affordances
Hide implementation details from users
How Do We Study Users’ Mental Models?
Interview, surveys, online studies
* describe how something works
* describe their experience
* describe their decision-making process
* e.g., think-aloud
* draw a picture of how something works (e.g., kids and AI)
* consider this hypothetical scenario
Card-sorting
*for information architecture
Compare data from experts and non-experts
