Design conversion ideas with gamification
Gamification research, explained as plainly as we can, and turned into interface patterns for web conversion. It is built for connecting distant ideas, not for stopping at the generic tactics an AI would suggest.
Connect the dots
Combine a distant theory, demo, and stage to think beyond the usual tactics.
Learn why people act (30)
Read why people act, from motivation and progress to rewards and other people, with the research behind it.
Pick a pattern (40)
Compare live previews and check how to build each one, what to measure, and when it backfires.
Try a demo (197)
Feel the same mechanism in a playable demo.
Research findings and this site’s applications are kept separate. Working previews and demos are not evidence of conversion or revenue gains; measure on your own page.
Connect the dots
Ask an AI for conversion tactics and every site gets the same answer. Here you draw a theory, a demo, and a stage that rarely sit together, and connect them. The demo is always one no pattern has tied to that theory yet.
- Theory
- Variable reward
When rewards arrive unpredictably, people repeat the behavior more.
- Demo
- Whack-a-Mole
Turn this demo’s motion into an on-page interaction.
- Stage
Start
Make the first step light.
How would the motion of “Whack-a-Mole” put Variable reward to work at the Start stage?
It makes the AI write the obvious idea first and set it aside, then work the combination.
Fundamentals
30 lessons in 6 chapters, from the big picture to ethics and law.
1. The big picture
When do people act, and how do games create those conditions?
Fogg Behavior Model (B=MAP)
A behavior happens when motivation, ability, and a prompt meet at the same moment.
Practitioner framework
Self-Determination Theory
People keep going on their own when they feel autonomy, competence, and relatedness.
Well supported
Flow
People become absorbed when challenge matches skill and goals and feedback are clear.
Well supported
MDA Framework
Think of a game as three layers: mechanics the designer sets, dynamics that emerge in play, and aesthetics the player feels.
Practitioner framework
Octalysis (8 Core Drives)
A framework that splits what drives people into eight forces, so you can see which ones a design relies on.
Practitioner framework
Hook Model
A product model where cycling through trigger, action, variable reward, and investment turns use into habit.
Practitioner framework
Does gamification work?
Gamification is using game design elements outside games. Average effects are small to moderate and depend heavily on context and design.
Contested
2. Rewards and curiosity
When do rewards and curiosity move people, and when do they backfire?
Variable reward
When rewards arrive unpredictably, people repeat the behavior more.
Well supported
Overjustification effect
Adding contingent rewards to something people already enjoy can make them stop doing it once rewards end.
Contested
Information gap theory
A small gap between what people know and want to know makes them want to close it.
Well supported
Goal-setting theory
Specific, challenging goals lead to better performance than "do your best."
Well supported
IKEA effect
Things people build themselves feel more valuable than the same things made by others.
Limited evidence
Loss aversion
A loss tends to feel bigger than a gain of the same size.
Contested
3. Progress and momentum
Why do people who start keep going to the end?
Goal-gradient effect
People speed up as they get closer to a goal.
Well supported
Endowed progress effect
Starting people partway along makes more of them finish.
Limited evidence
Unfinished tasks (Zeigarnik and Ovsiankina)
People tend to return to interrupted tasks. The famous claim that unfinished tasks are remembered better did not hold up in a meta-analysis.
Contested
Peak-end rule
People judge an experience mostly by its most intense moment and its end, not its average.
Well supported
4. Less effort, clear feedback
How much do effort and response speed shape behavior?
Fitts’s law
The farther and smaller a target is, the longer it takes to hit.
Well supported
Response-time limits
Under 0.1 seconds feels instant, under 1 second keeps the flow of thought, and over 10 seconds loses attention.
Well supported
Choice overload
Too many options can stall decisions or lower satisfaction, but whether it happens depends heavily on conditions.
Contested
Default effect
Options that are preselected tend to stay selected.
Well supported
Labor illusion
Seeing the work behind a result makes it feel more valuable, even with a wait.
Limited evidence
Game feel
When motion, sound, and light answer an input instantly and pleasantly, touching becomes fun in itself.
Practitioner framework
5. Other people
How do other people, commitments, and gifts change decisions?
Social proof
When unsure, people look at what others do to decide.
Well supported
Social comparison and leaderboards
People judge their abilities against others. Leaderboards can draw out effort and can also deflate motivation.
Contested
Commitment and consistency (foot in the door)
People who agree to a small request are more likely to agree to a larger one later.
Contested
Reciprocity
Receiving something makes people want to give back.
Well supported
Scarcity
Things that are scarce or about to expire look more valuable.
Well supported
6. Ethics and law
Where does design become deception, and which rules apply?
Pattern library
40 patterns in 6 stages of the visitor journey. Open one for how to build it and what to watch.
Attract
Make people want to touch it in seconds.
Tactile CTA
The button sinks the instant it is pressed and springs back on release, showing both that it can be pressed and that it was.
Blurred answer
Only the headline of the result is readable and the rest is blurred, so people know an answer is waiting.
Live estimate
Moving a slider rewrites the price or savings on the spot.
Scratch to reveal
Rubbing a silver panel gradually uncovers the offer underneath.
Ten-second challenge
A short timed mini-game is playable the moment the page opens.
Real usage counter
A figure such as "1,240 teams this month" appears with its counting period.
Tiny first choice
Answering a two-option question at the top opens content that fits the answer.
Start
Make the first step light.
Head-start progress bar
A new profile starts at "2 of 6 done" and the remaining steps fill in one by one.
Easy first question
The first form question is a set of buttons for choosing a goal, not a name or email field.
Explained default
One of three plans is preselected with a reason: "Most teams choose this."
Three to start
The first screen shows only three options, with "see all" for the rest.
Setup checklist
A five-item checklist on the first screen ticks off as items are done.
Try before sign-up
People can use the real feature once before the sign-up button.
Thumb-zone CTA
A comfortably large button stays fixed at the bottom of a phone screen.
Progress
Carry people through to completion.
Steps and time left
A "3 of 4, about 1 minute left" indicator updates with every step.
Lighter toward the end
Each step asks for less, until the last one is a single confirm button.
Inline validation
Leaving a field shows a check for valid input or a fix for errors, right away.
Progressive unlock
Finishing one basic task unlocks and reveals the next feature.
Visible work
While computing, real steps such as "matching criteria" and "checking stock" appear in order.
Build your plan
Each choice adds a piece to a preview of the finished plan.
Resume where you left off
Returning visitors see their unfinished work first, labeled "continue."
Decide
Help people commit with confidence.
Explained match
A "Plan B fits you" result comes with three reasons.
Before-and-after slider
Dragging a divider swaps between before and after.
Honest stock and deadline
"3 left" and "until Oct 31, 23:59" track real inventory and the real cutoff.
Earned perk
Finishing a short task flips over a card with a perk.
Risk reversal
"Full refund within 30 days" and "cancel anytime" sit right under the sign-up button.
Celebrated finish
Completing sign-up brings a burst of confetti and exactly one next step.
Reviews at the decision point
One review from a customer in the same industry sits right under the pricing table.
Return
Create reasons to come back.
Forgiving streak
The streak grows day by day, and a rest day is marked without breaking it.
Badge collection
A collection grid shows how close the next badge is.
Daily discovery
Each visit flips a card to reveal today’s tip.
Gentle reminder
A reminder about a draft quote says "2 fields to go."
Personal best
The result appears next to the previous score and the improvement.
Stored value
As saved filters and favorites grow, the recommendation quality meter rises.
Share
Make referrals and sharing natural.
Shareable result card
A quiz result becomes a single card with a share button.
Referral meter
A meter fills toward the next reward as referrals come in.
Shared goal
Everyone’s contributions add up toward a common goal.
Nearby leaderboard
Only your rank and your neighbors appear, with the gap to the next place.
Gift invite
The invite link is framed as a gift: "Give a friend one month free."
Showcase gallery
A gallery of user creations, with a button to add your own.
Playable demos
197 games, simulations, sounds, and tools. Each demo links back to the patterns it uses.
Arcade15
Classic mini-games to test your reflexes and high scores
Playground28
Puzzles, strategy games, and brain teasers
Toys & Fidgets14
Satisfying physics toys and fidget widgets
Creative & Visual113
Generative art, simulations, and visual experiments
Music & Sound12
Instruments, sequencers, and audio visualizers
Utilities & Tools15
Useful gadgets, timers, and educational tools
Find out which parts of your marketing work AI can take over.
Check which of your marketing work AI can take over