{"id":11733,"date":"2023-01-04T09:04:00","date_gmt":"2023-01-04T08:04:00","guid":{"rendered":"https:\/\/academy.hostnet.nl\/?p=11733"},"modified":"2023-06-29T10:28:25","modified_gmt":"2023-06-29T08:28:25","slug":"wat-zijn-micro-animaties","status":"publish","type":"post","link":"https:\/\/www.hostnet.nl\/academy\/wat-zijn-micro-animaties","title":{"rendered":"Verbeter de gebruiksvriendelijkheid van je site met micro-animaties"},"content":{"rendered":"\n<p>In een digitale wereld staat gebruikerservaring centraal. Micro-animaties tillen die ervaring naar een hoger niveau. Maar wat zijn micro-animaties, welke soorten bestaan er en wat zijn goede voorbeelden? Je leest er meer over in dit artikel.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"het-begint-bij-een-goede-gebruikerservaring\">Het begint bij een goede gebruikerservaring&nbsp;<\/h2>\n\n\n\n<p>Een <a href=\"https:\/\/www.hostnet.nl\/academy\/gebruiksvriendelijke-website-tips\">gebruiksvriendelijke website<\/a> is belangrijk. Je wilt ervoor zorgen dat gebruikers niet in de war raken van je app of website. Micro-animaties kunnen gebruikers helpen om toch hun weg te vinden in een overvloed aan informatie. Zo haken zij niet af en loop jij geen websitebezoekers mis.&nbsp;<\/p>\n\n\n\n<div class=\"product-banner border-radius gutter-padding no-padding-top gutter-margin-bottom gutter-margin-top\">\n    <div class=\"svg-icon-text gutter-margin-top\">\n        <i class=\"svg-icon icon-large no-margin-left gutter-margin-right-half icon-stroke-blue\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"60\" height=\"60\" viewBox=\"0 0 60 60\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M35.9 50c-.2.6-.8 1-1.4 1h-8c-.6 0-1.2-.4-1.4-1H1.6c-.3 0-.6.3-.6.6v2.8c0 .3.3.6.6.6h56.8c.3 0 .6-.3.6-.6v-2.8c0-.3-.3-.6-.6-.6H35.9z\"><\/path><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M25.1 50c.2.6.8 1 1.4 1h8c.7 0 1.2-.4 1.4-1H56V11.1C56 9.4 54.6 8 52.9 8H7.1C5.4 8 4 9.4 4 11.1V50h21.1z\"><\/path><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" d=\"M36 40l12-12-12-12H24l12 12-12 12zM22 22H12m15 5H17m10 5H17m5 5H12\"><\/path><\/svg>        <\/i>\n        <span class=\"text-blue gutter-margin-right-half\">\n            Ontwikkel websites op betrouwbare en stabiele webhosting. Inclusief SSL en zakelijke e-mail.        <\/span>\n    <\/div>\n    <div class=\"button-holder gutter-margin-top\">\n        <a href=\"https:\/\/www.hostnet.nl\/webhosting#product-table-webhosting\" class=\"button\">\n            <span class=\"btn-text\">\n                Bestel nu            <\/span>\n        <\/a>\n    <\/div>\n<\/div>\n\n<script>\n    var productBanner = \"webhosting\";\n    dataLayer.push({'pageCategory': 'ac-' + productBanner});\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"wat-zijn-animaties\">Wat zijn animaties?<\/h2>\n\n\n\n<p>Voordat we dieper ingaan op micro-animaties, leg ik je kort uit wat animaties zijn. Een animatie is een serie van stilstaande beelden die razendsnel wordt afgespeeld. Hierdoor lijkt het alsof die serie beweegt. De bewegende beelden worden ook wel frames genoemd. Goede voorbeelden van animaties zijn tekenfilms en de bekende 3D-films van Pixar Studios.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"wat-zijn-micro-animaties\">Wat zijn micro-animaties?<\/h2>\n\n\n\n<p>Micro-animaties zijn korte, meer subtiele animaties die bijvoorbeeld een stuk tekst, een icoon of een knop laten bewegen. Denk bijvoorbeeld aan <a href=\"https:\/\/www.one.com\/nl\/online-marketing\/wat-is-een-cta\" target=\"_blank\" rel=\"noreferrer noopener\">Call To Actions<\/a>, zoals een bestelknop. Of een vinkje in je scherm nadat je succesvol bent ingeschreven voor een nieuwsbrief. Micro-animaties maken navigeren en interacteren makkelijker \u00e9n zorgen voor controle over de aandacht van gebruikers.&nbsp;<\/p>\n\n\n<section class=\"block-related-posts gutter-margin-bottom gutter-margin-top\">\n    <h3 class=\"block-title h-size-21 lineheight-margin-bottom\" class=\"block-title h-size-21 lineheight-margin-bottom\" id=\"leestip\">Leestip<\/h3><div class=\"posts-container\"><a href=\"https:\/\/www.hostnet.nl\/academy\/wat-is-design\" class=\"related-post col-box-basic bg-white block-shadow-elevation-hover\" target=\"_self\" aria-label=\"Lees het artikel: Wat is webdesign? Ontwerp je eigen website met de beste gids\">\n                <div class=\"thumbnail hide-on-mobile\">\n                    <img decoding=\"async\" src=\"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2018\/12\/wat-is-webdesign-792x594.jpg\" alt=\"Wat is webdesign? Ontwerp je eigen website met de beste gids\">\n                <\/div>\n                <div class=\"content\">\n                    <div class=\"card-text\">\n                        <div class=\"thumbnail hide-on-tablet hide-on-desktop\">\n                            <img decoding=\"async\" src=\"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2018\/12\/wat-is-webdesign-792x594.jpg\" alt=\"Wat is webdesign? Ontwerp je eigen website met de beste gids\">\n                        <\/div>\n                        <h4 class=\"related-post-title h-size-21 no-margin-bottom-mob\" class=\"related-post-title h-size-21 no-margin-bottom-mob\" id=\"wat-is-webdesign-ontwerp-je-eigen-website-met-de-beste-gids\">Wat is webdesign? Ontwerp je eigen website met de beste gids<\/h4>\n                        <p class=\"text-small hide-on-mobile\">Webdesign is essentieel als je online succes wilt hebben. Ontdek alle basics van webdesign en hoe je er een maakt voor je website.<\/p>\n                    <\/div>\n                    <div class=\"card-link\">\n                        <span class=\"link-name\">Lees artikel<\/span>\n                        <i class=\"svg-icon icon-small\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-arrow-up-right\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line><polyline points=\"7 7 17 7 17 17\"><\/polyline><\/svg>\n                        <\/i>\n                    <\/div>\n                <\/div>\n            <\/a><\/div><\/section>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"4-belangrijke-componenten\">4 belangrijke componenten<\/h3>\n\n\n\n<p>Er zijn 4 belangrijke componenten bij het gebruiken van micro-animaties:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Triggers<\/li>\n\n\n\n<li>Rules<\/li>\n\n\n\n<li>Feedback<\/li>\n\n\n\n<li>Loops &amp; modes<\/li>\n<\/ol>\n\n\n\n<h4 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"1-triggers\">1. Triggers<\/h4>\n\n\n\n<p>De trigger is de actie die de micro-animatie activeert. Dit kan een actie zoals scrollen, klikken, swipen of hoveren (met je muis bewegen).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"2-rules\">2. Rules<\/h4>\n\n\n\n<p>De rules bepalen de reactie op de trigger. Zo kun je er bijvoorbeeld voor zorgen dat gebruikers op de bestelpagina terechtkomen als zij ergens op klikken.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"3-feedback\">3. Feedback<\/h4>\n\n\n\n<p>De feedback maakt de gebruiker duidelijk wat voor actie er is ondernomen. Een mooi voorbeeld is het afbeelden van een groen vinkje zodra gebruikers succesvol zijn ingeschreven voor een nieuwsbrief.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"4-loops-modes\">4. Loops &amp; modes<\/h4>\n\n\n\n<p>Loops &amp; modes bepalen de duur van de micro-animatie en of eventuele herhaling nodig is. Is de micro-animatie zichtbaar voor 5, 10 of misschien wel 20 seconden? Blijft de micro-animatie opnieuw afspelen, of slechts 1 keer? Dit zijn factoren waar je over na moet denken.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"welke-soorten-micro-animaties-zijn-er\">Welke soorten micro-animaties zijn er?<\/h2>\n\n\n\n<p>Er zijn 2 soorten micro-animaties, namelijk statische en dynamische. Beide zijn handig, maar ze verschillen wel van elkaar. Ik leg het je uit.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"1-statische-micro-animaties\">1. Statische micro-animaties<\/h3>\n\n\n\n<p>Statische micro-animaties zijn over het algemeen makkelijk te maken. Denk aan een <a href=\"https:\/\/onlinemarketingagency.nl\/marketingtermen\/gif\/\" target=\"_blank\" rel=\"noreferrer noopener\">gif<\/a> die automatisch afspeelt, of een korte video met uitleg over een product of dienst.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"2-dynamische-micro-animaties\">2. Dynamische micro-animaties<\/h3>\n\n\n\n<p>Dynamische micro-animaties zijn elementen die van positie veranderen op basis van hovers en scrolling. Wanneer je met je muis of vinger over een icoontje gaat, gaat het icoontje bewegen. Dit wordt vaak gebruikt om belangrijke content uit te lichten, of om producten en diensten aantrekkelijk aan te bieden. Het is namelijk een goede manier om aandacht van bezoekers te trekken.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"3-voorbeelden-van-micro-animaties\">3 voorbeelden van micro-animaties<\/h2>\n\n\n\n<p>Voordat je een micro-animatie toevoegt, is het goed om na te denken over je doel. Wil je zorgen voor focus bij de gebruiker, of wil je de gebruiker feedback geven? Ik maak het je makkelijker met wat voorbeelden.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"1-focus\">1. Focus<\/h3>\n\n\n\n<p>Soms wil je ergens de volledige focus op leggen. Daarom vind je op vele webshops zogenaamde Call To Actions. Dit is bijvoorbeeld een bestelknop met \u2018Koop nu\u2019 of \u2018Bestel\u2019. Micro-animaties kunnen helpen om de bestelknop nog meer op te laten vallen. Zo kun je er bijvoorbeeld voor kiezen dat de knop van kleur verandert bij het scrollen.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2018\/11\/CTA-animatie-focus.gif\"><img decoding=\"async\" width=\"1606\" height=\"1192\" src=\"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2018\/11\/CTA-animatie-focus.gif\" alt=\"CTA animatie\" class=\"wp-image-11737\"\/><\/a><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Voorbeeld van een Call To Action<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"2-voortgang\">2. Voortgang<\/h3>\n\n\n\n<p>Ook voortgangsprocessen kun je met micro-animaties weergeven. Denk bijvoorbeeld aan de statusupdate tijdens het uploaden van een bestand. Hiermee kun je gebruikers aangeven hoe lang het proces nog duurt.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2018\/11\/Voortgang-animatie.gif\"><img decoding=\"async\" width=\"800\" height=\"600\" src=\"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2018\/11\/Voortgang-animatie.gif\" alt=\"Voortgang animatie\" class=\"wp-image-11739\"\/><\/a><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Voorbeeld van een statusupdate<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"3-feedback\">3. Feedback<\/h3>\n\n\n\n<p>Tot slot kun je met micro-animaties feedback geven. Bijvoorbeeld door een \u2018check\u2019 af te beelden zodra je klanten hun gegevens correct invullen, of een duim omhoog zodra zij succesvol zijn ingeschreven voor een nieuwsbrief.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2018\/11\/Feedback-animatie.gif\"><img decoding=\"async\" width=\"1596\" height=\"1124\" src=\"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2018\/11\/Feedback-animatie.gif\" alt=\"Feedback animatie\" class=\"wp-image-11738\"\/><\/a><\/figure>\n\n\n\n<p class=\"has-text-align-center\">Voorbeeld van een succesvolle actie<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"2-laatste-tips-voor-het-toevoegen-van-micro-animaties\">2 laatste tips voor het toevoegen van micro-animaties<\/h2>\n\n\n\n<p>Inmiddels begrijp je wat micro-animaties zijn en waar je ze voor kunt gebruiken. Ik geef je 2 laatste tips die belangrijk zijn om te onthouden.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"1-let-op-gebruiksvriendelijkheid\">1. Let op gebruiksvriendelijkheid<\/h3>\n\n\n\n<p>De flow, de timing en de snelheid van een micro-animatie moeten goed zijn. Als een micro-animatie stroef loopt, kan het lijken op een bug (softwarefout). Dan oogt een website, interface of mobiele app meteen minder aantrekkelijk en professioneel. Denk daarom na over de loop van je micro-animatie:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Hoe lang duurt de micro-animatie?<\/li>\n\n\n\n<li>Blijft de animatie herhalen?&nbsp;<\/li>\n\n\n\n<li>Verandert de micro-animatie na een paar keer?<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"2-maak-het-niet-te-bont\">2. Maak het niet te bont<\/h3>\n\n\n\n<p>Te veel micro-animaties leiden af en werken averechts. Je wil dat gebruikers beter hun weg kunnen vinden op jouw website of app, niet dat zij juist worden overrompeld met informatie. Daarnaast wil je niet voor vertragingen en hindernissen zorgen. Maak dus zeker gebruik van micro-animaties, maar doe het met mate. Wil je meerdere micro-animaties gebruiken? Wees consistent en gebruik niet te veel verschillende stijlen.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"micro-animaties-toepassen-op-je-site-of-in-je-app\">Micro-animaties toepassen op je site of in je app<\/h2>\n\n\n\n<p>Mensen houden van visuele content. Visuele content wordt bijvoorbeeld <a href=\"https:\/\/onlinebazen.nl\/de-kracht-van-visuele-content\/\" target=\"_blank\" rel=\"noreferrer noopener\">40 keer sneller gedeeld op social media<\/a>. Dat maakt micro-animaties aantrekkelijk om te gebruiken op je site of in je app. Daarnaast maken ze de ervaring van gebruikers makkelijker. Denk aan een knop met \u2018Probeer het nu\u2019 bij een nieuwe dienst die je promoot. Gebruikers kunnen zo snel vinden wat ze zoeken. Maar hoe voeg je een micro-animatie toe? Er zijn meerdere manieren, die ik hieronder toelicht.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"micro-animaties-toevoegen\">Micro-animaties toevoegen<\/h3>\n\n\n\n<p>Vaak kun je gemakkelijk micro-animaties toevoegen met een <a href=\"https:\/\/www.hostnet.nl\/academy\/wat-is-een-cms\">contentmanagementsysteem<\/a> zoals WordPress. Afhankelijk van je plugins en thema\u2019s kun je deze zelf aanpassen. Zo kun je buttons toevoegen en deze laten veranderen van kleur zodra iemand erop klikt.&nbsp;<\/p>\n\n\n\n<div class=\"product-banner border-radius gutter-padding no-padding-top gutter-margin-bottom gutter-margin-top\">\n    <div class=\"svg-icon-text gutter-margin-top\">\n        <i class=\"svg-icon icon-large no-margin-left gutter-margin-right-half icon-stroke-blue\">\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"60\" height=\"60\" viewBox=\"0 0 60 60\"><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M35.9 50c-.2.6-.8 1-1.4 1h-8c-.6 0-1.2-.4-1.4-1H1.6c-.3 0-.6.3-.6.6v2.8c0 .3.3.6.6.6h56.8c.3 0 .6-.3.6-.6v-2.8c0-.3-.3-.6-.6-.6H35.9z\"><\/path><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M25.1 50c.2.6.8 1 1.4 1h8c.7 0 1.2-.4 1.4-1H56V11.1C56 9.4 54.6 8 52.9 8H7.1C5.4 8 4 9.4 4 11.1V50h21.1z\"><\/path><circle fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" cx=\"30.5\" cy=\"29.5\" r=\"12.5\"><\/circle><path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\" d=\"M37 24.5l-8 9-5-4\"><\/path><\/svg>        <\/i>\n        <span class=\"text-blue gutter-margin-right-half\">\n            Breng je blog, website of webshop tot leven met WordPress. Inclusief installatie, https-verbinding en zakelijke e-mail.        <\/span>\n    <\/div>\n    <div class=\"button-holder gutter-margin-top\">\n        <a href=\"https:\/\/www.hostnet.nl\/wordpress-website-maken#product-table-wordpress-website-maken\" class=\"button\">\n            <span class=\"btn-text\">\n                Bestel nu            <\/span>\n        <\/a>\n    <\/div>\n<\/div>\n\n<script>\n    var productBanner = \"wordpress\";\n    dataLayer.push({'pageCategory': 'ac-' + productBanner});\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"zelf-micro-animaties-maken\">Zelf micro-animaties maken<\/h3>\n\n\n\n<p>Wil je wat creatiever zijn? Je kunt zelf micro-animaties cre\u00ebren. Er zijn verschillende tools die je hiervoor kunt uitproberen. Ik geef je een overzicht:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Xcode<\/li>\n\n\n\n<li><a href=\"https:\/\/developer.android.com\/studio\" target=\"_blank\" rel=\"noreferrer noopener\">Android Studio<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.framer.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Framer<\/a><\/li>\n\n\n\n<li>CSS Animation<\/li>\n\n\n\n<li><a href=\"https:\/\/www.invisionapp.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Invision<\/a><\/li>\n\n\n\n<li>Marvel<\/li>\n\n\n\n<li><a href=\"https:\/\/principleformac.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Principle<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.adobe.com\/nl\/creativecloud.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe CC<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/origami.design\/\" target=\"_blank\" rel=\"noreferrer noopener\">Origami Studio<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.protopie.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Propopie&nbsp;<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.adobe.com\/products\/aftereffects.html\" target=\"_blank\" rel=\"noreferrer noopener\">After Effects&nbsp;<\/a><\/li>\n<\/ul>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><br>Let op: Dit is echter lastig en kan een uitdaging zijn voor mensen met weinig tot geen design-skills en technische vaardigheden.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"micro-animaties-in-een-notendop\">Micro-animaties in een notendop<\/h2>\n\n\n\n<p>Je weet nu wat micro-animaties zijn, hoe je ze kunt gebruiken en waar je rekening mee moet houden. Heb jij zelf nog goede tips over micro-animaties? Je kunt hieronder een reactie achterlaten. Succes!<\/p>\n\n\n\n<section class=\"product-card product-card-single bg-highlight has-priceballoon gutter-margin-bottom gutter-margin-top gutter-padding no-margin-left no-margin-right\">\n    <div class=\"box box-medium\">\n        <img decoding=\"async\" alt=\"Product\" src=\"\/\/atlas.hostnet.nl\/images\/boxes\/WH-package.svg\">        <div class=\"price-balloon text-first\">\n                    <span class=\"price-before\">v.a.<\/span><span class=\"product-price\">\n                    <span class=\"euro\">2<\/span>\n                    <span class=\"comma\">,<\/span>\n                    <span class=\"cent\">&#8211;<\/span>\n                <\/span>\n                <span class=\"period\">p\/m<\/span>\n            <\/div>    <\/div>\n    <div class=\"card-content\">\n        <h3 class=\"title h-size-21\" class=\"title h-size-21\" id=\"webhosting\">Webhosting<\/h3>\n        <div class=\"gutter-padding-bottom\">\n            <p>Ontwikkel razendsnel websites op betrouwbare en snelle webhosting. Inclusief uitgebreide features.<\/p>\n        <\/div>\n        <div class=\"usps list-style-check text-small\">\n            <ul>\n                <li>7 dagen p\/w hostingsupport<\/li>\n                        <li>Installeer in 1 klik WordPress<\/li>\n                        <li>Gratis Wildcard SSL<\/li>\n                        <li>Zakelijke e-mail<\/li>\n                        <li>Stabiel en razendsnel platform<\/li>\n                        <li>Direct opgeleverd<\/li>            <\/ul>\n        <\/div>\n        <div class=\"button-holder gutter-margin-top\">\n            <a class=\"button button-orange button-icon icon-right button-ellipsis\" href=\"https:\/\/www.hostnet.nl\/webhosting#product-table-webhosting\">\n                <i class=\"svg-icon\" aria-hidden=\"true\">\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-arrow-up-right\"><line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\"><\/line><polyline points=\"7 7 17 7 17 17\"><\/polyline><\/svg>\n                <\/i>\n                <span class=\"btn-text\">Naar webhosting<\/span>            <\/a>\n        <\/div>\n    <\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>In een digitale wereld staat gebruikerservaring centraal. Micro-animaties tillen die ervaring naar een hoger niveau. Maar wat zijn micro-animaties, welke&hellip; <a class=\"more-link\" href=\"https:\/\/www.hostnet.nl\/academy\/wat-zijn-micro-animaties\">Lees verder <span class=\"screen-reader-text\">Verbeter de gebruiksvriendelijkheid van je site met micro-animaties<\/span><\/a><\/p>\n","protected":false},"author":139,"featured_media":11740,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[34],"class_list":["post-11733","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website","tag-design","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Wat zijn micro-animaties? En hoe pas je ze toe? | Hostnet<\/title>\n<meta name=\"description\" content=\"Met micro-animaties verbeter je de gebruiksvriendelijkheid van je site of app. Meer weten? Ontdek er alles over in dit artikel.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hostnet.nl\/academy\/wat-zijn-micro-animaties\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wat zijn micro-animaties? En hoe pas je ze toe? | Hostnet\" \/>\n<meta property=\"og:description\" content=\"Met micro-animaties verbeter je de gebruiksvriendelijkheid van je site of app. Meer weten? Ontdek er alles over in dit artikel.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hostnet.nl\/academy\/wat-zijn-micro-animaties\" \/>\n<meta property=\"og:site_name\" content=\"Hostnet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Hostnetbv\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-04T08:04:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-29T08:28:25+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2018\/11\/Micro-animaties.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1440\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Athin\u00e1 Fourtounidis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hostnet\" \/>\n<meta name=\"twitter:site\" content=\"@hostnet\" \/>\n<meta name=\"twitter:label1\" content=\"Geschreven door\" \/>\n\t<meta name=\"twitter:data1\" content=\"Athin\u00e1 Fourtounidis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minuten\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wat zijn micro-animaties? En hoe pas je ze toe? | Hostnet","description":"Met micro-animaties verbeter je de gebruiksvriendelijkheid van je site of app. Meer weten? Ontdek er alles over in dit artikel.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hostnet.nl\/academy\/wat-zijn-micro-animaties","og_locale":"nl_NL","og_type":"article","og_title":"Wat zijn micro-animaties? En hoe pas je ze toe? | Hostnet","og_description":"Met micro-animaties verbeter je de gebruiksvriendelijkheid van je site of app. Meer weten? Ontdek er alles over in dit artikel.","og_url":"https:\/\/www.hostnet.nl\/academy\/wat-zijn-micro-animaties","og_site_name":"Hostnet","article_publisher":"https:\/\/www.facebook.com\/Hostnetbv\/","article_published_time":"2023-01-04T08:04:00+00:00","article_modified_time":"2023-06-29T08:28:25+00:00","og_image":[{"width":1440,"height":900,"url":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2018\/11\/Micro-animaties.jpg","type":"image\/jpeg"}],"author":"Athin\u00e1 Fourtounidis","twitter_card":"summary_large_image","twitter_creator":"@hostnet","twitter_site":"@hostnet","twitter_misc":{"Geschreven door":"Athin\u00e1 Fourtounidis","Geschatte leestijd":"6 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hostnet.nl\/academy\/wat-zijn-micro-animaties#article","isPartOf":{"@id":"https:\/\/www.hostnet.nl\/academy\/wat-zijn-micro-animaties"},"author":{"name":"Athin\u00e1 Fourtounidis","@id":"https:\/\/www.hostnet.nl\/academy\/#\/schema\/person\/060d95d22c0b55ed87979d0a2ff4fce2"},"headline":"Verbeter de gebruiksvriendelijkheid van je site met micro-animaties","datePublished":"2023-01-04T08:04:00+00:00","dateModified":"2023-06-29T08:28:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hostnet.nl\/academy\/wat-zijn-micro-animaties"},"wordCount":1063,"commentCount":0,"publisher":{"@id":"https:\/\/www.hostnet.nl\/academy\/#organization"},"image":{"@id":"https:\/\/www.hostnet.nl\/academy\/wat-zijn-micro-animaties#primaryimage"},"thumbnailUrl":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2018\/11\/Micro-animaties.jpg","keywords":["Design"],"articleSection":["Website"],"inLanguage":"nl-NL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hostnet.nl\/academy\/wat-zijn-micro-animaties#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hostnet.nl\/academy\/wat-zijn-micro-animaties","url":"https:\/\/www.hostnet.nl\/academy\/wat-zijn-micro-animaties","name":"Wat zijn micro-animaties? En hoe pas je ze toe? | Hostnet","isPartOf":{"@id":"https:\/\/www.hostnet.nl\/academy\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hostnet.nl\/academy\/wat-zijn-micro-animaties#primaryimage"},"image":{"@id":"https:\/\/www.hostnet.nl\/academy\/wat-zijn-micro-animaties#primaryimage"},"thumbnailUrl":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2018\/11\/Micro-animaties.jpg","datePublished":"2023-01-04T08:04:00+00:00","dateModified":"2023-06-29T08:28:25+00:00","description":"Met micro-animaties verbeter je de gebruiksvriendelijkheid van je site of app. Meer weten? Ontdek er alles over in dit artikel.","breadcrumb":{"@id":"https:\/\/www.hostnet.nl\/academy\/wat-zijn-micro-animaties#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hostnet.nl\/academy\/wat-zijn-micro-animaties"]}]},{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.hostnet.nl\/academy\/wat-zijn-micro-animaties#primaryimage","url":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2018\/11\/Micro-animaties.jpg","contentUrl":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2018\/11\/Micro-animaties.jpg","width":"1440","height":"900","caption":"Micro-animaties"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hostnet.nl\/academy\/wat-zijn-micro-animaties#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hostnet.nl\/academy\/"},{"@type":"ListItem","position":2,"name":"Verbeter de gebruiksvriendelijkheid van je site met micro-animaties"}]},{"@type":"WebSite","@id":"https:\/\/www.hostnet.nl\/academy\/#website","url":"https:\/\/www.hostnet.nl\/academy\/","name":"Hostnet","description":"Haal meer uit je online succes met handige tips en tricks","publisher":{"@id":"https:\/\/www.hostnet.nl\/academy\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hostnet.nl\/academy\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"},{"@type":"Organization","@id":"https:\/\/www.hostnet.nl\/academy\/#organization","name":"Hostnet","url":"https:\/\/www.hostnet.nl\/academy\/","logo":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.hostnet.nl\/academy\/#\/schema\/logo\/image\/","url":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2021\/11\/Hostnet-logo2021-RGB-Leftcloud.png","contentUrl":"https:\/\/www.hostnet.nl\/academy\/wp-content\/uploads\/2021\/11\/Hostnet-logo2021-RGB-Leftcloud.png","width":581,"height":99,"caption":"Hostnet"},"image":{"@id":"https:\/\/www.hostnet.nl\/academy\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Hostnetbv\/","https:\/\/x.com\/hostnet","https:\/\/www.instagram.com\/hostnetbv\/","https:\/\/nl.linkedin.com\/company\/hostnet-bv","https:\/\/nl.pinterest.com\/hostnet\/","https:\/\/www.youtube.com\/channel\/UCiMHZBSkh8FKopNquGmzgyQ"]},{"@type":"Person","@id":"https:\/\/www.hostnet.nl\/academy\/#\/schema\/person\/060d95d22c0b55ed87979d0a2ff4fce2","name":"Athin\u00e1 Fourtounidis","image":{"@type":"ImageObject","inLanguage":"nl-NL","@id":"https:\/\/www.hostnet.nl\/academy\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ad3b6afcd98a518d6193b4401f44bf0ace62bc9e2ed892b597e1307bd9cb46bd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ad3b6afcd98a518d6193b4401f44bf0ace62bc9e2ed892b597e1307bd9cb46bd?s=96&d=mm&r=g","caption":"Athin\u00e1 Fourtounidis"},"description":"Athin\u00e1 is een boekenwurm met een liefde voor schrijven. Naast haar diverse job als communicatiespecialist bij Hostnet houdt zij van reizen, fitness en mode.","sameAs":["https:\/\/www.linkedin.com\/in\/athin-fourtounidou\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/posts\/11733","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/users\/139"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/comments?post=11733"}],"version-history":[{"count":22,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/posts\/11733\/revisions"}],"predecessor-version":[{"id":17080,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/posts\/11733\/revisions\/17080"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/media\/11740"}],"wp:attachment":[{"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/media?parent=11733"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/categories?post=11733"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostnet.nl\/academy\/wp-json\/wp\/v2\/tags?post=11733"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}