Gabriel Spitz The Structure of the User Interface

Gabriel Spitz The Structure of the User Interface Lecture # 4

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

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

Scope The functions to be included in a give app For “Reminders” this will include Scope Create items (to be remembered) Associate attributes to items Concept Reorder items Edit items Activity Flow Search for items Sort items Representation Navigate between lists … Presentation

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

Conceptual Model Form By: Indu Sanka Sanskriti Jain

Conceptual Model Sliding Door Calendar Notebook

Gabriel Spitz An Interface Metaphor Gabriel Spitz

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

Activity Flow Nice Linear Navigation Flow, but is it logical? Would people start by specifying the envelop? If I can Save an address I should be able to import it Print Preview should be near the print By: Ankur Upadhyay Alpesh Kumar Bhagwatilal Kothari

Activity Flow – Create Reminder 1. 2. 3. 4. 5. 6. 5 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

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

Gabriel Spitz Sequential Interaction Flow Starting a new power point presentation

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

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

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

Gabriel Spitz Representation - Example Three representations for specifying a date

Gabriel Spitz Presentation The physical characterizations and spatial organization of controls and information in the UI Scope Concept It communicates to the user the available functions and information, and help the user locate them rapidly Activity Flow Representation Presentation

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

Gabriel Spitz Presentation

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