Laten we eens kijken naar een aantal voorbeelden van User Interface (UI) animaties. Door hier en daar kleine animaties toe te voegen kan je de User Experience flink verbeteren.
De interacties die we gaan bekijken geven bijvoorbeeld de staat aan van een knop, duiden de relatie aan tussen gedeelde elementen en vragen aandacht van de gebruiker om een actie te ondernemen.
Om de juiste animaties te creëren gebruiken we een aantal documenten zoals: The UX in Motion Manifesto, Material Motion en IBM’s Animation Principles.
Alle interacties en animaties die we zullen bekijken kun je maken met de early-access versie van InVision Studio.
Wanneer je een interactie ontwikkeld zoals een fly-out menu of tab probeer dan de positie van de inhoud te relateren aan de actie. Op deze manier kan je niet alleen de zichtbaarheid maar ook de positie van de inhoud verwerken in de animatie. Als je dan toch bezig bent, voeg dan een swipe beweging toe die je van de ene inhoud naar de andere brengt.
Wanneer animatie wordt gebruikt tussen twee toestanden bekijk dan of er gedeelde elementen zijn om met elkaar te verbinden. Met InVision Studio worden componenten die herhaald worden tussen twee gelinkte schermen automatisch aan elkaar gekoppeld. Dit wordt door een Motion transitie gedaan. Hierdoor wordt het erg makkelijke deze animaties te implementeren.
Kijk eens naar het Motion Manifesto om te zien welk soort animaties je kunt toepassen. Het voorbeeld dat we hier omschreven hebben, maakt gebruik van een combinatie van: `Transformation`, `Masking`, `Easing` en `Parenting` principes.
Om dit waterval effect toe te kunnen passen zorg je voor een vertraging met elk stuk of groep van de inhoud. Zorg er hierbij voor dat elk stuk dezelfde snelheid heeft, zodat het consistent aanvoelt. Doe dit niet bij elk element maar alleen bij groepen van de inhoud. De animatie moet snel en elegant aanvoelen. Google stelt voor om elk element niet meer dan 20ms uit elkaar op te stellen. Voor meer voorbeelden kun je kijken naar de choreografie principes in Material Motion.
Zorg ervoor dat elementen van jouw inhoud op de hoogte zijn van hun omgeving. Dit betekent dat de inhoud de elementen om zich heen moet aantrekken of afstoten. Meer voorbeelden kun je halen uit Aware motion principes van Material Design.
Probeer gebruik te maken van de inhoud van de knop zelf om visuele feedback te tonen van de status. Denk hierbij aan om de call to action te vervangen met een laad animatie of een animatie op de achtergrond die de voortgang weergeeft. Het idee is om de ruimte te gebruiken waar al interactie is met de gebruiker.
Wanneer een gebruiker actie moet ondernemen voor iets dat belangrijk is probeer dan gebruik te maken van een animatie. Begin met een voorzichtige animatie en verhoog de intensiteit (verander de kleur, snelheid en grootte) in relatie tot hoe belangrijk deze actie is. Gebruik dit alleen voor kritische acties. Hoe vaker je gebruik maakt van dit effect zal de impact afnemen en de gebruiker zal hierdoor gefrustreerd raken.
Deze voorbeelden zullen helpen om een betere beslissing te kunnen maken over waar je animaties kunt toevoegen voor meer interactie. Met nieuwe animatie tools zoals InVision Studio worden deze creatieve interacties populairder. We moeten alleen opletten animaties en interactie niet te veel te gebruiken.
Laten we gebruik maken van animaties om aandacht te trekken van acties die belangrijk zijn. Of veranderingen in een toestand toe te lichten. Gebruik ook animaties om relaties tussen elementen aan te geven en te zorgen voor een speelser karakter van jouw app.
Ik help je graag met al je vragen. Je mag me altijd even bellen of mailen.