This article is only available in Dutch 🇳🇱
Een balkje dat veelbelovend volloopt tijdens het laden van een pagina, een nieuw scherm dat subtiel in beeld schuift of een notificatie-icoon dat beweegt bij een nieuwe melding. Motion en een goede digitale gebruikerservaring gaan hand in hand. Om inspiratie op te doen en op de hoogte te blijven van de laatste ontwikkelingen, bezochten onze UX/UI Designers Arnout en Glenn samen met stagiaire Estèlle de Five Talks Motion. Een dag vol lezingen over Motion Design met de focus op typografie, branding en datavisualisatie. In dit artikel delen we de drie belangrijkste take-aways én onze eigen visie op de toepassing van motion binnen UX/UI Design.
Take-away #1 - Design met een doel
Als je een grote hoeveelheid exacte informatie wil presenteren, kun je kiezen voor een weergave in tabellen en grafieken. Maar in veel gevallen is het aanwakkeren van een emotie bij data veel belangrijker dan de daadwerkelijke cijfers. Door motion toe te voegen aan je datavisualisatie, maak je er een verhaal van waarmee je mensen boeit en aan de data verbindt. A Day in the Life of Americans en 200 Countries, 200 Years, 4 Minutes zijn mooie voorbeelden van hoe Motion Design complexe data tot leven brengt en toegankelijk maakt voor een groot publiek.
Take-away #2 - Neem motion mee in het hele proces
Zoek vanaf de start van het designproces naar manieren om motion toe te passen. Het liefst met de kennis en kunde van een Motion Designer die de fijne kneepjes van het vak kent. Zo zorg je dat je het optimaal en naadloos in je product(en) aanbiedt. Daarnaast benut je de volledige creatieve ruimte om alle mogelijkheden te ontdekken.
Take-away #3 - Schets, storyboard, software
Teken eerst op papier uit wat je duidelijk wil maken met behulp van motion. Neem in deze schets op welke vorm je wil neerzetten, wat het gewenste resultaat is en welke stappen nodig zijn om dat resultaat te behalen. Bepaal vervolgens met behulp van storyboards en/of een script hoe je de animatie vormgeeft. Dit maakt de digitale uitwerking in de software die je gebruikt veel efficiënter.
Motion: een essentieel onderdeel van UX/UI Design?
Tegenwoordig valt de afwezigheid van motion in een digitale gebruikerservaring meer op dan de aanwezigheid ervan. En dan met name die van micro-animaties. Zo heb je vast weleens meerdere keren op een button geklikt, omdat deze niet leek te reageren, terwijl hij het gewoon deed. Toch? Als web- of app-gebruiker heb je vaak niet eens door dat motion je beïnvloedt of zelfs door complexe processen heen leidt. Dat komt doordat goede motions subtiel inspelen op een set psychologische principes die de basis vormen voor UX/UI Design. Naast bevestiging, beïnvloeding en begeleiding van de app- of webgebruiker, dragen micro-animaties ook op andere manieren bij aan een positieve gebruikerservaring. Ze zorgen, indien goed toegepast, dat belangrijke elementen opvallen en dat transities tussen schermen natuurlijk aanvoelen.
Bij het gebruik van motion binnen UX/UI Design is het ten eerste belangrijk om rekening te houden met de toegankelijkheid. Goed functionerende motions vereisen een hoge beeldresolutie en een duidelijk contrast met de rest van de zichtbare content. Ten tweede geldt het principe ‘Less is more’. Een overdaad aan motion kan overweldigend zijn voor de gebruiker en cognitive overload veroorzaken. Daarom is het essentieel om van tevoren te bedenken hoe motion in een project kan bijdragen, welk verhaal het moet vertellen en welke psychologische principes worden geraakt. Het laatste belangrijke punt is de afstemming met de developers. Bepaal samen de juiste manier om de motion te produceren en werkbaar te krijgen in de systeemversies die de app of webapplicatie moet ondersteunen.
Kortom: motion verrijkt en verbetert - als je het op de juiste manier toepast - de digitale gebruikerservaring. Wat ons betreft is het bewustzijn over wat Motion Design kan bijdragen een logisch én essentieel onderdeel van de skillset van elke UX/UI Designer.