Motion UI: wat is het en hoe kun je het toepassen?

Motion UI: wat is het en hoe kun je het toepassen?

Wanneer je een website ontwerpt ben je in de eerste instantie vooral bezig met de functie. Wat wil de eindgebruiker hier vinden en hoe kan dit het beste bereikt worden? Daarnaast moet je ervoor zorgen dat de ervaring in verschillende browsers en op verschillende apparaten gelijk blijft. Een hele klus, maar wanneer je daarmee klaar bent wil je vaak ook nog wat flair. Een soort digitale handtekening waardoor jouw website echt onvergetelijk wordt. Dit is waar Motion UI op het toneel verschijnt. Maar het is meer dan gewoon een mooi plaatje. Wanneer je motion UI op de juiste manier inzet, creëer je een interactieve en intuïtieve ervaring voor de gebruikers. Klinkt goed? Vandaag geven we je graag een introductie Motion UI en wat het betekent voor je ontwerpstrategie.

Bijzondere Motion UI-voorbeelden

TheHotSkills heeft een collectie van 20 voorbeelden geüpload om jou te inspireren voor je volgende project.

 

Hoe werkt Motion UI?

In principe is het een alleenstaande SASS Library die ervoor zorgt dat je custom animaties en CSS-transities op je website kunt gebruiken. Het is een ontzettend flexibele library waarin je verschillende onderdelen van de effecten kunt aanpassen. Van bewegingen tot snelheid en intensiteit van animaties, alles kan zo worden getweakt dat het precies binnen jouw design past. In eerdere stadia was het een library die alleen met het ZURB framework samenwerkte, maar sinds ze open source zijn gegaan kan het veel breder worden toegepast. Op Github vind je talloze transities en animaties die je direct binnen jouw project kunt gebruiken.

 

Hoe kun je het binnen jouw projecten toepassen?

Weten hoe iets werkt vertaalt zich natuurlijk nog niet direct in ideeën voor je nieuwe project. Hierboven hebben we al een inspiratievideo gedeeld, maar mocht je nog zoekende zijn naar een manier om Motion UI in jouw volgende project te verweven, dan inspireren we je graag met de onderstaande ideeën.

Gebruik Motion UI om mensen te verwelkomen op je landingspagina’s

Je kunt animaties en interactie gebruiken om je bounce rate te verlagen. Zorg er wel voor dat deze snel laden, anders verlies je bezoekers nog sneller dan wanneer je geen animaties op je website zou hebben. Mocht je een pagina hebben die om wat voor reden dan ook langzamer laadt, dan kun je ook kiezen voor een custom animatie voor het laden. Zo laat je mensen zien dat de pagina zeker werkt, maar dat het laden even duurt. Houdt er wel rekening mee dat lange laadtijden over het algemeen de bounce rate verhogen.

Animeer het scrollen

Het liefst hebben we websites waarop alle belangrijke content voor de vouw te zien is. Maar soms is dit gewoonweg niet haalbaar. Om dit soort pagina’s wat meer schwung te geven kun je het scrollen (licht) animeren.

Gebruik micro interacties

Verras je bezoekers met geanimeerde micro interacties. Push mensen richting de juiste knoppen of implementeer toggles om de gebruikerservaring te vergroten.

Verleid de eindgebruiker tot plezier

Motion UI laat pas zijn echte kracht zien wanneer je het inzet om fun op de website toe te voegen. Kan het eindproduct aangepast worden? Dan kun je dit natuurlijk gewoon via een simpele lijst met opties laten zien. Maar het wordt veel leuker als je deze opties ook echt laat zien doormiddel van Motion UI. Op deze manier zijn de gebruikers direct bezig met je eindproduct en beleven ze er (als het goed is) ook nog eens plezier aan.

 

Heb jij Motion UI op een leuke manier gebruikt binnen een van je projecten? Dan horen wij graag van je! Deel jouw project met ons en neem contact op!

Dit artikel is geschreven door Daniëlle Tertaas.