Which best describes the concept of 'affordance' in UI design?
AThe visual response a system gives immediately after a user action
BThe set of visual properties that signal to a user how an element can be interacted with
CThe consistent appearance of interactive elements across a product
DThe error or disabled state of a UI component
Affordance describes the perceived interaction possibilities of an element — a raised button affords pressing, an underlined link affords clicking, a slider affords dragging. If a UI element does not look like it can be interacted with, users will not try, regardless of whether it is technically functional. Feedback is the system's response after action; affordance is the signal before it.
Question 2 True / False
A visually beautiful user interface is necessarily also a usable one.
TTrue
FFalse
Answer: False
Aesthetic quality and interaction quality are distinct dimensions. A UI can be visually polished yet have confusing navigation, ambiguous affordances, or missing feedback states that make it difficult to use. The reverse is also true — a plain but well-structured UI can be highly usable. Both dimensions must be actively designed.
Question 3 Short Answer
List the interactive states a button typically needs to account for in a well-designed UI component.
Think about your answer, then reveal below.
Model answer: Default (idle), hover, active/pressed, focused (keyboard), disabled, and optionally loading or success states.
Each state communicates something different to the user: hover confirms the element is interactive; active/pressed confirms the click is registered; focus supports keyboard navigation and accessibility; disabled signals unavailability without removing the element. Omitting states — especially focus and disabled — creates accessibility failures and user confusion.