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