4 sätt att använda funktionell animering i UI-design
Bara ett decennium sedan användargränssnitt som använde animeringar undviks, som oftast förknippas med popup-annonser och blinkande annonser, men detta har ändrats. Idag gör detaljer om interaktionsdesign och animering en grundläggande skillnad på moderna webbplatser och i moderna appar. Denna tankegångsförskjutning uttrycks tydligt i Zurbs uttalande:
Vi utformar inte längre bara statiska skärmar. Vi utformar för hur användaren kommer från dessa skärmar för att faktiskt visa innehåll.
Om vi ska designa bättre digitala produkter måste vi ta en början av appen och webbplatsernas interaktiva natur från början.
Varför Animation Works
Motion, av sin natur, har den högsta nivån av framträdande i ett användargränssnitt. Varken text kopia eller statiska bilder kan tävla med rörelse. Våra ögon är hardwired för att vara uppmärksam på rörliga föremål - det är nästan en reflex. Vi kan dra nytta av detta med denna funktionella animering.
Vad är funktionell animering?
Funktionell animering är en subtil animering inbäddad i användargränssnittet som en del av funktionaliteten för den designen. Den har mycket tydliga och logiska syften:
- Minska kognitiv belastning
- Förhindra förändring blindhet
- Upprätta bättre återkallelse i rumsliga relationer
I en människacentrerad designmetod, där användaren är huvudfokus, måste ett användargränssnitt vara intuitivt, lyhörd och mänskligt. Funktionell animering hjälper dig att uppnå dessa mål.
Hur funktionell animering förbättrar UX
Vår erfarenhet och intryck av en app eller webbplats formas av en kombination av faktorer, med interaktion som spelar en grundläggande roll. Att lägga till rörelse i vår design kan vara meningsfull och funktionell när vi hittar de rätta omständigheterna. Väl genomtänkt och testad funktionell animering har potential att uppfylla flera funktioner, inklusive:
1. Visuell återkoppling
Bra interaktionsdesign ger feedback. Feedback bekräftar att systemet har tagit emot en användares åtgärd och visar resultatet av interaktionen om det lyckades eller inte. Animering i denna grupp måste vara mycket subtil och bör utformas responsivt.
Knappåterkoppling
I det verkliga livet svarar knapparna på vår interaktion, och det här är hur vi förväntar oss att saker ska fungera. För att kunna förutsägas för användaren bör det digitala gränssnittet fungera på samma sätt.
Källa: Jaron Pulver
Visualisera resultatet av en åtgärd
Genom att följa principprincipen , säg inte , kan du använda animerad feedback för att markera att något gick fel. Till exempel, visuell skaka animering på felaktigt inmatning av lösenord. Det är som att skaka huvudet som om att säga "nej, försök igen". Användaren noterar animeringen och förstår direkt den aktuella statusen.
Du kan också stärka de åtgärder som en användare utför. I exemplet nedan visas en spinnare kort när användaren klickar på "Skicka", innan appen visar framgångsstaten. Markeringsanimationen gör att användaren känner att processen är klar.
Bildkredit: Colin Garven
2. Mjuka tillståndsändringar
Andra bra ställen att lägga till animering i design är vid tillfällen av förändring. Statliga ändringar i användargränssnittet, speciellt på webben, innebär ofta hårda nedskärningar som kan göra dem svåra att följa. Ingenting känns mer onaturligt än en plötslig förändring. Bråka förändringar i ett gränssnitt är svåra för användarna att bearbeta. Dessa förändringsmoment bör mjukas genom att lägga till lite animering till användargränssnittet.
Upprätta anslutningar
Animerade övergångar bör fungera som mellanhänder mellan de olika tillstånden i användargränssnittet, vilket hjälper användarna att förstå vad som händer när skärmstaten ändras. Användaren följer helt enkelt rörelsen och förstår hur de två användargrupperna är relaterade.
Bildkrediter: Anish Chandran
Det fungerar också bra för att associera miniatyrbilder och detaljvisningar:
Kortet animerar från sin ursprungliga position till en position i modal, vilket gör det klart att det är samma sak, bara med mer detaljer.
Bildkrediter: Charles Patterson
Ring uppmärksamhet till förändringar
Animering kan hjälpa ögat se var ett nytt objekt kommer ifrån när det avslöjas eller var ett doldt objekt går och kan hittas igen. Vi kan använda den för att uppmärksamma förändringar som gömmer eller avslöjar information, som till exempel öppnande av sidofält av innehåll. I exemplet nedan glider huvudnavigering ut ur vägen när du klickar på hamburgerikon. Den rörelsen låter dig veta att huvudmenyn inte har försvunnit.
Bildkrediter: Tamas Kojo
3. Synlighet för systemstatus
Som ett av originalet av Jakob Nielsens 10 heuristik för användbarhet är synligheten för systemstatus fortfarande en av de viktigaste principerna för användargränssnitt. För användare är det väldigt viktigt att känna till och förstå deras nuvarande kontext i systemet vid varje tillfälle.
Framstegsindikatorer
Uppladdning och nedladdning av data är stora möjligheter till en funktionell animering. Animerade laddningsstänger ställde en förväntan på hur snabbt åtgärden kommer att behandlas. Animering kan vara till hjälp vid fel. Även en inte trevlig anmälan, till exempel en dataöverföringsfel, bör levereras på ett bra sätt.
Bildkrediter: xjw
Dra till Uppdatera
En användares väntetid börjar när de initierar en åtgärd, och det värsta fallet är när de inte har någon indikation som systemet har tagit emot. Åtdragningsåtgärderna bör ha en omedelbar reaktion . Det är viktigt att ge visuell återkoppling omedelbart efter att ha mottagit begäran från användaren för att indikera att processen har initierats. Animation hjälper dig med det.
Bildkrediter: Tony Babel
4. Förklarande animering
Ibland behöver användarna lite extra hjälp för att förstå användarflödet eller hur man interagerar med vissa gränssnittselement. Detta gäller speciellt för användargränssnitt som innehåller nya eller okända funktioner eller interaktioner för användaren.
Onboarding
Användaren ombord kräver en perfekt UX, och animeringar i ett inbyggt flöde har en enorm inverkan på hur första gången användare kommer att engagera sig med en app. Animering ger dig obegränsad frihet att förmedla någonting, oavsett hur komplex eller hur torka ämnet, på ett underhållande sätt.
Bildkrediter: Anastasiia Andriichuk
Visuella tips
Animering kan erbjuda några användbara visuella signaler. Förklarande animering ses oftast när en sida öppnas för första gången och animeringen visar hur vissa delar av sidan ska användas. Denna typ av animering kan hittas i spel som ofta hanterar mycket bra med progressiv avslöjande, vilket avslöjar spelmekaniken när du flyttar vidare till ett spel. Sådana tips utlöses endast när användaren når den aktuella punkten i sin erfarenhet.
Slutsats
Animering är ett kraftfullt verktyg när det används på sofistikerade sätt.
Vi måste omfamna rörelsen från början och tänka på det som en naturlig del av vår design, eftersom designen är mer än bara om visuell presentation. Som Steve Jobs sa om design: Det är inte bara hur det ser ut och känns som. Design är hur det fungerar.