4 triks for å lage lastetider føles raskere
Uansett hvor godt utformet brukergrensesnittet ditt kan være, på et eller annet tidspunkt vil folk som bruker det, måtte vente på noe å laste.
Lastetiden kan skade den samlede opplevelsen. Å la brukerne vente lenge for at appen din skal lastes, kan gjøre brukerne utålmodige. Hvis brukerne får den følelsen, vil de forlate nettstedet ditt og gå et annet sted. Heldigvis er det noen få ting du kan gjøre for å øke brukerens følelse av tid og få dem til å føle at innholdet ditt laster raskere enn det gjør.
1. Ikke la brukerne vente uten å gi dem tilbakemelding
Hvis brukerens tilkobling er sakte, kan det ta en stund for et nettsted å fylle ut innhold på skjermen. En brukers ventetid begynner når de starter en handling, og verste fallet er når de ikke har noen indikator på at nettstedet har mottatt det.
Når nettstedet ditt ikke underretter brukere om at det trenger litt tid for å fullføre en handling, tror brukerne ofte at den ikke mottok forespørselen, og de prøver igjen. Massevis av ekstra kraner har oppstått på grunn av manglende tilbakemelding. For å gjøre folk lykkelige må vi gi en indikasjon på at noe skjer, og gir visuell tilbakemelding.
2. Unngå statiske fremdriftsindikatorer
Statiske progresindikatorer er de som har et unmoving-bilde eller en tekst, for eksempel «Laster ...» eller «Vennligst vent ...» for å indikere at forespørselen er mottatt. Mens tilbakemeldinger er bedre enn ingen, er statiske indikatorer dårlig UX. Brukerne har ikke noen indikasjon på at innholdet lastes inn, så de er ikke sikre på om prosessen faktisk sitter fast.
3. Bruk animerte lastindikatorer
Psykologiske studier av ventetid viser at brukerfokus begynner å skifte etter et sekund med å vente uten tilbakemelding. For å redusere brukerens usikkerhet, bruk en fremdriftsindikator for enhver handling som tar lengre tid enn det. (Merk: bruk av animasjon anbefales ikke for noe som tar mindre enn ett sekund å laste, fordi brukere kan føle seg engstelig for det som bare blinket på og av skjermen).
Uendelige lastespinnere for rimelig rask drift
Den enkleste form for animerte indikatorer er en lastespinn. Denne typen visuell tilbakemelding oppgir bare det faktum at brukeren må vente, men sier ikke hvor lenge de skal vente. Som regel bør du bruke denne typen fremdriftsindikator for raske handlinger (2-10 sekunder).
En spinner av grå linjer som utstråler fra et sentralt punkt er en standard tilnærming.
Laster spinnere brukes ofte sammen med trekk for oppdatering. Det fungerer som mellomledd mellom to tilstander i brukergrensesnittet, og hjelper brukerne å forstå hva som skjer når skjermen endres.
Apple Mail app for iOS
Prosent-ferdig animasjon for langvarig operasjon
Laster spinnere er ikke den rette måten å indikere langvarig lasting. Det er mye mer utholdelig å vente på noe hvis vi vet når det skjer. Derfor bør du for langvarige operasjoner gi brukerne en klar indikasjon på hvor lenge de må vente. Som en generell tommelfingerregel bør du bruke en prosentvis animasjon for lengre prosesser som tar 10 eller flere sekunder.
Bilde kreditt: Behance
Alternativt kan du gi et generelt tidsramme for operasjonen. Ikke prøv å være nøyaktig, en enkel, "Dette kan ta et minutt" kan være nok til å informere brukeren og oppfordre dem til å vente det ut.
Installere programvareoppdatering i Mac OS X
4. Tweaking brukerens oppfatning av tid
Hvor fort innholdet ditt er i tankene til brukeren. Når du prøver å skape en raskere brukeropplevelse, kan du forkorte den oppfattede tiden i stedet for den faktiske tiden. For å gjøre det kan du fylle ventetider med innhold, animasjoner eller handlinger som brukeren kan utføre.
Progress bars
En fremdriftslinje gjør at brukerne utvikler en forventning for hvor raskt handlingen behandles. Måten din fremdriftslinje beveger seg, påvirker hvordan de oppfatter lastetiden. For å lage en fremdriftslinje, føl raskere for brukere du kan bruke, følg enkle teknikker:
- Fremdriftslinjen bør aldri stoppe, ellers vil brukerne tro at nettstedet er frøs. Det verste fallet er når fremdriftslinjen nærmer seg 99%, og stopper plutselig. De fleste brukere vil bli frustrert av denne oppførselen.
- Du kan forklare små forsinkelser i fremdriftslinjen ved å flytte den øyeblikkelig og stabil.
- Flytt fremdriftslinjen sakte i begynnelsen og akselerere den mot slutten for å gi brukerne en rask følelse av ferdigstillelse.
Bilde kreditt: Dribbble
Skjelettskjerm
Ventetiden er en riktig tid for skjelettskjermbilder (også midlertidige informasjonskasser). En skjelettskjerm er i hovedsak en blank versjon av en side som informasjonen gradvis lastes inn. Det gir et alternativ til de tradisjonelle animerte indikatorene. I stedet for å vise en abstrakt widget, skelettskjermbilder skaper forventning om hva som kommer og gjør brukeren fokusert på fremgang i stedet for ventetider.
Skjelettbilder lastes raskt, siden det er et lite bilde som ofte består av enkle former. Disse teknikkene kan tas enda lenger i mobile apps fordi skjelettmalen kan lagres lokalt sammen med appens data. Facebooks app for iOS viser brukere grå blokker og linjer for å representere bilder og tekst som appen laster. Når det er ferdig med å laste, vises bildene og teksten i stedet for de midlertidige beholderne. Dette er ikke raskere enn å ha en laste skjerm med en spinner, men i brukerens sinn, føles det som det er.
Bakgrunnsoperasjoner
Et annet farttrykk du kan bruke er bakgrunnsoperasjoner. Handlinger som er pakket inn i bakgrunnsoperasjoner har to fordeler - de er usynlige for brukeren og skjer før brukeren faktisk ber om dem. Gi brukere andre ting å fokusere på som en prosess foregår i bakgrunnen. Et godt eksempel på dette er å laste opp bilder på Instagram. Så snart brukeren velger et bilde å dele, begynner det å laste opp. Appen inviterer brukere til å legge til tittel og koder mens bildet lastes opp i bakgrunnen. Når brukerne vil være klare til å trykke på en "Del" -knapp, vil opplastingen bli fullført, og det vil være mulig å dele bildet umiddelbart .
Progressiv bildeinnlasting
Ettersom moderne apper og nettsteder laster flere og flere bilder, er det godt å tenke på sin lasteprosess, siden det påvirker ytelse og brukeropplevelse. Ved å bruke en uskarpt effekt kan du opprette en progressiv bildeinnlastingseffekt.
Et godt eksempel er Middels, som blur postbildedekselet og bildene i innleggets innhold til bildet er fullt lastet. Først laster det et lite uklart bilde (miniatyrbilde), og deretter overgår det til det store bildet. Miniatyrbildene er svært små (bare noen få kilobytes), som i kombinasjon med den uskarpe effekten gir en bedre plassholder enn en solid farge, uten å ofre nyttelast.
Medium bruker uskarphet for å skape en progressiv bildeinnlastingseffekt
Visuell distraksjon
Du bør alltid prøve å gjøre ventetiden mer behagelig hvis du ikke kan forkorte linjen. For å sikre at folk ikke kjeder seg mens de venter på at noe skal skje, gi dem litt distraksjon. Fine animasjoner kan distrahere dine besøkende og få dem til å ignorere lange belastningstider.
Animert sprutskjerm. Bilde kreditt: Ramotion (Dribbble)
Bilde kreditt: Vimeo