← VCE Software Development U3O2

UX characteristic: affordance

When the look of a control signals how it can be used, such as a raised button that looks pressable or a slider handle that looks draggable. Clear visual cues make actions obvious.

Part of: VCE Software Development - U3O2 - Analysis and Design — Module 104, QCE Digital Solutions Unit 1 — Understanding Digital Problems — Module 55, QCE Digital Solutions Unit 1 — User Experiences and Interfaces — Module 5, QCE Digital Solutions Unit 2 — Data-Driven Problems and Solution Requirements — Module 77

Understanding UX characteristic: affordance in VCE Software Development U3O2

What it does: A range input is drawn with a handle on a track, which signals that the handle can be dragged to change the value. Changing the cursor to a pointing hand when hovering tells the user the element is clickable, which is an affordance cue. Affordance is when the look of a control signals how it can be used. A raised, shadowed button looks pressable. Good affordance makes actions obvious from the design itself, so no manual is needed. Links usually use colour or an underline as a visual cue. Without a cue, users may not realise the text is clickable.

Common mistakes: A default arrow cursor gives no cue that the button can be clicked. cursor: pointer; shows the hand icon, which signals that the control is clickable. A div does not look or behave like a button, so it has no affordance for pressing. The control should use a <button> element (and the closing tag must match).

Class: _____________________  ·  Name: _____________________  ·  Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add UX characteristic: affordance to a class →

This module's key terms are also in a printable crossword (Modules 86–109) and word search (Modules 86–119).

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning
Duo
A button has a raised look with a shadow and a clear label. Which UX characteristic does this show?
Affordance: the look signals it can be pressedInteroperability: the button works across systems
Matches
<div style="background: blue; color: white;">Submit</div> (flat box with no button cues, used to submit a form)
↓
A flat box with no shadow, border or hover effect does not look pressable, so the affordance is weak and users may not realise it is a button.
Applying
Meanings
Term
affordance
Meaning
When the look of a control signals how it can be used, such as a raised button that looks pressable or a slider handle that looks draggable. Clear visual cues make actions obvious.
Practice
<style>
Testing
Gaps
button { cursor: ; }
Check Answer
Spots
1button {
2 cursor: default;

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

The 'Chambered Nautilus' badge — File Explorer, one of Cloodit's 106 collectible badges
Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy
Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games
Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print
Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Add to class →

Quick Questions

1. A button has a raised look with a shadow and a clear label. Which UX characteristic does this show?
A. Affordance: the look signals it can be pressed ✓
B. Interoperability: the button works across systems
Affordance is when the look of a control signals how it can be used. A raised, shadowed button looks pressable.
2. Which statement about affordance is correct?
A. Visual cues show the user how a control can be used ✓
B. Users must read a manual to find out how a control works
Good affordance makes actions obvious from the design itself, so no manual is needed.
3. A slider has a round handle on a track. What does the handle's look suggest?
A. It can be typed into like a text box
B. It can be dragged along the track ✓
A handle that looks grabbable signals dragging. This is a visual cue that supports affordance.
4. A web page shows a link as plain black text with no underline or colour change. Which is the best description?
A. Strong affordance: plain text is always clear to users
B. Poor affordance: nothing signals that it can be clicked ✓
Links usually use colour or an underline as a visual cue. Without a cue, users may not realise the text is clickable.
5. A flat grey rectangle with no border or label is actually a Submit button. What is the problem?
A. It has weak affordance, so users may not see it is pressable ✓
B. It has strong affordance because it is simple and clean
A control that does not look pressable hides its function. Adding a border, shadow, colour or label improves affordance.

Match the Pairs

button { box-shadow: 0 3px 6px grey; border-radius: 6px; } → A visual cue (shadow and rounded edges) that makes a button look raised and pressable, which is affordance
a { color: blue; text-decoration: underline; } → Link styling that signals the text can be clicked to go somewhere
A slider handle should look draggable so the user knows they can move it along the track → <input type="range" min="0" max="100">
A pointer cursor on hover is a visual cue that an element can be clicked → .card:hover { cursor: pointer; }
<div style="background: blue; color: white;">Submit</div> (flat box with no button cues, used to submit a form) → A flat box with no shadow, border or hover effect does not look pressable, so the affordance is weak and users may not realise it is a button.
<p style="color: blue; text-decoration: underline;">Not a link</p> → Plain text styled like a link is a misleading affordance. It looks clickable but does nothing, which frustrates users.

Key Term

affordance
When the look of a control signals how it can be used, such as a raised button that looks pressable or a slider handle that looks draggable. Clear visual cues make actions obvious.

Fill in the Blanks

1. button { cursor: pointer; }
Hint: Type the cursor value that shows a hand over a clickable control.
2. <input type="range" min="0" max="10">
Hint: Type the input type that draws a slider with a draggable handle.
3. a { color: blue; text-decoration: underline ; }
Hint: Type the value that draws a line under link text so it looks clickable.
4. span { color: blue; text-decoration : underline; }
Hint: Type the CSS property name that makes plain text look like a link, which is a misleading cue.
5. button { box-shadow: 2px 2px 4px grey; }
Hint: Type the CSS property that gives a button a raised look so it appears pressable.

Spot the Error

Question 1
A button {
B cursor: default;
C border: 2px solid #333;
D box-shadow: 2px 2px #999;
E }
Line B — A default arrow cursor gives no cue that the button can be clicked. cursor: pointer; shows the hand icon, which signals that the control is clickable.
Question 2
A <div type="submit">
B Send
C </button>
Line A — A div does not look or behave like a button, so it has no affordance for pressing. The control should use a <button> element (and the closing tag must match).
Question 3
A <label>Volume</label>
B <input id="vol"
C type="text" max="10">
Line C — A text box does not show a draggable handle, so it does not signal sliding. A slider needs type="range" so the handle looks draggable.
Question 4
A a {
B color: blue;
C text-decoration: none;
D }
Line C — Removing the underline removes a key visual cue that text is a link. It should be text-decoration: underline; so users know it can be clicked.
Question 5
A p:hover {
B background: #0057b8;
C }
Line A — The hover style should target the button so it changes when the pointer is over it, signalling it can be pressed. The selector should be button:hover.

Student with a class code? Join your class →