UX & UI Design – Class 01 Comprehensive Notes

Introduction

  • Class: UX & UI Design (Basic to Advance) – Class 01
  • Language of lecture materials: Primarily Bangla with some English UI examples
  • Focus: Foundations of UX (User Experience) design, its process, common pitfalls, and preliminary research methods

Definition of UX Design

  • UX = User Experience
  • Core Idea: Designing any product, service, or interface by keeping the users’
    • Environment
    • Mind-set and way of thinking
    • Convenience & inconvenience
    • Needs and priorities
    • Perceived importance & credibility
    • Overall usefulness
  • Synonym: User-Friendly Design
  • Practical interpretation: Before starting any task, design, or development, one must fully consider the situation of the people who will eventually use it.

Relation to Product Design

  • Product Design definition & discussion promised in “Part-01” of the course (to be reviewed separately).

Placeholder / Miscellaneous Slide Text

  • “NEW,” “ONDER,” stock-photo watermarks (Alamy, 123RF), and the single word “ELEVATOR” appear as filler or design placeholders – no conceptual content supplied.

Example Screens: Sign-Up & Registration Forms (Page 13)

  • Multiple UI mock-ups illustrate frequent registration patterns:
    • Standard input fields: First Name, Last Name, Email, Password, Confirm Password
    • Legal acknowledgement: “I accept the Terms of Use & Privacy Policy.”
    • Social log-in option: “Sign Up Using Google (G+)”
    • Corporate e-mail enforcement: “Please use your work email address … so we can connect you with your team.”
    • Marketing messages: “NEW: Track anything (and everything) with custom fields.”
    • Forced agreement checkbox: “I completely agree with all kinds of disclaimers.”
  • Practical takeaway (implicit): UI designers must balance data collection, legal needs, and user friction.

Why Visitors Drop Off a Website / Mobile App (Page 14)

  1. Excessive loading time
  2. Non-responsive design (poor adaptation to different devices)
  3. Lack of attractive or desired information immediately after entry
  4. Lengthy, intrusive registration forms requesting unnecessary data
  5. Overly complicated registration process flow
  6. Low visual quality of assets (poor graphics / layout)
  7. Lack of credibility or trust signals
  8. Too many advertisements
  9. Obnoxious cookie-permission pop-ups
  10. Absence of clear company/contact information at the end of the journey

UX Process Steps (Page 15)

  1. Information Architecture
  2. Sketching
  3. Prototyping
  4. UI Design
  5. Accessibility
  6. Credibility
  7. Usability
  8. Development

The Three-Way Balance for a Complete Product Solution (Page 16)

  • A successful solution requires harmony among:
    1. Context (Business / Organizational Environment)
    • Business goals, funding, politics, culture, technology, resources, constraints
    1. Content (What the product contains)
    • Content objectives, document & data types, volume, existing structure, governance & ownership
    1. Users (Target audience)
    • Audience profiles, tasks, needs, information-seeking behavior, prior experience

Information Research Techniques (Page 17)

  1. User Need Research
  2. User Goal Research
  3. User Interviews – discover problems and convenience/inconvenience directly from users and adapt product accordingly
  4. User Persona Creation
  5. Market Research
  6. Stakeholder Interviews
  7. Competitor Analysis
  8. Product Demand Analysis
  9. Card Sorting for structuring information

Card Sorting Micro-Steps (Page 18)

  1. Group related items
  2. Define categories
  3. Assign sequential numbering (ordering)

Homework / Assignments (Page 19)

  1. Based on your chosen category, pretend you must design a website, mobile app, or software:
    • Research and list all necessary information you would need (via internet searching).
    • Identify potential challenges you might face while gathering or using that information.
    • Propose solutions or working methods to overcome each challenge.
  2. Collect 100 design links from Behance.net or Themeforest.net before the 2nd class; save the list in a document file.
  3. Before the 2nd class, shortlist and post 10 selected links separately in the private Facebook study group.
    • NOTE: Do NOT publicly share or repost any copied design on Facebook or social media; the material is for learning only.