Topic_2
Page 1: Topic Introduction
Planning and Designing the User Interface
Page 2: Objectives
Differences between UX and UI
Metaphors for HCI (Human-Computer Interaction)
Principles of User-Centered Design
Transition from analysis to UI Design Reports
Page 3: What is UX Design?
UX (User Experience) is the convergence of user needs, business vision, and technological feasibility.
Results in low-resolution wireframes as a visual guide linked to user research.
Page 4: What is UI Design?
UI (User Interface) design focuses on how a product looks and feels, not its functionality.
Aimed at making user interactions simple and efficient (user-centered design).
Results in high-resolution wireframes and visual representations of the product.
Page 5: Distinction Between UX and UI
UX and UI are different: UX includes architectural planning (like assessing a home) while UI involves visual aspects (like landscaping).
Page 6: Phases of UX Process
Discovery
Ideation
Validation
UX Design is cyclical; phases may repeat multiple times.
Delivers low-resolution wireframes capturing function and structure.
Page 7: Discovery Phase
Conduct interviews and research to understand user needs and project goals.
Identify end-users and validate the product problem.
Methods: User Research, Empathy Mapping, Analytics, Competitive Analysis.
Outcomes include problem validation, user personas, and project goals.
Page 8: Ideation Phase
Involves exploring solutions that align with company goals and technology.
Organizes discovery insights into wireframes and prototypes.
Methods: Sketching, Journey Mapping, Interaction Design.
Outcome: Solution exploration.
Page 9: Validation Phase
Testing wireframes and prototypes through usability testing.
Ensures the product is intuitive and meets user expectations.
Methods: Usability Testing, Feedback Integration.
Outcome: Solution scalability and low-resolution wireframes.
Page 10: What is the UI Process?
UI Design focuses on the visual and emotional aspects of a product.
Establishes layout, colors, typography, and interactivity.
Balances functionality and usability for adaptability to changes.
Page 11: UI Design Outcome
Produces high-resolution wireframes and a style guide for visual consistency.
Page 12: Design Phase
Validates ideas proposed in ideation through internal testing.
Methods: Design Sprints, Style Guides.
Page 13: Testing Phase
Validation through user testing of design ideas.
Encourages iterations back to design phase based on feedback.
Page 14: Integration of UI and UX
UX and UI processes are flexible; their integration varies by project.
Typically, UX design precedes UI design, but either can improve existing products independently.
Page 15: HCI Metaphors
Direct Manipulation: User interacts directly with on-screen objects.
Document Metaphor: Engagement involves browsing and entering data in electronic documents.
Dialog Metaphor: Interaction resembles a conversation between user and computer.
Page 16: Principles of User-Centered Design
Human-Interface Objects (HIOs): Icons and manipulable objects.
Affordance: Design suggests function.
Visibility: Essential controls must be visible to users.
Feedback: Responses from the system after a user action.
Page 17: Continued Principles
Radio Buttons: Select one from a group.
Check Boxes: Multiple selections allowed.
Continuity: Consistency across releases.
Active Discovery: Encouraging users to find features.
Breadcrumbs: Navigation aids showing sequence of traversed pages.
Page 18: Transition to UI Design
Use cases help categorize related functions in menus.
Menus should provide a manageable number of choices (ideally five).
Related use cases often grouped for ease of access.
Page 19: Analysis Models and Input Forms
Use analysis models to inform design of input forms.
Dialogs and Storyboards document interactions between users and systems.
Page 20: UI Design Key Terms
Text Box: Accepts user input.
List Box: Predefined data values.
Combo Box: Allows user entries beyond predefined list.
Mobile Responsive: Adaptation for mobile devices.
Action Bar: Navigation bar for smartphones.
Page 21: Design Considerations for Devices
Desktop/Laptop: Ensure perfect alignment and readability; error-reducing data entry.
Web-based Apps: Responsive design for various devices; avoid ad interference.
Smartphones: Focus on single purpose screens; portrait and landscape capabilities.
Tablets: Touch screen adaptation while maximizing control and data space.
Page 22: Designing Reports
Types of Output Reports
Detailed Reports: Specific business transaction information.
Summary Reports: Recaps of periodic activities.
Exception Reports: Information about outlier transactions.
Executive Reports: Used for assessing organizational performance.