1. Conceptual Model Design Informing the user what to do
Gabriel Spitz
Conceptual Model Design Informing the user what to do

2. Today Talk about Conceptual and Mental Models
Gabriel Spitz
Today
Talk about Conceptual and Mental Models
Provide examples of object based conceptual models
Describe different type of Interaction Styles which are a part of the conceptual model

3. Start With Class Exercise
Design a Web Application that lets you schedule appointments with clients

4. Review Some Actual Design
Gabriel Spitz
Review Some Actual Design

8. Concepts Used in Exercise
Maintaining Calendars
Maintaining Appointments
Receiving Reminders

9. Lessons learned from Exercise
We/Users often have a Mental Model for objects/tasks that we are about to encounter
When you design your application you keep in mind the mental model users will have in their mind
Use concepts that are associated with the:
Object that they are about to use
Task that they are about to perform

10. Why Worry About Conceptual Model
Gabriel Spitz
Why Worry About Conceptual Model
A key goal of UI design is to reduce learning and lower barrier to adoption
We achieve this goal via familiarity
By relying what our users know and what they can anticipate

11. Interface Design Space
Gabriel Spitz
Interface Design Space
Interface elements
Interface aspects
Application Component
Info Space
Control
Function/Scope
Available functions
Missing & superfluous functions
Completeness
TBD
Framework
Organizing principle (Posture)
Segmentation into components
Segmentation into info spaces
Grouping of items
Proximity
Sequencing items
Activity flow/Behavior
Navigation schema
Task sequence
Error recovery
Action reversal
System state info
Action constraints (error avoidance)
Guidance
Spatial workflow
Modes/temporal workflow
Closure
Feedback
Defaults
Shortcuts
Representation
Metaphors / expressions
Idioms
Strategy (e.g.)
Form
Wizard
Message content (error, warning, information)
Maintaining context
Choice of control
Labels/terminology
Icon content
Object manipulation method
Affordance
Presentation
Color Pallet
Typography
Preferences
Layout
Alignment
Repetition
Contrast
Color
Font style
Graphical clarity (of icons)
Resolution (details)
Manipulation dynamics

12. UI Design Conceptual Model
Gabriel Spitz
UI Design Conceptual Model
The Conceptual Model is concerned with the over all concept of the UI
It is based on clear and consistent “models” that we assume will be apparent and recognizable by the users
Good conceptual model is one where the UI design is organized
- Purposely (Goal) – Meaningfully (User) Usefully (Task)
It informs and helps us as designers to:
Organize items and present them on the screen in a way that is meaningful and coherent to the use

13. Organization by Product type
Gabriel Spitz
Organizing Items
Organization by Usage
Organization by Product type

14. Gabriel Spitz
Conceptual Model
"A high level description of how a system is organized and operated" Johnson and Henderson 2002
It enables "designers to straighten out their thinking before they start laying out widgets”
Circular Controls
Triangle Controls
Engine Controls
Radio Controls
Aesthetic Design
Functional Design

15. Conceptual Model Includes
Gabriel Spitz
Conceptual Model Includes
Conceptual Model includes
Metaphors and Analogies
Concepts that people are exposed to through the product
Task domain objects, their attributes and operations
Relationship and mapping between these concepts

16. Gabriel Spitz
Why Conceptual Model?

17. Helping the User Figure It Out
Gabriel Spitz
Helping the User Figure It Out
As users our actions are driven by what we see and how close is what we see to what we expect/know
As a user we see the Conceptual Model of the interface
What we expect is our Mental Model of the interface
As UI designers we are responsible for selecting and implementing the conceptual model of our design

18. Gabriel Spitz
Mental Model
Is what we (as individuals) expect a product to look like and the way we expect it to behave
It is based on our actual experience with and knowledge about similar items or parts of an item
This knowledge is rarely complete or accurate. If we do not have any experience with a similar product, we will have to spend more time learning

19. What would you expect when clicking on the Log In link
Gabriel Spitz
What would you expect when clicking on the Log In link

20. How many expected something different to the above?
Gabriel Spitz
How many expected something different to the above?

21. Conceptual Model VS. Mental Model
Mental model is the idea a user has about an artifact e.g., Spreadsheet
Conceptual model is the way a designer represents an artifact, how it works & how the interface controls affect it. This is what a user will see
The closer a conceptual model is to the mental model the easier it is for a user to figure out how to operate a system
Mental Model of a Bicycle
Conceptual Model of a Design Me

22. When user clicks this Icon
Gabriel Spitz
Mental Model
When user clicks this Icon
They expect this
Not This

23. A. Cooper’s Conceptual Models
Gabriel Spitz
A. Cooper’s Conceptual Models
Manifest Model = Conceptual Model or Framework

24. Example from Akamai Match Target Protected Asset Match Target
Gabriel Spitz
Example from Akamai
Match Target
Protected Asset
Match Target
Reflects the Technology
Rules are activated when a request matches a hostname
Protected Asset
Reflects the way users think
This is what I want to protect

25. Why do we care about mental model?
Gabriel Spitz
Why do we care about mental model?
Everything in usability is about the match between mental model and the conceptual model
The greater the match the Easier it is to learn

26. Mismatch Between Models
Gabriel Spitz
Mismatch Between Models
Mismatch between the users’ expectation – their mental model; and the conceptual model presented by the UI designer will lead to:
Error
Poor performance
Frustration

27. Gabriel Spitz
A Conceptual Model
Is the way the system will appear to users and therefore the way the user will understand it
It is the overall “big idea” of the UI
For example this interface is like a desktop, a wending machine, an ATM machine
It is also the context within which UI elements – actions & components – are anticipated and interpreted

28. Gabriel Spitz
Mental Model
System Model
Conceptual Model

29. Helps us interpret the above signs
Gabriel Spitz
Context
Helps us interpret the above signs

30. Conceptual Model Content
Gabriel Spitz
Conceptual Model Content
To capitalize on users’ mental model (what users already know), the conceptual model needs to match on all the dimensions of the mental model
Objecte
Interaction Style
Labels

31. Interaction style – Instructing Labels – Spreadsheet related e.g., Sum
Gabriel Spitz
Object – Spreadsheet
Interaction style – Instructing
Labels – Spreadsheet related e.g., Sum
Object – Canvas
Interaction style – Direct Manipulation
Labels – Drawing related e.g., Mix

32. Conceptual Models Examples

33. This is a learned interaction, but very common and quick to learn
Two Panel Concept
Two panels Above and below. One shows the set of items user can select from, the other shows the content of the selected item
This is a learned interaction, but very common and quick to learn

34. Tabular Concept

35. List Concept

36. Content Group

37. Form Concept

38. Creating a Conceptual model
Gabriel Spitz
Creating a Conceptual model

39. Creating a Conceptual Model
Gabriel Spitz
Creating a Conceptual Model
Conceptual models are created by our choices for the interface
The Interface metaphor – The object we interact with
Interaction styles – The Activity/Method we use for the interaction
Keep in mind that the interface has to communicate how it should be used
Help information can aid, but should not be necessary

40. Gabriel Spitz
Interaction Styles
Interaction styles refers to the way we interacts with an application. These include:
Instructing
Conversing
Manipulation
Browsing & Navigating
Metaphor or the objects used in the the interaction such as
Blank sheet of paper
Spreadsheet
Canvas

41. Instructing (activity)
Gabriel Spitz
Instructing (activity)
Instructing refers to telling the system to perform specific tasks such as
Print, save, delete, etc.
Used by many applications
It includes keyboard commands, function keys, menu items, etc.
Main benefit is that it supports quick and efficient interaction
Good for repetitive actions performed on multiple objects

42. Instructional Style Interaction
Gabriel Spitz
Instructional Style Interaction
Graphical User Interface
Command Line Interface

43. Conversation (activity)
Gabriel Spitz
Conversation (activity)
The underlying model of conversation – question and answer
Examples include:
Help Facilities - Computer answer/User asks
Search Engines - Computer answer/User asks
Interactive Voice Recognition (Siri) User asks/Computer answer
The benefit - it allows users to interact with the system in a way that is familiar
Makes them feel comfortable, at ease and less scared
The drawback is that misunderstandings can arise when the system does not know how to parse what the user says

44. Conversational Style Interaction
Gabriel Spitz
Conversational Style Interaction

45. Direct Manipulating (activity)
Gabriel Spitz
Direct Manipulating (activity)
Involves dragging, selecting, opening, closing and zooming actions on virtual objects
Exploit’s users’ knowledge of how they move and manipulate objects in the physical world
what you see is what you get (WYSIWYG)
the direct manipulation approach (DM)
Shneiderman (1983) coined the term Direct manipulation

46. Gabriel Spitz
Core Principles of DM
Continuous representation of objects and actions of interest
Physical actions and button pressing instead of issuing commands with complex syntax
Rapid reversible actions with immediate feedback on object of interest

47. Benefits of DM Interfaces
Gabriel Spitz
Benefits of DM Interfaces
Easy to learn basic functionality – we have a good Mental Model
Users can work rapidly to carry out a wide range of tasks
Easy to remember how to carry out tasks over time
Easy to detect errors

48. Gabriel Spitz
Disadvantages of DM
Some people take the metaphor of direct manipulation too literally
Not all tasks can be described by objects and not all actions can be done directly
Some tasks are better achieved through delegating • e.g. spell checking
Can waste extensive screen space
Moving a mouse around the screen can be slower than pressing function keys to do same actions

49. Direct Manipulation Interface
Gabriel Spitz
Direct Manipulation Interface

50. Exploring and Browsing
Gabriel Spitz
Exploring and Browsing
Moving through a virtual space – Scanning, Reading, Skipping
The way people browse information with existing media (e.g. newspapers, magazines, libraries, pamphlets)
Information is structured to allow flexibility in the way a user is able to search for information
e.g. multimedia, web

51. Object Based Conceptual Models
Gabriel Spitz
Object Based Conceptual Models
Usually based on an analogy with something in the physical world
Examples

52. Selecting a Conceptual Model
Gabriel Spitz
Selecting a Conceptual Model
Direct manipulation - Spatial types of tasks, e.g. designing, drawing, flying, driving, sizing windows
Issuing instructions - Repetitive tasks, e.g. spell-checking, file management
Conversation - children, computer- phobic, disabled users and specialized applications (e.g. phone services)
Hybrid conceptual models are often employed, where different ways of carrying out the same actions is supported at the interface - but can take longer to learn