Micro-interacties: 15 voorbeelden en hoe u ze kunt ontwerpen
Micro-interacties uitgelegd: een definitie, de vier delen van Dan Saffer, 15 echte voorbeelden gegroepeerd op type, ontwerpregels en hoe je ze kunt bouwen in CSS, Framer Motion, GSAP of ExodeUI.
Kern afhaalmaaltijd
Een micro-interactie is een klein, besloten moment in een interface dat één ding doet: een bericht leuk vinden, een instelling wijzigen, een formulier bevestigen of een gebaar voltooien. De term en zijn anatomie zijn afkomstig van Dan Saffer, die vier delen definieert. Een trigger start het, regels bepalen wat er gebeurt, feedback toont het resultaat, en loops of modi bepalen wat het in de loop van de tijd doet. Goede micro-interacties zijn kort, reageren op de eigen input van de gebruiker en blijven onderbreekbaar.
Wat is een micro-interactie?
Een micro-interactie is de kleinste volledige interactie in een product: een enkele taak met een begin, een verandering en een einde. Het is geen hele stroom. Een bericht leuk vinden is een micro-interactie; het schrijven en publiceren van een commentaar is een stroom. Het idee en de structuur ervan komen uit het boek Microinteractions van Dan Saffer, dat ze allemaal in vier delen opsplitst.
De vier delen van een micro-interactie
Het raamwerk van Dan Saffer verdeelt een micro-interactie in vier componenten. Het is handig om ze een naam te geven, omdat de meeste bugs en de meeste slechte bewegingen in een van de vier voorkomen, en niet in het geheel.
Trekker
De gebeurtenis waarmee het begint. Door de gebruiker geïnitieerd (tikken, aanwijzen, lang indrukken, slepen) of door het systeem geïnitieerd (een download is voltooid, er komt een netwerkfout binnen). Krediet: Dan Saffer.
Regels
Wat er gebeurt zodra het begint: geldige toestanden, beperkingen zoals sleepgrenzen of minimum- en maximumwaarden, en de volgorde van gebeurtenissen. Krediet: Dan Saffer.
Feedback
Hoe het product de gebruiker vertelt wat er is gebeurd: de veerzetting, de kleurverandering, de pictogramvorm, de tekstupdate. Dit is waar het grootste deel van het bewegingsontwerp leeft. Krediet: Dan Saffer.
Loops en modi
Wat de interactie in de loop van de tijd doet, en hoe modi deze veranderen. Dezelfde schakelaar kan zich anders gedragen in de donkere modus of in een compacte lay-out zonder de logica ervan te veranderen. Krediet: Dan Saffer.
Waarom micro-interacties belangrijk zijn
Een micro-interactie is hoe een interface de gebruiker antwoordt zonder een alinea tekst. Het bevestigt dat er een actie is ontvangen, laat zien dat iets nog steeds werkt of legt uit wat er net is veranderd. Als ze ontbreken, voelt hetzelfde product zwaarder aan: gebruikers tikken twee keer omdat niets hen vertelde dat de eerste tik was geland, of ze wachten op een scherm dat geen teken van vooruitgang gaf. Goede worden meer gevoeld dan opgemerkt, en dat is het punt.
15 voorbeelden van micro-interacties
Deze zijn gegroepeerd op wat ze communiceren. Waar ExodeUI een bijpassend voorbeeld levert, wordt de naam vermeld zodat u deze kunt openen en bewerken.
Knoppen en schakelaars (indrukken en status)
1. Knop indrukken: schaal naar ongeveer 0,92 bij het naar beneden wijzen en veer terug bij het loslaten (ExodeUI voorbeeld: Jelly Button). 2. Tuimelschakelaar: op lente gebaseerde vertaling met een kleurverandering bij commit (Gooey Toggle). 3. Modusschakelaar: een gesegmenteerde bediening die de indicator verschuift en het actieve label verandert (Motion Switch).
Formulierfeedback (validatie en indiening)
4. Ongeldige invoerschudden: een kort horizontaal duwtje met de tekst "controleer dit veld" zonder dialoog (Wiggle-tekstinvoer). 5. Verzenden in uitvoering: de knop wordt de voortgangsindicator, zodat de gebruiker nooit zijn plaats verliest (geanimeerde verzendknop). 6. Bevestiging van succes: een kleine feestelijke uitbarsting op de knop wanneer de actie landt (raketlanceringsknop).
Laden en voortgang
7. Circulaire vooruitgang: een ring die zich vult tot de werkelijke waarde en tot rust komt met een veer (Radial Gauge). 8. Niveau- of activiteitsmeter: een balk die live reageert op binnenkomende gegevens zoals het audioniveau (Sound Wave).
Navigatie
9. Menuschakelaar: een pictogram dat tussen twee statussen verandert en het aanwezige menu onthult (Morph Nav). 10. Dockvergroting: items in de buurt van de cursor worden opgetild en groeien, en vestigen zich vervolgens (Magnetic Dock). 11. Tabbladselectie: een indicator die tussen tabbladen schuift in plaats van knippert (Liquid Tab Bar).
Leeg en successtaten
12. Lege status: een kleine illustratie die in één keer wordt geanimeerd om een leeg scherm te verzachten. 13. Beloning onthullen: een geschenk of badge die vol verwachting opengaat wanneer een mijlpaal wordt bereikt (verrassingsgeschenkdoos).
Pull-to-refresh
14. Pull-to-refresh: elastische overscroll die de weerstand volgt, vervolgens terugveert en tot rust komt bij het loslaten. De feedback is het stuk, geen spinner.
Feedback in haptische stijl
15. Bevestigingspuls: een korte schaal en gloed op het element die de haptische tik op mobiel weerspiegelt, zodat dezelfde actie hetzelfde voelt op een apparaat zonder trilmotor.
Ontwerp regels die ze goed houden
Een paar regels scheiden een micro-interactie die helpt van een die irriteert.
- Houd het kort: het meest compleet in ongeveer 200-400 ms; langere beweging op een klein element voelt langzaam aan
- Begin in hetzelfde frame als de invoer; een uitgestelde start doorbreekt het gevoel van oorzaak en gevolg
- Houd het onderbreekbaar: als de gebruiker de actie halverwege de beweging omkeert, richt dan met snelheid in plaats van opnieuw op te starten vanaf nul
- Respect geeft de voorkeur aan verminderde beweging: zorg voor een statische of cross-fade fallback die de verandering nog steeds communiceert
- Geef het één taak: als de interactie meer dan één beslissing nodig heeft, is er sprake van een flow
Hoe micro-interacties op te bouwen
De juiste tool hangt af van op hoeveel platforms dezelfde interactie moet plaatsvinden.
Alleen CSS
Goed voor eenvoudige, op zichzelf staande gevallen: hoverlifts, focusringen en schakelaars aangedreven door :checked of een klassewisseling. Overgangen en @keyframes zijn voldoende, en er valt niets anders te verzenden dan het stylesheet.
Framer Motion of GSAP (web)
Goed als de beweging veren, gebaren of orkestratie nodig heeft en alleen over het web hoeft te lopen. Beide bieden onderbreekbare veren en kunnen worden aangedreven door de React-status.
ExodeUI (web, iOS en Android vanuit één bestand)
Gebruik dit wanneer dezelfde interactie zich identiek moet gedragen in een React-app, een SwiftUI-app en Flutter. U schrijft het één keer in een .exode-bestand en de runtime speelt het op elk platform af, dus er hoeft niet per platform te worden herschreven.
Productie-implementatiefragment
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function SendButton() {
return (
<ExodeUICanvas
src="/send_button.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}Toets Principles in om te onthouden
- Een micro-interactie is een kleine taak met een trigger, regels, feedback en loops of modi, de vier onderdelen genoemd door Dan Saffer
- De meeste goede zijn voltooid in ongeveer 200-400 ms, beginnen in hetzelfde frame als de invoer en blijven onderbreekbaar
- Feedback doet het werk: het bevestigt de actie en legt uit wat er veranderd is, vaak zonder tekst
- Zorg altijd voor een terugval met voorkeurs-verminderde beweging die dezelfde informatie zonder beweging bevat