Skab opmærksomhed med animationer på din webside

Når vi designer hjemmesider, er der altid to ting, hele siden skal bygges op omkring:

1) Hvad er slutbrugerens behov eller hvilke opgaver, skal slutbrugeren løse, ved at bruge hjemmesiden?
2) Hvad er ejeren af hjemmesidens mål med at have hjemmesiden?

De to spørgsmål danner den overordnede ramme for hjemmesiden. Uanset hvad svarene er, er der nogle universelle designprincipper og metoder, der altid gør sig gældende. Her vil fokus være på slutbrugeren og deres oplevelse ved brugen af hjemmesiden. Når vi f.eks. skal guide brugeren igennem hjemmesiden, er der flere måder at gøre det på. Det er eksempelvis effektivt at bruge farvekontraster til at give hierarki på siden og til at vise, hvilke elementer brugeren kan interagere med. Det kan fx være en stor grøn knap på en hvid baggrund.

Pageload

Ventetid er ikke rart for slutbruger, men med pageload-animationer er ventetid ikke ventetid. Det giver liv til din hjemmeside og bliver en del af en lækker grafisk oplevelse.

Og til sidst en kort opsummering

For du skal i gang med at bruge animationer, og det skal du, fordi de hjælper slutbrugeren på vej ved at:

  • Skabe opmærksomhed og fokus på bestemte elementer, gerne call to actions
  • Guide brugerne af hjemmesiden, så de nemmere kan navigere rundt på siden
  • Forme den overordnede brugeroplevelse ved at skabe liv på hjemmesiden

Der er dog et OBS: Lad være at bruge alt for mange animationer. Her er talemåden less is more dækkende. For mange animationer gør nemt siden uoverskuelig at se på og så ødelægges brugeroplevelsen. I stedet for at hjælpe brugeren forvirrer det.

Så alt med måde, som man også siger.

Hvis du har brug for gode råd til, hvordan du kan bruge animationer på din side, har vi hos MiniMarketing stor erfaring i at designe hjemmesider. Giv gerne et kald, eller smid os en mail, så hjælper vi gerne.

Fordi knappen er iøjnefaldende med baggrundsfarven, er slutbrugeren mere tilbøjelig til at trykke på den – og selvfølgelig endnu bedre, når du supplerer med fængende tekst. Og så kan du vise dem det ekstra indhold, som ellers ville være skjult.

Samme effekt kan du snildt opnå med en animation:

Bum!

Animationer er virkeligt effektive til at skabe opmærksomhed omkring et element, så brugeren bliver draget og guidet til en given handling. Samtidig så du her en fade-in animation til at tydeliggøre transitionen, at der nu er noget nyt indhold at forholde sig til.

Animation kan også guide brugeren på en anden måde ved eksempelvis at fortælle brugeren, at de skal scrolle ned for at se mere indhold.

Sådan!

Den slags scroll-ned animationer er specielt effektivt, hvis du i toppen af din hjemmeside har et stort banner, der fylder hele skærmbilledet. Så er slutbrugeren ikke i tvivl om, at der er mere spændende indhold i vente nedenunder.

Animationer kan også bruges til at give feedback til brugerne, så de hele tiden er klar over, hvad der foregår. Lad mig give et eksempel:

Hvis der for eksempel er en knap til tilmelding af dit nyhedsbrev, kan du bruge animationer til at vise brugerne, at de succesfuldt har tilmeldt sig nyhedsbrevet. Du kan jo prøve det ved at tilmelde dig her (bare rolig, det er et helt og aldeles fiktivt eksempel, for at du kan se eksemplet):

Tak for din tilmelding!

Perfekt!

Her viste animationen en handling, men den kan også vise, at computeren handler – altså at siden er i gang med at loade, når du er på vej fra én destination på siden til en anden.

By |2019-09-13T10:39:57+01:009 juli, 2019|Webdesign|

Om forfatteren: