The Structure of the User Interface Lecture # 9 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 (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

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

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

Conceptual Model – Print Envelop By: Indu Sanka Sanskriti Jain Form

Conceptual Model Calendar Notebook Sliding Door

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

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

Activity Flow Joe Shmoe 207 Street name Beautiful City Great State 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

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

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

Hierarchical 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 By Rajesh Basrur Naresh Dontula Naresh Dontula Everything is represented as a text field

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

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

Presentation Gabriel Spitz

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