User Interface animatie tips voor een beter ontwerp

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.

Gebruik tabs slide voor de inhoud

• Een goede animatie vervaagd de inhoud in en uit van de ene toestand naar de andere
• Een fantastische animatie laat continuïteit zien in een transitie door de inhoud te verschuiven tussen twee toestanden

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.

Verbind gedeelde elementen van een kaart

• Een goede animatie maakt gebruik van een transitie om de inhoud van een gedetailleerd scherm te tonen door bijvoorbeeld het scherm naar links of naar boven te duwen
• Een fantastische animatie zorgt voor een connectie tussen twee toestanden door animaties te gebruiken voor de gedeelde inhoud

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.

Gebruik een cascade effect voor de inhoud

• Een goede animatie verandert de positie en doorzichtigheid van de inhoud wanneer deze zichtbaar wordt op het scherm
• Een fantastische animatie geeft de inhoud weer van elke groep of element met een kleine vertraging

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.

Laat de inhoud andere elementen wegduwen

• Goede animaties bewegen en laten elementen in context zien
• Fantastische animaties laten elementen zien die hun omgeving beïnvloeden wanneer deze veranderd

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.

Laat menu’s verschijnen in de context

• Goede animatie menu’s laten de inhoud zien door te verschijnen uit de richting van de knop die de inhoud opent.
• Fantastische animatie menu’s komen tevoorschijn vanuit de knop die de inhoud opent. Vanuit de richting waar je geklikt hebt wordt de context dan groter

Gebruik knoppen om een andere toestand te weergeven

• Goede interacties laten het event zien naast de knop.
• Fantastische interacties maken gebruik van de knop zelf om de verschillende statussen weer te geven

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.

Wek de aandacht van belangrijke zaken

• Goed design maakt gebruik van: grootte, positie en kleur om de aandacht van de gebruiker te trekken bij iets dat belangrijk is
• Fantastisch design maakt gebruik van een animatie om de aandacht te trekken voor iets dat belangrijk is, zonder storend te zijn

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.

Conclusie

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.