The Structure of the User Interface
description
Transcript of The Structure of the User Interface
![Page 1: The Structure of the User Interface](https://reader033.fdocuments.us/reader033/viewer/2022061604/5681623f550346895dd277a6/html5/thumbnails/1.jpg)
The Structure of the User InterfaceLecture # 2
Gabriel Spitz
![Page 2: The Structure of the User Interface](https://reader033.fdocuments.us/reader033/viewer/2022061604/5681623f550346895dd277a6/html5/thumbnails/2.jpg)
Driving Customer Experience – A Framework
UI Design
Scope
Concept
Activity Flow
Representation
Presentation
Needs Satisfaction/User Experience
Predictability
Convenience
Efficiency
Personal
Trust
Human
Task
Expectations
Usefulness
![Page 3: The Structure of the User Interface](https://reader033.fdocuments.us/reader033/viewer/2022061604/5681623f550346895dd277a6/html5/thumbnails/3.jpg)
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
![Page 4: The Structure of the User Interface](https://reader033.fdocuments.us/reader033/viewer/2022061604/5681623f550346895dd277a6/html5/thumbnails/4.jpg)
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
![Page 5: The Structure of the User Interface](https://reader033.fdocuments.us/reader033/viewer/2022061604/5681623f550346895dd277a6/html5/thumbnails/5.jpg)
![Page 6: The Structure of the User Interface](https://reader033.fdocuments.us/reader033/viewer/2022061604/5681623f550346895dd277a6/html5/thumbnails/6.jpg)
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
![Page 7: The Structure of the User Interface](https://reader033.fdocuments.us/reader033/viewer/2022061604/5681623f550346895dd277a6/html5/thumbnails/7.jpg)
Framework 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
Gabriel Spitz
Scope
Concept
Activity Flow
Representation
Presentation
![Page 8: The Structure of the User Interface](https://reader033.fdocuments.us/reader033/viewer/2022061604/5681623f550346895dd277a6/html5/thumbnails/8.jpg)
Conceptual Model
![Page 9: The Structure of the User Interface](https://reader033.fdocuments.us/reader033/viewer/2022061604/5681623f550346895dd277a6/html5/thumbnails/9.jpg)
An Interface Metaphor
Gabriel Spitz
Gabriel Spitz
![Page 10: The Structure of the User Interface](https://reader033.fdocuments.us/reader033/viewer/2022061604/5681623f550346895dd277a6/html5/thumbnails/10.jpg)
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
Gabriel Spitz
Scope
Concept
Activity Flow
Representation
Presentation
![Page 11: The Structure of the User Interface](https://reader033.fdocuments.us/reader033/viewer/2022061604/5681623f550346895dd277a6/html5/thumbnails/11.jpg)
Activity– Create Reminder
1
23
4
5
6
1. Select a Folder2. Click on “Add” Icon3. Enter Reminder name4. Click on ”Info” icon5. Enter Reminder date6. Click on the “done”
button
![Page 12: The Structure of the User Interface](https://reader033.fdocuments.us/reader033/viewer/2022061604/5681623f550346895dd277a6/html5/thumbnails/12.jpg)
Activity Flow
1
23
4
5
6
• The sequence in which tasks within an Activity are organized
![Page 13: The Structure of the User Interface](https://reader033.fdocuments.us/reader033/viewer/2022061604/5681623f550346895dd277a6/html5/thumbnails/13.jpg)
Sequential Interaction FlowGabriel Spitz
Starting a new power point presentation
![Page 14: The Structure of the User Interface](https://reader033.fdocuments.us/reader033/viewer/2022061604/5681623f550346895dd277a6/html5/thumbnails/14.jpg)
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
![Page 15: The Structure of the User Interface](https://reader033.fdocuments.us/reader033/viewer/2022061604/5681623f550346895dd277a6/html5/thumbnails/15.jpg)
RepresentationTo Do List - Table Widget
Add Item – Button
Date Picker – Calendar
Show/Hide Pane – Button
Show/Hide Calendar – Button
Add List - Button
![Page 16: The Structure of the User Interface](https://reader033.fdocuments.us/reader033/viewer/2022061604/5681623f550346895dd277a6/html5/thumbnails/16.jpg)
Representation - ExampleGabriel Spitz
Three representations for specifying a date
![Page 17: The Structure of the User Interface](https://reader033.fdocuments.us/reader033/viewer/2022061604/5681623f550346895dd277a6/html5/thumbnails/17.jpg)
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
![Page 18: The Structure of the User Interface](https://reader033.fdocuments.us/reader033/viewer/2022061604/5681623f550346895dd277a6/html5/thumbnails/18.jpg)
![Page 19: The Structure of the User Interface](https://reader033.fdocuments.us/reader033/viewer/2022061604/5681623f550346895dd277a6/html5/thumbnails/19.jpg)
PresentationGabriel Spitz
![Page 20: The Structure of the User Interface](https://reader033.fdocuments.us/reader033/viewer/2022061604/5681623f550346895dd277a6/html5/thumbnails/20.jpg)
User-Interface & User Experience Scope
Conceptual Model
Activity Flow
Representation
Presentation
Usefulness
Ease of Learning
Efficiency
Effectiveness
Aesthetics