1. The Structure of the User Interface Lecture # 9 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 (1)  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. Concept of an Interface  It is the overall “ idea ” of the UI  E.g., Desktop  Planner  It is the context within which UI elements – actions and 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 – Print Envelop By: Indu Sanka Sanskriti Jain Form

9. Conceptual Model Calendar Notebook Sliding Door

10. An Interface Metaphor Gabriel Spitz

11. 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  Sequencing of tasks  Positioning tasks on screen  The support that the interface provides to guide and funnel the interaction Gabriel Spitz Scope Concept Activity Flow Representation Presentation

12. Activity Flow – Print Envelop By: Ankur Upadhyay Alpesh Kumar Bhagwatilal Kothari Nice Linear Navigation Flow, but is it logical? Would people start by specifying the envelop? -Maybe – if the user starts the activity by selecting the envelop If I can Save an address I should be able to import it Print Preview should be near the print

13. Activity Flow Joe Shmoe 207 Street name Beautiful City Great State 07923 Activity flow is driven by Task Analysis and Conceptual Model Conversation Style -Ask for Recipient information -Ask for Sender information -Ask for Envelop information -Print Direct manipulation Style -Select Envelop -Place Recipient info on envelop -Place logo -……………… -Print

14. Activity Flow – 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

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

16. Hierarchical Interaction Flow Gabriel Spitz Starting a new power point presentation

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

18. Representation By Rajesh Basrur Naresh Dontula Naresh Dontula Everything is represented as a text field

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

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

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

22. By: Ruthvik Gunna, Ronghui Ye, Chen liu Black Background Bold Colors Icons

24. Presentation Gabriel Spitz

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