01What it is
A daily word game where you match words into families with the same ancestor roots but have to watch out for red herrings that have no connection.
02Why I built this
Since the rise of Wordle, Connections, and the other NYT games, I've noticed a proliferation of sloppily designed short-form puzzle games cluttering up my internet.
I play plenty of them myself and actually really like the game ideas. But it has always bothered me how many games (often AI-generated) stop at the concept. The puzzle technically works, but the user experience is lackluster.
With No Connections, I focused on how the game feels to play—fine-tuning the little moments of playful interactions to engineer a delightful experience.
03Animations
My philosophy is that you shouldn't notice the animations while you play. You should only miss them if they were gone. Below are some basic and preliminary implementations that will perhaps better demonstrate the experience I am trying to evoke.
This is how most basic UI you can get. It technically works but feels disjointed.
Much more enjoyable. Each word tile slides into the spot it will take on the family card, a significant improvement from the first version. The text still needs work, though… it abruptly blinks into place instead of moving there.
The words line up, squish into each other and settle into one card. Then they glide in toward the middle and shrink into place, while the family name floats up and fades in on top. Ah…
The text on the card changes in place, with no motion at all.
The card turns sideways, then goes back the way it came. It slows down right at the edge, so for a moment you're staring at a thin sliver, and the whole thing looks more like a wobble than a flip.
Much smoother. The card turns right through its edge instead of stopping there, so it never sits as a sliver. It takes 360ms, eases in and then out, and lifts a little on the way (it grows 3%, casts a shadow and darkens by 20%). A card doesn't pause on its edge when you flip it over in real life, so it shouldn't do so here either.
None of these animations are meant to be showy. They could bounce and spin, but each one does just what you'd expect, plus a tiny bit of delight, and then gets out of the way. Any more and they'd pull attention away from the actual game.
04Feature Discovery
How can we teach people the app without detailed, wordy instructions? Don't use written language at all.
To reduce visual clutter, the definition is hidden on the back side of the family card. But if you don't know to tap the card, you'd never find it, and you'd miss the best part. The whole point of the game is learning where these words come from, after all. Instead, we visually nudge users to try something if they haven't organically discovered it themselves.
Two little nudges in one second, tilting 18 degrees and lifting each time. In the game it waits three seconds first, and does it again on every family card until you "learn" this new feature. It's designed to be anthropomorphic, like the little nudge you'd give a friend to get their attention.
05Feedback
Wrong answer
When you miss, the tiles just drop back to unpicked and sit there. No motion at all, and the message stays plain black, so you have to actually read it to realize something went wrong.
When you miss, the tiles give a quick little shake (300ms, 6px each way, then 4px), the message turns red, and the tiles stay picked so you can fix your guess instead of starting over. Red plus a shake tells you something's wrong before you've read a single word. I'll give Connections credit for at least doing the shake part already.
Shuffle
The words just swap places where they stand. It's so sudden you can't tell whether the shuffle did anything at all unless you pay close attention.
Now every tile slides to its new spot (300ms, easing out), so you can actually see the board get shuffled. Hit it again mid-slide and the tiles just head off from wherever they are.
The ending
The results just replace the board in one frame, and you lose track of where everything went.
A little better: the last family joins on the board first, then the results fade in over it. You still can't see where the loners went.
A short pause (400ms), then the loners get their gray stripes (300ms), so you can see which words were the red herrings. Then everything slides into place on the results screen (420ms), with your time, the Share button and the notes fading in along the way.
More coming soon!
