Human-Centered Design (HCD): Principles, Process, and Modeling in UX

Week: 2 What is Human-Centered Design (HCD)

A process that puts users first through observation, ideation, prototyping, and testing

What is the HCD process cycle?

Observe → Ideate → Prototype → Test.

What are affordances?

The perceived possible actions an object or interface allows.

Example: A door handle invites pulling; a flat plate invites pushing.

Who introduced the term "affordances"?

Psychologist James J. Gibson, adapted for design by Don Norman.

What's the difference between affordances and features?

Affordances = what users think they can do; Features = what something actually does.

💡 Example: A raised button (affordance) suggests pressing it; pressing it turns on a flashlight (feature).

What are examples of physical affordances?

Door handle = pull, flat plate = push, button = press, slider = drag.

What are digital affordances?

Screen cues like buttons, hyperlinks, sliders, or text fields that suggest actions.

What are signifiers?

Visual or sensory cues that indicate how to use something (like labels, icons, or color).

Examples: "Push/Pull" labels on doors, magnifying glass for search, trash can icon for delete.

What is the purpose of signifiers?

To make affordances clear and reduce cognitive load.

Give examples of signifiers in the digital world.

Trash can = delete, magnifying glass = search, hover effects on buttons.

What is mapping in design?

The relationship between controls and their effects.

Spatial mapping: arrows, scrollbars.

Conceptual mapping: icons representing actions.

Cultural mapping: colors, reading direction.

What is natural mapping?

When controls directly correspond to real-world outcomes (e.g., steering wheel turns car left).

What are mental models?

It's what users expect to happen when they use something, based on past experiences (ex: push plate = push door).

What are conceptual models?

The designer's idea of how a system should work and how it's shown to users (ex: online store works like a real store).

Why must mental and conceptual models align?

So users can predict how the system behaves.

What is feedback in design?

Responses that confirm user actions (e.g., button light-up, sound, or progress bar).

What are symbolic systems?

Shared meanings of icons, colors, and symbols that represent actions (ex: 🗑️ = delete, 🔒 = lock, red = stop).

What are the core principles of good design?

Visible affordances, clear signifiers, natural mapping, mental model alignment, consistent feedback.

week 3 What are the four stages of the complete HCD process?

Observation, Ideation, Prototyping, Testing.

What's the purpose of observation?

To understand context, discover unmet needs, and identify real problems.

What are common observation methods?

Contextual inquiry, shadowing, ethnographic research, and journey mapping.

What was learned from the hospital hygiene case study?

Designers learned to observe real user behavior; poor placement and lack of feedback reduced handwashing. Improving visibility and convenience boosted compliance.

Why does traditional brainstorming often fail?

Dominant voices, conformity, expertise bias, and early judgment.

What is a "How Might We" question?

It's an open-ended question that reframes a problem into a creative challenge (ex: "How might we help users recycle more easily?").

What is the "Worst Possible Idea" technique?

A brainstorming method where people share intentionally bad ideas to reduce fear, spark creativity, and uncover new insights.

What are the levels of prototypes?

Low-fidelity (paper), medium (wireframes), high-fidelity (interactive), working (functional).

What is the purpose of prototyping?

To test ideas and gather feedback quickly and cheaply.

What should testing evaluate?

Usability, desirability, feasibility, and viability.

What types of data should be collected during testing?

Behavioral, performance, emotional, and preference data.

What is systems thinking?

Understanding how multiple components and people interact within a larger system. basically thinking bout something as a whiole

Why are models needed in design?

They help communicate complex systems clearly across teams.

What are characteristics of good models?

Accurate, clear, appropriately detailed, and useful.

Why is standardization important in design?

helps users by keeping things familiar — once they learn it once, they can use it anywhere.

Week4 What does UML stand for?

Unified Modeling Language.

What is UML used for?

Communicating and visualizing software design.

Why was UML created?

To standardize software design communication and eliminate ambiguity(vague).

What are the three pillars of design communication?

Models, Views, and Diagrams.

What is a design model?

A blueprint or diagram that shows how a system's parts connect and work together (ex: use case, class, or sequence diagram in UML).

What is a design view?

It's one perspective of the system's design (like user interactions, structure, or processes). Each view focuses on a different aspect, such as logical, process, or deployment.

What are the main types of design views in UML?

Structural, Behavioral, User Experience, and Implementation.

What is a UML diagram?

A visual tool to communicate a specific design view.

List the main types of UML diagrams.

Class, Component, Deployment, Use Case, Activity, Sequence, and State.

Which diagram shows system structure?

Class diagram.

Which diagram shows user interactions?

Use Case diagram.

Which diagram shows workflow or process?

Activity diagram.

Which diagram shows communication between components?

Sequence diagram.

Which diagram shows hardware or deployment layout?

Deployment diagram.

What are the five UML communication principles?

Purpose-driven, audience-aware, appropriate detail, consistent notation, clear communication.

What is the Goldilocks principle in UML?

Include just enough detail — not too much, not too little.

What is a common UML beginner mistake?

Creating "diagram soup" with too many details or unclear purpose.

week 5 What are class diagrams used for?

Showing the structure of a software system through classes and relationships.

What is the "three-box rule"?

Class Name | Attributes | Methods.

What do visibility symbols mean?

+ Public, - Private, # Protected, ~ Package.

What are the five key class relationships?

Association, Aggregation, Composition, Inheritance, Realization.

What is an association?

A connection between independent classes (e.g., Customer—Order).

What is aggregation?

"Has-a" relationship with loose ownership (e.g., Team—Players).

What is composition?

"Owns-a" relationship with strong ownership (e.g., House—Rooms).

What is inheritance?

: "Is-a" relationship where one class extends another (e.g., Car—Vehicle).

What is realization?

class implementing an interface (e.g., Car implements Drivable).

What is multiplicity?

The number of instances involved in a relationship (e.g., 1..*, 0..1).

What are the steps to create a class diagram?

Identify classes → Add attributes/methods → Define relationships → Add multiplicity → Review.

Example: In an online shopping system, what relationship exists between Order and OrderItem?

Composition (Order owns OrderItems).

What's the relationship between GuestUser and Customer?

Inheritance (GuestUser IS-A Customer).

What memory tricks help remember relationships?

Association = Facebook friends

Aggregation = Sports team

Composition = House & rooms

Inheritance = Family tree

Realization = Contract signing

week 6 What's the difference between component and deployment diagrams?

Component Diagram: Shows what software parts exist and how they connect.

Deployment Diagram: Shows where software runs and what hardware it uses.Think: WHAT vs. WHERE.

What is a component?

A small, self-contained part of a system that does one main job.Like a LEGO brick: you can swap, reuse, and connect it with others.

What makes a good component?

Self-contained - works on its own

Replaceable - can swap with similar part

Encapsulated - hides inner details

Interface-based - connects only through clear "plugs"

What is a component interface?

The "connection point" where components interact — like an electrical outlet.It defines what service is provided, not how it's done.➡️ Makes components safe and interchangeable.

What is a deployment node?

A device or environment that runs the software.Examples: phones, laptops, servers, or the cloud.Nodes can be physical (hardware) or virtual (software environment).

What are the parts of a deployment diagram?

Nodes: physical or virtual machines

Artifacts: software files or apps inside nodes

Connections: network links showing communication

When should you use each diagram?

Component Diagram: when planning software structure, modules, or interfaces

Deployment Diagram: when planning servers, cloud setups, or performance➡️ Use both to see the full system.

Common mistakes with these diagrams?

Mixing software and hardware in the same view

Making components too tiny or too big

Forgetting to show interfaces or connections

Ignoring scalability or backups

(What + How)

Component = Software structure ✅ .

(Where)

Deployment = Hardware setup You need both to build a full system.

you need both___and ___to build a system

component and deployment

week 7 What's the main difference between Use Case and Activity diagrams?

Use Case Diagram: Shows who uses the system and what they can do.

Activity Diagram: Shows how each process works step-by-step.Think: WHAT vs. HOW or Menu vs. Recipe.

What are the main parts of a Use Case diagram?

Actors: People or systems using it (stick figures)

Use Cases: Actions they can do (ovals)

System Boundary: The box showing what's inside the system

What's important to remember about actors?A:

Actors are roles, not real people.Example: Doctor, Nurse, Patient — not "Dr. Smith."

What's the goal of a Use Case diagram?

To show all the functions a system provides to each user and define system scope.

What are Activity Diagrams used for?

To show the process flow — how things get done.Like a flowchart: actions, decisions, and outcomes.

What are the main symbols in an Activity diagram?

Start/End: Circles

Actions: Rounded rectangles

Decisions: Diamonds

Flows: Arrows showing order

Fork/Join: Thick lines for parallel work

What do loops in activity diagrams show?

Repeating actions (e.g., adding more items to a cart).

How do Use Case and Activity diagrams connect?

Use Case = Goal (e.g., "Register for Course")

Activity = Process (e.g., "Login → Search → Add Course → Confirm")Together, they show what users want and how they achieve it.

When should you use each one?

Use Case: To find users, goals, and features

Activity: To find steps, decisions, and issues in workflows➡️ Use both for full user-centered design.

Who & What

Use Case

How

Activity

Together they describe user goals and system actions clearly.

week 8 What's the difference between Sequence and State diagrams?

Sequence Diagram: Shows who talks to who and in what order.

State Diagram: Shows how one object changes over time.Think: Conversations vs. Transformations.

What does a sequence diagram show?

The order of messages between parts of a system (like a comic strip).Focuses on communication and timing.

What are participants in a sequence diagram?

Objects, users, or systems that send and receive messages.Examples: Customer, Website, Payment System, Database.

What are the main message types in sequence diagrams?

Solid arrow: Send message (wait for response)

Dashed arrow: Return message

Loop arrow: Object talks to itself

What's the difference between an activity diagram and a sequence diagram?

Activity = Flow of tasks

Sequence = Flow of messages between partsExample: Activity shows steps in login; Sequence shows how User, Website, and Database talk to complete login.

What does a state diagram show?

The life cycle of one object — how it moves from one condition to another.Each state shows what the object is doing.

What are transitions in a state diagram?

Arrows showing what causes a change.Example: "Go Online" moves driver from Offline → Available.

What are the three activities within a state?

Entry: Happens once when entering

Do: Ongoing while inside

Exit: Happens once when leaving

Example of a State Diagram (Driver App)?

States: Offline → Online → Ride Accepted → Passenger Pickup → In Transit → Trip Complete → Back to OnlineShows how driver and system move through each step.

When should you use Sequence vs. State diagrams?

Sequence: To show message order and communication

State: To show how an object changes over timeUse both for complete time-based behavior.

Sequence

Object Conversations (who talks when)

State

Object Lifecycles (how things change)Together, they explain system behavior over time.