Understanding User Interface Design Basics
Explore the fundamental aspects of user interface design, including design elements, user interactions, and conceptual models. Learn about the framework needed for driving customer experience, different design aspects, and the concept of an interface. Discover how to create a high-level metaphor, structured referent schema, and conceptual model for user interfaces.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
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 Activity Flow Human Efficiency Representation Expectations 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 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
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 Notebook Calendar
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 Scope It includes: The temporal and spatial structure of the interaction The support that the interface provides to guide and funnel the interaction 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. 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
Gabriel Spitz Sequential Interaction Flow Starting a new power point presentation
Gabriel Spitz 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 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
