Ontwerpen van micro-interacties en animaties
Wekelijks is er bij Ivaldi een Innovation Talk. Er wordt dan een onderwerp door één van ons voorbereid en uitgediept. Onlangs was ik (Sanco) aan de beurt en heb ik wat verteld over het ontwerpen van micro-interacties en animaties.
Websites en apps worden steeds interactiever. Doordat de gebruiker steeds meer interactie heeft met het product, vraagt dit ook meer van de ontwerper. We moeten een stap extra zetten. We willen de user experience namelijk zo goed mogelijk optimaliseren.
Dit is waar micro-interacties (of animaties) om de hoek komen kijken. Micro-interacties zijn meestal een reactie op de input van de gebruiker. Het helpt de gebruiker de interactie beter te begrijpen en geeft feedback of deze geslaagd of mislukt is. We zien dit ook terug in het alledaagse leven. Een heel simpel voorbeeld: denk aan het lampje van de waterkoker dat gaat branden als je hem aanzet. Of, om het meer binnen ons vakgebied te zoeken, het slotje dat open of dicht gaat op het lock screen van je iPhone als je deze ontgrendelt met Face-ID. Voorbeelden van simpele feedback die jij als gebruiker ontvangt op je interactie met het product.
Deze micro-interacties worden uitgewerkt in de ontwerpfase. Het begint hier met het vaststellen van het startpunt en het doel van de gebruiker. Vervolgens worden de stappen hiertussen uitgedacht en uitgewerkt. Dit worden ook wel de keyframes genoemd. De keyframes zijn de vaste punten waartussen je gaat animeren.
Voor het uitwerken van micro-interacties gebruiken we binnen Ivaldi twee tools.
Als het gaat om een animatie die veel input van de gebruiker vraagt, bijvoorbeeld een camera interface (zie het voorbeeld hieronder), dan werken we dit uit in Figma. Figma maakt het mogelijk om een snel prototype uit te werken, welke echt werkt op de input van de gebruiker. Hierbij is het mogelijk (simpele) animaties toe te voegen. Zo gaat het ontwerp voelen als een echt werkend product en krijgt de klant een compleet beeld.
Volgt er op de interactie van de gebruiker een meer complexe animatie, dan werken we deze uit in Principle. Principle geeft meer mogelijkheden in de timing van de animaties en hoe deze elkaar opvolgen. Door deze vrijheid kunnen we de animatie nog preciezer uitwerken. Bijvoorbeeld het uitwerken van de micro-animatie voor onze eigen nieuwe website.
Meer weten? Bekijk de slides!