The Structure of the User Interface

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

2. Driving Customer Experience – A Framework Needs UI Design Satisfaction/ User Experience Scope Usefulness Predictability Concept Task Convenience Activity Flow Human Efficiency Representation Expectations Presentation Personal Trust

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

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

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. Gabriel Spitz 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 Scope Concept Activity Flow Representation Presentation

8. Conceptual Model

9. Gabriel Spitz An Interface Metaphor Gabriel Spitz

10. 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 Scope Concept Activity Flow Representation Presentation

11. 5 Activity– Create Reminder 3 Select a Folder Click on “Add” Icon Enter Reminder name Click on ”Info” icon Enter Reminder date Click on the “done” button 2 4 1 6

12. Activity Flow 2 5 3 4 1 6 • The sequence in which tasks within an Activity are organized

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

14. Gabriel Spitz 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 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. Gabriel Spitz Representation - Example Three representations for specifying a date

17. Gabriel Spitz 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 Scope Concept Activity Flow Representation Presentation

19. Gabriel Spitz Presentation

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