4 manieren om functionele animatie te gebruiken in UI-ontwerp
Nog geen tien jaar geleden werden gebruikersinterfaces die gebruikmaakten van animaties vermeden, meestal geassocieerd met pop-ups en knipperende advertenties, maar dit is veranderd. Vandaag vormen details van interactieontwerp en -animatie een fundamenteel verschil op moderne websites en in moderne apps. Deze mindsetverschuiving komt duidelijk tot uitdrukking in de verklaring van Zurb:
We ontwerpen niet langer alleen statische schermen. We ontwerpen voor hoe de gebruiker van die schermen komt om daadwerkelijk inhoud te bekijken.
Als we betere digitale producten willen ontwerpen, moeten we vanaf het allereerste begin het interactieve karakter van de app en websites omarmen.
Waarom animatie werkt
Beweging heeft van nature het hoogste niveau van prominentie in een gebruikersinterface. Noch tekstkopie noch statische afbeeldingen kunnen concurreren met beweging. Onze ogen zijn bedraad om aandacht te schenken aan bewegende objecten - het is bijna een reflex. We kunnen hiervan profiteren met deze functionele animatie.
Wat is functionele animatie?
Functionele animatie is een subtiele animatie ingebed in de gebruikersinterface als onderdeel van de functionaliteit van dat ontwerp. Het heeft een zeer duidelijk en logisch doel:
- Verminder cognitieve belasting
- Voorkom verandering van blindheid
- Zorg voor een betere recall in ruimtelijke relaties
Bij een mensgerichte ontwerpbenadering, waarbij de gebruiker de primaire focus heeft, moet een gebruikersinterface intuïtief, responsief en menselijk zijn. Functionele animatie helpt u om deze doelen te bereiken.
Hoe functionele animatie UX verbetert
Onze ervaring en indruk van een app of site worden gevormd door een combinatie van factoren, waarbij interactie een fundamentele rol speelt. Beweging toevoegen aan ons ontwerp kan zinvol en functioneel zijn als we de juiste omstandigheden vinden. Goed doordachte en geteste functionele animatie heeft het potentieel om meerdere functies te vervullen, waaronder:
1. Visuele feedback
Goed interactieontwerp levert feedback op. Feedback bevestigt dat het systeem de actie van een gebruiker heeft ontvangen en toont het resultaat van de interactie aan of het succesvol was of niet. Animatie in deze groep moet heel subtiel zijn en moet responsief worden ontworpen.
Knop feedback
In het echte leven reageren knoppen op onze interactie en dit is hoe we verwachten dat de dingen werken. Om voorspelbaar te zijn voor de gebruiker zou de digitale interface op dezelfde manier moeten werken.
Bron: Jaron Pulver
Visualiseer het resultaat van een actie
Door het principe te volgen, niet vertellen , kunt u geanimeerde feedback gebruiken om te benadrukken dat er iets mis is gegaan. Visuele shake-animatie bijvoorbeeld op onjuiste toegangscode. Het is als het trillen van het hoofd alsof je zegt "nee, probeer het opnieuw". De gebruiker ziet de animatie en begrijpt meteen de huidige status.
U kunt ook de acties versterken die een gebruiker uitvoert. In het onderstaande voorbeeld, wanneer de gebruiker op "Verzenden" klikt, verschijnt kort een spinner voordat de app de successtatus toont. De vinkje-animatie geeft de gebruiker het gevoel dat het proces met succes is voltooid.
Afbeelding credit: Colin Garven
2. Verzachtende staatsveranderingen
Andere goede plaatsen om animatie toe te voegen in ontwerp zijn op momenten van verandering. Wijzigingen in de gebruikersinterface, met name op het web, brengen vaak harde sneden met zich mee, waardoor ze moeilijk te volgen zijn. Niets voelt onnatuurlijker dan een plotselinge verandering. Abrupte veranderingen in een interface zijn moeilijk voor gebruikers om te verwerken. Deze momenten van verandering moeten worden verzacht door wat animatie toe te voegen aan de gebruikersinterface.
Verbindingen tot stand brengen
Geanimeerde overgangen moeten fungeren als tussenpersonen tussen de verschillende toestanden van de gebruikersinterface, zodat gebruikers kunnen begrijpen wat er gaande is wanneer de schermstatus verandert. De gebruiker volgt gewoon de beweging en begrijpt hoe de twee UI-staten met elkaar in verband staan.
Afbeeldingen credits: Anish Chandran
Het werkt ook goed voor het koppelen van miniatuurweergaven en detailweergaven:
De kaart animeert vanuit de oorspronkelijke positie naar een positie in de modal, waardoor het duidelijk is dat het hetzelfde item is, alleen met meer details.
Afbeeldingen credits: Charles Patterson
Bel aandacht voor veranderingen
Animatie kan het oog helpen te zien waar een nieuw object vandaan komt op de onthulling of waar een verborgen object naartoe gaat, en kan opnieuw worden gevonden. We kunnen het gebruiken om de aandacht te vestigen op wijzigingen die informatie verbergen of onthullen, zoals het openen van zijladen van inhoud. In het onderstaande voorbeeld schuift de hoofdnavigatie uit de weg wanneer u op het hamburgerpictogram klikt. Die beweging laat je weten dat het hoofdmenu niet is verdwenen.
Afbeeldingen credits: Tamas Kojo
3. Zichtbaarheid van de systeemstatus
Als een van de oorspronkelijke tien heuristieken van Jakob Nielsen voor bruikbaarheid, blijft de zichtbaarheid van de systeemstatus een van de belangrijkste principes bij het ontwerp van de gebruikersinterface. Voor gebruikers is het erg belangrijk om hun huidige context in het systeem op elk gewenst moment te kennen en te begrijpen.
Voortgangsindicatoren
Het uploaden en downloaden van gegevens biedt uitstekende mogelijkheden voor een functionele animatie. Geanimeerde laadbalken stellen een verwachting in over hoe snel de actie zal worden verwerkt. Animatie kan nuttig zijn in het geval van fouten. Zelfs een niet-aangename melding, zoals het downloaden van gegevens, mislukt, moet op een leuke manier worden afgeleverd.
Afbeeldingen credits: xjw
Trek om te vernieuwen
De wachttijd van een gebruiker begint op het moment dat ze een actie initiëren, en in het ergste geval is er geen indicatie dat het systeem het heeft ontvangen. De pull to refresh-actie moet onmiddellijk reageren . Het is essentieel om onmiddellijk visuele feedback te geven na ontvangst van het verzoek van de gebruiker om aan te geven dat het proces is gestart. Animatie helpt je daarbij.
Afbeeldingen credits: Tony Babel
4. Explanatory Animation
Soms hebben gebruikers een beetje extra hulp nodig om de gebruikersstroom te begrijpen of om te communiceren met bepaalde interface-elementen. Dit geldt met name voor gebruikersinterfaces die nieuwe of onbekende functies of interacties voor de gebruiker bevatten.
Onboarding
Onboarding van gebruikers vereist een onberispelijke UX, en animaties in een onboarding-stroom hebben een enorme invloed op hoe gebruikers zich voor het eerst bezighouden met een app. Animatie geeft je grenzeloze vrijheid om op een leuke manier iets over te brengen, hoe complex of hoe droog het onderwerp ook is.
Afbeeldingen credits: Anastasiia Andriichuk
Visuele hints
Animatie kan een aantal nuttige visuele aanwijzingen bieden. Explanatory animation wordt meestal gezien wanneer een pagina voor de eerste keer wordt geopend en de animatie laat zien hoe bepaalde elementen van de pagina zouden moeten worden gebruikt. Dit type animatie is te vinden in games die vaak erg goed omgaan met progressive disclosure, waardoor game mechanics worden onthuld naarmate je verder in een game komt. Dergelijke hints worden alleen geactiveerd wanneer de gebruiker het juiste punt in zijn ervaring bereikt.
Conclusie
Animatie is een krachtig hulpmiddel wanneer het op een verfijnde manier wordt gebruikt.
We moeten de beweging vanaf het begin omarmen en het als een natuurlijk onderdeel van ons ontwerp beschouwen, omdat design meer is dan alleen visuele presentatie. Zoals Steve Jobs zei over design: het is niet alleen hoe het eruit ziet en voelt. Ontwerp is hoe het werkt.