1. The Structure of the User Interface Lecture # 2 Gabriel Spitz

2. 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

3. 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

4. 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

6. 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

7. 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

8. Conceptual Model

9. An Interface Metaphor Gabriel Spitz

10. 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

11. 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

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

13. Sequential Interaction Flow Gabriel Spitz Starting a new power point presentation

14. 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

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

16. Representation - Example Gabriel Spitz Three representations for specifying a date

17. 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

19. Gabriel Spitz

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