4 måder at bruge funktionel animation i brugergrænseflade design
For blot ti år siden blev brugergrænseflader, der anvendte animationer, undgået, idet de oftest er forbundet med popups og blinkende annoncer, men dette er ændret. I dag er detaljer om interaktionsdesign og animation en grundlæggende forskel på moderne websites og i moderne apps. Denne tankegangskift er tydeligt udtrykt i Zurbs erklæring:
Vi designer ikke længere statiske skærme. Vi designer for, hvordan brugeren kommer fra disse skærmbilleder for faktisk at se indhold.
Hvis vi skal designe bedre digitale produkter, skal vi fra begyndelsen omfavne den interaktive karakter af appen og hjemmesiderne.
Hvorfor Animation Works
Motion, af sin art, har det højeste niveau af prominens i en brugergrænseflade. Hverken tekst kopi eller statiske billeder kan konkurrere med bevægelse. Vores øjne er hardwired for at være opmærksom på bevægelige objekter - det er næsten en refleks. Vi kan drage fordel af dette med denne funktionelle animation.
Hvad er funktionel animation?
Funktionel animation er en subtil animation indlejret i brugergrænsefladen som en del af funktionaliteten af designet. Det har meget klare og logiske formål:
- Reducer kognitive belastninger
- Forhindre ændring blindhed
- Etablere bedre tilbagekaldelse i rumlige relationer
I en human-centreret design tilgang, hvor brugeren er hovedfokus, skal en brugergrænseflade være intuitiv, lydhør og menneskelig. Funktionel animation hjælper dig med at nå disse mål.
Hvordan funktionel animation forbedrer UX
Vores erfaring og indtryk af en app eller et websted er formet af en kombination af faktorer, hvor interaktion spiller en grundlæggende rolle. Tilføjelse af bevægelse til vores design kan være meningsfuldt og funktionelt, når vi finder de rigtige forhold. Godt gennemtænkt og testet funktionel animation har potentialet til at opfylde flere funktioner, herunder:
1. Visuel feedback
Godt interaktionsdesign giver feedback. Feedback anerkender, at systemet har modtaget en brugers handling og demonstrerer resultatet af interaktionen, om det lykkedes eller ej. Animation i denne gruppe skal være meget subtil og bør designes responsivt.
Button Feedback
I virkeligheden svarer knapperne på vores interaktion, og det er sådan, vi forventer at ting skal fungere. For at være forudsigelig for brugeren skal den digitale grænseflade fungere på samme måde.
Kilde: Jaron Pulver
Visualiser resultatet af en handling
Ved at følge princippet viser, ikke fortælle , kan du bruge animeret feedback for at fremhæve, at noget gik galt. For eksempel visuelle ryste animation på forkert adgangskode indtastning. Det er som at ryste hovedet som om at sige "nej, prøv igen". Brugeren opdager animationen og forstår øjeblikkeligt den aktuelle status.
Du kan også styrke de handlinger, en bruger udfører. I eksemplet nedenfor, når brugeren klikker "Send", vises en spinner kort før appen viser succestilstanden. Afkrydsningsanimationen giver brugeren lyst til, at processen er færdig.
Billedkredit: Colin Garven
2. Blødgørende statsændringer
Andre gode steder at tilføje animation i design er i øjeblikke af forandring. Statens ændringer i brugergrænsefladen, især på internettet, indebærer ofte hårde nedskæringer, som kan gøre dem vanskelige at følge. Intet føles mere unaturligt end en pludselig ændring. Abrupte ændringer i en grænseflade er svært for brugerne at behandle. Disse øjeblikke af forandring bør blødgøres ved at tilføje nogle animationer til brugergrænsefladen.
Etablering af forbindelser
Animerede overgange skal fungere som mellemmænd mellem de forskellige tilstande i brugergrænsefladen og hjælper brugerne med at forstå, hvad der sker, når skærmtilstanden ændres. Brugeren følger simpelthen bevægelsen og forstår, hvordan de to UI-stater er relaterede.
Billedkreditter: Anish Chandran
Det fungerer også godt for at associere miniaturebilleder og detaljerede visninger:
Kortet animerer fra sin oprindelige position til en position i modalet, hvilket gør det klart, at det er det samme emne, bare med mere detaljer.
Billedkreditter: Charles Patterson
Ring opmærksomhed på ændringer
Animation kan hjælpe øjet med at se, hvor et nyt objekt kommer fra, når det afsløres, eller hvor en skjult genstand går, og kan findes igen. Vi kan bruge den til at være opmærksom på ændringer, der skjuler eller afslører oplysninger, såsom åbning af sideladere af indhold. I eksemplet nedenfor glider hovednavigationen ud af vejen, når du klikker på hamburgerikonet. Denne bevægelse lader dig vide, at hovedmenuen ikke er forsvundet.
Billedkreditter: Tamas Kojo
3. Synlighed af systemstatus
Som en af originalerne af Jakob Nielsens 10 heuristikker til brugervenlighed forbliver synligheden af systemstatus blandt de vigtigste principper i brugergrænsefladedesign. For brugere er det meget vigtigt at kende og forstå deres nuværende kontekst i systemet til enhver tid.
Fremskridt Indikatorer
Data upload og download processer er gode muligheder for en funktionel animation. Animerede indlæsningsbjælker angiver, hvor hurtigt handlingen skal behandles. Animation kan være nyttigt i tilfælde af fejl. Selv en ikke behagelig anmeldelse, som f.eks. En dataoverførselsfejl, skal leveres på en god måde.
Billedkreditter: xjw
Træk for at opdatere
En brugers ventetid begynder det øjeblik, de indleder en handling, og det værste tilfælde er, når de ikke har nogen indikation, systemet har modtaget det. Træk til opdatering skal have en øjeblikkelig reaktion . Det er vigtigt at give en vis visuel feedback umiddelbart efter at have modtaget anmodningen fra brugeren for at angive, at processen har indledt. Animation hjælper dig med det.
Billedkreditter: Tony Babel
4. Forklarende animation
Nogle gange har brugere brug for lidt ekstra hjælp til at forstå brugerflowet eller hvordan man kan interagere med visse grænsefladeelementer. Dette gælder især for brugergrænseflader, der indeholder nye eller ukendte funktioner eller interaktioner for brugeren.
onboarding
Bruger onboarding kræver en fejlfri UX, og animationer i et indbygget flow har en enorm indvirkning på, hvordan første gangs brugere vil engagere sig med en app. Animation giver dig ubegrænset frihed til at formidle noget, uanset hvor kompleks eller hvor tørt emnet er, på en underholdende måde.
Billedkreditter: Anastasiia Andriichuk
Visuelle tips
Animation kan tilbyde nogle nyttige visuelle tegn. Forklarende animation ses oftest, når en side åbnes for første gang, og animationen viser, hvordan visse elementer på siden skal bruges. Denne type animation kan findes i spil, som ofte går meget godt i gang med progressiv afsløring og afslører spilmekanik, når du bevæger dig videre ind i et spil. Sådanne tip udløses kun, når brugeren når det relevante punkt i deres erfaring.
Konklusion
Animation er et kraftfuldt værktøj, når det bruges på en sofistikeret måde.
Vi skal omfavne bevægelsen helt fra begyndelsen og tænke på den som en naturlig del af vores design, fordi design er mere end kun om visuel præsentation. Som Steve Jobs sagde om design: Det er ikke bare, hvordan det ser ud og føles. Design er, hvordan det virker.