Gabriel Spitz The Structure of the User Interface
Gabriel Spitz The Structure of the User Interface Lecture # 3
This Presentation Describe the Key design aspects of the user Interface Explain how each impacts user experience
The UI is a Multi-Faceted Entity From a design perspective the UI has several aspects that directly impact the user experience and need to considered A good experience with a product or a service is likely to emerge when the product or service is designed to meet users’ needs, and does it in a user-centric way
Driving User Experience – A Framework User Needs UI Design Scope Task Human Expectations Concept User Experience Useful Usable Activity Flow Engaging Representation Delightful Presentation
Gabriel Spitz The 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. , color and typography), each of which has values (e. g. , red, blue, green, black) that constitute the designer’s options
To Design a UI Means Creating a UI entity in a way that considers each aspect of the UI separately and in an integrated way And it does it within the context of users’ needs and characteristics
Dissecting a UI into its Aspects
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 will also include“Metaphors” such as a Calendar or a Phone (to call and remind me) It can also include “Idioms” such cut-n-paste Scope Concept Activity Flow Representation Presentation
Conceptual Model Sliding Door Scrap book Calendar Notebook
Gabriel Spitz Conceptual Model A phone metaphor as part of the Conceptual Model Gabriel Spitz
Gabriel Spitz Activity Flow Is concerned with how user navigate through the interface and interact effectively and efficiently with it It includes: The temporal and spatial structure of the interaction – How controls are organized on the interface And the support that the interface provides to guide and funnel the interaction Scope Concept Activity Flow Representation Presentation
Activity Flow – Create Reminder 1. Select a Reminder Categorywhere to add the reminder 2. Indicate desire to add new reminder to list 1 3. Enter Reminder name 4. Enter Reminder content 5. Indicate desire to add reminder settings 6. Enter Reminder Settings 7. Indicate “done” 6 3 2 5 This is the content of the reminder 4 7
Activity Flow 2 3 6 5 1 7 • The sequence in which tasks within an Activity are organized
Gabriel Spitz Alternative Interaction Flow Note how far in the flow one gets to enter note 1. Select a Reminder Categorywhere to add the reminder 2. Indicate desire to add new reminder to list 3. Enter Reminder name 4. Enter Reminder content 5. Indicate desire to add reminder settings 6. Enter Reminder Settings 7. Indicate “done” Alternate Flow 1. App opens in ADD mode 2. Type a note 3. Modify Note name if desired (name was Auto provided by system) 4. Enter Reminder Settings 5. Select Reminder category 6. Indicate “done”
Gabriel Spitz Representation is the choices that we make in deciding how a specific function should be represented in the UI: Specifying labels – What do we call it Conceptualizing icons – How we depict it Selecting controls – what control should we use Assisting users – helping user figure out how to use a function or an object at the interface Scope Concept Activity Flow Representation Presentation
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 layout of controls and information in the UI Note: sequencing of tasks and steps is considered in the Activity Flow aspect of the UI Presentation often sets the “mood” of the UI, communicates to the user the available functions and information, and help the user locate them rapidly Scope Concept Activity Flow Representation Presentation
User-Interface & User Experience Scope Usefulness Usable Conceptual Model Ease of Learning Activity Flow Efficiency Representation Effectiveness Presentation Aesthetics
In Summary The aspects of the UI structure describe different perspectives the UI Each perspective impacts the overall UX and need to be considered both holistically as part of the UI and individually UI aspects do not depict the UI design process although they are related
- Slides: 24