Bästa metoder för att distribuera animerade framstegsindikatorer till din fördel

Om du någonsin har använt en dator kan du lika gärna vara medveten om den animerade Windows-symbolen som visas när systemet startar. Det krävdes en utveckling inom design och animation för att utvecklas till det vi ser idag, men tillbaka i Windows 1995 rörde sig bilden inte alls. Några av er kanske tänker, varför ens använda dessa animerade indikatorer?

Men tänk på detta, skulle du hellre föredra att vänta och titta på en tom skärm för att se din åtgärd slutförd? Eller förbli underhållen med något av betydelse tills skärmen dyker upp igen?

Bland de viktigaste funktionerna i användargränssnittsdesign är möjligheten att visa dess framsteg som systemstatus. Användaren måste veta om systemet är medvetet om sin åtgärd och svarar på dem i enlighet med detta. Animerade förloppsindikatorer kan visa det aktuella sammanhanget för operationen vid nästan varje given tidpunkt utan att använda omfattande text- eller videofunktioner. Detta gör dem idealiska för att ge systemstatus medan förloppet slutförs i bakgrunden.

Varför är det viktigt att interagera med användaren under systemförloppet?

Vem älskar inte snabba svar från en app eller webbplats? Även om det betyder mycket för användaren, är det inte möjligt att köra det i obruten konsistens. Vissa faktorer läggs alltid till i ekvationen som kan hindra din applikations hastighet. Dessa faktorer inkluderar oftast dålig internetanslutning, långsam prestanda på grund av hög belastning och till och med programfel. Under sådana omständigheter skulle det bästa steget vara att minimera användarspänningen och introducera försäkran om att appen fungerar och att framsteg görs. För att göra det måste du ge feedback till användaren så att tiden inte tar vägtull på användarens tålamod.

Håll användarna hooked med feedback

Väntetiden börjar nästan omedelbart när en åtgärd görs av användaren. Men vad som gör det värre är avsaknaden av en riktig indikator för att representera systemets framsteg. Användaren antar naturligtvis att appen inte har svarat när den inte visar ett meddelande om att systemet tar tid. Resultaten kan sträcka sig från skenande klick till till och med att användaren överges, bara för att appen inte gav feedback i tid.

Åtgärder som är kopplade för att starta om förloppet, eller uppdatera systemet, görs ofta när det tar längre tid att ladda än förväntat. Återigen, frånvaron av feedback kan inte visa svaret på förfrågan även om den görs i bakgrunden. Det är därför en animerad indikator måste införas för att förespråka appens systemframsteg när det behövs.

Hur man använder en framstegsindikator för alla åtgärder som tar längre tid än en sekund?

Normalt, när en app tar mindre än 1 sekund att ladda, verkar framstegen nästan obehindrat och användaren tappar inte fokus. Men om laddningstiden överstiger 1 sekund måste åtgärder vidtas för att hålla användaren engagerad. Den korta fördröjningen blir märkbar och användaren börjar vandra om effektiviteten av uppgiften som görs på applikationen.

Det är därför appen måste svara genom en förloppsindikator för att ge en trovärdig anledning till väntan och minska användarens osäkerhet innan den går utom kontroll. Det måste noteras att åtgärder som tar mindre än en sekund att ladda inte nödvändigtvis kräver animeringsindikator, men bilden kan göra det. Detta rekommenderas eftersom en animering som fortsätter att blinka på skärmen varje gång en åtgärd görs, kan desorientera användaren. Animerade framstegsindikatorer används bäst för att neutralisera effekterna av långvarig väntan och hålla användaren engagerad i appen eller webbplatsen.

Typer av framstegsindikatorer

1. Obestämd: Animerade vänteindikatorer är utformade för att kommunicera med användaren och hålla dem informerade om deras senaste användaråtgärd. Den vanligaste och ganska enklaste typen av vänteindikator är ”Obestämd”. Sådana typer av indikatorer talar om för användarna att vänta på att åtgärden ska slutföras samtidigt som de inte är medvetna om hur lång tid det kan ta att slutföra förloppet. Man förstod nästan att Obestämd förloppsindikator bör användas för snabba åtgärder, helst inom 2-10 sekunder. När som helst längre än så och det kan påverka användarens tålamod. Detta kan öka avvisningsfrekvensen för en webbplats och övergivna applikationer.
2. Bestäm: I fallet med ”Determinate”-förloppsindikatorn är tiden ganska spänd i animeringen. Sådan typ av indikatorer håller användaren informerad om den ungefärliga eller exakta tiden som krävs för att slutföra framstegen. De är snarare den mer populära typen av vänteindikatorer eftersom de visar framstegen från där det började, hur mycket som har åstadkommits och hur mycket mer som krävs för att döda väntan. Detta hjälper användaren att förbli säker på de framsteg som görs och visas genom animeringen, samtidigt som deras vilja att förbli engagerad i webbplatsen eller applikationen ökar.

Looped Animation Indicator och Procent Done Indicator

• Looped Animation: Looped animation-indikator är utformad för att representera framsteg utan att visa den ungefärliga eller exakta laddningstiden det kommer att ta. Det är därför animerade framstegsindikatorer med majoritetsslingor är obestämda. Till exempel var Windows 7-förloppsindikatorn utformad för att visa samma animeringsupprepning utan någon feedback om den exakta tiden det kan ta att slutföra framstegen. Dessutom inkluderade det allt från uppstartsfunktioner, inställning av gränssnittsdrift och andra former av dataladdning. På grund av dessa två skäl föredrar användare inte att se en slingad vänteindikator för att representera laddningstiden för webbplatsen eller applikationen.

• Indikator för procent färdigt: Som namnet antyder visar procent-klar indikator hur långt laddningen går genom att fylla animationsintervallet, cirkeln eller stapeln med 0 % till 100 %. Eftersom den visar hur lång tid det tar att slutföra framstegen, klassificeras procent-klar-indikatorn i bestämda vänteindikatorer. För just denna kvalitet är det bäst att använda procent-klar-indikator för uppgifter som kräver mer än 10 sekunder att slutföra.

  Enligt en undersökning är 10 sekunder tröskeln för genomsnittligt tålamod. Utöver det blir användaren hänsynslös och blir otålig tills ytterligare feedback ges. Genom att visa en procentuell indikator för utförda förlopp för processer som tar mer än 10 sekunder att ladda kan du hålla användaren ansluten till webbplatsen eller applikationen utan att kompromissa med tålamodet.

Hur man använder framstegsindikatorer effektivt?

Att använda framstegsindikatorer effektivt i dina applikationer och webbplatser kan betyda skillnaden mellan framgång och misslyckande. Här är några tips för att se till att dina framstegsindikatorer presterar upp till markeringen.

1. Håll användaren informerad om anledningen till att vänta: Det är ett nybörjarmisstag att hålla användaren omedveten om laddningsförloppet som görs i bakgrunden. Detta ökar deras tendens att tappa tålamodet och avsluta applikationen eller webbplatsen. Du kan hålla användaren informerad genom att visa en animerad förloppsindikator tillsammans med lite text för ytterligare förståelse. Du kan visa vilken process som specifikt är inriktad på. Till exempel kan du visa vänteförloppet för ett videospel med en laddningsfält och text som läser vilken process som görs, till exempel ”laddar in grafik” eller ”laddar in kartor” etc.
2. Ange en enkel tidsuppskattning för uppgift som kräver längre tidsperioder: Ta inte saker till mikrovågor. Du kan hålla användaren engagerad genom att ge en enkel uppskattning. Att busa med löften man inte kan hålla kan irritera användarna och tvinga dem att lämna.
3. Visa den exakta mängden tid som krävs: Men för operationer som i allmänhet tar längre tid än användarens genomsnittliga väntegräns är det smartare att välja bestämda framstegsindikatorer. Det idealiska valet skulle vara en procentuell framstegsindikator eftersom den tar fram den exakta laddningstiden i rampljuset. För operationer som är ännu längre att hantera, överväg att använda ett antal steg för att markera framstegen.
4. Fortsätt med utvecklingen: Försök att sträva efter konsistens i din förloppsindikator under laddning av uppgifter. Efter några upplevelser tvingar förloppsindikatorn användare att utveckla en förväntning om hur snabbt åtgärden kommer att slutföras. Följaktligen kan eventuella frysningar under framstegen ge ett allvarligt slag mot användarnas förväntningar. Till exempel, när ribban når 99 % och förblir så här under en längre tid, blir majoriteten av användarna frustrerade över detta beteende och lämnar applikationen i tron ​​att den har frusit. För att motverka detta kan du maskera dessa inkonsekventa förseningar i förloppsindikatorn genom att visa att den rör sig omedelbart och stadigt.
5. Visa framsteg i stapeln snabbare än den faktiska hastigheten: Rå hastighet kan manifesteras av en enkel uppfattning som du kan skapa för att få framstegsindikatorn att kännas snabbare. Du kan åstadkomma detta genom att designa animationen så att den går långsamt till en början och väljer dess takt när den stänger slutet. Detta kommer att skapa en illusion av snabba framsteg utan att kompromissa med tiden för att slutföra uppgiften.
6. Erbjud en distraktion: Användarens tidsuppfattning kan minskas avsevärt genom att införa kreativa framstegsindikatorer. Om appen visar några intressanta textuella eller visuella detaljer medan framstegen görs, kan det distrahera användarens sinne från tidpunkten för att slutföra åtgärden. Du kan erbjuda en mängd olika saker för att hålla användarna sysselsatta, till exempel korta videor, intressanta fakta, animationer och till och med triviala spel.

Alternativ – Använd skelettskärmar för att motverka framstegsindikatorer för animering

Även om framstegsanimationsindikatorer kan skaka nästan varje dålig känsla som kommer ut av väntan, är vissa publik ganska motståndskraftiga mot denna taktik. Bland få bra alternativ för att få användarna att vänta utan att använda framstegsindikatorer finns en metod som kallas skeleton screen. Även känd som temporära informationsbehållare, dessa tekniker innebär att visa framstegen i realtid för användaren istället för att öppna en laddningsbar. Föreställ dig en tom skärm som gradvis fylls med dess komponenter och element tills den är helt fylld. Detta skapar en illusion av att applikationen agerar med laddningstiden och att deras väntan belönas med de framsteg som visas.

Det håller inte bara publiken engagerad i webbplatsen eller applikationen, utan håller dem också redo att slutföra sin nästa uppgift. Även om framstegsindikatorer också är utmärkta sätt att tillfredsställa användarna, lyckas de inte behålla energin hos användarna som skelettskärmen hänger med under deras laddningsförlopp.

Slutgiltiga tankar

Det spelar ingen roll hur snabb vår app- eller webbplatsoperation är, det finns alltid en chans till oinbjuden behandlingstid. Genom att använda animerade vänteförloppsindikatorer som procent-klara indikatorer och laddningssnurr kan du lugna användarna om de pågående processerna och systemets nuvarande tillstånd. Som ett resultat ökar det sannolikheten för att de stannar kvar på webbplatsen eller applikationen för att vänta på laddningen och fortsätta med sina återstående uppgifter. När du beräknar den tid som krävs för att processerna ska slutföras, måste du tilldela lämplig typ av framstegsanimeringsindikatorer.

En slingad indikator är idealisk för operationer som tar 2-10 sekunder, medan mer tidskrävande operationer kan hjälpas med en procentuell utförd indikator. I fall av loopade animationer och skelettskärmar är det bäst att välja skelettskärmar eftersom de kan ta på sig alla åtgärder som går längre än några millisekunder, och fortfarande hålla det kallt med användarna.