Theory
The button nobody knew they could press
A FestConnect tester stares at the screen. The 'Register' text is right there, but flat, grey, unadorned: it does not LOOK tappable, so they never tap it. They tap it, wait, nothing seems to happen, so they tap 4 more times: and accidentally register 5 times.
Two failures, both about INTERACTION: the button did not INVITE a tap, and it did not CONFIRM the tap landed. Interaction design is the craft of the conversation between user and product, and this lesson is its 3 core principles.
Theory
Interaction design, and its first two principles
Interaction design (IxD) is designing the dialogue between a user and a product: how it behaves, responds, and guides.
Affordance: a property that suggests how something can be USED. A raised, coloured button AFFORDS pressing; underlined blue text affords clicking. The visible cue that reveals an affordance is a signifier (a shadow, a colour, an icon). Good affordances mean users know what to do without being told.
Feedback: the product's response that CONFIRMS an action happened. The button darkens when tapped, a spinner shows work in progress, a 'Registered!' message follows submit. Without feedback, users cannot tell if it worked: so they re-tap.
At a glance
The 3 named interaction-design principles
| Principle | What it does | FestConnect example |
|---|---|---|
| Affordance | Suggests HOW something can be used | A raised, coloured Register button that looks tappable |
| Feedback | Confirms an action HAPPENED | Button darkens on tap; 'Registered!' message after submit |
| User flow | The PATH from goal to completion | Open -> pick event -> fill form -> confirm -> done |
Theory
User flows: the path to done
The third principle zooms out from single controls to the whole JOURNEY. A user flow is the sequence of steps a user takes to complete a goal.
FestConnect's registration flow: open the app → pick an event → fill the form → confirm → done.
Designing a flow means: minimise the STEPS (every extra screen loses people), remove DEAD-ENDS (never trap a user with no way forward or back), and match the user's MENTAL MODEL (the order should feel natural to Rahul, not to the database). A great button is wasted if the flow around it is a maze. Flows are where interaction design meets the user's actual goal.
Quiz
A FestConnect user taps 'Submit' and the screen shows nothing: no spinner, no message, no change. Which interaction-design principle is missing, and what will the user likely do?
- Affordance is missing; the user will change the colour
- Feedback is missing; unsure if it worked, the user will re-tap, possibly submitting multiple times
- User flow is missing; the app will crash
- Nothing is missing; silence is good design
- Consistency is missing; the fonts will change
Show the answer
Feedback is missing; unsure if it worked, the user will re-tap, possibly submitting multiple times
The action produced no response, so FEEDBACK is missing: the product failed to confirm what happened, leaving the user in doubt, and the predictable result is re-tapping (the 5-times-registered bug from the hook). Option A misnames it: affordance is about whether the button LOOKS tappable (a separate issue); here the tap DID happen, it just went unconfirmed. Option C overreaches (no feedback does not equal a crash). Option D is dangerously wrong: silence after an action is a classic usability failure. Feedback's job is to close the loop: every user action deserves a visible reaction.
Think first
Affordance vs signifier
Don Norman distinguishes an affordance from a signifier. Using the Register button, explain the difference. Then tap.
Show the answer
An affordance is the possibility of an action: the button CAN be tapped (a tappable region exists). A signifier is the perceivable CUE that tells the user the affordance is there: the raised look, the fill colour, the shadow that SIGNALS 'this is tappable'. The flat grey button in the hook HAD the affordance (it was tappable) but lacked a signifier (nothing told the user so), so nobody tapped it. The design lesson: an affordance the user cannot PERCEIVE is useless: you must add signifiers so the possibility is visible. (In everyday exam usage the two are often merged, but knowing the split shows real understanding.)
Watch out
Interaction-design slips
No feedback after actions: the re-tap bug; every action needs a visible response (state change, message, spinner).
Invisible affordances: if it is tappable, make it LOOK tappable; do not hide interactivity in flat, ambiguous elements.
Bloated flows: every extra step in a flow loses users; cut steps, kill dead-ends.
Ignoring the mental model: order steps the way the USER expects, not the way the system stores data (technology-centered trap, again).
Theory
From behaviour to structure
Interaction design shaped how individual controls and flows BEHAVE. But a flow assumes the user can FIND things in the first place, and that depends on how the product's content is ORGANISED. That organisation is INFORMATION ARCHITECTURE: the next lesson: the invisible skeleton that decides whether users can navigate to the register button at all. Behaviour needs structure beneath it.
Summary
Key takeaways
- Interaction design (IxD) shapes the dialogue between user and product: how it behaves and responds.
- Affordance: a property suggesting HOW something can be used (a button that looks pressable); a signifier is the perceivable cue of it.
- Feedback: the product's response confirming an action happened; without it, users re-tap in doubt.
- User flow: the sequence of steps from goal to completion; minimise steps, remove dead-ends, match the mental model.
- An affordance users cannot perceive needs a signifier to make it visible.
- Other IxD principles: consistency, mapping, constraints, discoverability.
- Memory hook: affordance invites, feedback confirms, flow guides.