Interaction design and prototyping

About this stage

Before this stage Stage 6: UI design and design systems

Learning outcomes

• Use affordances, signifiers and feedback so actions are obvious and confirmed.
• Design forms and validation that prevent and explain errors.
• Apply motion purposefully and respect reduced-motion preferences.
• Build and evaluate a realistic prototype before implementation.

Lessons

The lessons in this stage are being written. Lessons marked “In writing” are listed so you can see the full scope; they are never counted towards your progress. The resource library and glossary cover these topics in the meantime.

1. 1

   Affordances and signifiers In writing

   How people know what they can do.

   In writing 25 min
2. 2

   Feedback and system status In writing

   Keeping people informed.

   In writing 30 min
3. 3

   Interaction patterns and mental models In writing

   Matching what people expect.

   In writing 30 min
4. 4

   Navigation behaviour In writing

   Back buttons, deep links and preserving state.

   In writing 25 min
5. 5

   Microinteractions In writing

   Triggers, rules, feedback and loops.

   In writing 25 min
6. 6

   Forms and validation In writing

   Labels, input types, inline validation and error recovery.

   In writing 40 min
7. 7

   Motion principles and reduced motion In writing

   Duration, easing and when to turn motion off.

   In writing 30 min
8. 8

   Transitions and animations In writing

   Showing relationships between states.

   In writing 25 min
9. 9

   Prototyping realistic user flows In writing

   Prototypes good enough to test with.

   In writing 35 min
10. 10

    Avoiding confusing interactions In writing

    Hidden gestures, mystery icons and other traps.

    In writing 25 min
11. 11

    Evaluating prototypes before implementation In writing

    Reviews and quick tests before code.

    In writing 30 min

Practise with a project