Decide
Before-and-after slider
Effort: Low
What to notice
Dragging a divider swaps between before and after.
How to build it
- Prepare before and after images taken under the same conditions.
- Make the divider movable by drag and by keyboard.
- State the conditions, such as period and settings, below the image.
Measure
- Main metric
- Sign-up rate among people who used the slider
- Guardrail
- Complaints that results differ
When it backfires
Comparing images taken under different conditions exaggerates the effect.
Theory behind it
Game feel
When motion, sound, and light answer an input instantly and pleasantly, touching becomes fun in itself.
Practitioner framework
Information gap theory
A small gap between what people know and want to know makes them want to close it.
Well supported
Self-Determination Theory
People keep going on their own when they feel autonomy, competence, and relatedness.
Well supported
Playable demos
Try the same mechanism in a playable demo.