The Structure of the User InterfaceThe Structure of the User Interface

Lecture # 8

1Gabriel Spitz

Poor Door Handle DesignPoor Door Handle Design

2Gabriel Spitz

9 hole punches/ticket

Inefficient Workflow

Gabriel Spitz 3

User Interface DesignUser Interface Design

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

• An ideal interface design requireso A processo A frameworko A methodologyo A set of tools

User Interface Design ProcessUser Interface Design Process

Known Condition that needs

improvement

Known Condition that needs

improvement

Desirable & Predictable Condition

Desirable & Predictable Condition

Problem Process

Results

RequirementsRequirements

ConceptConcept

DesignDesign

EvaluationEvaluation

ResearchResearch

Driving Customer Experience – A Driving Customer Experience – A

FrameworkFramework

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 SpaceWhat is the Interface Design Space

• The interface design space is conceptualized as a two dimensional space composed of:o Structural dimensiono Expressive dimension

• Structural dimension focuses ono How we group and subgroup interaction functions into meaningful (to

the user) functional spaces• Activities, tasks, actions

• The expressive dimension focuses ono How we present each interaction function and organize them in

functional space. • Note that the space itself is an object

7Gabriel Spitz

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

Inte

rface

Asp

ect

s

Gabriel Spitz 9

Structure of the Interface - Structure of the Interface -

ElementsElements• 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 includeso Application components (such as Contacts & Calendar in MS

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

Gabriel Spitz 10

Interface ElementsInterface Elements

• These structural elements of the interface support work at various levelso Activity o Tasko Action

Gabriel Spitz 11

Gabriel Spitz

Application Components

A component often supports

an avctivityGabriel Spitz 12

Dialog Box

Window

Information Spaces (1)

Information spaces often support one or

more tasksGabriel Spitz 13

Dialog Box

Task Pane

Information Spaces (2)

Gabriel Spitz 14

Controls

Controls support a single action

Gabriel Spitz 15

Structure of the Interface - Structure of the Interface -

AspectsAspects

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

• Design aspects are:• The functions supported by the interface – Scope

o What should be included in the interface

• Organization of the interface – Frameworko What would the interface look like

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

Gabriel Spitz 16

Structure of the Interface – Aspects Structure of the Interface – Aspects

(2)(2)

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

• The presentation or visual design characteristics of the interfaceo 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 17

Framework of an InterfaceFramework of an Interface• It is the overall “idea” of the UI

o E.g., Desktopo 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 18

An Interface An Interface

MetaphorMetaphor

Gabriel SpitzGabriel Spitz 19

Activity FlowActivity Flow

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

• It includes:o The temporal and spatial structure of the interaction o The support that the interface provides to guide and funnel the

interaction

Gabriel Spitz 20

Sequential Interaction FlowSequential Interaction Flow

Starting a new power point presentation

Gabriel Spitz 21

RepresentationRepresentation • Representation is the choices that a designer

makes in deciding how a a specific function should be implemented:o Specifying labelso Conceptualizing iconso Selecting controlso Composing instructions to support a function or an object at the

interface

Gabriel Spitz 22

Representation - ExampleRepresentation - ExampleThree representations for specifying

a date

Gabriel Spitz 23

PresentationPresentation

• 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 24

PresentationPresentation

Gabriel SpitzGabriel Spitz 25

Main PointsMain Points• The 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 26