INNOVATION

UX-animatie – de basisregels

Goede UX-animaties voelen natuurlijk, subtiel en onopvallend aan. Het voelt bijna alsof het product fysiek is en reageert op wat de gebruiker doet, niet als een tekenfilm die er bovenop is geplakt. Een groot deel daarvan is om ze snel te houden, de bewegingen subtiel te houden en ervoor te zorgen dat ze een...

Last updated: 16 sep 2021 - 4 mins read

Robin Creative Director

CONTENTS

Goede UX-animaties voelen natuurlijk, subtiel en onopvallend aan. Het voelt bijna alsof het product fysiek is en reageert op wat de gebruiker doet, niet als een tekenfilm die er bovenop is geplakt. Een groot deel daarvan is om ze snel te houden, de bewegingen subtiel te houden en ervoor te zorgen dat ze een echt doel hebben om daar te zijn. Ten eerste moeten ze heel snel zijn. UX-animaties moeten tussen 100 milliseconden en 500 milliseconden duren.

En dat is op een absoluut maximum! Meestal wil je ze niet langer dan 300 milliseconden of zo. Dat is echt snel! Het is 1/10e tot 1/2e van een seconde, wat veel sneller is dan de meeste ontwerpers verwachten. En het ziet er misschien gehaast uit als je het ontwerpt en keer op keer bekijkt.

Vertragingstijd voor langere animaties

Maar vergeet niet dat hoe langer de animatie is, hoe meer vertraging de gebruiker ervaart. Dat wordt echt frustrerend. Vooral als je het voor de tweede, derde of vierde keer ziet. Je wilt dat de interface snel en responsief aanvoelt.

De algemene regel voor timing is: hoe verder iets op het scherm moet bewegen en hoe complexer de animatie, hoe meer tijd je nodig hebt om het er natuurlijk uit te laten zien.

Dat betekent dat je grote overdreven bewegingen moet vermijden, vooral op het bureaublad, waar je veel meer terrein moet afleggen. Complexere animaties kosten meer tijd en leiden vaak meer af. Houd de overgangen dus eenvoudig. Pictogrammen hoeven gebruikers niet te overdonderen met een dansroutine. Een halo van een eenvoudige kleurwisselaar is voldoende om aan te geven dat er iets is geklikt.

Voorkom dat dingen heen en weer stuiteren en uitrekken alsof ze van rubber zijn.

D. Laseur – Oprichter Flatline Agency

Je neemt de fysieke metafoor te letterlijk, het voelt cartoonesk en zweverig. Je wilt ook easing gebruiken om de timing natuurlijk te laten aanvoelen. Je wilt dat dingen een beetje versnellen wanneer ze voor het eerst in beweging komen en een beetje vertragen voordat ze tot stilstand komen. Dingen in de natuurlijke wereld bewegen niet perfect lineair. Ze versnellen een beetje.

Deze doos beweegt dus lineair.

Het ziet er stijfjes en onhandig uit

Deze heeft een lichte versoepeling aan het begin en het einde. Ziet het er niet beter uit? Dus een kleine mate van versoepeling zorgt ervoor dat dingen natuurlijker bewegen en helpt het oog van de gebruiker om te volgen waar iets beweegt.

Tot slot moeten animaties een doel dienen en iets overbrengen aan gebruikers. Neem ze niet alleen op om te proberen te verrukken of persoonlijkheid over te brengen. Dat wordt snel oud. Ze zijn het nuttigst om drie redenen: feedback, vindbaarheid en overgangen.

Als je het gebruikt voor feedback, houd het dan subtiel

Basisprincipes – UX-ontwerp

Als je op het winkelwagentje klikt, hoef je geen miniatuurafbeelding van een product te zien of in een grote boog over het scherm naar het winkelwagentje te zwaaien. Simpele kleurwijzigingen op de knop en een kleine indicator op de winkelwagen zijn voldoende om te bevestigen dat het systeem de klik van de gebruiker heeft begrepen. Hoewel je animatie kunt gebruiken om de aandacht te vestigen op dingen die anders over het hoofd gezien zouden worden, moet je animatie niet gebruiken om zwakke tekens goed te maken.

De foutmelding

Het tonen van een foutmelding die in beeld schuift kan goed zijn omdat het gebruikers helpt om het op te merken. Een dansend pijlpictogram op een pagina met een valse vloer is slecht!

Maak de pagina gewoon scollbaar. Animaties kunnen ook helpen bij overgangen omdat ze een visuele metafoor kunnen bieden voor wat er gebeurt. Dit gaat verder dan alleen een mooie laadindicator.

Je kunt ze gebruiken om duidelijk te maken wat voor soort overgang er plaatsvindt. Als je hier in de app store op een app-kaart klikt, verandert deze snel in een overlay op een volledig scherm.

Dat helpt om te communiceren dat je naar hetzelfde kijkt, maar dan gedetailleerder. Als dat venster gewoon meteen zou verschijnen, zou dat niet het einde van de wereld zijn, maar de overgang helpt bij het communiceren van de relatie tussen die schermvullende weergave en de kaart op het vorige scherm. Het suggereert ook subtiel dat je kunt vegen om het te sluiten. Dat kan de gebruiker helpen om onbewust een mentaal model op te bouwen van hoe het systeem werkt.

THINKING

Shopify zomeredities ’23 – onze favorieten

Stel je mijn bedrijf voor – Stel je mijn winkel voor – Stel je mijn toekomst voor Dit is de haak, Shopify stelt ons voor aan de Summer Editions ’23. Een van de krachtigste updates tot nu toe. Er hebben zich een aantal veranderingen voorgedaan in de digitale wereld, die automatisch van invloed zijn op...

Shopify’s afrekenen op één pagina

We hebben inmiddels allemaal gehoord van de Shopify Editions | Winter ’23 en de geweldige upgrades die het e-commerce platform binnenkort zal bieden. Shopify is een van de grootste spelers in de branche, met een aanzienlijk marktaandeel in de Verenigde Staten en een wereldwijde economische activiteit van meer dan 444 miljard dollar. De nieuwe update...

B2B met Shopify: Ontdek de kracht van Business-to-Business handel

In het huidige digitale tijdperk heeft eCommerce een revolutie teweeggebracht in de manier waarop bedrijven werken en in contact komen met hun klanten. Shopify, een van de toonaangevende eCommerce platforms, is niet alleen geschikt voor direct-to-consumer (DTC) bedrijven, maar biedt ook krachtige functies voor Shopify Plus handelaren die ze kunnen gebruiken voor business-to-business (B2B) transacties....

Shopify Markets Pro: De ultieme oplossing voor internationale e-commerce bedrijven

Wil je je e-commerce bedrijf uitbreiden en de internationale markt veroveren? Maar de complexiteit van internationale transacties heeft je doen twijfelen? Shopify Markets Pro biedt een alles-in-één oplossing die het proces van wereldwijd verkopen vereenvoudigt. We zullen je alles laten zien wat je moet weten over de nieuwe toolkit van Shopify Markets om je e-commerce...

WooCommerce migratie: Een stap-voor-stap handleiding voor je migratie

In de dynamische wereld van e-commerce betekent voorblijven niet alleen gelijke tred houden met technologie, maar deze ook in je voordeel gebruiken. Bij Flatline Agency hebben we een belangrijke trend waargenomen waarbij bedrijven hun digitale storefronts overzetten naar platforms die meer flexibiliteit, schaalbaarheid en gebruikersbetrokkenheid bieden. Inleiding WooCommerce wordt door velen geprefereerd vanwege de naadloze...

Shopware naar Shopify: De beste e-commerce tool in 2024

Overstappen van Shopware naar Shopify zou je volgende stap moeten zijn, maar waarom? Hoe dan? We zijn er om al deze vragen te beantwoorden, dus maak je geen zorgen. Inleiding Bij Flatline zien we een verschuiving in bedrijven op de digitale markt. Steeds meer bedrijven stappen over van Shopware naar Shopify om nieuwe groeikansen te...

Van Lightspeed naar Shopify: Optimaliseer je migratie in 2024

Migreren van Lightspeed naar Shopify is absoluut de moeite waard, maar waarom? En hoe? Maak je geen zorgen, al deze vragen worden hier beantwoord. Identificatie van Lightspeed en Shopify Lightspeed is een cloudgebaseerd handelsplatform op maat gemaakt voor detailhandel, horeca en golfbedrijven. Het biedt een uitgebreide set tools, waaronder POS-systemen (Point-of-Sale), voorraadbeheer en CRM (Customer...

ChatGPT 3.5 vs ChatGPT 4: Een directe vergelijking

De onthutsende verschillen tussen ChatGPT 3.5 en ChatGPT 4, naast elkaar. Welkom op onze nieuwste blog. Vandaag duiken we in de details van 2 van de populairste AI-tools ter wereld. ChatGPT 3.5 en ChatGPT 4. Zoals sommigen van jullie misschien al weten, is ChatGPT het betaalde abonnement van OpenAI. We zijn hier om deze betaalde...

HubSpot instellingen: Je duidelijke gids voor 2024

Een complete handleiding om al je vragen te beantwoorden over het instellen van je HubSpot-instellingen. Welkom bij onze gids over de navigatie door de instellingen van HubSpot. Als HubSpot nieuw voor je is en je niet zeker weet hoe of waar je moet beginnen, maak je dan geen zorgen. Deze gids en onze aanvullende video’s...

Seizoen 1/4 – Shopify B2B apps

Shopify B2B apps – de go-to’s van Flatline Shopify heeft zijn B2B-spel naar een hoger niveau getild. Er zijn veel mogelijkheden om te profiteren van het e-commerce platform en er zijn ook veel apps die gebruikt kunnen worden. We laten je kennismaken met de B2B basisprincipes van Shopify en onze Go to apps, voor Shopify...

Seizoen 1/3 – Shopify multistores

Shopify multistores – de innovatie van het samenvoegen van je online bedrijf Shopify heeft zich ontpopt als een baken voor retailers die hun digitale voetafdruk willen uitbreiden. Met de introductie van Shopify multistores hebben bedrijven nu de mogelijkheid om meerdere storefronts onder één paraplu te beheren, een functie die een revolutie teweeg heeft gebracht in...

Seizoen 1/2 – Shopify e-mail instellen

Laat ons je zien hoe je je Shopify e-mail instelt – winkel eigenaar e-mail en afzender e-mail! E-mail is meer dan een communicatiemiddel voor je klanten, het is een echt marketingmiddel dat op zoveel manieren kan worden gebruikt. 2024 is zeker een kans voor je om je postspel met Shopify te verbeteren. Maar er zijn...

E-mail als marketingkanaal

Inbox-innovatie – de nieuwe norm in e-mailmarketing begrijpen Vandaag duiken we diep in de wereld van het gebruik van e-mails als marketingkanaal, een gebied dat net een nieuw likje verf heeft gekregen dankzij enkele nieuwe updates van de bedrijfsgiganten Gmail en Yahoo. Wij helpen je graag met het navigeren door deze nieuwe updates en laten...

HubSpot lead funnel creation blog cover

Een trechter voor leads bouwen in Hubspot

Hey Flatline Fam, vandaag gaan we jullie door Hubspot “leiden”! Het maken van een HubSpot lead funnel is een strategisch proces dat je marketinginspanningen op elkaar afstemt om prospects te begeleiden van de eerste bewustwording tot conversie, door gebruik te maken van HubSpot’s krachtige tools voor automatisering, content management en relatiebeheer. Laten we dus eens...

This site is registered on wpml.org as a development site. Switch to a production site key to remove this banner.