Hopp til innhold

Animasjon

Animasjon er et effektivt virkemiddel for å veilede brukerne og styre fokus mot det som er viktig. Det kan skape sømløse overganger og gi vår visuelle profil et moderne uttrykk.

Hvorfor?

Vi bruker animasjon for å:

  • Skape særpreg
  • Gi en bedre brukeropplevelse
  • Hjelpe og veilede brukeren
  • Skape fokus
  • Kamuflere nedlastingstid (underholde)

Den visuelle profilen til Fremtind har et minimalistisk uttrykk, basert på enkle former og nøktern bruk av farger. For å unngå å oppfattes som kalde og harde, bruker vi animasjon som et virkemiddel for å gjøre løsningene mer dynamiske og levende, i tillegg til å gi dem personlighet og stil.

Viktig: Animasjon skal kunne slås av dersom en bruker ikke ønsker dette. Sørg for at løsningen fungerer som den skal og fortsatt er logisk uten animasjon.

Grunnprinsipper

Overganger

Animasjon gir en bedre brukeropplevelse på en subtil måte og fremhever relevante oppgaver. Ved hjelp av easingkurver og målrettet bruk av parallakseffekter, skaper vi smidige overganger som understøtter en god brukeropplevelse.

Riktig

Bruk easinger og ta hensyn til avstand.

Feil

Ikke bruk lineær easing.

Posisjon

Hvis elementer flyttes, må dette skje på en forventet måte som har sammenheng med brukerens handling. Dette gjør det lettere for brukeren å navigere på siden. For å skape konsistens, fokuserer vi på horisontale og vertikale animasjoner.

Timing

Varigheten av en animasjon avhenger av størrelse, avstand og forholdet til andre elementer. Hvis flere elementer animeres, må det være et tydelig samspill og god timing i bevegelsene. Dette gjør vi for å unngå at det skjer for mye på en gang. Ved mange elementer, anbefales det derfor kortere animasjoner.

Riktig

Gjør bevegelser raskt nok til å unngå unødvendig lange ventetider.

Feil

Unngå for langsomme bevegelser.

Gjennomsiktighet

Gjennomsiktighet brukes som et verktøy for å markere elementer på en side på en jevn og behagelig måte. Gjennomsiktighet kan kombineres med andre animasjonsparametere, som bevegelse, for en mer dynamisk opplevelse. Oppfatningen av et element endres over en kort eller lang avstand.

Oppmerksomhet

Animasjon tiltrekker oppmerksomhet. Husk at siste element som beveger seg er det som tiltrekker oppmerksomhet. Bruk dette for sette fokus der du ønsker.

Naturlig

Bevegelsene bør være organiske og levende, som rennende vann i en bekk, fremfor mekaniske og stive. Dette gjøres ved hjelp av subtil bounce gjennom etablerte easingkurver og sekvensielle animasjoner.

Tenk på hvordan en ball ser ut når den slippes mot bakken. Se på antall ganger den spretter, hvor høyt spretter den for hver gang, hvordan blir ballen deformert idet den treffer bakken, etc.

Bevegelsene bør være naturlige, tydelige og kontrollerte.

Riktig

Animer grafikk med en naturlig easingkurve (ease inn og ease ut).

Feil

Unngå uklare bevegelser.

Bevegelse og elevasjon

Sørg for kontinuitet og naturlige bevegelser og ha fokus på det som gjelder. Vi tenker skandinavisk enkelhet, minimalisme og effektivitet i vår tilnærming til animasjon.

Riktig

Animasjon som bygger opp under gruppering av elementer.

Feil

Ikke bruk lineære easinger og sørg for å ta hensyn til avstanden.

Rytme og sekvensiell animasjon

Når en side legges opp, kan man ta i bruk sekvensiell animasjon for å gi liv til siden og fremheve elementer i den rekkefølgen man ønsker. Pass på at rekkefølgen flyter naturlig og ikke hopper tilfeldig opp og ned eller frem og tilbake på skjermen.

Sekvensiell animasjon kan brukes for å kamuflere tiden man bruker ved innlasting av innhold. Ved trege linjer kan man bruke sceletons for å lage en visuell placeholder for elementer som skal lastes. Dette skaper en forventning og respons istedenfor at brukeren må vente på at alt innhold skal lastes.

Riktig

Juster bevegelig grafikk horisontalt eller vertikalt.

Feil

Unngå diagonale bevegelser.