Topic 1
HCI & IxD Basics
The foundation — what HCI is, who it involves, and the core activities of interaction design.
Definition
What is HCI?
HCI (Human–Computer Interaction) studies how people interact with computers and focuses on improving usability and interaction quality. It's NOT about hardware or algorithms — it's about the human side.
MCQs often test this: HCI = usability & interaction, not speed or cryptography.
Transdisciplinary
Interaction Design (IxD)
IxD pulls from many fields:
- Academic: Psychology, Cognitive Science, Social Sciences, Engineering, CS
- Interdisciplinary: HCI, CSCW, Human Factors, Cognitive Engineering, Ergonomics
- Design: Graphic, Product, Industrial, Film
4 Core IxD Activities (the "lifeblood")
- Discovering requirements — what do users need?
- Designing alternatives — explore multiple solutions
- Prototyping — build testable versions
- Evaluating — test with users or experts
UCD
User-Centered Design — 3 Principles
- Early focus on users & tasks
- Empirical measurement — observe & measure real users
- Iterative design — test → fix → repeat
These 3 come up in MCQs as a list — memorise the exact phrasing.
Key Concepts
Mental Model
The user's internal understanding of how the system works. Good design aligns with users' mental models — mismatch causes errors.
Cognitive Load
The mental effort required to use an interface. Reduce it with chunking, recognition over recall, and progressive disclosure.
Discoverability
How easily users find available actions without reading a manual. High discoverability = users just explore.
Direct Manipulation
Users interact directly with objects on screen — drag, drop, resize. Feels natural. No commands to memorise.
Chunking
Breaking info into smaller units. Phone: 077-123-4567 not 0771234567. Exploits Miller's 7±2 limit.
Progressive Disclosure
Show only what's needed at each step. Reveal complexity gradually — reduces overwhelm. Combats Hick's Law.
WCAG Accessibility
Accessibility
WCAG = Web Content Accessibility Guidelines (W3C) — 4 Principles: POUR
Perceivable — users can perceive content
Operable — users can operate the interface
Operable — users can operate the interface
Understandable — content is understandable
Robust — works with assistive tech
Robust — works with assistive tech
POUR mnemonic. WCAG = accessibility standard. Disability = broad: visual, motor, cognitive, hearing.
Topic 2
Norman's Design Principles
Six generalizable rules — the dos and don'ts derived from theory, experience, and common sense.
Principle 1
Visibility
Controls and options should be visible so users can see what actions are possible. Hidden features = frustrated users.
Example: Lift control panel with unmarked buttons — no visibility of what each does.
Example: Lift control panel with unmarked buttons — no visibility of what each does.
Principle 2
Feedback
System informs the user about the result of their action. Must be immediate, clear, and informative.
Examples: Loading spinner, save confirmation, sound cue, error highlight.
Examples: Loading spinner, save confirmation, sound cue, error highlight.
Principle 3
Affordance
A property that suggests how an object is used. Coined by Don Norman (from Gibson).
Real: Button = push, handle = pull.
Digital: Perceived affordances — learned conventions (underline = link).
Real: Button = push, handle = pull.
Digital: Perceived affordances — learned conventions (underline = link).
Affordance = capability. Signifier = the indicator showing it (e.g. "PUSH" label).
Principle 4
Mapping
The relationship between controls and their effects.
Good: Stove knobs laid out matching burner positions.
Bad: Random switch placement with no spatial link.
Good: Stove knobs laid out matching burner positions.
Bad: Random switch placement with no spatial link.
Principle 5
Consistency
Similar actions produce similar results. Reduces learning time.
Internal: within the app. External: matches platform conventions (File menu, Ctrl+Z).
Internal: within the app. External: matches platform conventions (File menu, Ctrl+Z).
Principle 6
Constraints
Restrict interactions to prevent errors and guide users toward valid actions.
Examples: Grey-out unavailable menu items, USB plug shape prevents wrong insertion, required fields.
Examples: Grey-out unavailable menu items, USB plug shape prevents wrong insertion, required fields.
Important distinctions
Slips vs Mistakes
| Slips | Mistakes |
|---|---|
| Right goal, wrong action | Wrong goal entirely |
| Delete instead of Save | Wrong mental model |
| Fix: undo, confirmation | Fix: better feedback, real-world match |
Mode Errors
Action valid in one system state but invalid in another. User thinks system is in mode A but it's in mode B.
Classic: Typing with Caps Lock on without realising it's on.
Classic: Typing with Caps Lock on without realising it's on.
Mode error = state mismatch between user belief and system reality.
Topic 3
Nielsen's 10 Heuristics
The most widely used usability principles. Used in heuristic evaluation (3–5 experts, no users needed).
What is Heuristic Evaluation?
Experts review an interface against Nielsen's 10 principles. 3–5 evaluators find ~75% of problems. Fast and cheap. It's an inspection method (not user testing — no real users involved).
Inspection method ≠ user testing. Heuristic = expert review. User testing = real users.
#1
Visibility of System Status
Keep users informed about what's happening through timely feedback.
Example: Progress bar, "Saving…" toast, network indicator.
Example: Progress bar, "Saving…" toast, network indicator.
#2
Match Between System & Real World
Speak the user's language. Familiar words, concepts, phrases — no internal jargon.
Example: Stove knobs matching burner layout.
Example: Stove knobs matching burner layout.
#3
User Control & Freedom
Provide clear "emergency exits" — undo, cancel, back. Users make mistakes; they need escape routes.
Example: Ctrl+Z, Cancel button.
Example: Ctrl+Z, Cancel button.
#4
Consistency & Standards
Follow platform conventions. Users shouldn't wonder if different words mean the same thing.
Example: Standard File/Edit/View/Help menu bar.
Example: Standard File/Edit/View/Help menu bar.
#5
Error Prevention
Best designs prevent problems from occurring. Better than great error messages.
Example: "Are you sure?" dialog, greyed-out invalid options, input validation.
Example: "Are you sure?" dialog, greyed-out invalid options, input validation.
#6
Recognition Rather Than Recall
Make options visible — minimize memory load. Users shouldn't need to remember info between screens.
Example: Visible icons, context menus, autocomplete.
Example: Visible icons, context menus, autocomplete.
#7
Flexibility & Efficiency of Use
Shortcuts for experts, clear path for novices. Accelerators speed up interaction for experienced users.
Example: Keyboard shortcuts, gestures, macros.
Example: Keyboard shortcuts, gestures, macros.
#8
Aesthetic & Minimalist Design
No irrelevant information. Every extra unit competes with relevant units for attention.
Example: A minimal three-legged stool is still a place to sit.
Example: A minimal three-legged stool is still a place to sit.
#9
Help Recognize, Diagnose & Recover from Errors
Error messages in plain language. Precisely indicate the problem. Constructively suggest a solution.
Example: "File not found. Check the filename or path." — not "Error 404".
Example: "File not found. Check the filename or path." — not "Error 404".
#10
Help & Documentation
Best if no help needed — but when required, it should be easy to search, task-focused, and concise.
Example: Airport information kiosk — recognisable and context-relevant.
Example: Airport information kiosk — recognisable and context-relevant.
Quick scenario → heuristic map
| Scenario | Heuristic |
|---|---|
| Progress bar during upload | #1 Visibility of system status |
| "Are you sure you want to delete?" | #5 Error prevention |
| Standard menu bar (File/Edit/View/Help) | #4 Consistency & standards |
| Mobile icons (home, search, settings) | #6 Recognition not recall |
| Login with masked password + inline validation | #5 Error prevention |
| Undo/Cancel buttons | #3 User control & freedom |
| Plain-language error message with suggestion | #9 Help recover from errors |
Topic 4
Usability & UX Goals
Usability = measurable performance. UX = subjective feeling. Both matter, both are different.
Memorise this list
The 6 Usability Goals
- Effective — users can accomplish tasks accurately
- Efficient — tasks completed quickly once known
- Safe — protects from serious errors & their consequences
- Utility — it works / provides right functionality
- Easy to Learn — low onboarding cost for new users
- Easy to Remember — after a break, users recall quickly
Aesthetically pleasing is NOT a usability goal — it's a UX goal.
Know the words
UX Goals — Desirable vs Undesirable
✓ Fun
✓ Engaging
✓ Helpful
✓ Exciting
✓ Fulfilling
✓ Entertaining
✓ Cognitively stimulating
✓ Emotionally rewarding
✓ Supporting
✓ Engaging
✓ Helpful
✓ Exciting
✓ Fulfilling
✓ Entertaining
✓ Cognitively stimulating
✓ Emotionally rewarding
✓ Supporting
✗ Boring
✗ Frustrating
✗ Dull
✗ Annoying
✗ Patronizing
✗ Childish
✗ Cutesy
✗ Old-fashioned
✗ Makes feel stupid
✗ Frustrating
✗ Dull
✗ Annoying
✗ Patronizing
✗ Childish
✗ Cutesy
✗ Old-fashioned
✗ Makes feel stupid
Key distinction
| Usability Goals | UX Goals |
|---|---|
| Objective and measurable | Subjective feelings and emotions |
| Task completion rate, time on task, error rate | Fun, engaging, emotionally rewarding |
| Can I do it? How fast? How accurately? | How did it make me feel? |
| Measured with SUS, benchmarks | Measured with interviews, observations |
MCQ trap: "Aesthetically pleasing" → UX goal, not usability goal.
Topic 5
Cognitive Laws
Predictive laws about human behaviour — used to justify design decisions.
Fitts' Law · Paul Fitts, 1954
Time to reach a target depends on its size and distance
T = a + b · log₂(D/W + 1)
where D = distance to target, W = width of target
Bigger + closer = faster to click. Used for button sizing and placement.
Practical implications:
Practical implications:
- Minimum tappable mobile area = 44×44 points
- Menu bars at screen edge are fast — "infinite width" (you can't overshoot)
- Large targets for frequently used buttons (e.g. submit)
- Keep targets close to where user's cursor/finger already is
Exam often asks: what does Fitts' Law predict? Answer: time based on size AND distance.
Hick's Law · Hick & Hyman, 1952
Decision time increases with number and complexity of choices
T = b · log₂(n + 1)
where n = number of choices
More options = slower decisions. Even if user knows the options well.
Practical implications:
Practical implications:
- Reduce choices in menus — keep to essentials
- Use progressive disclosure to hide secondary options
- Use categorisation to reduce apparent number of choices
- Avoid mega-menus and cluttered toolbars
Hick's → progressive disclosure, simplified menus. Classic exam pairing.
Miller's Law · George Miller, 1956
Working memory holds approximately 7 (±2) items at once
Capacity ≈ 7 ± 2 chunks
(range: 5–9 items)
Beyond ~7 items, things get dropped from working memory. Chunking helps by grouping items into meaningful units.
Practical implications:
Practical implications:
- Keep menus to ≤7 items where possible
- Chunk phone numbers: 077-123-4567 not 0771234567
- Group related controls together
- Don't ask users to remember things between screens
Miller's Law → chunking. 7±2 is the magic number.
Topic 6
Norman's Interaction Model
Two phases describe every user interaction: Execution and Evaluation.
Phase 1
Execution
User side — moving from intention to action:
- Form a goal — what do I want to achieve?
- Plan — what actions will achieve it?
- Specify — which exact actions?
- Execute — perform the actions
Phase 2
Evaluation
User side — interpreting what happened:
- Perceive — observe system state
- Interpret — make sense of what changed
- Evaluate — did I achieve my goal?
The Two Gulfs
⚡ Gulf of Execution
The gap between the user's intended action and what actions are actually available in the system.
Large gulf: Hidden save button, no visible way to undo.
Small gulf: Visible, labelled controls that match user intent.
Large gulf: Hidden save button, no visible way to undo.
Small gulf: Visible, labelled controls that match user intent.
Gulf of Execution = "Can I do what I want to do?"
👁 Gulf of Evaluation
The gap between the system's state and the user's ability to perceive and understand it.
Large gulf: No save confirmation — user doesn't know if it worked.
Small gulf: "Saved ✓" toast — clear, immediate feedback.
Large gulf: No save confirmation — user doesn't know if it worked.
Small gulf: "Saved ✓" toast — clear, immediate feedback.
Gulf of Evaluation = "Can I tell what happened?"
Remember: Both gulfs relate to design principles
| Gulf | Reduced by… | Related principle |
|---|---|---|
| Execution | Visible controls, affordances, good mapping | Visibility, Affordance, Mapping |
| Evaluation | Immediate, clear feedback; status indicators | Feedback, Visibility of system status |
Topic 7
Human Error Types
Understanding error types helps design better prevention and recovery.
Reason / Norman
Slips
Right goal, wrong action.
User knows what to do but executes it incorrectly — usually automatic actions that go wrong.
User knows what to do but executes it incorrectly — usually automatic actions that go wrong.
- Clicked Delete instead of Save
- Typed wrong key while distracted
- Poured coffee into wrong cup
Correct intent → Wrong execution
Fix: undo button, distinct button placement, confirmation dialogs.
Reason / Norman
Mistakes
Wrong goal entirely.
User has a flawed mental model and chooses the wrong action intentionally — they just don't know it's wrong.
User has a flawed mental model and chooses the wrong action intentionally — they just don't know it's wrong.
- Deleted file because user thought it was a duplicate (it wasn't)
- Applied wrong format because they didn't understand options
Wrong plan → Wrong execution
Fix: better feedback, real-world match, error messages that teach.
Norman
Mode Errors
Wrong action for the current mode.
User believes the system is in mode A and acts accordingly — but it's in mode B.
User believes the system is in mode A and acts accordingly — but it's in mode B.
- Typing with Caps Lock on
- Vim editor (insert vs command mode)
- Drawing tool — select mode vs draw mode
Right action → Wrong mode
Fix: clear mode indicators, minimise modes, make current mode obvious.
Error Prevention vs Recovery
| Prevention | Recovery |
|---|---|
| Stop errors before they happen | Let users undo / fix errors |
| Constraints, confirmation, validation | Undo, informative messages |
| Better — no harm done | Essential when prevention fails |
Prevention is better than recovery — Nielsen heuristic #5.
Forgiving Interfaces
Allows users to make mistakes without severe consequences. Users feel safer exploring.
Techniques: auto-save, soft delete (30-day trash), undo history, version history, confirmation before irreversible actions.
Techniques: auto-save, soft delete (30-day trash), undo history, version history, confirmation before irreversible actions.
Topic 8
Evaluation Methods
Different methods for different stages and purposes — no single method catches everything.
Inspection
Heuristic Evaluation
3–5 experts review against Nielsen's 10 heuristics. No users. Fast and cheap. Finds ~75% of problems. Good for early design stages.
Inspection method = expert review. ≠ user testing.
Inspection
Cognitive Walkthrough
Experts simulate user reasoning step-by-step through tasks. Focuses on learnability for first-time users. Asks: will user know what to do? See the control? Understand feedback?
User Testing
User Testing
Real users do real tasks. Most reliable method. Measures: task completion rate, time on task, error rate, satisfaction (SUS). 5 users find ~85% of issues.
SUS = 10-item questionnaire scored 0–100. Above 68 = above average.
User Testing
Think-Aloud Protocol
Users verbalize thoughts while using the system. Reveals confusion, mental models, expectations in real time. Very powerful for qualitative insight.
Comparison
A/B Testing
Two design variants shown to different user groups. Measures real behavior at scale — not opinions. AKA split testing. Best for final design optimization.
Observation
Eye-Tracking
Tracks where users look. Heatmaps show what grabs attention, what gets missed. Objective data on visual focus. Used for layout, hierarchy, and ad placement.
Prototype
Wizard of Oz
Human secretly performs system tasks while user thinks it's real. Tests complex AI or expensive features before building them. e.g. test a chatbot with a human typing the responses.
Formative vs Summative
| Formative | Summative |
|---|---|
| During design | After design |
| To improve the product | To assess final quality |
| Iterative, ongoing | End-of-project benchmark |
| Heuristic eval, think-aloud | Controlled study, SUS score |
"To improve" = formative. "To measure final quality" = summative.
Topic 9
20 Interface Types
The textbook covers exactly 20 types. Know each one's defining characteristic.
#1
Command (CLI)
Typed text commands. Powerful for experts, high learning curve. Good for visually impaired users (screen readers). e.g. Terminal.
#2
Graphical (GUI / WIMP)
Windows Icons Menus Pointers. The dominant desktop paradigm since Xerox PARC / Apple Mac.
#3
Multimedia
Combines text, image, audio, video, animation. Rich communication of complex content.
#4
Virtual Reality (VR)
Illusion of participation in a fully synthetic 3D environment. Immersive, not observational. Headsets, gloves.
#5
Web
Browser-based interfaces. Cross-platform access, hyperlinks. Governed by web standards.
#6
Mobile
Touchscreen, GPS, accelerometer, camera. Limited screen. Fat-finger problem. Always-on connectivity.
#7
Appliance
Dedicated single-purpose devices: microwave, ATM, washing machine. Simple inputs + limited display.
#8
Voice (VUI)
Speech input/output. Limitation: struggles with accent/dialect variability. No visual feedback.
VUI main weakness = accents/speech variability.
#9
Pen
Stylus-based: handwriting, sketching, annotation. Tablets, e-readers, signature pads.
#10
Touch
Direct finger interaction. Natural, intuitive. Limitation: lacks tactile feedback vs physical buttons.
Touch limitation = no tactile feedback.
#11
Gesture
Natural hand/body movements (swipe, pinch). Challenge: discoverability — users don't know available gestures.
#12
Haptic
Tactile feedback via vibration or force. Smartphone vibration, ultrahaptics, force-feedback joysticks.
#13
Multimodal
Combines 2+ input channels (voice + gesture, touch + speech). Common for accessibility. Kinect is an example.
#14
Shareable
Multiple users simultaneously. Interactive tabletops, large displays, multi-touch surfaces.
#15
Tangible
Physical objects manipulated to control digital content. Challenge: mapping physical actions to digital effect.
#16
Augmented Reality (AR)
Overlays virtual content on the physical world via camera. e.g. Pokémon Go, IKEA Place, surgical AR.
AR ≠ VR. AR overlays real world. VR replaces it.
#17
Wearables
Smartwatches, fitness bands, AR glasses, smart clothing. Challenge: tiny display + limited input.
#18
Robots & Drones
Embodied physical agents in the real world. Controlled via gesture, voice, or app. Remote operation.
#19
Brain-Computer (BCI)
Neural input — reads brain signals (EEG). Research + assistive tech. Spell-by-thought systems.
#20
Smart
Context-aware, adapts via AI/sensors (location, activity, time). Smart thermostats, predictive search.
Topic 10
Prototyping
Build to learn — prototypes test ideas before expensive full development.
Low-Fidelity
Lo-Fi Prototypes
Quick, cheap, easily changed. Unfinished look invites feedback — users feel free to critique.
- Paper sketches and post-it notes
- Card-based prototypes (one card = one screen)
- Storyboards (comic-strip sequence)
- Wizard of Oz technique
Lo-fi = explore ideas. Sketching doesn't need artistic skill — practice simple symbols.
High-Fidelity
Hi-Fi Prototypes
Looks and behaves close to the final product. Built in Figma, Axure, Balsamiq, Moqups.
- Interactive wireframes linked to design pattern libraries
- Real assets (fonts, colors, icons)
- Clickable user flows
Risk: stakeholders may think design is final and resist further changes.
Hi-fi risk = people think it's done. Lo-fi advantage = invites change.
Comparison
| Low-Fidelity | High-Fidelity |
|---|---|
| Paper, post-its, sketches | Figma, Axure, Balsamiq |
| Quick and cheap | More time and investment |
| Encourages feedback | Stakeholders think it's final |
| Tests structure and flow | Tests interaction and visual design |
| Discards easily | Harder to change |
Prototype types
Storyboard
Visual comic-strip sequence of user interactions. Generated from a scenario broken into steps. Shows context, emotion, and motivation.
Card-Based
One card = one interaction step/screen. Cards arranged in sequence = user flow. Quick to rearrange.
Wizard of Oz
Human secretly drives the system while user thinks it's real. Tests expensive/complex features cheaply before building.
Topic 11
UX Process Artefacts
Personas, scenarios, storyboards — tools for understanding and communicating about users.
Core artefact
Persona
Fictional but realistic representation of a typical user. Built from real user research. NOT a specific real person — a composite archetype.
Contains: name + photo, demographics, goals, pain points, behaviours, tech comfort, sample scenario.
Contains: name + photo, demographics, goals, pain points, behaviours, tech comfort, sample scenario.
Personas guide ongoing design: "Would [Persona] find this helpful?" Aligns cross-functional teams.
Narrative artefact
Scenario
Short narrative story about a persona achieving a goal in a context. Written in everyday language. About the persona's experience, not UI solutions.
Scenario ≠ Use Case — Use case = technical function list. Scenario = human story.
Scenario ≠ Use Case — Use case = technical function list. Scenario = human story.
Scenarios make requirements concrete. They inform what to prototype.
Visual artefact
Storyboard
Turns a scenario into a visual comic-strip. Each frame = one scene of the interaction. Shows emotion, context, and environment — not just UI.
Agile artefact
User Story
Short need statement in persona's voice:
As a [user type],
I want to [action],
So that [benefit].
Shorter than scenarios. Drives sprint planning in Agile.I want to [action],
So that [benefit].
Technical artefact
Use Case
Technical blueprint listing steps between user (actor) and system. Includes preconditions, main flow, alternate flows, postconditions.
Scenario ≠ Use Case ≠ User Story
Scenario ≠ Use Case ≠ User Story
Key comparison
| Artefact | Focus | Length |
|---|---|---|
| Scenario | User experience, emotions | Paragraph |
| User Story | User need | 1–2 sentences |
| Use Case | System functions | Structured list |
| Storyboard | Visual journey | Frames/panels |
Task Analysis
Hierarchical Task Analysis (HTA)
Breaks user activities into a hierarchy of goals, sub-goals, and operations — like a tree structure. Reveals pain points and design opportunities.
Top-level goal at root → sub-goals as branches → individual operations at leaves.
Top-level goal at root → sub-goals as branches → individual operations at leaves.
Topic 12
Data Gathering & Analysis
How to collect and make sense of user data. Combining methods gives the richest picture.
Gathering methods
Interviews
| Type | Key trait |
|---|---|
| Unstructured | No script. Rich, not replicable. |
| Structured | Fixed script. Replicable, less deep. |
| Semi-structured | Best of both. Recommended. |
| Focus groups | Group dynamics; debate reveals issues. |
Semi-structured = best balance. Focus groups ≠ interviews.
Observation
- Direct: watch users live (lab or field)
- Indirect: diaries, logs, video, analytics
- Field = natural context, richer insight
- Lab = controlled, replicable
Simple framework: Person / Place / Thing
Full (Robson): Space, Actors, Activities, Objects, Acts, Events, Time, Goals, Feelings
Full (Robson): Space, Actors, Activities, Objects, Acts, Events, Time, Goals, Feelings
Other Methods
- Questionnaires: Open (free text) or Closed (yes/no, scale)
- Studying documentation: background without consuming stakeholder time
- Researching similar products
- Diaries: indirect, longitudinal
- Cultural probes
Combining methods = triangulation = highly productive.
Analysis: Quantitative vs Qualitative
Numbers
Quantitative Analysis
- Expressed as numbers
- Mean = sum ÷ count
- Median = middle value when ranked
- Mode = most frequent value
- Percentages, standard deviation
- Tools: Excel, SAS, SPSS, R
Visualizations are our "universal language" for quantitative data.
Themes
Qualitative Analysis
- Expressed as themes, patterns, stories
- Inductive: themes emerge from data (bottom-up)
- Deductive: pre-set categories applied to data (top-down)
- Critical incident analysis
- Tools: NVivo, Dedoose, ATLAS.ti
Data types (important for visualization)
| Type | Subtype | Example |
|---|---|---|
| Qualitative | Nominal (no order) | Gender, colour, country |
| Qualitative | Ordinal (ordered) | A/B/C grades, satisfaction 1–5 |
| Quantitative | Discrete (integers) | Number of children, errors made |
| Quantitative | Continuous (floats) | Height, time, temperature |
Ethics in data gathering
Ethical research requires: ethical approval before starting, informed consent from participants, right to withdraw, anonymisation, and responsible use of data especially eye-tracking and behavioral data.
Topic 13
AgileUX & Lifecycle
Combining interaction design with agile development — balance research with speed.
Key idea
AgileUX
Integrates IxD + Agile. Requirements evolve and re-prioritise (not fixed up-front). Focus on product as deliverable, not design documents. Cross-functional teams.
Three practical areas: user research, aligning work practices, documentation.
Three practical areas: user research, aligning work practices, documentation.
AgileUX ≠ skip design. All UX techniques still relevant — timing and depth need planning.
Sy, 2007
Parallel Tracks
Designers work one iteration ahead of developers:
Cycle 0: Plan + gather customer data
Dev track: implement high-dev/low-UI features
Design track: design for NEXT cycle
Each cycle: design tests + gathers for n+1
Dev track: implement high-dev/low-UI features
Design track: design for NEXT cycle
Each cycle: design tests + gathers for n+1
No wasted design, timely feedback, agile flexibility. Cycle 0 = plan + data gathering.
Design Thinking (5 Stages)
Human-centered, iterative — not linear. Loop back at any stage.
1. Empathize — understand users via observation & interviews
2. Define — frame the problem clearly (point-of-view statement)
3. Ideate — brainstorm many solutions without judgment
4. Prototype — build to learn
5. Test — validate with real users → loop back
2. Define — frame the problem clearly (point-of-view statement)
3. Ideate — brainstorm many solutions without judgment
4. Prototype — build to learn
5. Test — validate with real users → loop back
First stage = Empathize. It's iterative and non-linear.
LeanUX
Build → Measure → Learn (MVP)
Build a Minimum Viable Product (MVP) — the smallest thing that tests a core assumption. Measure real user behavior. Learn. Iterate. MVPs are minimal — they're hypothesis tests, NOT the final product.
MVP ≠ final product. It tests assumptions cheaply before heavy investment.
Topic 14
Data Visualization
Turning abstract data into visual form to reveal hidden patterns and amplify human cognition.
Card, Mackinlay & Shneiderman, 1999
Definition
"Computer-supported, interactive, visual representations of abstract data to amplify cognition."
Key phrase: amplify cognition. Not just pretty charts — it enhances thinking.
Vandoni, 1989
Earlier Definition
"The process of transforming information into a visual form, enabling users to observe features not otherwise apparent."
Vandoni = reveal what was hidden. Card et al = amplify cognition. Know both authors.
The 3 Ds — what InfoVis enables
Discoveries
Find hidden patterns, trends, clusters, gaps, and outliers in data.
Decisions
Support choosing a course of action by making options and tradeoffs visible.
Explanations
Communicate insights to others in a clear, memorable visual form.
Chart types — which to use when
| Chart type | Best for |
|---|---|
| Line chart | Trends over time |
| Bar chart | Comparing values across categories |
| Pie chart | Parts of a whole (keep to ~5 slices max) |
| Scatter plot | Relationship between 2 continuous variables |
| Histogram | Distribution of a single variable |
| Heatmap | 2D density / intensity / correlation matrix |
| Treemap | Hierarchical data — area encodes value |
| Bubble (animated) | Multi-variable over time — GapMinder by Hans Rosling |
GapMinder (Hans Rosling TED talk) = animated bubble chart. Classic InfoVis exam example.
Visual Design Principles (5 + Gestalt)
Scale
Relative size signals importance and rank. Bigger = more important.
Visual Hierarchy
Guide the eye in order of importance using size, colour, and position.
Balance
Equal visual weight on both sides of an axis — symmetric or intentional asymmetry.
Contrast
Juxtapose dissimilar elements to show they are different. Draws the eye.
Gestalt — Proximity
Objects close together are perceived as a group.
Gestalt — Similarity
Objects sharing colour/shape are perceived as belonging together.
Gestalt — Closure
Mind completes incomplete shapes — we see wholes, not parts.
Gestalt — Continuity
The eye follows smooth paths rather than abrupt turns.
Visualization umbrella — 9 areas
Animation, software viz, viz environments, volume rendering, computer graphics, visual programming, image processing, VR, Scientific Viz, Information Viz.
Topic 15
Line & Circle Algorithms
Rasterization — converting continuous geometric shapes into discrete pixels on a grid.
DDA — Digital Differential Analyzer
Floating-point incremental line drawing
1. dx = x2 - x1, dy = y2 - y1
2. steps = max(|dx|, |dy|)
3. xInc = dx / steps
4. yInc = dy / steps
5. Plot rounded (x+xInc, y+yInc) at each step
- Arithmetic: Floating-point (slow)
- Weakness: Round-off errors accumulate, especially on steep lines
- Advantage: Conceptually simple to implement and understand
- Slope (m) determines stepping axis — if |m| ≤ 1, step x; if |m| > 1, step y
Bresenham's Line Algorithm · Jack Bresenham, 1962
Integer-only line drawing — faster and exact
Initial decision parameter: p₀ = 2·dy − dx
For each step along x-axis:
If p < 0: next pixel = (x+1, y), p = p + 2·dy
If p ≥ 0: next pixel = (x+1, y+1), p = p + 2·dy − 2·dx
- Arithmetic: Integer only — add and subtract
- Speed: Faster than DDA — preferred for raster hardware
- Output: Exact pixel selection, no round-off errors
Bresenham = integer = faster = preferred. DDA = float = slower. This is the #1 comparison MCQ.
Midpoint Circle Algorithm (Bresenham's Circle)
Integer arithmetic + 8-way symmetry
Start point: (x, y) = (0, r) ← top of circle
Initial decision parameter: p₀ = 3 − 2·r
For each step:
If p < 0: move East → (x+1, y), p = p + 4·x + 6
If p ≥ 0: move Southeast → (x+1, y-1), p = p + 4·(x−y) + 10
Plot 8 symmetric points per step:
(cx+x, cy+y), (cx−x, cy+y), (cx+x, cy−y), (cx−x, cy−y)
(cx+y, cy+x), (cx−y, cy+x), (cx+y, cy−x), (cx−y, cy−x)
- Starts at: (0, r) — the top of the circle
- 8-way symmetry: compute 1 octant → mirror to all 8 → full circle
- Per step: 8 reflected points plotted simultaneously
- Arithmetic: Integer only — efficient on raster hardware
Initial p = 3 − 2r. Start = (0, r). 8-way symmetry = the key efficiency trick.
DDA vs Bresenham — the comparison MCQs love
| Feature | DDA | Bresenham |
|---|---|---|
| Arithmetic | Floating-point | Integer only |
| Speed | Slower | Faster ✓ |
| Accuracy | Round-off errors | Exact ✓ |
| Complexity | Simple to understand | Slightly more complex |
| Preferred for | Teaching / learning | Real raster hardware ✓ |
Anti-aliasing
Aliasing
Jagged stair-step effect on diagonal or curved lines. Caused by representing continuous shapes on a discrete pixel grid — pixels are square, diagonals are not.
Anti-aliasing
Smooths edges by blending pixels with intermediate colours between the shape and background. Creates the illusion of a smooth edge. Technique: change pixels around edges to intermediate colours or grey scales.
Anti-aliasing = blend intermediate colours around edges to reduce stair-stepping.
Topic 16
Digital Image Processing
Algorithms that take an image as input and produce a modified image as output.
Definition
What is Image Processing?
Input: image → Algorithm → Output: image.
Improves images for human or machine interpretation. Applications include: display, editing, enhancement, restoration, compression, segmentation, object recognition.
Improves images for human or machine interpretation. Applications include: display, editing, enhancement, restoration, compression, segmentation, object recognition.
Image Processing ≠ Computer Vision (CV is higher-level understanding). IP = transformation.
Pixels & Digitization
Digital Image basics
Digitization = approximation of a real scene on a discrete grid. Each pixel holds intensity values:
Grayscale: 1 value/pixel (intensity 0–255)
RGB: 3 values/pixel (Red, Green, Blue)
RGBA: 4 values/pixel (R, G, B, Alpha/opacity)
RGBA: A = Alpha = opacity/transparency. 0 = fully transparent.
The Pipeline — memorise this exact order
1. Image Acquisition — capture the image (e.g. take a photo, scan a document)
2. Image Enhancement — improve contrast/brightness/sharpness for human use (subjective)
3. Image Restoration — model known degradation (blur, noise) and invert it to recover original
4. Morphological Processing — extract shape/structure (dilation, erosion, opening, closing)
5. Segmentation — divide image into constituent meaningful parts/regions
6. Representation & Description — extract features/attributes for computer processing
7. Object Recognition — identify and label objects in the scene
Supporting branches (not sequential steps):
↳ Colour Image Processing
↳ Image Compression (JPEG = lossy, PNG = lossless)
2. Image Enhancement — improve contrast/brightness/sharpness for human use (subjective)
3. Image Restoration — model known degradation (blur, noise) and invert it to recover original
4. Morphological Processing — extract shape/structure (dilation, erosion, opening, closing)
5. Segmentation — divide image into constituent meaningful parts/regions
6. Representation & Description — extract features/attributes for computer processing
7. Object Recognition — identify and label objects in the scene
Supporting branches (not sequential steps):
↳ Colour Image Processing
↳ Image Compression (JPEG = lossy, PNG = lossless)
Acquisition is FIRST. Recognition is LAST. Colour & Compression are branches, not pipeline steps.
Pipeline stage details
Enhancement
Boost useful features for the viewer. Contrast, sharpness, brightness. Subjective — depends on task. Example: Sobel filter for edge detection.
Restoration
Model the known degradation (motion blur, sensor noise) and mathematically invert it. More objective than enhancement.
Morphological Processing
Shape-based operations on binary/greyscale images:
Dilation = expand shapes
Erosion = shrink shapes
Opening = erode then dilate
Closing = dilate then erode
Dilation = expand shapes
Erosion = shrink shapes
Opening = erode then dilate
Closing = dilate then erode
Segmentation
Divide image into meaningful regions. Classic example: brain MRI segmented into tissue types (white matter, grey matter, CSF).
Compression
JPEG = lossy, smaller files, good for photos.
PNG = lossless, preserves every pixel, supports transparency.
GIF = lossless but 256 colours only.
PNG = lossless, preserves every pixel, supports transparency.
GIF = lossless but 256 colours only.
HCI Applications
Face recognition — security, photo tagging
Gesture recognition — Kinect, touchless UI
Number plate recognition — speed cameras
Fingerprint recognition — law enforcement
Gesture recognition — Kinect, touchless UI
Number plate recognition — speed cameras
Fingerprint recognition — law enforcement
Colour models
RGB — Additive (screens)
Red + Green + Blue light added together. Used by monitors, cameras, scanners, projectors.
R=255, G=255, B=255 = white. R=0, G=0, B=0 = black.
R=255, G=255, B=255 = white. R=0, G=0, B=0 = black.
CMYK — Subtractive (printing)
Cyan + Magenta + Yellow + Key (black).
Subtract pigments from white paper. Used in inkjet/laser printers.
K = Key plate = black ink. Not 'K for blacK' — it's the key printing plate.
Subtract pigments from white paper. Used in inkjet/laser printers.
K = Key plate = black ink. Not 'K for blacK' — it's the key printing plate.
CMYK trap: K = Key (the black plate), not an abbreviation of black. Common MCQ trick.
Topic 17
Java Swing
Java's GUI toolkit — lightweight, platform-independent, part of JFC.
Overview
What is Swing?
- Part of JFC (Java Foundation Classes)
- Built on top of AWT (Abstract Windowing Toolkit)
- Lightweight — drawn entirely in Java, not using OS native widgets
- Platform-independent — consistent look across Windows, Mac, Linux
- Package:
javax.swing(note the 'x')
Swing = lightweight + platform-independent. AWT = heavyweight + OS-native (dependent).
Class Hierarchy
Swing Inheritance Tree
Object
└─ Component
└─ Container
├─ Window
│ └─ Frame ← Dialog
└─ Panel ← Applet
JComponent (extends Container)
├─ JLabel, JList, JTable, JComboBox, JSlider
├─ AbstractButton → JButton, JCheckBox
└─ JTextComponent → JTextField → JPasswordField
→ JTextArea
Key Swing components — know each one's purpose
JTextField
Single-line editable text input. Most common form field.
JTextArea
Multi-line editable text. For larger text blocks.
JPasswordField
Masked input — extends JTextField. Hides characters.
JButton
Clickable button. Extends AbstractButton.
JLabel
Read-only text or icon. Not interactive.
JComboBox
Dropdown selector list.
JSlider
Numeric range — drag to select value.
JTable
Display tabular (grid) data.
JTree
Display hierarchical data. File system explorer style.
JColorChooser
Visual color picker dialog. RGB, HSV, swatches.
JFrame
Top-level window container. The main application window.
JMenu / JMenuBar
Menu hierarchy. Implement the MenuElement interface.
Two ways to create a JFrame
1. Association (instantiate)
JFrame frame = new JFrame("My App");
frame.setSize(400, 300);
frame.setVisible(true);
Create an object of Frame class.
2. Inheritance (extend)
class MyApp extends JFrame {
MyApp() {
setTitle("My App");
setSize(400, 300);
setVisible(true);
}
}
Subclass Frame — your class IS-A frame.
2D Transformations & Java conventions
Graphics2D + AffineTransform
Graphics2D g2d = (Graphics2D) g;
AffineTransform at = new AffineTransform();
at.translate(50, 100); // move
at.scale(2.0, 2.0); // resize
at.rotate(Math.PI / 4); // rotate 45°
g2d.setTransform(at);
Java Naming Conventions
- Java is case-sensitive — Hello ≠ hello ≠ HELLO
- Classes: UpperCamelCase —
MyFirstClass - Methods: lowerCamelCase —
myMethodName() - Variables: lowerCamelCase —
myVariable - Constants: ALL_CAPS —
MAX_VALUE
Case-sensitive: MyClass and myClass are different. Class = uppercase start.
Topic 18
Java OpenGL (JOGL)
Java binding for OpenGL — 2D and 3D graphics rendering in Java.
What is JOGL?
Java binding for OpenGL
- JOGL = Java binding for OpenGL (wrapper)
- Developed by Ken Russell & Chris Kline (former MIT graduates)
- Open-source — wraps the native OpenGL API for Java
- Used for both 2D and 3D graphics applications
- Alternative: LWJGL = Lightweight Java Game Library
JOGL = Java + OpenGL. Developers = Ken Russell & Chris Kline.
Java3D API
Required JAR files
j3dcore.jar — core Java3D API
j3dutils.jar — utility classes
vecmath.jar — vectors & matrices
Download from Oracle website. Add to project library (Project Structure → Libraries).
Three jars needed: j3dcore, j3dutils, vecmath. Know all three.
OpenGL Suffix convention
The number = how many coordinates. The letter = data type.
glVertex3f(x, y, z) → 3 coordinates, float type
glColor3f(r, g, b) → 3 values (RGB), float 0.0–1.0
glVertex2i(x, y) → 2 coordinates, integer type
glScalef, glTranslatef, glRotatef → all float
f = float. i = int. d = double. The number = argument count.
Essential JOGL methods
| Method | Purpose |
|---|---|
glBegin(GL_type) | Start defining primitives — MUST pair with glEnd() |
glEnd() | End primitive definition |
glVertex3f(x, y, z) | Specify a 3D vertex with float coords |
glColor3f(r, g, b) | Set current draw colour (0.0–1.0 per channel) |
glScalef(sx, sy, sz) | Scale transformation on all three axes |
glTranslatef(x, y, z) | Translate (move) the coordinate system |
glRotatef(angle,x,y,z) | Rotate by 'angle' degrees around axis (x,y,z) |
glClear(GL_COLOR_BUFFER_BIT) | Clear colour buffer before drawing new frame |
glLoadIdentity() | Reset current matrix to identity (no transforms) |
glEnable(GL_DEPTH_TEST) | Enable depth testing for correct 3D ordering |
glViewport(x,y,w,h) | Define the rendering area within the window |
OpenGL Drawing Primitives
GL_POLYGON
One filled convex polygon using all listed vertices. Good for simple shapes.
GL_TRIANGLES
Separate filled triangles — every 3 vertices = 1 triangle.
GL_TRIANGLE_STRIP
Efficient — shares vertices between adjacent triangles. Good for ribbons.
GL_QUADS
Filled quadrilaterals — every 4 vertices = 1 quad.
GL_LINES
Line segments — every pair of vertices = 1 line.
GL_POINTS
Individual point at each vertex.
Typical drawing pattern
// Draw a red triangle
gl.glBegin(GL.GL_POLYGON);
gl.glColor3f(1.0f, 0.0f, 0.0f); // red
gl.glVertex3f( 0.0f, 1.0f, 0.0f); // top
gl.glVertex3f(-1.0f, -1.0f, 0.0f); // bottom-left
gl.glVertex3f( 1.0f, -1.0f, 0.0f); // bottom-right
gl.glEnd();
glBegin() and glEnd() ALWAYS go together. Vertex order matters for face direction.