Melle Wynia

Artikel

Nut van animaties

Al vaak heb ik van die-hard commandline *unix-mensen, Microsoft gebruikers van het eerste uur (DOS), codevreters en hardcore developers maar ook “normale” mensen te horen gekregen dat animaties onzinnig zijn.

Het klopt dat animaties niets toevoegen aan de content (inhoud) van een site, maar deze kunnen er wel voor zorgen dat de boodschap sneller overkomt. Enerzijds worden producten en diensten die aantrekkelijker, anderszijds kunnen stukken informatie gemakkelijker overzien en doorgrond worden. De usability van een site kan dus worden verbeterd met animaties.

Over toegenomen usability door animaties is vrij weinig bekend.. Aan de hand van een aantal voorbeelden ga ik proberen aan te geven hoe de usability kan worden verbeterd, zij het non-wetenschappelijk.

Waarom dan animaties?

Elke keer als gebruikers van informatie verwisselen (denk hierbij aan het schakelen tussen vensters, tabs, scrollen, etc.) kunnen animaties op twee manieren helpen dit overzichtelijker te maken.

Enerzijds worden aanknopingspunten verwisseld via een animatie waardoor de overgang natuurlijker tussen informatie natuurlijker is, anderzijds gaan mensen de animatie associëren met haar functie: een bepaalde manier van wisselen tussen vensters.

Animaties kunnen ervoor zorgen dat mensen gemakkelijker de content van een site begrijpen, waardoor de site toegankelijker en beter te begrijpen wordt.

Vensterwisseling

In vrijwel alle OS'en zijn verscheidene manieren om van (applicatie)venster te wisselen. Denk dan aan de taakbalk, het dock, Exposé, Page Flip 3D, CMD+TAB (of ALT+TAB) of simpelweg het klikken op een “onderliggend venster”. Een aantal hiervan zijn geanimeerd.

Exposé (MAC OS, Linux Compiz)

Bij Exposé worden er miniaturen getoond van alle openstaande (applicatie)vensters boven het bureaublad. Na het indrukken van de toetsencombinatie om Exposé te activeren wordt de overgang van het huidige venster naar het overzicht van venster begeleid door een animatie. Het actieve venster wordt daarbij, net zoals alle andere vensters, verkleind en naast de andere vensters geplaatst terwijl de achtergrond een donkerder gemaakte bureaubladafbeelding laat zien (dit is om contrast met bureaubladafbeelding vs. venster te vergroten).

Als dit zou gebeuren zonder animatie zou er een shockeffect kunnen optreden: desoriëntatie bij (vooral de wat meer onervaren) gebruikers. “Wat deed ik nou net?”: 1. het venster waarin ik werkte is zomaar weg 2. ik zie een niets betekende brei van vierkanten (vooral bij veel openstaande vensters).

Na plus-minus vier seconden in shock te zijn geweest, ziet de gebruiker de eerste aanknopingspunten: a. de donkere bureaubladachtergrond b. herkenbare vensters. Hierna herinnert de gebruiker zich weer wat voor situatie dit is en klikt ze op het venster waar ze vandaan kwam.

Door Exposé te animeren kun je deze desoriëntatie deels voorkomen: aanknopingspunten (o.a. actieve venster) blijven herkenbaar en daarnaast kun je de animatie zelf ook zien als een aanknopingpunt voor de manier van vensterwisseling: zo zullen gebruikers dit type animatie gaan associëren met Exposé.

Windows Flip 3d (Windows Vista+, Linux Compiz)

Voor Windows Flip 3d geldt hetzelfde principe als voor Exposé: de animatie zorgt ervoor dat de aanknopingspunten niet verdwijnen en de animatie wordt geassocieerd met deze vorm van vensterwisseling door de gebruiker.

Compiz Shift Switcher (Linux Compiz)

Met Compiz kun je in Linux de ALT+TAB vensterwisseling laten animeren: geanimeerd verkleint het actieve venster en de vensters eronder op volgorde. Aanknopingspunten blijven behouden. Deze animatie is uniek waardoor gebruikers deze animatie al snel zullen gaan associëren met het wisselen tussen vensters.

Een ander groot voordeel van deze methode is dat alle vensters slechts een klein beetje worden verkleint waardoor de aanknopingspunten duidelijker herkenbaar zijn en je venster er snel uitpikt.

Scrollen

Door de mogelijkheid van geleidelijk scrollen door documenten en websites wordt het gemakkelijk deze te begrijpen en te blijven doorgronden.

Stel je voor dat je altijd een “Page Down” en “Page Up” om door een venster te navigeren. Bij een “Page Down” schuift de pagina in de viewport (hetgeen wat je nu ziet in een venster) plotseling naar beneden en is slechts een klein randje te zien van waar je was. Hierdoor verdwijnen aanknopingspunten zomaar, iets wat kan leiden tot desoriëntatie en daardoor een doorbreking van de concentratieboog.

Stel je voor: een pagina met alleen tekst en weinig herkenbare aanknopingspunten (zoals afbeeldingen en kleur) zou dan lastiger te lezen worden. Bij elke “Page Down” zou je dan moeten gaan zoeken naar waar je was gebleven met lezen, met als enigste aanknopingspunt wat je net had gelezen.

Scrollen met scrollwieltje

Dit probleem wordt deels opgelost door gebruik te maken van de scrollfunctie op een muis of touchpath. Hierdoor kan de gebruiker precies beslissen hoever de pagina in de viewport moet verschuiven zodat je de aanknopingspunten in beeld kunt houden om vervolgens door de kunnen lezen. Een ander voordeel van geleidelijk scrollen is ook dat de gebruiker haar ogen op het midden van het scherm gefocust kan houden.

Scrollen met momentum

In MAC OS 10.6 staat scrollen met momentum automatisch aangevinkt (als de hardware het ondersteund). Dit zorgt ervoor dat het scrollen 100% geanimeerd is en heel vloeiend aanvoelt. Als op de touchpath heel snel gescrolld wordt, zal de animatie sneller gaan. Hierdoor is het nog gemakkelijker om je aanknopingspunten in beeld te houden.

Lightbox & modal windows

Een van de eerste toepassingen waarvoor op het web massaal animaties worden gebruikt, zijn lightboxen en modal windows. In feite: het verschijnen van nieuwe informatie.

Tegenwoordig associëren de meeste internetgebruikers de fade-in naar een transparant zwart al met een lightbox verschijning. Je voorkomt hiermee ook dat mensen denken dat zij naar een nieuwe pagina genavigeerd zijn (met als gevolg dat de "Terug"-knop gebruikt wordt om terug te gaan waarna de gebruiker een pagina te ver terug lijkt te gaan).

Verschijnende tabinhoud

Tabnavigaties en hun tabinhoud zijn het lastigst intuïtief te laten animeren. De enige aanknopingspunten die behouden blijven hebben niets met de tabnavigatie te maken: de tabinhoud verdwijnt en wordt vervangen door nieuwe. Daarnaast is er een gevaar dat een tabinhoud teveel hoogte krijgt waardoor bij het openen van een andere tab de browser view port verschuift. Bij een te grote verschuiving raken de aanknopingspunten, buiten de tab om, ook buiten beeld.

Het enigste wat dus overblijft om tabwisselingen intuïtief te laten aanvoelen is een animatie toevoegen: 1 verschuiving van tabinhoud, 2 in- en outfaden van tabinhoud en 3 margins verplaatsen naar volgende tab.

Specifiek wil ik ingaan op verschuiving van tabinhoud. Het grote nadeel van een verschuiving-animatie is dat er in feite meestal geen logische verschuiving van inhoud is: de inhoud wordt vervangen door nieuwe. Daarnaast creëer je het gevoel van "terug" en "vooruit" gaan. Dit is eigenlijk alleen logisch wanneer er sprake is van zo'n hiërarchie tussen de tabinhoud. Bijvoorbeeld: leerling, student, promovenda, werknemers.

Kort samengevat: animaties...

0. zien er mooi uit, verkopen beter,

1. behoud van aanknopingspunten, veel overzichtelijker,

2. worden geassocieerd met handelingen (aanknopingspunten), voelt intuïtiever...

met als doel de usability te verbeteren.