Gabriel Spitz The Structure of the User Interface
Gabriel Spitz The Structure of the User Interface Lecture # 9
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 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
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– Create Reminder 1. 2. 3. 4. 5. 6. Select a Folder Click on “Add” Icon Enter Reminder name Click on ”Info” icon Enter Reminder date Click on the “done” button 1 5 3 2 4 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
- Slides: 24