UX characteristic: affordance

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

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

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

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

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

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1button { box-shadow: 0 3px 6px grey; border-radius: 6px; }		ALink styling that signals the text can be clicked to go somewhere
2a { color: blue; text-decoration: underline; }		B.card:hover { cursor: pointer; }
3A slider handle should look draggable so the user knows they can move it along the track		CA visual cue (shadow and rounded edges) that makes a button look raised and pressable, which is affordance
4A pointer cursor on hover is a visual cue that an element can be clicked		D<input type="range" min="0" max="100">
5<div style="background: blue; color: white;">Submit</div> (flat box with no button cues, used to submit a form)		EA 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.
6<p style="color: blue; text-decoration: underline;">Not a link</p>		FPlain text styled like a link is a misleading affordance. It looks clickable but does nothing, which frustrates users.

Definitions

affordance

Fill in the Blanks

Complete each line of code by filling in the missing parts.

button { cursor: _______; }

a { color: blue; text-decoration: _________ ; }

span { color: blue; _______________ : underline; }

button { __________: 2px 2px 4px grey; }

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

A button {

B cursor: default;

C border: 2px solid #333;

D box-shadow: 2px 2px #999;

E }

Question 2

A <div type="submit">

B Send

C </button>

Question 3

A <label>Volume</label>

B <input id="vol"

C type="text" max="10">

Question 4

A a {

B color: blue;

C text-decoration: none;

D }

Question 5

A p:hover {

B background: #0057b8;

C }

Answer Key

UX characteristic: affordance

Section A: Quick Questions

A — Affordance: the look signals it can be pressed

A — Visual cues show the user how a control can be used

B — It can be dragged along the track

B — Poor affordance: nothing signals that it can be clicked

A — It has weak affordance, so users may not see it is pressable

Section B: 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.

Section C: Definitions

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.

Section D: Fill in the Blanks

button { cursor: pointer; }

<input type="range" min="0" max="10">

a { color: blue; text-decoration: underline
; }

span { color: blue; text-decoration
: underline; }

button { box-shadow: 2px 2px 4px grey; }

Section E: Spot the Error

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.

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).

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.

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.

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.