Stop 06 · Interaction Design & Micro-interactionsTopics · 8/9

Motion Design Basics

In short

When a screen slides in from the right, your brain thinks 'I moved forward'. Motion quietly tells people where things came from and where they went. Used well, it's a map without words.

Using motion deliberately to communicate spatial relationships and hierarchy — a screen sliding in from the right implies 'forward', helping users build a mental model of where they are in an app.

The jaadu walks onto a small stage from behind a curtain while the audience watches.

Think of it like this

Actors entering the stage

In a college play, actors enter from the wings and exit the same side when they go back home. The audience never gets confused about who went where. Screens should enter and leave the same way, so people keep their bearings.

Watch it happen

Navigation as a stack of screens

push(Home)

Home

Top of the stack is coloured

1/5You start on Home. It's the bottom of the stack.

The big ideas

What you need to know

Direction means something

Forward slides in from the right, back slides out to the right. Keep it consistent across the app.

Expand from the source

When a card opens into a full page, grow it from the card. People see where the content came from.

Guide attention

Motion pulls the eye. Animate the one thing you want noticed, not five things at once.

Respect reduced motion

Some people get dizzy from big movements. Offer gentle fades when their device asks for reduced motion.

Save yourself the pain

Common mistakes

Oops

Using random transitions: slide here, flip there, zoom somewhere else.

Do this instead

Define a small set of transitions with clear meanings and reuse them everywhere.

Oops

Ignoring the reduced motion setting.

Do this instead

Plan a calmer version of each big animation, usually a quick fade, for people who turn motion down.

Your mission

Prototype a navigation flow

~30 min

Quick check

A user taps a product card and the detail page grows out of that card. What does this motion communicate?

Go deeper

1Map out how screen transitions in an app you use communicate navigation direction.
2Design a transition between 2 screens that reinforces a clear spatial relationship.
3Learn why consistent transition direction throughout an app matters for a coherent mental model.