Interaction Design — Five Essentials

Feedback • Consistency • Affordance • Constraints • Mapping

1) Feedback

Immediate, perceivable system response after a user action.

Live validation (typing gives instant feedback):

2) Consistency

Similar components behave the same across contexts.

Same style Same hover/active Same feedback rules

3) Affordance

Visual cues suggest how to use the control.

Pointer cursor Raised button Slider grip Search icon

4) Constraints

Guide users to valid actions; prevent errors.

required type="email" min / max disabled until valid

5) Mapping

Clear relationship between control and effect.

64 px