9 voorbeelden van Disney’s animatie principes toegepast in user interfaces

 

Iedereen is wel bekend met de oude handgetekende Disney animatie films, zoals Bambi, Mickey Mouse en Sneeuw Witje. Bij mij roepen deze titels aardig wat jeugd herinneringen op, want ook ik heb ze vroeger allemaal bekeken. In de tijd waarin die films zijn gemaakt was Disney een van de grootste filmstudio's van zijn soort en is daarmee ook een van de grondleggers van de animatie film. In die tijd heeft Disney een aantal principes gevonden waaraan een goede animatie film moet voldoen, beter bekend als 'The twelve basic principles of animation'. Ondanks dat handgetekende animatie tegenwoordig steeds minder relevant wordt, zijn een aantal van deze principes mpg altijd in moderne voorbeelden van animatie terug te vinden, zo ook in user interfaqces. In dit artikel staan 9 voorbeelden van Disney's animatie principes gebruikt in user interfaces.

1. Het squash en stretch principe

Bron: https://uimovement.com/design/to-do-app-task-micro-interaction-prd-freebie/

Bij het squash en stretch principe houdt de animator rekening met het gewicht van hetgeen dat hij animeert. Wanneer een bal de grond raakt deukt deze in, en naarmate deze omhoog komt rekt hij uit. Het voelt dan flexibel en natuurlijk aan.

In het voorbeeld zien we dit terug in het selectie vakje. Wanneer de gebruiker hierop klikt deukt deze in, het voelt voor de gebruiker dan alsof de klik een gewicht geeft. Zodra het selectie vakje aangevinkt is rekt deze weer uit naar zijn voormalige grote. 

2. Het anticipatie principe

 Bron: https://dribbble.com/shots/4455975-Finance-App-Interactions

Het anticipatie principe zegt dat het belangrijk is om de kijker van de animatie voor te bereiden op een bepaalde beweging. Hierdoor lijkt de beweging realistischer. 

In het voorbeeld zien we dit meerdere keren gebeuren. Onderandere wanneer de gebruiker op een van de resultaten klikt, over gaat van de piechart naar de lijngrafiek en vervolgens weer wanneer de gebruiker op het profiel klikt van 'Starbucks'. Iedere keer wordt de gebruiker op de volgende beweging voorbereid door een eerdere beweging, de anticiperende beweging. 

3. Het podium principe

 Bron: https://dribbble.com/shots/2864861-Fishing-Time

Bij het podium principe wordt beweging gebruikt om de ogen van de kijker naar het belangrijkste punt in de scene te brengen. Dit kan gebruikt worden om bijvoorbeeld een object te laten opvallen, maar ook om een emotie over te brengen op de kijker. 

In het voorbeeld zien we dit ook gebeuren. Door middel van een beweging in het beeld wordt de aandacht van de gebruiker op het andere helft van het schermt gericht omdat de designer heeft bepaald dat deze helft nu belangrijker is. 

4. Het langzaam in, langzaam uit principe

Bron: https://www.behance.net/gallery/79788483/Train-tickets-online-iOS-app

Om een beweging natuurlijk aan te laten voelen kan je ervoor kiezen om het langzaam in, langzaam uit principe te gebruiken. Dan begint een beweging langzaam, gaat vervolgens sneller en naarmate de beweging eindigt wordt deze weer langzamer. Vergelijkbaar met bijvoorbeeld een auto of een hardloper, die beide niet direct op topsnelheid vooruit bewegen. In het voorbeeld zien we dit gebeuren met de trein.

5. Het arch principe

Bron: https://dribbble.com/shots/14118350-Car-Dashboard

Het arch principe zegt dat wanneer iets beweegt, het dit vaak niet in een rechte lijn doet. Om een animatie natuurlijk aan te laten voelen moeten bewegingen worden gedaan in boogjes. In het voorbeeld zie je dit terug in de manier waarop het menu opent. Doordat dit in een boog gebeurt ontstaat er diepte en voelt het voor de gebruiker natuurlijk aan. 

6. Het secundary action principe

Bron: https://dribbble.com/shots/14078116-Sofanest-Interaction-Animation

Het secundaire action principe bepaald dat een extra toevoegen aan je bewegen kan helpen bij het leggen van de nadruk op de eerste, belangrijkste beweging. In het bovenstaande voorbeeld zien we dat de animatie voor het bekijken van andere banken wordt ondersteund door een eerste slade naar links, voordat de items omslaan.

7. Het exaggeration principe

Bron: https://dribbble.com/shots/11499441-Audiobook-App-Concept

Volgens Frank Thomas (2016) kan een exacte representatie van realistische bewegingen in animatie ervoor zorgen dat de animatie er saai uit ziet. Daarom moeten animaties overdreven worden. In het bovenstaande voorbeeld zie je een overdreven beweging wanneer de gebruiker door de verschillende boeken heen gaat. Doordat deze beweging wordt overdreven voelt deze voor de gebruiker prettig.

8. Het solid drawing principe

Bron: https://dribbble.com/shots/14078930-Skateboard-configurator

Met de solid drawing principe doelt disney nop het tekenen van de animaties in 3d ruimtes. Ook in user interfaces zijn veel 3d elementen te vinden. In het bovenstaande voorbeeld zie je hoe het toevoegen van 3d elementen in je interface kan zorgen voor een interessante ervaring voor je gebruikers.

9. Het appeal principe

Bron: https://www.behance.net/gallery/97867143/Sugar-Tamer-App-Characters-Design?tracking_source=search_projects_recommended%7Capp%20character

Appeal betekent in het nederlands letterlijk aantrekkelijkheid. Misschien is het voor de hand liggend dat je een aantrekkelijk interface moet maken, maar nog vaak genoeg wordt dit toch niet gedaan. In dit voorbeeld zie je Koreaanse app, die is ontworpen voor kinderen. De kleuren en karakters zijn afgestemd op de doelgroep zodat zij zo aantrekkelijk mogelijk zijn.