Conceptual Model DesignInforming the user what to do

Lecture # 11

Gabriel Spitz

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 SpaceGabriel Spitz

D. Norman’s Action Model

Gabriel Spitz

Goal

Intention

Detailed Plan

Comparison

Interpretation

Perception

External World

Execution

• Users look at the interface• They identify patterns• Determine how to act

Action Plan

Our action-plan is driven in part 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

Conceptual Model VS. Mental Model

• Conceptual model is a mental representation of how an artifact works & how the interface controls affect it. It is the way the user will understand the interface

• Mental model is the idea a user has about an interface – Mental representation

• 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

A. Cooper’s Conceptual Models

Gabriel Spitz

Manifest Model = Conceptual Model or Framework

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

7

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

Creating a Conceptual Model

Conceptual models are created by our choices for the interface Interaction styles – The Activity/Method we use for

the interaction The metaphor – The object we interact with

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)

Instruction is common conceptual model in user-interface and used by many applications Instructing is performed using keyboard commands,

function keys, menu items, etc.

Instructing refers to telling the system to perform specific tasks such as Print, save, delete, etc.

The main benefit of instruction is that it supports quick and efficient interaction Good for repetitive actions performed on multiple objects

Gabriel Spitz

Instructional Style Interaction

Gabriel Spitz

Conversation (activity) The underlying model of this interaction mode is a

conversation with another human

Users ask and the system responds

Examples include: Help Facilities Search Engines Interactive Voice Recognition –Siri

The benefit of this interaction style is that 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

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

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 is good for ‘doing’ types of tasks, e.g. designing, drawing, flying, driving, sizing windows

Issuing instructions is good for repetitive tasks, e.g. spell-checking, file management

Having a conversation is good for 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

Metaphor

Definition ?

“The transference of the relation between one set of objects to another set for the purpose of brief explanation”

Lakoff & Johnson “...the way we think, what we experience, and what we do

every day is very much a matter of metaphor.” in our language & thinking - “argument is war”

he attacked every weak point ... criticisms right on target ... if you use that strategy

We can use metaphor to highlight certain features & suppress others

Gabriel Spitz

Example Metaphors

Global metaphors personal assistant, wallet, clothing, pens, cards,

telephone, eyeglasses

Data & function rolodex, to-do list, calendar, applications documents, find,

assist

Collections drawers, files, books, newspapers, photo albums

Gabriel Spitz

Designing the Interface of a music player

Actions Start Stop Pause Rapid forward Rapid backward

Gabriel Spitz

What is an Interface Metaphor

• A metaphor is one thing that is conceived as representing another; A is like B

• An interface metaphor is an interface that has been developed to resemble aspects of a physical entity

Gabriel Spitz

The interface to a Yamaha CD Player

Why Interface Metaphor

It combines new concepts with familiar knowledge Creating a list with Shopping Cart

We can describe an application as being like some other familiar object, or an operation being like a familiar operation

Gabriel Spitz

Why Interface Metaphor

Helps users conceptualize abstract, hard to imagine, computer concepts in more concrete and familiar terms

Gabriel Spitz

Store content in a temporary storage location and then insert it in a file

Cut & PasteVS.

An Interface Metaphor Example

Imagine expressing the various communication functions and procedures as a set of instructions

Gabriel Spitz

Gabriel Spitz

Global MetaphorOthers:

PIM

Wallet

Benefits of Interface Metaphor

It capitalizes on knowledge that users already have – less learning

Users are more comfortable dealing with objects and concepts that they are familiar with – greater user satisfaction

Can reduce the visual clutter at the interface

Gabriel Spitz

Interface Metaphor - Example

Gabriel Spitz

Metaphor for Data & Function

Calendar

To-do list

Interface Metaphor - Example

Gabriel Spitz

PIM

Interface Metaphor - Example

Gabriel Spitz

Metaphor for a Collection

AZZ Cardfile

Potential Issues with Metaphors

Some metaphors or the way they are used break cultural and logical rules Trash can should be under

the desk Deleting a document is

not equivalent to ejecting a disc for safe keeping

Gabriel Spitz

Potential Issues with Metaphors

Some changes strain the metaphor and hamper users’ performance and learning

Printer control dialog box What does the rewind

button means

Gabriel Spitz

Gabriel Spitz

Potential Issues with Metaphors

Gabriel Spitz

Another strained metaphor

Potential Issues with Metaphors

Not all metaphors cross cultural boundaries easily

Gabriel Spitz

Gabriel Spitz

Metaphors Need to be Adapted

Some changes extend the metaphor in a “natural” way and thus increase its value as an organizing concept

Gabriel Spitz

Extending Metaphor

Gabriel Spitz

A good metaphor is one that can account for the largest number of functions

Game MetaphorGabriel Spitz

Gallery MetaphorGabriel Spitz

Metaphor Controversy

Interface metaphors can be abused or misused

However Interface metaphors can also be very helpful and useful Adopt interface metaphors in an effective way to combine

familiar knowledge with new functionality

Gabriel Spitz

Design Guides

Provide good conceptual model customers want to understand how UI controls impact

object

Make things visible if object has function, interface should show it

Map interface controls to customer’s model infix -vs- postfix calculator -- whose model?

Provide feedback what you see is what you get!

Gabriel Spitz

Summary –Conceptual Model

A usable interface will have: A purposefully designed conceptual model for the system

image A conceptual model that is logical, well articulated, easy

to learn, and easy to understand A conceptual model that is compatible with users task and

work style A conceptual model that capitalizes on what users know

or are familiar with

Gabriel Spitz