ChirpDesigning the word-tile lesson: the hop, the pop, and the green flood
The most common exercise in Chirp is deceptively humble. We show you an English sentence, scatter a tray of Spanish word-tiles below it, and ask you to tap them into the right order. She drinks coffee in the morning. Tap, tap, tap: Ella bebe café por la mañana. That's it. No typing, no dropdown menus, no penalty timer. And yet an enormous amount of design work is hiding inside those taps. This post pulls the exercise apart, tile by tile, and explains the small decisions that make it feel — we hope — less like a quiz and more like a toy.
We call it the word-tile lesson internally, and it carries most of the beginner curriculum. Because a learner might do it hundreds of times a week, every micro-detail gets multiplied hundreds of times: a slightly-too-slow animation becomes a slightly-too-slow app; a satisfying tap becomes a reason to do one more lesson. When something is repeated that often, polish stops being a luxury and becomes the product.
The hop: motion that means something
When you tap a tile in the tray, it doesn't just teleport into the answer line. It hops. It arcs up and over with a spring curve — a little overshoot, a little settle — landing in the answer row with a barely-perceptible bounce. This is not decoration for its own sake. The hop does two jobs. First, it draws your eye along the exact path the word travels, so there's never a moment of "wait, where did that go?" The motion is the explanation. Second, the spring physics make the tile feel like a physical object with weight, and physical objects are more satisfying to move than abstract ones.
Getting the spring right took an embarrassing number of iterations. Too stiff and it felt robotic; too bouncy and it felt like the tile was mocking you. We tuned tension and friction until a tap felt closer to flicking a checker across a board — quick, decisive, a touch playful. The whole hop lasts a fraction of a second, fast enough that a hurried learner never waits on it, slow enough that the eye can follow. Motion in a learning app has to earn its milliseconds, and this one does.
Ghost slots: why the tray never reflows
Here's a subtle problem that plagues drag-and-arrange interfaces. When you pull a tile out of the tray, the tray now has a gap. The naive fix is to let the remaining tiles slide over to fill it. But that's a disaster for a language exercise: the tiles you're still looking for suddenly jump to new positions mid-thought, and now you're re-scanning a shuffled tray every single tap. It feels like the floor moving under you.
Our answer is ghost slots. When a tile leaves the tray, it doesn't collapse the layout — it leaves behind a faint, empty outline exactly where it was. Nothing reflows. The remaining tiles stay put, so your visual memory of "the word I want is over on the right" survives from one tap to the next. And when you tap a placed tile to send it back, it flies home to its own ghost slot, not to the end of the line. The tray becomes a stable map you can learn, instead of a slot machine that reshuffles on every pull. It's one of those design choices nobody notices when it's done right — which is precisely the point.
The pop: sound as feedback
Every tap has a voice. Placing a tile makes a soft, rounded pop; removing one makes a lighter, reversed version of the same sound. These per-tap sounds are pitched to feel warm rather than clicky, and they're quiet enough to layer without becoming noise. Audio feedback closes a loop that touch alone leaves slightly open: on a glass screen you don't feel a button press, so a sound stands in for the missing physical click. It's the difference between a keyboard that clacks and one that doesn't — the same keystroke, a completely different feeling of done.
We're careful with restraint here. Sounds are optional, they respect the system mute switch, and we resisted every temptation to add a triumphant fanfare to routine taps. A pop should be a full stop, not an exclamation mark. The big emotional payoff is saved for the end of the sentence — which brings us to the two most important moments in the whole exercise.
Feedback is a conversation. Every tap is the learner saying something, and the app has to say something back — quickly, warmly, and in proportion.
The green flood and the red shake — and why mistakes aren't punished
When you get the sentence right, the answer bar floods green from left to right, Pip does a little cheer, and a warm chime confirms it. The green-flood is generous on purpose: correctness should feel like sunlight breaking, an unambiguous, whole-screen yes. You earned it, and the interface should be as pleased as you are.
When you get it wrong, the bar gives a short red shake — a quick left-right shiver, like a head shaking gently — and a soft muted tone. And here is the decision we care about most: the message does not say "Wrong." It says "Got it" or "Not quite," shows you the correct sentence, and moves you forward. That wording is deliberate. A mistake in a language lesson is not a failure of character; it's the exact moment learning is happening. Punitive language — big red X's, harsh buzzers, scolding copy — triggers the small shame response that makes people quietly close the app. We want the opposite reflex: a stumble should feel survivable, even a little friendly, so that trying again is the obvious next move.
So the red shake is brief and never harsh; it acknowledges the miss without dwelling on it. The item quietly returns to your review queue so you'll see it again soon, and that's the entire consequence. No streak lost, no points clawed back, no lecture. The philosophy running through the whole word-tile lesson is that the interface should be on your side — the hop makes moving feel good, the ghost slots keep the ground steady, the pop confirms every choice, and even the mistakes are engineered to keep you leaning in rather than backing away. That's the real design goal hiding behind a tray of little green tiles: make the next tap feel like the easiest thing in the world.