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

1. Discovery

2. Ideation

3. 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

1. Direct Manipulation: User interacts directly with on-screen objects.

2. Document Metaphor: Engagement involves browsing and entering data in electronic documents.

3. 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.