De invloed van motion design op UX

Rafaela en ik waren een tijdje terug in Londen voor een conferentie over user experience design. Hier sprong één van de presentaties er voor ons helemaal uit. Namelijk die van Rebecca Ussai (specialist in UX en motion) en Glen Keane (legendarische Disney-animator die onder andere animeerde voor ‘De Kleine Zeemeermin’, ‘Belle en het Beest’ en ‘Aladdin’). Wat kunnen wij leren van Disney als het gaat om het verbeteren van de gebruikerservaring op apps en websites?

Rebecca Ussai begon haar carriere met het idee dat ze zich ging focussen op titelsequenties (Titelwattes? Dit kan bijvoorbeeld de intro van een televisieserie zijn.). Daarom volgde ze een cursus genaamd ‘Time, Motion and Communication’. Uiteindelijk rolde ze in UX design, maar dit kijkje in motion design gaf haar een heleboel inspiratie voor haar huidige werk. Ze leerde om elk element op het scherm te zien als een personage dat gedirigeerd dient te worden, dat een bepaald gedrag vertoont en een persoonlijkheid heeft. Als UX designer bepaal je bijvoorbeeld dat een menu zich uitvouwt wanneer men op een knop klikt. Hierbij mis je echter een belangrijk onderdeel, namelijk alles wat daar tussenin gebeurt. Tijd en beweging spelen een belangrijke rol wanneer je de ervaring voor de gebruiker zo vloeiend mogelijk wilt maken. Motion design helpt je bij het creëren van intuïtieve ervaringen die de gebruiker een fijn gevoel geven.

Een legende op het gebied van motion design is natuurlijk Disney. Met hun prachtige animatiefilms veroveren zij nog steeds de harten van vele mensen. Twee animators van Disney stelden ‘de 12 Principes van Animatie’ op, principes die ervoor zorgen dat beweging er realistisch uitziet en een emotionele lading krijgt. Zij wisten dat mensen het liefst kijken naar zaken die zich op een manier bewegen die natuurlijk aanvoelt. Ook wisten ze dat het aanspreken van emoties belangrijk was om hen geboeid te houden. Dit is waar Disney samenkomt met UX design. Wat we hiervan kunnen leren? Dat het niet alleen gaat om functionaliteit, maar om plezierige ervaringen en het vertellen van een verhaal. Rebecca Ussai spreekt van UX choreografie.

‘De 12 Principes van Animatie’ zijn niet allemaal van toepassing op UX design, al kunnen we uit vrijwel elk principe wel iets van inspiratie halen. Rebecca Ussai heeft ze teruggebracht naar ‘de 5 principes van UX choreografie’. Deze principes vullen volgens haar het gat op tussen de twee uitersten van bijvoorbeeld het klikken op een knop tot het uitvouwen van een menu. Op die manier bied je gebruikers net even wat meer dan gewoon een goede gebruikerservaring.

 

1. Feedback geven

Door middel van feedback laat je de gebruiker weten of een actie succesvol was of niet. Bijvoorbeeld door te laten zien of iets juist of onjuist is, dat iets bezig is met laden of als je iets selecteert. Dit geeft een gevoel van vertrouwen. Wat kunnen we op dit gebied leren van Disney? Het moet overduidelijk zijn. Daarom is het goed om te overdrijven, net als bij animaties:

 

2. Verwachting scheppen

Het is heel erg belangrijk om gebruikers hints te geven over wat er zal gebeuren wanneer ze een bepaalde actie uitvoeren. Zo voorkom je dat men verward raakt of bepaalde functionaliteiten gewoon volledig mist. Deze hints kunnen heel subtiel zijn, door bijvoorbeeld een verborgen menu heel kort te tonen of door een gebruiker al te laten zien wat er gaat gebeuren terwijl hij een actie uitvoert. Als hij van boven naar beneden slide, ziet hij bijvoorbeeld al dat er iets naar beneden getrokken wordt. Het scheppen van verwachting is iets dat ook in animatie gebruikt wordt:

 

3. De regie over de ruimte

Als designer heb je een canvas dat je helemaal naar eigen wens kunt inrichten. Zeker als het gaat om apps en mobiele websites bestaan er vaak allerlei elementen die niet direct zichtbaar zijn voor de gebruiker. Nu is deze wereld die jij hebt gecreëerd voor jou natuurlijk heel erg logisch, je hebt hem immers zelf geschapen. Dat wil echter niet zeggen dat het voor gebruikers ook logisch is. Zij moeten wennen aan elke (online) omgeving waar zij in terecht komen en jij dient ze de weg te wijzen. Ze moeten leren waar dingen vandaan komen, waar ze vervolgens heen kunnen en hoe ze er nogmaals kunnen komen. Plotselinge gebeurtenissen zorgen voor verwarring en een minder fijne gebruikerservaring. Ook Disney wijst kijkers de weg binnen de gecreëerde ruimte. Glen doet dit bijvoorbeeld door verwachting te scheppen. In onderstaande korte film (die overigens prachtig is) zie je dat er regelmatig ruimte wordt bewaard aan de linker- of rechterkant, zodat de karakters hier ruimte hebben om te bewegen. Ook kijken de karakters voor ze gaan lopen alvast de kant op waar ze heen zullen gaan. Je krijgt zo als kijker een duidelijker beeld van de ruimte waarin ze zich bevinden, waardoor het nooit onnatuurlijk gaat voelen.

 

4. Focus aanbrengen

Focus zorgt ervoor dat gebruikers de aandacht op de juiste elementen vestigen, afhankelijk van het doel dat je voor ogen hebt. Het kan zo simpel zijn als een element naar de voorgrond brengen wanneer deze nodig is, maar ook de achtergrond kan juist wat vager of donkerder gemaakt worden om een ander element de focus te geven.

 

5. Geef het aantrekkingskracht

Tone of voice wordt vaak geassocieerd met tekst, maar je kunt dit veel breder trekken. Rebecca Usai zegt dat we ons het volgende zouden moeten bedenken: “Als een merk tegen ons zou praten, wat zou het dan zeggen?”, maar ook “Als een merk zou bewegen, hoe zou dat dan aanvoelen?”. Veel apps en websites zijn zeker niet uniek in wat ze te bieden hebben, maar waarom heb je dan toch je favorieten? Dit heeft te maken met een bepaalde aantrekkingskracht. Niet alleen zijn deze apps en websites gebruiksvriendelijk, ze geven je een fijn gevoel. Karakteristieke elementen, grappige illustraties, maar ook kracht of charme die wordt gecreëerd door een bepaalde manier van bewegen. Nike laat dit bijvoorbeeld heel goed naar voren komen in hun app. De hele experience straalt sport uit:

Als designer ben jij de regisseur van jouw verhaal. Jij bedenkt de karakters, van hun uiterlijk tot aan hoe ze zich bewegen. Jij bepaalt hoe ze het podium betreden, wat ze op het podium doen en hoe ze het podium weer verlaten. Het is jouw taak om het allemaal zo realistisch en aantrekkelijk mogelijk te maken, zodat de gebruikers een ervaring krijgen waar ze keer op keer naar terug willen keren.

 

Meer weten over dit onderwerp? Deze boeken zijn interessant om te lezen:

The Animator’s Survival Kit – Richard Williams

The Illusion of Life – Frank Thomas, Ollie Johnston

Door Andrée Lange