Journal · Interactive design
Sheep herding game: what it teaches about interactive websites
Into the Fold is a free sheep herding game that runs in your browser, on a phone or a computer. Play it for a minute first. Everything below is about why it works, what we got wrong, and what the same ideas mean for a calculator, a quote form or a product configurator on your own site.
Into the Fold. Move the mouse, or drag a finger, and the dog runs to it. The sheep keep their distance from the dog and bunch up when they are worried. A fold is an old word for a sheep pen. Sound starts only after you press Start, and the speaker button turns it off.
What makes a website interactive?
A website is interactive when it answers what the visitor does, straight away and in a way they can see. A price that changes as options are picked, a map that moves under a finger and a flock that runs from the dog are the same loop: an action, a visible response, and the next action.
Most of a website is read. A few parts are used: a quote calculator, a size picker, a booking form, a quiz. Those are the parts where a visitor stops reading and starts doing, and they follow the same rules as a game. A game just makes the rules easy to see, because when it gets them wrong it stops being fun straight away.
Here are the six choices that made this one work, each with what it means for an ordinary business page.
Show the cause, right away
The dashed ring around the dog is the most important thing on the screen. It shows how far the dog’s pressure reaches, and it grows when the dog runs. Stock handlers call the space an animal keeps between itself and a threat its flight zone. Without the ring, the sheep look random: they bolt one moment and stand still the next. With it, you see the cause and the effect in the same glance, and you can start to work out why they bolted.
The same rule applies to a business page. A quote calculator that updates the price as each answer changes teaches the visitor what drives the price. One that waits for a Submit button teaches nothing until the end, and by then the visitor has to guess which answer moved the number.
A few honest rules beat a long feature list
Every sheep follows the same short list. Keep a little personal space. Turn the way your neighbours are going. When you are worried, close ranks. Run from the dog when it is close. And if a neighbour is worried, get a little worried too, so fear passes through the flock from sheep to sheep, fading as it goes.
The first three rules come from Craig Reynolds, who published them in 1987 to animate flocks of birds he called boids. None of the rules mentions a flock. The flock, the way it splits round a tree and the way it streams through a gate, comes from the rules acting on each other. That is where the depth comes from, not from extra buttons.
For a business page, the lesson is to model the real constraints rather than add options. A product configurator that knows which options cannot go together feels like talking to someone who knows the product. One that offers everything and checks at the end feels like a form.
Let the visitor set the stakes
The herd size picker was not in the first version. It went in partway through the build, after a first look at the game, as a simple question: could there be a small, a medium and a large herd? Changing the size on the start card re-spawns the flock behind the card straight away, so you see what you chose before you commit to it.
Ten sheep and forty sheep are different games. Ten scatter and have to be gathered. Forty move as one packed mass, and the trouble is at the edges.
On a business site, this is the difference between a single “Get a quote” button and a choice between a rough estimate in thirty seconds and a detailed quote in five minutes. A visitor who picks the depth has told you how much time they are giving you, and the page can respect it.
Name what the visitor is doing
At the bottom of the field, the game calls out your moves the way a shepherd calls a dog. Circle clockwise round the flock and it says “Come bye”. Anticlockwise is “Away to me”. Head straight at them and it is “Walk up”. Stop, and it is “Lie down”. When the last sheep is in, it is “That’ll do”. These are the commands handlers use at sheepdog trials.
Nobody needs the words to play. But a player who glances down learns four terms of a trade, each at the moment it means something.
Business pages can do the same. A shipping calculator can show the words “dimensional weight” next to the number they just raised. The visitor learns your vocabulary on the way to an answer, and the next conversation with your team starts further along.
Test it with something that is not you
Whoever builds an interactive page is its worst tester, because they know where not to push. So before anyone played this game, a short script did. It found the middle of the flock, worked out where a dog should stand to push the flock toward the gate, and sent the dog there, over and over. It runs without a screen and faster than real time.
The first version of the script failed every run, for its own reasons: it stood too far back from the flock to move anything. Testing the tester is part of the job.
The fixed script found a real problem. On the first field, with the small herd of ten, it penned none of them in five minutes of game time. Looking at where the sheep stood explained it. The gate opened outward into the field like a wing, and the flock kept getting caught in the corner between the open gate and the pen’s fence. A person might have played for an hour and blamed themselves. We changed the gate to a pair of half gates that swing back into the pen, and in its next run the same script penned all ten in 16.9 seconds.
The second problem was quieter. On some fields the pen sat part of the way along a wall, which left a narrow slot between the pen and the corner. Stragglers drifted in and stuck. Now every pen sits either in the middle of a wall or tucked into a corner.
A script like this can tell you something is broken or impossible. It cannot tell you something is fun, and one run proves little. On the first field with the medium herd, the same script finished in 198 seconds in one run and had not finished after six minutes in the next, with nothing about the field changed in between. That gap is the sheep’s own randomness and the script’s clumsiness.
For a business page, the equivalent is a script that fills in your quote form with a thousand combinations of answers and flags any that give a blank, a negative number or an error, before a customer finds one.
Fit the page it lives on
An interactive piece is a guest on someone else’s screen. This one makes no sound until you press Start, and the speaker button turns sound off and remembers that on this device. The bleats, the bark and the field noise under the game are recordings, cut down to about 94 kilobytes in all so the page stays light. If your device is set to dark mode, or you switch this site to dark, the field turns to dusk. If you have asked your device to reduce motion, the decorative movement stops. On a phone, the dog follows your finger and lies down when you lift it, and dragging over the field moves the dog only while a game is running, so the page still scrolls the rest of the time.
It also keeps its own messages out of the way. On a first look at the phone layout, the results card sat on top of the pen, which is the one thing a player wants to see when they finish. Now the field stops short of the scoreboard at the top and a strip at the bottom. Tips and the shepherd’s calls live in that strip, tips close with one tap, and the start and results cards move to whichever corner leaves the pen in view and fold away into the strip if you want them gone. A script now checks every field at every herd size on six screen sizes, and in the last run nothing covered the pen in any of them.
On a business site the same courtesy applies. A calculator that takes over the scroll, starts a video on its own or ignores dark mode is asking the visitor to work around it.
What this does not show
- It does not show that a game brings in customers. This page went live with no visitor numbers. Whether anyone plays it, for how long, and whether it leads to a single enquiry is unknown, and it will take weeks of traffic to say.
- It has not been tested by people. Its difficulty was checked by the script above and by simulated touch on a phone-sized screen, not by a room of players. We do not yet know whether the large herd on the last field is a good challenge or just long.
- The sound was not checked by ear before publishing. The bleats, the bark and the field noise are recordings, and the whistles are made in the browser from simple tones. Our checks confirmed that every recording decodes in the browser we tested with. None of them could listen.
- Real sheep are not this simple. A working dog reads a flock’s mood, the ground and the wind, and a real flight zone changes with the breed, how the animals have been handled and how well they know the dog. This model has one zone that grows with the dog’s speed, and nothing else.
If you want a page on your own site that visitors use rather than read, whether that is a calculator, a configurator or a training game like Back It In, tell us what it should teach.