The Structure of the User Interface Lecture # 8 1 Gabriel Spitz

Poor Door Handle Design 2 Gabriel Spitz

9 hole punches/ticket Inefficient Workflow Gabriel Spitz 3

User Interface Design The act of creating a rationalized interface solution to a given problem in a systematic way An ideal interface design requires o A process o A framework o A methodology o A set of tools

User Interface Design Process Known Condition that needs improvement Desirable & Predictable Condition ProblemProcessResults Requirements Concept Design Evaluation Research

Driving Customer Experience – A Framework UI Design Scope Concept Activity Flow Representation Presentation NeedsSatisfaction/ 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: o Structural dimension o Expressive dimension Structural dimension focuses on o How we group and subgroup interaction functions into meaningful (to the user) functional spaces Activities, tasks, actions The expressive dimension focuses on o How we present each interaction function and organize them in functional space. Note that the space itself is an object 7 Gabriel Spitz

8

Interface elements Interface aspects Application ComponentInfo SpaceControl Function/Scope  Available functions  Missing & superfluous functions  CompletenessTBD Framework  Organizing principle (Posture)  Segmentation into components  Segmentation into info spaces  Grouping of items  Proximity  Sequencing items TBD Activity flow/Behavior  Navigation schema  Task sequence  Error recovery  Action reversal  System state info  Action constraints (error avoidance)  Guidance  Spatial workflow  Modes/temporal workflow  Closure  Feedback  Defaults  Shortcuts Representation  Metaphors / expressions  Idioms  Strategy (e.g.)  Form  Wizard  Message content (error, warning, information)  Maintaining context  Choice of control  Labels/terminology  Icon content  Object manipulation method  Affordance Presentation  Color Pallet  Typography  Preferences  Layout  Alignment  Repetition  Contrast  Color  Font style  Graphical clarity (of icons)  Resolution (details)  Manipulation dynamics Interface Design Space Interface Elements Interface Aspects Gabriel Spitz 9

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 o 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 Elements These structural elements of the interface support work at various levels o Activity o Task o Action Gabriel Spitz 11

Gabriel Spitz Application Components A component often supports an avctivity Gabriel Spitz 12

Dialog Box Window Information Spaces (1) Information spaces often support one or more tasks Gabriel 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 - Aspects 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 – Framework o What would the interface look like Flow of user activities within the framework – Activity flow o The sequence in which an activity is executed Gabriel Spitz 16

Structure of the Interface – Aspects (2) The selection of controls types for a given task– Representation o What tools will users use to perform various tasks The presentation or visual design characteristics of the interface o 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 Interface It is the overall “ idea ” of the UI o E.g., Desktop o 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 Metaphor Gabriel Spitz 19

Activity 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 Flow Starting a new power point presentation Gabriel Spitz 21

Representation Representation is the choices that a designer makes in deciding how a a specific function should be implemented: o Specifying labels o Conceptualizing icons o Selecting controls o Composing instructions to support a function or an object at the interface Gabriel Spitz 22

Representation - Example Three representations for specifying a date Gabriel Spitz 23

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 24

Presentation Gabriel Spitz 25

Main 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