Motion Design

Motion design is een techniek om gebruikers te sturen richting het handelingsperspectief en is onderdeel van de interactiepatronen op online communicatiekanalen. De Belastingdienst zet motion design in op een manier waarbij functionaliteit en corporate identiteit elkaar verbindt.

Motion matrix

Een component dient altijd dezelfde motion te hebben om consistentie te waarborgen. Ongeacht waar het zich bevindt. Er is een breed scala aan componenten die je kan inzetten tijdens de journey. Maak hiervoor gebruik de motion matrix. Staat in een journey de functie centraal? Wees dan terughoudend in de hoeveelheid motion. Is juist meer beleving nodig? Motion hier goed in ondersteunen.

Basisprincipes voor motion design

Verdiepende principes

Naast de basisprincipes zijn er zes verdiepende principes. Deze worden aangevuld op basis van functie of toepassing.

Call to action versterken

Door de nadruk te leggen op CTA's door middel van motion design, kun je de kans vergroten dat gebruikers de website bezoeken en de gewenste actie ondernemen. Dit kan op een aantal manieren:

• Delayed timing of knop. De CTA-knop net iets later laten verschijnen dan de tekst erboven. Hierdoor valt de knop meer op en is de kans groter dat de gebruiker erop klikt.

• Bewegend beeld als achtergrond. Beweging trekt de aandacht. Door een CTA over of in de buurt van een video te plaatsen, kan deze meer opvallen.

• Animations/ videos auto play on hover. Voor CTA's die in video's staan, willen we dat gebruikers deze video's bekijken. Wanneer een gebruiker de video's aanwijst, kan deze automatisch worden afgespeeld in preview-mode.

• Chat gebruiken voor tijdgevoelige CTA's. Aangezien de chatfunctie door de hele website beschikbaar is, kan deze op elk relevant moment tijdgevoelige CTA's leveren.

Attenderen

Gebruik motion om belangrijke elementen onder de aandacht te brengen, zoals in verschillende stappen in een proces, openstaande acties of hulp bieden. Hier zijn een paar manieren om de aandacht te trekken:

• Extra blok verschijnt. Als er een actie open staat, kan een 'attenderingsblok' verschijnen.

• Vinkje animeert. Als een stap of proces is afgerond, een vinkje kan animeren om te benadrukken dat een gebruiker aan het einde is.

• Icoon met illustratie animeert. Bij een illustratie kan de stippellijn met icoontje geanimeerd worden om extra aandacht te creëren.

• Tekst beweegt naar binnen. Terwijl de gebruiker aan het scrollen is, kan een gekleurde lijn verschijnen en naar binnen bewegen om een stuk tekst te uitlichten.

• Chat biedt hulp. Als de gebruiker zich in een proces bevindt dat een reactie vereist, kan inactiviteit gedurende een langere periode ervoor zorgen dat de chatbot verschijnt en hulp aanbiedt.

Welkom laten voelen

Bewegend beeld in de header. Op een landingspagina maken we gebruik van een grote foto in de header. Om toe te voegen aan de gebruikerservaring kan deze foto iets inzoomen of zelfs een rustige mini-video zijn.

• Illustratie beweegt in de header. Op de content pagina hebben we een grotere illustratie in de header. We kunnen een kleine beweging aan deze illustratie toevoegen.

• Video wordt full screen. Als de gebruiker stopt met scrollen om de video te bekijken, kan de video automatisch op volledig scherm worden weergegeven.

Storytelling

Storytelling met motion kan helpen om een meer boeiende en gedenkwaardige ervaring te creëren. Het is ook een manier om een klantreis via verschillende platforms aan elkaar te knopen, van een advertentie op sociale media tot aangifte doen op mijnbelastingdienst.nl. Dit kunnen wij bereiken door:

• Progressbar loader animatie. Een mini video met illustraties kan worden gebruikt als progressbar loader animatie om op een visuele verhalend manier te communiceren waar de gebruiker zich in een proces bevindt.

• Merkvlak animeert. We maken gebruik van fotocollages die samen het merkvlak vormen. Wanneer de gebruiker scrolt, kan motion helpen bij de vorming van het merkvlak. De foto's kunnen rustige mini-video's zijn die worden afgespeeld om een verhaal te vertellen.

• Gebruik motion om verschillende middelen binnen een journey met elkaar te verbinden. Een element dat terugkomt kunnen we gebruiken om een thema uit te lichten. In dit geval maken we gebruik van verhuisdozen voor het thema wonen. Het gebruik van hetzelfde element bindt ja al verschillende middelen in een journey, maar het toevoegen van motion daar bovenop kan een meerwaarde hebben. Door motion aan de dozen toe te voegen, kunnen de dozen beter opvallen.

Functioneel

Om de bruikbaarheid, betrokkenheid en effectiviteit van de website te helpen verbeteren. Dit kunnen wij realiseren door:

• Knoppen hebben hover states. Om de gebruiker visuele feedback op interacties te geven, moeten alle knoppen een hoverstate hebben.

• Illustratie beweegt. Voor knoppen met een illustratie erin kan de illustratie iets bewegen in de hoverstate.

• Extra info in hover. Extra informatie kan worden onthuld in een tegel in de hoverstate.

• Uitklap. Motion in uitklap scroll, zodat de info in de uitklap in het midden staan.

• Toon progressie. Laat de gebruiker voelen hoe ver ze zijn in een proces of hoeveel er nog over is. Progressbar wordt gevuld als je verder gaat.

Bij de hand nemen

Gebruik motion om de gebruiker op zijn gemak te stellen en door zijn taak te leiden. Dit kunnen wij realiseren door:

• Gebruik progressive disclosure. We tonen alleen de next stap als de gebruiker de eerste stap heeft uitgevoerd.

• Scroll neemt je mee. Neem je op een natuurlijke wijze mee naar het gekozen onderdeel.

• Knop wordt actief. Een knop verandert van kleur of wordt alleen actief wanneer de gebruiker naar de volgende stap mag gaan.

• Checklist vult in. Gebruik motion om te laten zien waar de gebruiker zich in een proces bevindt. Voordat de inhoud voor de volgende stap wordt geladen, moet het vinkje in de checklist worden geanimeerd.

• Uitleg knop beweegt. Icoon maakt een beweging als de gebruiker een tijdje inactief is geweest om extra hulp te bieden.

• Motion in infographics. Waar we infographics gebruiken, kan motion helpen voor leesvolgordelijkheid en stapgewijs informatie aan te bieden.

Voorbeelden toepassing principes

Als voorbeelden van motion design gebruiken we drie mini-journeys die variëren in de hoeveelheid motion. De 'Over ons' journey valt meer in de beleving/storytelling kant waardoor er ook meer motion kan worden ingezet. Terwijl we voor een meer functionele journey als 'Aangifte doen' motion gebruiken die puur functioneel en helpend is.

Aangifte doen

Logt na het zien van een social media advertentie in op Mijnbelastingdienst.nl en start het aangifteproces.

Woning kopen

Begint met het zien van een campagneadvertentie op televisie. Neemt een checklist op de website van de belastingdienst door om te zien welke invloed dit heeft gehad op hun situatie.

Overons

Via een Google-search beland je op de Over ons-pagina. Waar we het verhaal over de Belastingdienst en de feiten en cijfers zien.