Beweging creëert betekenis en plezier in digitale ervaringen

"Beweging is de sterkste visuele oproep tot aandacht", zei perceptiepsycholoog Rudolf Arnheim. Ten slotte wint dit idee aan kracht in de wereld van digitaal ontwerp. Er is een groeiende interesse onder UX-ontwerpers en visuele ontwerpers in de integratie van beweging in hun ontwerpactiviteiten. Maar de vakgebieden missen de kennis, concepten en taal om dit te doen.

Er is een discours in opkomst om het juiste denken en de juiste expertise te ontwikkelen. Niet alleen met betrekking tot de implementatie van bewegingselementen, maar ook meer fundamenteel hoe we kunnen leren van animatie-experts en hoe we kunnen voortbouwen op hun visie en principes. Het ontwerpen van vloeiende, aantrekkelijke en betekenisvolle digitale ervaringen met animatie en motion design is wat de gemeenschappen moeten leren. Omdat motion design de aandacht van de gebruiker effectief kan leiden op manieren die zowel informeren als verrukken.

Beweging is een uiterst belangrijk onderdeel geworden van de interface-ontwerpervaring voor verschillende toepassingen. Het is een belangrijk onderdeel geworden van mobiele, web- en softwaretoepassingen van vandaag. Webdesignexperts wijzen erop dat bewegingsanimatie in UX het vermogen heeft om een positieve emotionele reactie op te roepen. De populariteit van bewegingsanimatie getuigt van het steeds toenemende belang van esthetiek voor digitaal ontwerp. De sleutel tot het maken van een geweldige animatie is om echte wereldbewegingen om te zetten in de digitale wereldervaring. Als gevolg hiervan kan animatie helpen bij het creëren van een gedenkwaardige gebruikerservaring.

De animatiebijbel 'De Illusie van het Leven' komt van een naam met een rijke associatie met animatie: Disney. Disney-animators Frank Thomas en Ollie Johnston publiceerden een raamwerk voor animatie dat vandaag de dag nog steeds de standaard is. In dit baanbrekende werk definieerden ze een reeks animatieprincipes. Kortom, deze principes zijn:

1. Squash & Stretch: Geef objecten een gevoel van fysieke massa en reactievermogen door ze te laten samentrekken of strekken wanneer ze worden bewogen. Bepaal het niveau van realisme dat u wilt en pas het effect dienovereenkomstig toe.
2. Solid Drawing: Een basismateriaalprincipe waarin objecten gewicht en balans weerspiegelen, net als hun echte tegenhangers. Dit principe gaat over het respecteren van de regels van de driedimensionale ruimte en het geven van objecten en tekens passende dimensionaliteit via volume en gewicht.
3. Twee manieren om beweging te tekenen: Straight Ahead Action & Pose to Pose. Straight Ahead Action-animatie brengt dynamische en complexe bewegingen over, terwijl Pose to Pose meer voorspelbare bewegingen omvat.
4. Boog: Beweging die een boog volgt voelt natuurlijker aan, terwijl beweging langs rechte lijnen mechanisch aanvoelt. Bogen helpen ook de aard van de beweging te definiëren.
5. Enscenering presenteert de actie die u zo duidelijk mogelijk wilt illustreren. Pas kleuren, contrast en compositie toe om de aandacht op het primaire object te richten. Enscenering gaat over het benadrukken van het centrale idee van een animatie, waardoor het volledig duidelijk wordt voor de kijker.
6. Timing is waarschijnlijk het belangrijkste principe van allemaal. Het maakt niet uit wat u animeert, de perceptie en het begrip van gebruikers worden bepaald door de manier waarop u de volgorde opbouwt, wat u uw primaire of secundaire beweging maakt, wat u Ease-In of Ease-Out maakt.
7. De principes Follow Through & Overlapping Action gaan over het orkestreren van meerdere gelijktijdige bewegingen. Follow Through helpt de hiërarchie tussen interface-elementen te communiceren en prioriteiten te stellen in je motion symphony, terwijl Overlapping Action de hele reeks naadloos en binnen maat houdt.
8. Het Secondary Action-principe is het brood en de boter van de truc van een goochelaar en het manipuleren van veranderingsblindheid. Het helpt u te definiëren wat voor de gebruiker moet worden geplaatst en wat verborgen moet blijven. Vuistregel: secundaire acties mogen nooit de aandacht afleiden van de primaire acties.
9. Slow In & Slow Out is een van de meest fundamentele hulpmiddelen om de aandacht van gebruikers te trekken en beweging er tegelijkertijd authentiek uit te laten zien. Dit principe helpt gebruikers uw geanimeerde verhaal te volgen door een begripshiërarchie te maken. Door de wetten van de fysica in uw digitale wereld te laten bestaan, wordt de ervaring herkenbaarder voor gebruikers. Aan de functionele kant hebben mensen de neiging om meer aandacht te besteden aan objecten die vertragen en onscherp worden op de versnellende objecten.
10. Anticipatie is een krachtig principe dat zowel in het begin als het einde van je animatie kan worden gebruikt. Het uiterlijk van het object suggereert de actie. Het is nuttig bij het voorbereiden van een object voor beweging, het orkestreren van de componenten van een scène om de kijker een idee te geven van wat er staat te gebeuren.
11. Overdrijving zorgt ervoor dat beweging dynamisch, levendig en gewoon leuk aanvoelt. Een animatie zonder enige mate van overdrijving kan er nauwkeurig uitzien, maar zal waarschijnlijk stijf, mechanisch en saai aanvoelen. Disney's klassieke definitie van overdrijving is om trouw te blijven aan de realiteit, maar om een wildere vorm te presenteren.
12. Aantrekkingskracht is de meest mysterieuze van alle Disney's principes. Denk na over alle apps en sites die u dagelijks gebruikt en waarom u ze blijft gebruiken. Vaak zijn er veel anderen die dezelfde taken kunnen oplossen, maar degenen die mensen vasthouden om veel meer te doen. Ze verrassen en verrukken je; ze stellen je in staat om grotere doelen te bereiken. Ze hebben meer dan alleen een goede gebruikerservaring; ze hebben een emotionele aantrekkingskracht.

Maar hoe verbind, pas en integreer je deze animatieprincipes met principes in experience design voor het digitale domein? In een boeiende presentatie putten ervaringsontwerper Rebecca Ussai en de legendarische Disney-animator Glen Keane uit deze sets principes en introduceerden ze het concept van UX Choreography. Het biedt een nieuw paradigma dat UX- en visuele ontwerpers helpt om beweging beter in hun werk te integreren. Het raamwerk ondersteunt hen bij het nadenken over hoe ze met beweging kunnen ontwerpen om ervaringen te creëren die intuïtiever, realistischer, emotioneler en plezieriger zijn. Het maakt gebruik van Disney's principes van animatie en combineert ze met de meest integrale momenten in de gebruikerservaring.

1. Feedback helpt het resultaat van de interactie van een gebruiker aan te tonen, of het succesvol was of niet, en waarom. Overdrijving (het Disney-principe) is iets dat wordt gevoeld, niet alleen gezien. Vaak zie je personages op een onmiskenbaar grote manier reageren.
2. Feedforward is een vorm van hinten, het is visuele affordance. Het brengt mogelijke interacties over en wat ze kunnen verwachten, zodat gebruikers beter begrijpen hoe dingen werken en bij elkaar passen. Het helpt hen doelen te bereiken. Anticipatie (het Disney-principe) heeft een vergelijkbaar doel: een publiek voorbereiden op wat er staat te gebeuren.
3. Spatial Awareness helpt gebruikers te oriënteren op hun omgeving en verduidelijkt de relaties tussen elementen. De belangrijkste doelstellingen zijn het oriënteren van gebruikers en het geven van logica aan omgevingen. Ruimtelijk inzicht begeleidt het juiste gebruik van schermvastgoed om de complexiteit te verminderen. Disney's principe van Staging leert ons hier veel over.
4. User Focus leidt de aandacht van de gebruiker en verduidelijkt veranderingstoestanden. Het controleert de overgangen van hiërarchie op elk moment in de tijd. Het legt de nadruk op de juiste elementen, afhankelijk van wat het doel is. Disney's principe van duidelijkheid ondersteunt dit UX-principe.
5. Brand Voice geeft de expressie, persoonlijkheid en identiteit gedurende de hele ervaring van het merk. Je hebt het gevoel dat ze je verrukken, of ze stellen je in staat, of je haalt iets uit een activiteit. Ze hebben meer dan alleen een goede gebruikerservaring. Ze hebben een emotionele aantrekkingskracht. Het zorgt voor verrassing en verrukking. Het beïnvloedt de emotionele ervaring. Aantrekkingskracht is het Disney-principe dat een van de meest magische is, maar toegegeven, het kan moeilijk zijn om voor te ontwerpen. Het gaat erom wat ervoor zorgt dat dingen goed voelen.

Motion-based design brengt een belangrijk aspect in UX: genot. Beweging is een natuurlijke manier om met dingen om te gaan en het is absoluut cruciaal voor het digitale ontwerp van de toekomst. We moeten afscheid nemen van statische gebruikersinterfaces en interfaces creëren die veel menselijker en levendiger zijn. Het maken van een bewegingstaal voor uw app versterkt uw merk en complimenteert uw ontwerp. Het UX Choreography framework is slechts een eerste poging om dit te doen.

Door beweging toe te voegen aan het repertoire van digitale ontwerpers, past het veld meer en meer bij het beroemde citaat van visionair Ted Nelson, namelijk dat "interactieve software een tak van filmmaken is."

• Interfaceanimatie ontwerpen: betekenisvolle beweging voor gebruikerservaring (Val Head, Rosenfeld Media 2016)
• De principes van UX Choreography: De kruising van Disney en UX en waarom het leren tekenen van Mickey Mouse zal veranderen hoe je design benadert (Rebecca Assai, 2015)
• Making Motion Meaningful: Motion designers uit de omgeving van Google delen enkele van hun meest ontroerende productfunctiesSharon Correa en John Schlemmer, Google Design 2016)
• Beweging in UX Design (Nick Babich, UX Planet 2016)
• Communicerende animatie (Rachel Nabors, A List Apart 2016)
• Beweging en betekenis: Een podcast over beweging voor digitale ontwerpers (Val Head en Cennydd Bowles)