Beweeg je cursor in de buurt van de wachtlijstknop op de landingspagina en Mr. Grummel, ernaast getekend, wordt tevreden. Drijf je weg, dan koelt hij af — streng, dan geïrriteerd, en ver genoeg weg, zichtbaar woedend, stoom en al. Het leest als een personage dat je opmerkt. Eronder is het een simpele afstandsformule die bij elke muisbeweging draait binnen een requestAnimationFrame-callback: tevreden onder de 180 pixels van het midden van de knop, streng onder de 420, geïrriteerd onder de 700, woedend daarna. Geen machine learning, geen intentiedetectie — het volledige emotionele bereik van een leraar, samengeperst tot vier numerieke drempels.
Eén regel die boven de afstand gaat
De afstandsberekening heeft een uitzonderingsclausule: land de cursor rechtstreeks op de knop en hij stopt met de afstand te beoordelen en gaat vieren, en dat moment houdt aan zolang je daar blijft. Dat móét boven alles gaan, want het moment waarop je op de knop staat, is precies het moment waarop zijn mening over jou niet meer relevant is. Een personage dat door bleef stomen terwijl je middenin een klik zat, zou op het exacte moment dat het signaal er niet meer toe deed, het verkeerde signaal aflezen.
De quiz op de pagina draait een verwant maar apart stemmingssysteem, gekoppeld aan antwoorden in plaats van cursorpositie. Een reeks van twee goede antwoorden verdient "tevreden"; een fout antwoord verhoogt een escalatieteller met één, met een maximum van drie, en elk fout antwoord zet de reeks ook terug naar nul. Drie fout op rij en hij is "woedend", met een ratelend vel papier en een schermtint die allebei dezelfde teller volgen. Antwoord je daarna goed, dan zakt de teller een stapje terug in plaats van helemaal te resetten — een slechte reeks kost je geleidelijk, en een goede reeks verdient het op dezelfde manier terug.
Het onderdeel dat uit moet blijven
Elke muisbeweging bijhouden om een voortdurend bijgewerkte animatie aan te sturen is precies het soort beweging waar prefers-reduced-motion: reduce voor bedoeld is om uit te schakelen, dus de listener die de cursor volgt controleert die instelling één keer, vooraf, en koppelt zich helemaal niet als hij aan staat. Dat is een echte afweging, geen gratis winst: iemand met die voorkeur aan krijgt nog steeds de discrete stemmingen — hover, focus, een fout quizantwoord, die landen allemaal nog — maar mist wel de doorlopende versie van "hij ziet je dichterbij komen". Wij kozen voor de versie die de instelling volledig respecteert, boven een versie die de beweging afzwakt en toch een deel ervan uitlevert, want een instelling die "grotendeels" wordt gerespecteerd, wordt niet gerespecteerd.
Waar we nog niet zeker van zijn
Een metafoor van afstand-tot-een-knop voor "betrokkenheid" is een redelijke gok en niets meer — iemand die de pagina zorgvuldig leest met zijn cursor stilgeparkeerd in een hoek, is niet minder betrokken, hij wordt alleen niet correct gemeten door een formule die alleen pixels kent. We hebben niet gemeten of het stemmingssysteem iemand daadwerkelijk richting de wachtlijst duwt, of gewoon wordt opgemerkt en waar één keer om geglimlacht wordt. Dat zijn verschillende uitkomsten, en op dit moment hebben we alleen bewijs voor de tweede.
Niets hiervan is lesstof — het is een notitie over hoe deze marketingpagina gebouwd is, geen onderwerp waar de app je op overhoort. Als afstandsformules en event listeners iets zijn waarover je liever overhoord wordt dan dat je erover leest, dan behandelt het vak Informatica in de app de eenvoudigere bouwstenen daaronder, te beginnen bij Programmeren.