Vergroot de usability van je website met animaties

Een goede website neemt de bezoekers aan de hand. Zodat ze uiteindelijk op je site doen wat jij wilt. Het gaat om usability, gebruiksvriendelijkheid. Hoe animaties je hierin helpen? Wij laten het je zien.

Onze UX/UI designers zijn elke dag bezig met één vraag: hoe werkt jouw website het beste voor jouw bezoekers? Dit klinkt eenvoudig, maar de gereedschapskist van de UX/UI-designer om de usability te vergroten is heel uitgebreid.

Uuuuuh, UX/UI?

We hebben het over UX (User eXperience), UI (User Interface) en Usability. Klinkt hip, al die Engelse termen. Wat betekent het?

UX gaat over het strategische pad van je website: wat is het doel van en hoe stuur je de bezoekers hierheen? UI gaat over de visuele aankleding, de ‘verlichting’ langs het strategische pad. Beiden zet je in om de usability – de gebruiksvriendelijkheid – van je website te vergroten.

Wat moet jij met usability?

Op een oneindig aantal manieren kun jij je klanten in je website aan de hand nemen. Hoe is je menustructuur opgebouwd? Welke kleuren gebruik je voor buttons? Wat is de CTA (‘call to action’) van jouw website? Zo kunnen we wel even doorgaan. Gaan we nu niet doen.

We gaan het in deze blog hebben over één van de leukste manieren, die ten onrechte vaak vergeten wordt: animatie. Hoe kun je animaties inzetten om de usability van je website te vergroten? We laten hieronder drie interactieve voorbeelden zien.

“Animaties in je website zorgen er voor dat je website intuïtief aanvoelt.”

1. Animeren is oriënteren

Bij het invullen van een vragenlijst is het niet altijd duidelijk waar je je bevindt. Hoe los je dit op? Probeer het hieronder zelf!

See the Pen Animation in UX design – Orientation by Dizain (@dizain) on CodePen.

Bovenstaande animatie laat onmiddellijk zien dat er progressie zit in het invullen van de vragen. De beweging suggereert vooruitgang, net als het kleurverschil. Op subtiele wijze laat je website weten: ‘Er komt nog meer, maar je bent op de goede weg.’

2. What does this button do?

Buttons binnen je website zorgen ervoor dat jouw klant weet waar die moet klikken. Maar wat gebeurt met een klik op de onderstaande button?

See the Pen Animation in UX – Functional change by Dizain (@dizain) on CodePen.

Bovenstaande animatie laat zien hoe je met een kleureneffect en een verandering van icoon laat zien dat de klik op de knop gewerkt heeft. Je hebt ‘tastbaar’ bewijs.

Ga zelf na: heb jij op een website wel eens dat je op een button klikt, en dat je niet zeker weet of er iets gebeurt? Irritant toch? Onbewust nemen mensen het een merk kwalijk wanneer een website niet goed functioneert.

3. Zien is geloven

Je kan nog zo vaak iets verteld krijgen, maar ook online geldt het credo: zien is geloven. Verstuur onderstaande bericht bijvoorbeeld eens.

See the Pen Animation in UX design – Visual feedback by Dizain (@dizain) on CodePen.

Het is direct helder dat je dit bericht verzonden hebt. Geen twijfel over mogelijk. De visuele ondersteuning laat zien: ‘Je handeling is gelukt.’

What’s in it for me?

Leuk, die voorbeelden. Wat kun jij hier zelf mee? Nou, ga eens bij jezelf na: hoe presteert jouw website? Weet jij of een button werkt wanneer je er op klikt? Weet een nieuwe bezoeker binnen één muisklik waar hij zich bevindt? Hoe verschijnt jouw menustructuur in beeld?

De animaties hierboven laten zien dat je met functionele en subtiele bewegingen een plezierige online omgeving creëert die intuïtief overkomt. Gebruiksvriendelijk dus. En hoe fijner jouw website, hoe positiever de merkervaring, hoe meer fans van jouw merk!

Wil je het hier een keer met ons over hebben? Kom gerust langs voor een kopje koffie.

Meer artikelen