Comprehensive Notes – Introduction to UI/UX Design

Introduction to UI / UX Design

• Foundational topic combining two complementary disciplines:
  • UI (User Interface) – the tangible/visible access points of a product.
  • UX (User eXperience) – the subjective feelings users have while interacting.
• Early slide hierarchy shows both topics have equal weight in the lecture.

Outline

• Two-item agenda emphasises focus and depth:
  • UI
  • UX

Why Do We Care About UI / UX?

• "Because it matters."
  • Simple assertion highlighting strategic importance.
• Poor UX ⇒ people abandon the product/service.
  • Direct link between experience quality and adoption/retention metrics.
• Ethical & business implication: designing for people is a competitive necessity, not a luxury.

Human-Computer Interaction (HCI)

• Formal definition: HCI is the study of how people interact with computing technology.
• Design mandate: craft technological experiences that fit into the ways people:
  • Adopt (initial onboarding)
  • Use (routine operation)
  • Adapt (tweak / extend)
  • Reject (abandon) technology.
• Connection to previous CS foundations: bridges computer science, psychology, design, and ergonomics.

User Interface (UI)

• "UI stands for User Interface."
  • The access points where users and designs meet.
• UI quality strongly influences learnability, efficiency, error rates, and satisfaction.

Types of User Interfaces

• Expansive, non-exhaustive catalogue (shows the diversity of modern UI work):
  • Command-line (CLI)
  • Graphical (GUI)
  • Multimedia
  • Virtual Reality (VR)
  • Web
  • Mobile
  • Appliance / Embedded
  • Voice
  • Pen
  • Touch
  • Touchless / Gesture
  • Haptic / Force-feedback
  • Multimodal (combo of inputs/outputs)
  • Shareable (large tabletop, multi-user)
  • Tangible (physical objects as controllers)
  • Augmented Reality (AR)
  • Robots & Drones
  • Brain-Computer Interfaces (BCI)
  • Smart / Context-aware
  • Shape-changing
  • Holographic

Real-World UI Snapshots (Page of Mixed Screens)

• Slide shows mosaics of:
  • University website navigation (multi-role audience: staff, student, visitor).
  • Food-ordering mobile UI (menus, cart, checkout).
  • Enterprise work-order template (form fields, CRUD actions).
  • Command Prompt (Windows DIR command help).
• Purpose: illustrate richness of interface contexts: web, mobile, enterprise desktop, command line.
• Implicit lesson: designers must tailor interaction styles to domain, user skill, and hardware constraints.

Natural User Interfaces (NUI) & Beyond

• Definition: A NUI lets people interact with computers the same way they interact with the physical world—via voice, hands, body.
• Primary objective: lower cognitive load in HCI (users think less about the tool and more about the task).
• Examples:
  • Voice assistants (“Go ahead, I’m listening…”, slide shows $78\%$ battery).
  • Gesture-driven AR/VR.
  • Spatial computing (HoloLens, Vision Pro).
• Future-looking note: NUIs trigger new ethical questions (privacy with always-listening microphones, social acceptability of gesturing in public).

Choosing the Right Interface

• "Which interface is most appropriate… depends on an interplay of factors":
  • Task type (data entry vs. exploration)
  • People (age, expertise, disabilities)
  • Context (mobile, desktop, hands-busy)
  • Reliability (mission-critical? offline?)
  • Social acceptability (e.g.
  voice commands in quiet library)
  • Privacy (sensitive data exposure)
  • Ethical considerations (bias, autonomy)
  • Location constraints (GPS accuracy, lighting).
• Design is a multi-criteria optimisation, not a single variable decision.

User Experience (UX)

• "UX stands for User eXperience."
• Simplified description: how people feel when they use a product or service.
• Quote & metaphor (slide 13):
  • Beautiful paved paths ≠ adopted paths; users create dirt shortcuts that better meet needs (“desire paths”).
  • Moral: aesthetics alone do not guarantee successful UX—solutions must align with behaviour.

UX Is User-Centric

• Quote by Marieke McCloskey: "UX Design is a commitment to building products with the customer in mind."
• User-centered design (UCD) principles:
  • Early & continuous user involvement.
  • Iterative prototyping/testing.
  • Evidence-based decisions.

Basic Elements of UX

• Framework lists four pillars:
  1. Usability – ease with which people accomplish tasks.
  2. Usefulness – degree to which product helps users reach goals.
  3. Desirability – emotional attractiveness; how much users want the product.
  4. Brand perception – memories & expectations users carry from past brand interactions.

Usability

• Concerns learnability, efficiency, memorability, errors, satisfaction.
• Directly measurable via task success rate, time-on-task, error counts.

Usefulness

• A hard gate: even a usable system is irrelevant if it does not support user goals.
• Source referenced: Antony Conta (2024) “The Art and Science of UX Design”.

Desirability

• Emotional layer (visual design, micro-copy, delight).
• Drives advocacy and long-term engagement.

Brand Perception

• Users transfer prior experiences: positive Apple UX ⇒ higher expectations for next Apple product.
• Brand failures have ripple effects across product lines.

UX Triads – Balancing Business, Technology, and Users

• Venn/triangular model ("Sweet Spot") where a solution is:
  • Desirable, Usable, Useful to Users.
  • Profitable / Viable for the Business.
  • Feasible within Technology constraints.
• Out-of-balance scenarios:
  • Technologically feasible but not desirable → product ignored.
  • Desirable but not profitable → unsustainable.
  • Profitable but technically unfeasible → vaporware.
• Practical implication: cross-functional collaboration (design, engineering, product management, marketing).

Ethical, Philosophical, and Practical Considerations

• Privacy & Surveillance – NUIs with cameras/mics raise consent issues.
• Accessibility & Inclusion – design must serve diverse abilities (WCAG, ARIA, voice alternatives).
• Dark Patterns – unethical manipulation harms trust, counters user-centric ethos.
• Sustainability – hardware-intensive UIs (AR/VR) have environmental footprints.

Key Takeaways

• UI ≠ UX; the interface is one ingredient in the holistic experience recipe.
• Success ≈ aligning product goals with human goals while staying within technical & business realities.
• Continual user research & iterative design are non-negotiable for quality UX outcomes.
• Emerging interaction paradigms (NUI, AR/VR, BCI) expand opportunities and responsibilities for designers.

End of Lecture