On a learning platform, 'next lesson' and 'back to course outline' both slide the new screen in from the right, and learners report feeling lost. What is wrong, and how do you fix the navigation motion?
answer
- motion implies a map
- back must undo forward
- hierarchy versus siblings
- overlays return to their edge
- one relationship, one transition
basics
~20 sThe motion contradicts the spatial model: going back looks like going forward. Define one map for the whole product, with depth moves, sibling moves, overlays and unrelated destinations each getting their own transition, and make back reverse forward.
solid answer
~50 sEvery navigation transition implies a map of where screens sit relative to each other. Here, 'next lesson' is a sideways move between siblings, while 'back to course outline' is a move up the hierarchy. Giving both the same slide from the right tells the learner the outline is somewhere further ahead, so their mental map stops matching the product. The fix is a system-level spatial model: drilling into a child pushes forward and back is its exact reverse; moving between sibling lessons slides along one axis in their order; an overlay such as a notes sheet rises from and returns to its edge while the page stays put; switching between unrelated top-level sections uses a fade rather than a direction. Back gestures must move the same way, and the horizontal axis mirrors in right-to-left layouts.
go deeper
Recall that navigation motion implies where screens sit, and that going back must reverse the way you came in.
Explain the relationships a spatial model distinguishes (depth, siblings, overlays, unrelated destinations) and the motion each one gets.
Walk through auditing a real product's navigation paths, finding motions shared across relationships, and fixing them at system level with gestures kept in agreement.
Discuss how the system makes motion a function of the navigation relationship so product teams cannot reintroduce inconsistent directions.
## Motion draws a map When a screen slides in from the right, the learner's brain concludes that it was sitting to the right of the previous one. When it slides back out to the right, it has returned there. Navigation motion therefore builds a **spatial model**: an implicit map of where each screen lives. This map is useful as long as it is consistent. When two different relationships share one transition, or when back does not undo forward, the map breaks, and people report exactly what these learners report: they feel lost. ## Diagnosing the scenario The learning platform has three levels of place: the course **outline**, the individual **lessons** under it, and top-level sections such as the catalogue and the learner's profile. | Move | Relationship | Current motion | What it implies | |---|---|---|---| | Outline to lesson | Down the hierarchy (drill in) | Slide from right | Forward, deeper: correct | | Lesson to next lesson | Between siblings | Slide from right | Along the row, onward: acceptable | | Lesson to outline | Up the hierarchy (back) | Slide from right | Further forward: wrong | The third row is the defect. The learner went "in" to reach the lesson and now sees the outline arrive from the same side as every onward step, so the outline appears to be yet another screen ahead. After a few lessons, their sense of depth is gone. ## A spatial model for the whole product The fix is not to tweak one transition but to define, once, which motion goes with which **relationship**: - **Depth (parent to child).** Drilling in moves forward along one axis; going back is the **exact reverse** of the forward motion. Back to the outline must leave the way the lesson came in. - **Siblings (lesson to lesson, tab to tab).** Movement along a single axis in the siblings' order: the next lesson arrives from the trailing side, the previous one from the leading side. A jump from lesson 2 to lesson 7 still moves in the correct direction. - **Overlays (notes sheet, filter panel).** The layer arrives from the edge it docks to and returns there, while the page underneath stays still. This says "a temporary layer over where you are", not "a new place". - **Unrelated destinations (catalogue, profile).** These have no spatial relationship, so a directional slide would invent one. A crossfade, or a quick replacement, is honest. - **Same object, closer look.** A container or shared-element transition, which is a separate choreography decision. ## Rules that keep the map consistent 1. **Back undoes forward.** Whatever path brought the learner in, the reverse takes them out, including via the system back gesture. 2. **Gestures agree with motion.** If the outline is "behind" the lesson, the swipe that returns to it must move in the direction the outline lies. A swipe that fights the animation is worse than no animation. 3. **Direction follows reading order.** In right-to-left locales, the horizontal axis mirrors, so "next" arrives from the other side. 4. **Motion is keyed by relationship, not by screen.** Teams pick "drill in", "sibling" or "overlay" from the system, not a direction per screen; this is what stops the same defect recurring on the next feature. 5. **Deep links respect the map.** A learner who lands directly on lesson 5 and presses back should go to the outline with the reverse of a drill-in, not an arbitrary transition. ## Auditing an existing product A practical way to find every inconsistency: 1. List each navigation path: source screen, destination, and the relationship between them. 2. Record the transition each path actually plays, including the back path. 3. Flag any relationship that uses more than one motion, and any motion used for more than one relationship. 4. Check that each forward motion has its exact reverse on back. The audit usually turns up the reported defect plus several quieter ones, such as overlays that slide the whole page or top-level tabs that slide as if they were ordered siblings. ## Common mistakes - Choosing a direction per screen for visual variety. - Treating "back" as another forward move with a different label. - Sliding between unrelated top-level sections, inventing an order that does not exist. - Animating overlays as full-page pushes, so a temporary panel feels like a new place. - Mirroring the layout for right-to-left languages but not the navigation motion.
- Should switching between the catalogue and the profile, two top-level tabs, slide left and right?Usually not. Top-level destinations are peers with no meaningful order or depth, so a directional slide invents a spatial relationship that does not exist. A crossfade or a quick replacement is honest. Sliding makes sense for siblings that have a real order, such as lessons in a module.
- A learner arrives on lesson 5 from a shared link and taps back. What should the motion do?Take them to the lesson's parent, the course outline, using the reverse of the drill-in transition. The learner never saw the outline, but the map still says the outline sits behind the lesson, and every later drill-in will match that map.
It is like a building's corridors: if you walked through a door on your left to enter a room, you expect to leave through that same door, not to find a new doorway on the right leading onward.
saying these in an interview costs you the question
- Picks a slide direction per screen for visual variety.
- Treats back as another forward move with its own animation.
- Slides between unrelated top-level sections as if they were ordered.
- Animates a temporary overlay as a full-page push.
- Mirrors layouts for right-to-left languages but not navigation direction.