View
214
Download
0
Category
Tags:
Preview:
Citation preview
Conceptual Model DesignInforming the user what to do
Lecture 10
Gabriel Spitz
1
Interface elementsInterface 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 spacesGrouping of itemsProximitySequencing items
TBD
Activity flow/Behavior Navigation schemaTask sequenceError recoveryAction reversalSystem state info
Action constraints (error avoidance) GuidanceSpatial workflowModes/temporal workflow Closure
FeedbackDefaultsShortcuts
Representation Metaphors / expressionsIdioms
Strategy (e.g.) FormWizardMessage content (error, warning, information)Maintaining context
Choice of controlLabels/terminologyIcon contentObject manipulation methodAffordance
Presentation Color Pallet TypographyPreferences
LayoutAlignmentRepetitionContrast
ColorFont styleGraphical clarity (of icons) Resolution (details) Manipulation dynamics
Interface Design Space
Gabriel Spitz
UI Design Structure
The Structure is concerned with the over all UI
Good structure is one where the UI design is organized
- Purposely (Goal) – Meaningfully (User) - Usefully (Task)
It is based on clear and consistent models that is apparent and recognizable by the users
It informs the designer and helps us
Put related things together and separate unrelated
Make dissimilar things different and similar things similar
Gabriel Spitz
3
Organizing Items
Gabriel Spitz
4
Organization by Product type Organization by Usage
Conceptualization
Is the process of coming up with a high level solutions to a problem how should the functions of a product be organize and represent in the UI
It helps orient a designer to ask specifics questions about how a the product will be understood
It encourages the designer to explore different ideas and only than establish a set of commonly agreed terms
Gabriel Spitz
5
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”
Gabriel Spitz
6
Engine ControlsRadio ControlsCircular ControlsTriangle Controls
Aesthetic Design Functional Design
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
Gabriel Spitz
7
Why Conceptual Model?
Gabriel Spitz
8
Helping the User Figure It Out
• Our actions are driven by what we see and how close is what we see to what we expect/know
• What we see is the Conceptual Model of the interface
• What we expect is our Mental Model of the interface
• We as UI designers are responsible for selecting and implementing the conceptual model of our design
Gabriel Spitz
Mental Model
Is what we expect a product to look like and 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
Gabriel Spitz
10
Gabriel Spitz
11
What would you expect when clicking on the Log
In link
Draw it on a small piece of paper
Gabriel Spitz
12
How many drew something similar to the
above?
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
Me
Mental Model of a BicycleConceptual Model of a Design
Mental Model
Gabriel Spitz
14
When user clicks this Icon
They expect this
Not This
A. Cooper’s Conceptual Models
Gabriel Spitz
Manifest Model = Conceptual Model or Framework
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 Easier to learn
Gabriel Spitz
16
Mismatch Between Models
Mismatch between the users’ expectation – their mental model; and the conceptual model used by the UI designer will lead to: Error Poor performance Frustration
Gabriel Spitz
17
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
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
Gabriel Spitz
19
Gabriel Spitz
20
• Object – Canvas• Interaction style –
Direct Manipulation• Labels – Drawing
related e.g., Mix
• Object – Spreadsheet
• Interaction style – Instructing
• Labels – Spreadsheet related e.g., Sum
Conceptual Models Examples
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
Tabular Concept
List Concept
Content Group
Form Concept
Creating a Conceptual model
Gabriel Spitz
27
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
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
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
Gabriel Spitz
Instructional Style Interaction
Gabriel Spitz
Command Line Interface
Graphical User Interface
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
Gabriel Spitz
Conversational Style Interaction
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
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
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
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
Gabriel Spitz
Direct Manipulation Interface
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
Gabriel Spitz
Object Based Conceptual Models
Usually based on an analogy with something in the physical world
Examples
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
Gabriel Spitz
Recommended