Paul Hibbitts
Educator, interaction design practitioner and software developer.
Conceptual Models
CMPT 363
“Genius is the ability to reduce the complicated to the simple.”
– C.W. Ceram
Where Are We?
Let’s begin exploring
conceptual models…
with a case study
Apple iOS 6
Apple iOS 7
(and iOS 8... and now iOS9!)
Now, let’s get into the details of…
Conceptual Models
Mental Model
A mental model is the mental representation of how a system (object) operates
Mental Model
A mental model is also sometimes called the
user’s conceptual model
user’s conceptual model
Mental Model
We form mental models to help us understand
- How to use an object
- What can be done with it
- How to recover from errors
Mental Model
Novice users of an object often have very primitive, incomplete, and sometimes even incorrect mental models of that system
Mental Model
As they become more experienced, their mental models hopefully evolve to become more accurate and complete
Mental Model
An example of a real world conceptual model for a fridge freezer (Norman, 1988)
Mental Model
- Two compartments: the freezer (frozen food, top) and fridge (fresh food, bottom)
- Two controls in bottom compartment
- Task is to make the freezer warmer and keep the fresh food the same temperature
Fridge Freezer Instructions
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: The Design of Everyday Things by Donald Norman
Presented Conceptual Model
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: The Design of Everyday Things by Donald Norman
Correct Conceptual Model
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: The Design of Everyday Things by Donald Norman
Revealing Mental Models
- Card sorts
- Interviews
- Contextual inquiries
- Visualizations
- Participatory design
- Usability tests (esp. "think aloud")
Mental Model
People will also form mental models when interacting with navigational structures of software applications or web sites
Activity:
Mental Model Case Study
Metaphors
An interface metaphor uses a concept familiar to the user to help explain and communicate an unfamiliar concept
Problems with Metaphors
- Breaks existing rules/conventions
- Too constraining for designers
- Conflicts with design principles
- Actions beyond metaphor causes confusion
- Translation of bad existing designs
Idioms
- Idioms are figures of speech that are understood not to be
taken literally - While an idiom must be learnt, it is learnt quickly, and once learned is essentially never forgotten
- For example, “He’s no rocket scientist” really means he’s not especially bright
Design Model
The design model (sometimes referred to as the conceptual model) provides an overall framework of how users interact with a product
Levels of Design
- Idea, intent, goals
- Usability and user experience objectives
- Function and content (system services)
- Function and content structure (design model)
- Interaction structure (navigation model)
- Interaction techniques
- Presentation techniques (layout and graphical design)
- Physical form (artifact design)
Design Model
A common example of a problematic design model for many casual computer users is the use of Boolean logic (e.g. AND/OR) in some search dialogs
Design Model
A more appropriate model for non-programmers would utilize choices such as “All the Words” and “Any of the Words”
General Guidelines for
Defining Design Models
- Based on the user’s point of view
- Centered around the user’s goals and tasks
- Easy to understand and remember
- Predictable in behaviour (consistent)
Key Design Model Questions
- What will the visual representation be?
- What objects/concepts are needed?
- How various objects/concepts relate to each other?
- How will needed tasks be supported?
Activity:
Design Model Case Study
Design Model
The design model should anticipate the user’s expectations rather than reflect the designer’s knowledge and models
Android Back (vs. Up) Behavior
“The Up button is used to navigate within an app based on the hierarchical relationships between screens. For instance, if screen A displays a list of items, and selecting an item leads to screen B (which presents that item in more detail), then screen B should offer an Up button that returns to screen A. If a screen is the topmost one in an app (that is, the app's home), it should not present an Up button.
The system Back button is used to navigate, in reverse chronological order, through the history of screens the user has recently worked with. It is generally based on the temporal relationships between screens, rather than the app's hierarchy.”
– Android Developer Docs
System Image
The system image is the physical appearance of a system, and its operation, responses to user’s commands, and related documentation
Conceptual Model
Conceptual Models
As designers, we expect the user’s mental model to be the same as our design model
Conceptual Models
This will only happen if the system image accurately (and successfully) communicates the correct conceptual model!
- What we’ve covered so far
- Mental model
- Design model
- System image
- Coming up
-
Principles to communicate
conceptual models
Time for Questions & Discussion
Conceptual Models
-
Design principles that effectively communicate the conceptual model, as originally identified by Donald Norman:
- Visibility
- Affordances
- Mapping
- Feedback
- Constraints
Visibility
Elements of the interface, representing the various functions of a device, should be visible
Visibility
Examples of poor visibility can be found in many office phone systems and digital wrist watches
Visibility
Making everything visible at once is not really feasible, as the issue of relative visibility also needs to be considered
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: Amazon Design Team
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: Amazon Design Team
Visibility
For today's multi-touch devices, the issue of discoverability is a related key factor to also consider
Affordances
Affordances are the actual and perceived properties of an object that provide cues about how that object can be used and the results produced by that object
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://www.joelonsoftware.com
Perceived Affordances
For graphical user interfaces, perceived affordances come into play – a combination of what you see and what you know (conventions)
Pictured: iOS 7
Pictured: Windows Phone 8
- What we’ve covered so far
- Principles to communicate conceptual models
- Visibility
- Affordances (visual cues)
- Coming up
- More principles to communicate conceptual models
Time for More Questions
and Discussion
Mapping
Mapping concerns itself with the relationship between controls and the objects that they affect
Mapping
Ideally, one control affects one object
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Pictured: Logitech Harmony Smart Control
“On our 900's the replay function jumped back just enough to compensate for our reaction time when the commercial is over and we want to go back to watching the recording. It worked great! Now, on the Smart Control those functions are on dual function keys. When holding the rewind button long enough to trigger the replay function the fast forward keeps going, effectively increasing the effective reaction time so that I need at least 3 replays to get back to the portion of the program I missed. This design "feature" was a really dumb idea for keys that depend on reaction time. A remote big enough for the extra 2 keys would have been much better. ”
– Logitech Harmony Smart Control Reviewer
Natural Mapping
Natural Mapping is the spatial relationship between controls and the objects that they affect
Natural Mapping
This may involve both control layout and movement
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: The Design of Everyday Things by Donald Norman
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: The Design of Everyday Things by Donald Norman
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://www.appolicious.com
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://cyrilmottier.com
Multi-touch Gestures
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://developer.android.com/
Feedback
Information reported to the user indicating that an action has been performed and what its result has been
Feedback
Common techniques with regard to software interfaces include cursor changes, progress meters, message boxes, and previews
Constraints
Constraints limit the number of ways that something can be used
Constraints
- Physical
- Cultural
- Logical
Constraints
Physical – people can only do what is physically possible
Example?
Constraints
Cultural – based on wide-spread cultural standards
Example?
Constraints
Logical – the use of people’s sense of reasoning to
determine alternatives
determine alternatives
Example?
Activity:
Conceptual Model Analysis
Bonus Feature!
These design principles not only help communicate
a conceptual model but thay can also be used as a method to quickly evaluate interfaces
a conceptual model but thay can also be used as a method to quickly evaluate interfaces
Good Design
- Provides a good conceptual model
- Makes things visible
- Provides (perceived) affordances
- Gets the mappings right
- Supports interaction through feedback
- Exploits the power of constraints
Summary
- Mental model
- Design model
- System image
-
Principles to communicate conceptual models
- Visibility
- Affordances (visual cues)
- Feedback
- Mapping
- Constraints
References and Suggested Books
- The Design of Everyday Things by Donald Norman
- The Usability Engineering Lifecycle by Deborah Mayhew
CMPT-363-153 Conceptual Models
By Paul Hibbitts
