4 tricks för att göra belastningstider känns snabbare
Oavsett hur väl utformat ditt användargränssnitt kan vara, vid någon tidpunkt eller annat, kommer folk som använder det måste vänta på att ladda.
Lastningstiden kan skada den övergripande upplevelsen. Att göra användarna vänta för länge för att din app ska ladda kan göra användarna otåliga. Om användarna får den känslan kommer de att överge din webbplats och gå någon annanstans. Lyckligtvis finns det några saker du kan göra för att påskynda användarens känsla av tid och få dem att känna att ditt innehåll laddas snabbare än det gör.
1. Låt aldrig användarna vänta utan att ge dem feedback
Om användarens anslutning är långsam kan det ta ett tag för en webbplats att fylla i innehåll på skärmen. En användares väntetid börjar när de initierar en åtgärd, och det värsta är när de inte har någon indikation på att webbplatsen har tagit emot den.
När din webbplats inte meddelar användare att det behöver någon tid att slutföra en åtgärd, tror det ofta att användarna inte mottog förfrågan, och de försöker igen. Massor av extra kranar har resulterat på brist på feedback. För att göra människor lyckliga måste vi ge en indikation på att något händer, erbjuda visuell feedback.
2. Undvik statiska framstegsindikatorer
Statiska progresindikatorer är de som har en unmoving bild eller text, till exempel "Laddar ..." eller "Vänta ..." för att indikera att begäran har mottagits. Medan någon feedback är bättre än ingen, är statiska indikatorer dåliga UX. Användare har ingen indikation på att innehållet laddas, så de är inte säkra på om processen är fast.
3. Använd animerade laddningsindikatorer
Psykologiska studier av väntetid visar att användarfokus börjar växla efter en sekund att vänta utan någon återkoppling. För att minska användarens osäkerhet, använd en framdriftsindikator för alla åtgärder som tar längre tid än det. (Obs! Användning av animering rekommenderas inte för allt som tar mindre än en sekund att ladda, eftersom användare kan känna sig oroliga över det som bara blinkade på och utanför skärmen).
Oändliga lastspinnare för rimligt snabba operationer
Den enklaste formen av animerade indikatorer är en lastspinnare. Denna typ av visuell återkoppling säger bara att användaren måste vänta men inte säga hur länge de ska vänta. Som regel bör du använda denna typ av framdriftsindikator för snabba åtgärder (2-10 sekunder).
En spinnare med grå linjer som strålar från en central punkt är en standardinriktning.
Ladda spinnarna används ofta tillsammans med drag-till-refresh-gest. Det fungerar som mellanhand mellan två stater i användargränssnittet, och hjälper användarna att förstå vad som händer när skärmen ändras.
Apple Mail app för iOS
Procentfärdig animering för långvarig verksamhet
Att ladda spinnare är inte det rätta sättet att indikera långvarig lastning. Det är mycket mer tålamod att vänta på något om vi vet när det kommer att hända. Därför bör du för långvariga operationer ge dina användare en tydlig indikation på hur länge de behöver vänta. Som en allmän tumregel bör du använda en procentig animering för längre processer som tar 10 eller flera sekunder.
Bildkredit: Behance
Alternativt kan du tillhandahålla en allmän tidsuppskattning för operationen. Försök inte vara exakt, en enkel, "Det kan ta en minut" kan vara tillräckligt för att informera användaren och uppmuntra dem att vänta på det.
Installera programuppdatering i Mac OS X
4. Tweaking användarens uppfattning om tid
Hur snabbt innehållet laddas är i användarens sinne. När du försöker skapa en snabbare användarupplevelse kan du förkorta den uppfattade tiden i stället för den aktuella tiden. För att göra det kan du fylla väntetider med innehåll, animeringar eller åtgärder som användaren kan utföra.
Progress barer
En statusfält gör att användarna utvecklar en förväntan för hur snabbt åtgärden behandlas. Hur din framdriftslinje rör sig påverkar hur de uppfattar belastningstiden. För att göra en progressiv bar känner du snabbare för användare du kan använda följa enkla tekniker:
- Progressionsfältet bör aldrig sluta, annars kommer användarna att tro att webbplatsen frös. Det värsta möjliga fallet är när framdriftslinjen närmar sig 99% och slutar plötsligt. De flesta användare kommer att bli frustrerade av detta beteende.
- Du kan dölja små förseningar i din framdriftsfält genom att flytta det direkt och stabilt.
- Flytta framdriftsfältet långsamt i början och accelerera det mot slutet för att ge användarna en snabb känsla av färdigställandestid.
Bildkredit: Dribbble
Skelettskärmar
Väntetid är rätt tid för skelettskärmar (även för tillfälliga informationsbehållare). En skelettskärm är i huvudsak en blank version av en sida i vilken informationen laddas gradvis. Det ger ett alternativ till de traditionella animerade indikatorerna. Snarare än att visa en abstrakt widget skapar skelettskärmar förväntan på vad som ska komma och gör användaren inriktad på framsteg istället för väntetider.
Skelettbilder laddas snabbt eftersom det är en liten bild som ofta består av enkla former. Dessa tekniker kan tas ännu längre i mobilappar eftersom skelettmallen kan lagras lokalt tillsammans med appens data. Facebooks app för iOS visar användarna gråa block och rader för att representera bilder och text som appen laddas. När det slutar läsas visas bilderna och texten i stället för de tillfälliga behållarna. Det här är inte snabbare än att ha en laddningsskärm med en spinner, men i användarens sinne känns det som det är.
Bakgrundsoperationer
Ett annat snabbtrick du kan använda är bakgrundsoperationer. Åtgärder som är packade i bakgrundsoperationer har två fördelar - de är osynliga för användaren och händer innan användaren faktiskt frågar efter dem. Ge användare andra saker att fokusera på, eftersom en process pågår i bakgrunden. Ett bra exempel på detta är att ladda upp bilder på Instagram. Så snart användaren väljer en bild att dela, börjar den ladda upp. Appen uppmanar användare att lägga till titel och taggar medan bilden laddas upp i bakgrunden. När användarna kommer att vara redo att trycka på en "Dela" -knapp, kommer uppladdningen att slutföras och det blir möjligt att dela sin bild direkt .
Progressiv bildhantering
Eftersom moderna appar och webbplatser laddar upp fler och fler bilder är det bra att tänka på deras laddningsprocess eftersom det påverkar prestanda och användarupplevelse. Genom att använda en suddig effekt kan du skapa en progressiv bildladdningseffekt.
Ett bra exempel är Medium, vilket försvinner postbildet och bilderna i inläggets innehåll tills bilden är fullt laddad. Först laddar den en liten suddig bild (miniatyrbild) och övergår sedan till den stora bilden. Miniatyrerna är mycket små (bara några kilobytes), vilket i kombination med den suddiga effekten möjliggör en bättre platshållare än en solid färg utan att offra nyttolast.
Medellång användning suddar för att skapa en progressiv bildladdningseffekt
Visuell distraktion
Du bör alltid försöka göra väntetiden trevligare om du inte kan förkorta linjen. För att se till att människor inte blir uttråkade medan de väntar på att något ska hända, ge dem lite distraktion. Fina animationer kan distrahera dina besökare och få dem att ignorera långa laddningstider.
Animerad stänkskärm. Bildkredit: Ramotion (Dribbble)
Bildkredit: Vimeo