4 måter å bruke funksjonell animasjon i brukergrensesnitt
For bare ti år siden ble brukergrensesnittene som brukte animasjoner unngått, som oftest knyttet til popup-vinduer og blinkende annonser, men dette har endret seg. I dag er detaljer om interaksjonsdesign og animasjon en grunnleggende forskjell på moderne nettsteder og i moderne apps. Denne tankegangen skiftet er tydelig uttrykt i Zurb erklæring:
Vi designer ikke bare statiske skjermbilder lenger. Vi designer for hvordan brukeren kommer fra disse skjermbildene for å faktisk se innhold.
Hvis vi skal designe bedre digitale produkter, må vi omfavne den interaktive naturen til appen og nettstedene fra begynnelsen.
Hvorfor Animasjon Fungerer
Bevegelse, av sin natur, har det høyeste nivået i et brukergrensesnitt. Hverken tekst kopi eller statiske bilder kan konkurrere med bevegelse. Øynene våre er hardwired for å ta hensyn til bevegelige objekter - det er nesten en refleks. Vi kan dra nytte av dette med denne funksjonelle animasjonen.
Hva er funksjonell animasjon?
Funksjonell animasjon er en subtil animasjon innebygd i brukergrensesnittet som en del av funksjonaliteten til designet. Den har et veldig klart og logisk formål:
- Reduser kognitiv belastning
- Forhindre endring blindhet
- Etablere bedre tilbakekalling i romlige forhold
I en human-sentrert design tilnærming, hvor brukeren er hovedfokus, må et brukergrensesnitt være intuitivt, responsivt og menneskelig. Funksjonell animasjon hjelper deg med å oppnå disse målene.
Hvordan Funksjonell animasjon forbedrer UX
Vår erfaring og inntrykk av en app eller et nettsted er formet av en kombinasjon av faktorer, med interaksjon som spiller en grunnleggende rolle. Å legge til bevegelse i vårt design kan være meningsfylt og funksjonelt når vi finner de rette omstendighetene. God gjennomtenkt og testet funksjonell animasjon har potensial til å oppfylle flere funksjoner, inkludert:
1. Visuell tilbakemelding
God interaksjonsdesign gir tilbakemelding. Tilbakemelding bekrefter at systemet har mottatt en brukers handling og demonstrerer resultatet av samspillet om det var vellykket eller ikke. Animasjon i denne gruppen må være veldig subtil og bør utformes responsivt.
Knapp tilbakemelding
I virkeligheten svarer knappene på samspillet vårt, og slik forventer vi at ting skal fungere. For å være forutsigbar for brukeren skal det digitale grensesnittet fungere på samme måte.
Kilde: Jaron Pulver
Visualiser resultatet av en handling
Ved å følge prinsippet viser, ikke fortell , kan du bruke animert tilbakemelding for å markere at noe gikk galt. For eksempel, visuell shake animasjon på feil passord oppføring. Det er som å riste på hodet som om å si "nei, prøv igjen". Brukeren merker animasjonen og forstår øyeblikkelig gjeldende status.
Du kan også styrke handlingene en bruker utfører. I eksemplet nedenfor, når brukeren klikker "Send", vises en spinner kort før appen viser suksessstaten. Med markeringsanimasjonen får brukeren til å føle at prosessen er ferdig.
Bilde kreditt: Colin Garven
2. Forbedring av statens endringer
Andre gode steder å legge til animasjon i design er på øyeblikk av endring. Statlige endringer i brukergrensesnittet, spesielt på nettet, involverer ofte hardt kutt som kan gjøre dem vanskelige å følge. Ingenting føles mer unaturlig enn en plutselig forandring. Brå endringer i et grensesnitt er vanskelig for brukerne å behandle. Disse øyeblikkene av forandring bør mykes ved å legge til litt animasjon til brukergrensesnittet.
Etablering av tilkoblinger
Animerte overganger skal fungere som mellomledd mellom de forskjellige tilstandene i brukergrensesnittet, og hjelper brukerne til å forstå hva som skjer når skjermtilstanden endres. Brukeren følger bare bevegelsen og forstår hvordan de to UI-statene er relaterte.
Bildekreditter: Anish Chandran
Det fungerer også bra for å knytte miniatyrbilder og detaljvisninger:
Kortet animerer fra sin opprinnelige posisjon til en posisjon i modal, noe som gjør det klart at det er det samme elementet, bare med flere detaljer.
Bildekreditter: Charles Patterson
Ring oppmerksomhet til endringer
Animasjon kan hjelpe øyet til å se hvor et nytt objekt kommer fra når det avsløres eller hvor en skjult gjenstand går, og kan bli funnet igjen. Vi kan bruke den til å ta hensyn til endringer som gjemmer eller avslører informasjon, for eksempel åpning av sidelister av innhold. I eksemplet nedenfor glir hovednavigasjonen ut av veien når du klikker på hamburgerikonet. Denne bevegelsen lar deg vite at hovedmenyen ikke er forsvunnet.
Bildekreditter: Tamas Kojo
3. Synlighet av systemstatus
Som en av originalene til Jakob Nielsens 10 heuristikk for brukervennlighet, er synligheten til systemstatus fortsatt blant de viktigste prinsippene i brukergrensesnittdesign. For brukere er det veldig viktig å kjenne og forstå deres nåværende kontekst i systemet til enhver tid.
Fremdriftsindikatorer
Dataopplasting og nedlasting av prosesser er gode muligheter for en funksjonell animasjon. Animerte lastestenger angir hvor raskt handlingen skal behandles. Animasjon kan være nyttig i tilfelle feil. Selv en ikke hyggelig melding, for eksempel en nedlasting av data, bør leveres på en fin måte.
Bildekreditter: xjw
Trekk for å oppdatere
En brukers ventetid begynner i det øyeblikket de starter en handling, og verste fallet er når de ikke har noen indikasjon på at systemet har mottatt det. Trekk til oppfriskning skal ha en umiddelbar reaksjon . Det er viktig å gi litt visuell tilbakemelding umiddelbart etter å ha mottatt forespørselen fra brukeren for å indikere at prosessen har startet. Animasjon vil hjelpe deg med det.
Bildekreditter: Tony Babel
4. Forklarende animasjon
Noen ganger trenger brukerne litt ekstra hjelp til å forstå brukerflyten eller hvordan man kan interagere med visse grensesnittelementer. Dette gjelder spesielt for brukergrensesnitt som inneholder nye eller ukjente funksjoner eller interaksjoner for brukeren.
onboarding
Bruker onboarding krever en feilfri UX, og animasjoner i en ombordstigningsflyt har en enorm innvirkning på hvordan første gangs brukere vil engasjere seg med en app. Animasjon gir deg ubegrenset frihet til å formidle noe, uansett hvor komplisert eller hvor tørt det er, på en underholdende måte.
Bildekreditter: Anastasiia Andriichuk
Visuelle tips
Animasjon kan tilby noen nyttige visuelle tegn. Forklarende animasjon blir oftest sett når en side åpnes for første gang, og animasjonen viser hvordan enkelte elementer på siden skal brukes. Denne typen animasjon kan bli funnet i spill som ofte går bra med progressiv avsløring, avslørende spillmekanikk når du beveger deg videre inn i et spill. Slike hint utløses bare når brukeren når riktig punkt i sin erfaring.
Konklusjon
Animasjon er kraftig verktøy når det brukes på sofistikerte måter.
Vi må omfavne bevegelsen fra begynnelsen og tenke på det som en naturlig del av vårt design, fordi design er mer enn bare om visuell presentasjon. Som Steve Jobs sa om design: Det er ikke bare hvordan det ser ut og føles. Design er hvordan det fungerer.