User Interface Design Process

User Interface Design (UX/UI)

• User interface (UI) is the space where interaction between users and machines (like computers, home appliances, mobile devices, and other electronic devices) occurs.

User Interface Design Process

• Understand:
  • Understand the problem
  • Know organization objectives
  • Conduct user research
  • Learn about target users and their problems
  • Analyze user insights
  • Create personas
  • Create affinity mapping
  • Analyze empathy maps
• Research:
  • Conduct user research
  • Learn about the target users and their problems
• Analyze:
  • Analyze user insights
  • Create personas
  • Affinity mapping
  • Empathy map
• Sketch:
  • Create paper representations of solutions
• Prototype:
  • Create UI mockups of the solution
• Test:
  • Conduct user tests
  • Iterate and refine

Step 1: Understand

• The first step is understanding the problem to be solved and the organization's objectives.
• User experience (UX) focuses on understanding users' needs, values, abilities, and limitations.
• UX also considers the business goals and objectives of the project's managing group.

Understanding the Problem

• A design team may develop mobile applications or social networks.
• The problem statement helps navigating decisions and features.
  • Should an application use AI?
  • What other applications should it link to?
  • How should the application's environment be designed?
• A well-defined problem provides a framework for crafting the best solution for users.

Data Gathering Techniques

• Questionnaires:
  • Questions can be closed-ended or open-ended.
  • Questionnaires can be online.
• Data recording:
  • Notes
  • Audio recordings
  • Video recordings
  • Photographs

3-Task Analysis

Design Analysis

• Goals (Purpose): What needs to be achieved?
• Constraints (Materials):
  • Understand computer limitations, capacities, tools, and platforms.
  • Understand people (psychological, social aspects, and human errors).
• Trade-offs:
  • Choosing which goals or constraints can be relaxed to meet other goals.
  • Balancing one situation/quality against another to reach an acceptable result.

Example Trade-offs

• Security and Usability Trade-off: A graph shows a negative correlation between security and usability.
• Pencil Trade-off: A diagram compares a poorly designed pencil (wasting graphite) to a better designed one (saving graphite).
• Smartphone Trade-off: A diagram illustrating different phone sizes available on the market.
• Space-time Trade-off: Compressing an image reduces transmission time but may also impact CPU processing time and image quality.

Trade-off Study Matrix

• A matrix used for evaluating different design options against various criteria.
• The matrix assesses various design aspects including performance, cost, mass, quality, volume/size, risk, and durability.

Trade-off Analysis

• Design Question: Is it better to use text or images on a button?
• The analysis considers how well images/text accommodates abstract concepts, their obviousness, visual interest, and accessibility.

4-Sketch (Scenarios)

• A user scenario is a fictitious story of a user accomplishing an action or goal via a product.
• User scenario details what users do with the product and why.
• User scenarios describe steps, interactions, and user thought processes.

Paper Drawings (Low-Fidelity)

Sketching Principles (Wireframing)

• Start from the General Layout: Sketch the outline of each component, explore layout possibilities, and show basic app structure (wireframe).
• Start with the Largest Element: Draw the outline of the largest elements first, then add details.
• Wireframes don't include styling, colour, or graphics.

Basic Elements

• Text lines: Start on the left, have a squiggle, and become straight.
• Body of text: Draws multiple text lines together to form a body of text.
• Headings: Emphasized with bold, larger fonts, underlining, or italicising; used to show hierarchical structure.
• Checklists: Small bullets on the left side of text.
• Images: A rectangle filled with an "X".
• Video player: A rectangle with a right-facing triangle in the middle.
• User profile/avatar: A semicircle at the bottom of a larger circle (representing the body), with a smaller circle on top (representing the head).
• Form field: A skinny horizontal rectangle.
• Buttons: A rectangle, potentially beveled, to improve 3D look.
• Search bar: A magnifying glass in the left corner of a form field.

Note

• There is no right or wrong way to sketch out ideas.
• The quality of the sketch is less important than the ideas conveyed.

Advantages of Paper Prototyping

• Rapid iteration: Easier to discard designs.
• Low cost: Paper is inexpensive.
• Increased creativity: Encourages experimentation and new ideas.
• Team building: Fosters creative environment.
• Documentation: Prototypes serve as excellent documentation.

Disadvantages of Paper Prototyping

• No user reactions: Difficult to gauge whether ideas will work without user feedback.

UX vs UI Sketch

• UX (User Experience): Focuses on aligning user expectations with the product, defining customer needs, and scoping the product.
• UI (User Interface): Focuses on screens, buttons, toggles, icons, and other visual elements.

Exercises

• Tourist information system: Design a mobile application for tourists to search for locations by location name, GPS, or image matching.
• Faculty Website Redesign: Redesign a faculty website to include an interactive system for students to chat with instructors. Includes login and chat screens.

Explore the steps involved in the User Interface (UI) design process. This quiz covers the stages from understanding the problem to testing prototypes, emphasizing user research and analysis techniques to create effective designs.