The Structure of the User Interface Lecture # 2 Gabriel Spitz

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

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

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.Select a Folder 2.Click on “Add” Icon 3.Enter Reminder name 4.Click on ”Info” icon 5.Enter Reminder date 6.Click on the “done” button

Activity Flow The sequence in which tasks within an Activity are organized

Sequential Interaction Flow Gabriel 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

Representation To Do List - Table Widget Add Item – Button Date Picker – Calendar Show/Hide Pane – Button Show/Hide Calendar – Button Add List - Button

Representation - Example Gabriel 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

Gabriel Spitz

User-Interface & User Experience  Scope  Conceptual Model  Activity Flow  Representation  Presentation  Usefulness  Ease of Learning  Efficiency  Effectiveness  Aesthetics