Vad är det?

En animation är något som spelas upp automatiskt efter att det har triggats igång. Det går att skapa många typer av animationer i Axure. En animation kan vara en effekt kopplad till en interaktion – exempelvis en “fade in”-effekt eller en “slide in”-effekt, som kan användas för att göra en presentation mer dynamisk. En animation kan också vara en handlingssekvens – exempelvis hur ett nytt konto registreras steg för steg.

För enklare aminationer i form av t.ex. “fade in” finns två delar: dess effekt och dess timing. Effekten för animeringen väljs genom drop down-menyn “Animate” och bestämmer animeringens visuella effekt. Animeringens timing, som anges i ms-fältet, bestämmer tiden i millisekunder som det kommer att ta för animeringen att slutföras.

För mer avancerade animationer i form av handlingssekvenser, där interaktioner utspelar sig efter varandra som om det vore en film, handlar det istället om att kombinera olika interaktiva händelser med varandra och lägga dem i en ordningsföljd. Det är dessa animationer som kommer presenteras mer ingående här.

När används det?

Animationer i form av handlingssekvenser skulle kunna användas i sådana interaktioner som inte nödvändigtvis behöver testas eller visas upp fullt ut genom interaktiva element. 

Det går mycket snabbare att ta fram en animation av en sekvens i en prototyp än att ta fram en prototyp med full interaktivitet. I många fall behövs inte heller full interaktivitet för att demonstrera funktionen. Det kan exempelvis lämpa sig att använda en animation av en sekvens av prototypen vid möten med produktägare i början av en designprocess – för att därigenom få tidig och tät feedback och säkerställa att man på rätt väg designmässigt. Det kan även lämpa sig bra mitt i processen när enbart en begränsad funktionalitet behöver demonstreras. Animationer passar ofta även bra för att visa klassiska handlingssekvenser som att “logga in” eller “checka ut i en webbshop” som ofta bara går att utföra i en viss bestämd ordningsföljd.

Hur används det?

Några exempel på handlingssekvenser som skulle kunna förevisas genom animation är:

• Inloggning
• Skapa användarkonto
• Check out-process i en e-handel
• Chatt med en eller flera personer
• Filtrering av innehåll
• Uppladdning av bilder eller filer
• Skicka ett mail eller ett meddelande. 

Animation passar bra att använda vid interaktioner som är så vanliga att så gott som alla användare redan vet hur de fungerar (exempelvis inloggning). I detta fall kan ett knapptryck trigga en hel animationssekvens som automatiskt visas upp.

Animation passar också bra vid tillfällen då det finns många alternativ men då det bara är ett alternativ som är relevant att visa upp funktionaliteten av för stunden. Exempelvis skulle det kunna vara fördelaktigt att använda animation för att visa upp hur en filtrering av innehåll skulle fungera, eftersom det då går att visa hur det fungerar utan att behöva skapa interaktioner för alla alternativ. Även i detta fall kan ett knapptryck trigga en hel animationssekvens som automatiskt visas upp.

Animation passar också bra att använda i prototyper där användaren ska få en respons vid olika interaktioner, exempelvis i en chatt-tjänst. I detta fall kan korta animationer triggas av exempelvis knapptryck eller inskriven text vid flera olika tillfällen.

Animation används även för att skapa effekter – exempelvis att en bild tonar in eller tonar ut eller studsar åt sidan vilket kan triggas av att användaren exempelvis klickar på en knapp.

Instruktion hur en gör

Man börjar med att placera ut widgets och det innehåll som ska vara med i animationen och väljer sedan ut i vilken ordningsföljd de olika handlingarna ska utspelas. Därefter lägger man till en interaktion, t.ex. “click or tap” på den widget som ska användas för att trigga igång sekvensen vilket då blir den första i ordningsföljden. Det är på den som alla händelser (actions) sedan läggs in som du vill ska utspela sig när interaktionen inträffar. Du kan lägga till så många händelser du vill efter varandra och om du vill att flera händelser ska inträffa samtidigt lägger du bara in dem under samma händelse. Vill du att de istället ska utspela sig efter varandra lägger du in händelsen “wait” mellan de andra händelserna. Då kan du också bestämma hur lång tid det ska gå mellan varje händelse. Nedan visas ett exempel på hur  inställningarna för ett animerat händelseförlopp för en inloggningssekvens kan ut i Axure:

Dessa inställningar resulterar i en inloggnings-sida som skulle kunna se ut som följande: https://ns5ben.axshare.com. Tryck på det tomma textfältet till höger om “Användarnamn” för att trigga igång händelseförloppet!

Demonstration av funktion

För demonstration av funktion har en animation av en sekvens i ett spel skapats. Spelet heter “Dekorera din tårta” och går ut på att användaren får välja mellan att bygga en marsipantårta, en jordgubbstårta eller en chokladtårta. Därefter får användaren välja hur hög tårtan ska vara, sedan vilken dekoration som ska toppa tårtan och slutligen vilket tårtfat tårtan ska stå på. 

Det är givetvis tanken att användaren ska kunna välja fritt bland alla alternativ i den skarpa interaktiva versionen av spelet. I den här animationen demonstreras dock ett händelseförlopp där användaren väljer chokladtårtan, bygger den i åtta våningar, dekorerar den med ett körsbär och väljer fatet med den raka foten. Genom att demonstrera hur en av de tre tårtorna skulle kunna byggas och dekoreras får betraktaren en bild av hur det skulle vara att bygga samtliga tårtor, då de alla sätts ihop på liknande sätt. Därför passar ett spel som tårtspelet bra att visa som animation.

Genom att visa ett spel som “Dekorera din tårta” som en animerad sekvens istället för som en interaktiv prototyp går det snabbare att skapa prototypen. Därmed tar det mindre resurser. Att det går snabbt att skapa en visningsbar prototyp gör också att det går att få feedback från exempelvis produktägare och användare i ett tidigare skede. 

Här kan du se prototypen: https://irof4p.axshare.com/#id=hmt701&p=page_1 Observera att användarens “fingertryck” i animationen är illustrerat av små vita cirklar – dessa används enbart för att visa var användaren trycker i just det här scenariot – och skulle inte att vara synliga i den skarpa versionen av spelet. Klicka någonstans på den första sidan i prototypen för att trigga igång animationen!