← Back to CoursesWeb Design & Development: Advanced

Neuroanatomy Explorer

Drag to rotate · scroll to zoom · click regions to explore

View
Loading 3D model…

Click a region
to explore it

Memory Deck

Flip each card and rate whether you knew it. Your score is saved.

Term
Definition

Deck complete — score saved.

Match the Pairs

Match each term to its definition. Finish the board to earn your score.

All matched — score saved.

Concept Constellation

Every key idea in this course, mapped as an explorable 3D constellation. Drag to rotate, scroll to zoom, click a node.

Click a node to read its definition.

Interaction Design, Prototyping, and Cognitive Ergonomics

Manual: General · Subject: Web Design & Development

Examines advanced interaction patterns, prototyping strategies, and human factors that shape effective interfaces.

How people perceive and act

Interaction design beyond visual layout

Interaction design focuses on the sequence of actions, feedback, constraints, and recoveries that shape a user's experience. Advanced interface work considers attention, memory, motor control, error prevention, and the cost of decision-making.

Human-factors concepts

Cognitive load
The mental effort required to understand and complete a task.
Affordance
A property that suggests how an element can be used.
Feedback
The system's response that confirms an action or state change.
Error recovery
The ability to undo, fix, or continue after a mistake.
💡

Prototype to learn

A prototype is not a miniature finished product; it is a question made tangible.

Low vs. high-fidelity prototyping

Low-fidelity

  • Fast and cheap
  • Great for structure and flow
  • Useful early in exploration

High-fidelity

  • Closer to real implementation
  • Useful for micro-interactions and realism
  • Higher cost and more commitment

Which design principle most directly reduces cognitive load?

Why is feedback important in interaction design?

Interaction patterns and behavioral flow

A prototyping workflow for complex interactions

  1. 1

    Step 1: Define the user goal and state transitions.

  2. 2

    Step 2: Sketch the interaction flow and edge cases.

  3. 3

    Step 3: Prototype the highest-risk interactions first.

  4. 4

    Step 4: Test with realistic tasks and capture failure modes.

  5. 5

    Step 5: Iterate on timing, feedback, and recoverability.

What is the main advantage of testing edge cases in prototypes?

What is one reason high-fidelity prototypes are useful late in design?