The Structure of the User Interface

Lecture # 9

Gabriel Spitz 1

User Interface Design

The act of creating a rationalized interface solution to a given problem in a systematic way

An ideal interface design requiresA processA frameworkA methodologyA set of tools

User Interface Design Process

Known Condition that needs

improvement

Desirable & Predictable Condition

Desirable & Predictable Condition

Problem Process

Results

Requirements

Concept

Design

Evaluation

Research

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

What is the Interface Design Space

The interface design space is conceptualized as a two dimensional space composed of:Structural dimensionExpressive dimension

Structural dimension focuses onHow we group and subgroup interaction functions

into meaningful (to the user) functional spacesActivities, tasks, actions

The expressive dimension focuses onHow we present each interaction function and

organize them in functional space. Note that the space itself is an object

Gabriel Spitz 5

Gabriel Spitz 6

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 SpaceInterface Elements

Inte

rface

Asp

ect

s

Gabriel Spitz 7

Structure of the Interface - Elements

The structural dimension of the interface design includes different types of interface elements

Interface elements are levels of decomposition of the functions of an application

It includes Application components (such as Contacts & Calendar in MS

Outlook), Information spaces (such as dialog boxes or task panes) Interface controls (such as radio buttons or date picker)

Gabriel Spitz 8

Interface Elements

These structural elements of the interface support work at various levelsActivity TaskAction

Gabriel Spitz 9

Gabriel Spitz

Application Components

A component often supports

an avctivityGabriel Spitz 10

Dialog Box

Window

Information Spaces (1)

Information spaces often support one or

more tasksGabriel Spitz 11

Dialog Box

Task Pane

Information Spaces (2)

Gabriel Spitz 12

Controls

Controls support a single action

Gabriel Spitz 13

Structure of the Interface - Aspects

The expressive dimension of the interface design includes different design aspects of the interface

Design aspects are:

The functions supported by the interface – ScopeWhat should be included in the interface

Organization of the interface – FrameworkWhat would the interface look like

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

Gabriel Spitz 14

Structure of the Interface – Aspects (2)

The selection of controls types for a given task– RepresentationWhat tools will users use to perform various tasks

The presentation or visual design characteristics of the interfaceHow 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 15

Framework of an InterfaceIt is the overall “idea” of the UI

E.g., DesktopPlanner

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 16

An Interface Metaphor

Gabriel Spitz 17Gabriel 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 18

Sequential Interaction Flow

Gabriel Spitz 19

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 labelsConceptualizing icons Selecting controlsComposing instructions to support a function or an

object at the interface

Gabriel Spitz 20

Representation - Example

Gabriel Spitz 21

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 22

Presentation

Gabriel Spitz 23Gabriel Spitz

Main PointsThe UI is an organized collection of functions

Each function is presented to the user as an individual entity as well as part of a larger aggregate of functions

The aggregation of the individual functions, their spatial organization and their unique design attributes have direct impact on usability

Gabriel Spitz 24