Upload
reginald-robinson
View
220
Download
2
Tags:
Embed Size (px)
Citation preview
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