Beweging geeft betekenis

Geplaatst op 02-11-2018

Beweging helpt gebruikers te oriënteren door te laten zien hoe elementen aan elkaar gerelateerd zijn. — Google Material Design

Transities zorgen voor eenheid binnen je website. Het ziet er realistischer uit en zorgt ervoor dat uw website een professionele uitstraling heeft. Pak bijvoorbeeld een schuifdeur, deze schuift van dicht naar open en zal nooit open springen zonder te schuiven. Hier is schuiven de transitie. Zo werkt het ook voor websites, knoppen springen niet ineens van grijs naar paars, dit gaat geleidelijk. Met een transitie. Hieronder zie je een voorbeeld van een knop zonder en met transitie.

 

 

transitie_1

De knop veranderd zodra je er met de muis overheen gaat. Dit heet een 'hover'. Bij zo'n hover veranderd in dit geval de kleur van de knop en de ruimte links en rechts van de knop. Het effect in het bovenstaande voorbeeld is uiteraard wat vertraagt, onze 'sweetspot' voor zo'n transitie is vaak 0.2 seconden. Dit moet ook wel want je wilt niet dat je bezoekers moeten wachten tot een knop klaar is met een transitie om door te gaan, maar je wilt ook niet dat transities afgekapt worden doordat de gebruiker sneller is dan de transitie. Die 0.2 seconden is daarom lekker vlot voor de gebruiker, maar geeft genoeg tijd om kleine transities op te merken.
 

Een aantal voorbeelden die zijn toegepast bij onze klanten

 

transitie_2

Invision ICT, Iconen zweven omhoog bij een hover

Bij Invision ICT hebben we een geanimeerde muis gebruikt om aan te duiden dat er naar beneden gescrolled kan worden om meer informatie te bekijken. Ook de iconen zweven iets omhoog om aan te geven dat er op geklikt kan worden.

 

transitie_3

BMVV, Slideshow pijltje beweegt in de richting waar de slideshow heengaat.

Voor onze slider die in ons eigen CMS zit maken we ook gebruik van kleine transities. Het blokje met de pijl word langzaam zichtbaar en bij een hover schuift de pijl in de richting van de slideshow. Dit zorgt ook gelijk voor duidelijkheid wat er gaat gebeuren als de bezoeker de knop aan klikt.
 

Transities in animaties

Transities worden dan ook vaak in animaties gebruikt. Animaties kunnen van zelf gestart worden zonder dat de bezoeker iets hoeft te doen. Met het gebruik van animaties kunnen er complexere transities plaats vinden. Om even een voorbeeld erbij te pakken, voor Stipt Payroll hebben een frisse animatie toegepast, op de homepage verschijnt bij het bezoeken een actiefiguur en lichten de puntjes 1 voor 1 op na de verschijning.

 

transitie_4

Stipt Payroll, accent op de payoff

Reacties (0)

Er zijn nog geen reacties

Laat een bericht achter

* = verplicht
Plaats reactie

Meer weten?

Vond je dit een interessant artikel en zou je meer willen weten over onze werkwijze en wat we te bieden hebben? 

Neem contact op