The Structure of the User InterfaceLecture # 2

Gabriel Spitz

Driving Customer Experience – A Framework

UI Design

Scope

Concept

Activity Flow

Representation

Presentation

Needs Satisfaction/User Experience

Predictability

Convenience

Efficiency

Personal

Trust

Human

Task

Expectations

Usefulness

Structure of the Interface - Aspects

The different design aspects of the interface Include: The functions supported by the interface – Scope

What should be included in the interface

Organization of the interface – Framework What would the interface look like

Flow of user activities within the framework – Activity flow The sequence in which an activity is executed

Gabriel Spitz

Structure of the Interface – Aspects (2) The selection of controls types for a given task–

Representation What tools will users use to perform various tasks

The presentation or visual design characteristics of the interface How will the different elements appear to the us

Each design aspect (e.g., presentation) may have several design attributes (e.g., presentation includes color and typography), each of which has values (e.g., colors include red, blue, green, black) that constitute the designer’s options

Gabriel Spitz

Scope The functions to be included in a give app

For “Reminders” this will include Create items (to be remembered) Associate attributes to items Reorder items Edit items Search for items Sort items Navigate between lists …

Scope

Concept

Activity Flow

Representation

Presentation

Framework of an Interface

It is the overall “idea” of the UI E.g., Desktop Planner

It is the context within which UI elements – actions or components – are interpreted

It can be a high level “Metaphor” such as the desktop

It can also be a highly structured and logically organized referent schema - Idiom

Gabriel Spitz

Scope

Concept

Activity Flow

Representation

Presentation

Conceptual Model

An Interface Metaphor

Gabriel Spitz

Gabriel Spitz

Activity Flow

Is concerned with helping user navigate through the interface and interact effectively and efficiently with it

It includes: The temporal and spatial structure of the

interaction The support that the interface provides to

guide and funnel the interaction

Gabriel Spitz

Scope

Concept

Activity Flow

Representation

Presentation

Activity– Create Reminder

1

23

4

5

6

1. Select a Folder2. Click on “Add” Icon3. Enter Reminder name4. Click on ”Info” icon5. Enter Reminder date6. Click on the “done”

button

Activity Flow

1

23

4

5

6

• The sequence in which tasks within an Activity are organized

Sequential Interaction FlowGabriel Spitz

Starting a new power point presentation

Representation Representation is the choices that a

designer makes in deciding how a a specific function should be implemented: Specifying labels Conceptualizing icons Selecting controls Composing instructions to support a

function or an object at the interface

Gabriel Spitz

Scope

Concept

Activity Flow

Representation

Presentation

RepresentationTo Do List - Table Widget

Add Item – Button

Date Picker – Calendar

Show/Hide Pane – Button

Show/Hide Calendar – Button

Add List - Button

Representation - ExampleGabriel Spitz

Three representations for specifying a date

Presentation

The physical characterizations and spatial organization of controls and information in the UI

It communicates to the user the available functions and information, and help the user locate them rapidly

Gabriel Spitz

Scope

Concept

Activity Flow

Representation

Presentation

PresentationGabriel Spitz

User-Interface & User Experience Scope

Conceptual Model

Activity Flow

Representation

Presentation

Usefulness

Ease of Learning

Efficiency

Effectiveness

Aesthetics