Het effect van een transitie effect

2 maart 2016 | Ivo de Vink

Je ziet het tegenwoordig overal op websites en webapplicaties, en misschien heb je er nooit bewust bij stil gestaan: transitie effecten. Denk bijvoorbeeld maar aan een button die vloeiend van kleur verandert wanneer je er met je muis overheen gaat:

button_hover

Of een menu icoon die verandert van vorm:

hamburger_menu

Dit zijn allemaal transitie effecten die, mits goed toegepast, bijdragen aan een optimale gebruikerservaring. Ze regiseren als het ware de focus van de gebruiker en functioneren als een wegwijzer.

Bij een transitie effect moet je denken aan een vloeiende overgang die meestal tot stand komt door een bepaalde actie van de gebruiker. In plaats van een ‘harde overgang’ van A naar B wordt het pad van A naar B als het ware uitgelegd door een vloeiende animatie.

De fysieke wereld

In de interfaces van bijvoorbeeld Googles Android (Material Design) en Apples iOS zien we dat vloeiende, natuurlijke transitie effecten inmiddels ver ontwikkeld en uitgedacht zijn. De animaties zijn gebaseerd op onze fysieke wereld met haar zwaartekracht en de complete navigatie lijkt met vloeiende transities aan elkaar te hangen. De beleving wordt hierdoor minder mechanisch, maar krijgt een meer menselijk, herkenbaar karakter. Een groeiend aantal websites en webapplicaties zien we ook deze kant op gaan.

Vloeiende bewegingen, zoals we die kennen uit de fysieke wereld, spelen een belangrijke rol. In het dagelijks leven zien we bijvoorbeeld dat transities ons helpen te oriënteren. Dit gaat vaak in een bepaald tempo die ons hersenen als prettig ervaren: niet te snel en niet te langzaam.

Denk maar bijvoorbeeld aan het oppakken van een tandenborstel. Je zult zien dat je arm een vloeiende beweging naar de tandenborstel maakt. Vervolgens remt je arm iets af en bewegen je vingertoppen naar elkaar toe. De tandenborstel is nu klaar om opgepakt te worden. De vloeiende bewegingen helpen je om te begrijpen wat er gebeurd en geven je de tijd om alvast na te denken over de volgende stap die gemaakt moet worden.

Hetzelfde geld voor de toepassing van transitie effecten in websites en webapplicaties. Door het juiste tempo te bepalen in de animaties, wordt de gebruiker bij de hand genomen en draagt het bij aan een optimale focus.

Transitie effecten als universele taal

Je zou kunnen zeggen dat transitie effecten inmiddels een soort universele taal is geworden die nog voortdurend in ontwikkeling is. Met ons Simplefly-team houden we deze ontwikkeling nauw in de gaten, en passen we de opgedane kennis zelf ook toe op onze websites en webapplicaties. We willen met transitie effecten een taal spreken die herkenbaar is voor de gebruiker, een taal die het doel voor ogen houdt. Geen onnodige opsmuk, maar vooral simpel, doeltreffend en functioneel.

google material transition effects

Bron afbeelding: Google Material Design