Hvordan eliminere den negative effekten av lange lastetider ved å bruke fremdriftsindikatorer? Hvilken lasteindikator å velge.

Animerte forhåndslastere brukes av utviklere når de laster nettapplikasjoner og nettsidedata via Ajax. Noen ganger vil du bruke noe mer originalt i stedet for et standard kjedelig bilde. Hvis du trenger animert GIF eller PNG (APNG) preloader (indikator) loading loading.gif Jeg anbefaler deg å være oppmerksom på Internett-tjenesten. Tidligere måtte du anstrenge deg for å finne passende bildefiler; i prinsippet er det ikke mange slike tjenester, så fremveksten av et annet prosjekt er absolutt et pluss for designere og utviklere.

Så la oss se på forhåndslastere mer detaljert - gratis generator GIF- og APNG-forlastere som viser lasteprosessen. Dessuten er generatoren så enkel som mulig og veldig praktisk. Umiddelbart kommer du til siden, vil du se at alle nedlastbare bilder er praktisk sortert i kategorier - 3D, uttrykksikoner, stjernetegn, mennesker, religiøse tegn, astronomi, etc. Du kan til og med finne en "sosiale nettverk"-kategori. I dagens tider er tingen nesten uerstattelig. Forresten, i tillegg til kategoriene, kan du se de mest populære animerte bildene eller de siste 10.

Når du har bestemt deg for kategorien og hovedlasteren (hvis valget er tilgjengelig fra den tilsvarende rullegardinlisten), kan du begynne å tilpasse den. Du kan definere:

Bildetype (format - gif eller apng);
Fargen på selve oppstartslasteren/bakgrunnen (valgt ved hjelp av en praktisk "palett"), samt gjennomsiktighet;
Animasjon hastighet;
Bildestørrelse (inkludert 128x128 piksler støttet);
Noen ekstra "effekter" (fargeinversjon, bakgrunnsrefleksjon, omvendt animasjon, etc.).

En unik funksjon ved Preloaders.net-tjenesten er at hvis du ikke finner den nødvendige lasteren i databasen, kan du bestille den! For å gjøre dette, må du gå til delen "Bestill ny" og fylle ut det enkleste skjemaet:

For nybegynnere vil det være nyttig detaljerte instruksjoner av Preloaders.net-generatoren, som du kan finne. I prinsippet er det ikke noe mer å legge til, siden tjenesten er så enkel som mulig; du kan raskt og enkelt lage de nødvendige animerte forhåndslasterne med dens hjelp. Takk til utviklerne våre for dette nyttig tjeneste, alle som programmerer i Ajax burde sette pris på det.

Å vise systemtilstand er en av de ti grunnleggende brukervennlighetsstandardene, og er fortsatt et av de viktigste og mest universelle prinsippene for UI-design.

Fremdriftsindikatorer implementeres til rettidig levering tilbakemelding om hvordan systemet/grensesnittet fungerer. I følge Normans interaksjonsteori skal disse elementene også hjelpe brukere med å evaluere systemets tilstand.

En av de mest brukte formene for tilbakemelding på driften av systemet er en animert fremdriftsindikator - dette elementet viser belastningen på systemet/ressursen ved behandling av informasjon eller lasting av data.

I dag gjør vi oppmerksom på en oversettelse av en artikkel av Katie Sherwin, en brukervennlighetsspesialist ved NNG (Nielsen-Norman Group, Nielsen-Norman Group), der hun snakket om forskjellige typer indikatorer for fremgang og ga anbefalinger for bruken av dem.

Kraften til tilbakemelding – få brukere til å føle at du hører dem

Fremdriftsindikatorer er ikke en av de siste, men implementeringen deres vil garantert forbedre brukeropplevelsen - ved å motta tilbakemelding på handlingene deres, er brukere overbevist om at systemet har godtatt forespørselen deres og behandler den.

Dessverre viser de fleste nettsteder og systemer ikke informasjon om statusen til en prosess før den er fullført - dette irriterer brukere fordi de ikke vet om kommandoen deres blir utført eller om systemet i det hele tatt kjører. Dessuten forårsaker mangel på bevissthet om systemstatus gjentatte bestillinger og mange unødvendige klikk.

Høy nedlastingshastighet er generelt krav for alle ressurser, men noen ganger behandler servere data lenger enn vanlig, og dette kan ikke korrigeres selv ved å oppgradere dem. I slike tilfeller bør forbrukerne informeres om at systemet fungerer og deres kommando blir utført. Hvis nedlastingen tar mer enn 10 sekunder, anbefales det å angi omtrentlig tid til den er fullført - ellers vil mange brukere rett og slett ikke vente.

Som et eksempel på systemstatustilbakemelding delte Katie denne samtalen med California Department of Motor Vehicles (DMV):

Forutsigbart ble Sherwin informert om at alle operatører var opptatt.
Noen minutter senere ble en melding slått på som indikerte at Katie fortsatt var på linjen.
Den neste oppføringen opplyste at den omtrentlige ventetiden var 15-20 minutter - dette tillot NNG-spesialisten å fortsette sin virksomhet uten frykt for å gå glipp av linjen.
Etter 15 minutter ble Katie bedt om å forlate kontakt nummer slik at operatøren kan kontakte henne når han er ledig. Dessuten ble Sherwin forsikret om at hun ikke ville miste plassen i køen.

DMVs tilbakemeldingsverktøy gjorde det lettere å vente på å bli koblet til en operatør – Katie ble ikke bare holdt informert om statusen til samtalen hennes, men tilbød også et praktisk alternativ til å vente. Forresten, gjennomføring lignende system oppbevaring er mye billigere enn personalutvidelse.

Lasteindikatorer informerer brukerne om at systemet bruker mer tid på å fullføre en kommando (som kan være å laste ned en fil, installere en oppdatering osv.) og vise den beregnede ventetiden.

For å formidle egenskapene til disse elementene tydelig, beskrev Katie fordelene deres, og trakk en parallell med en oppfordring til California Department of Transportation:

Indikatorer eliminerer brukerens tvil om riktig drift av systemet ved å vise statusen - dette ble oppnådd ved hjelp av en melding om operatørenes travelhet.
Disse elementene gir et objekt å se på som gjør det lettere å vente – når en samtale er satt på vent, er dette musikk.
De oppfordrer brukere til å vente ved å vise en prosess – Sherwin ble informert om at alle avdelingsrepresentanter var opptatt og at operatøren ville være ledig innen 15 minutter, så hun var villig til å vente.
Fremdriftsindikatorer svekker følelsen av tid, siden brukere, som konsentrerer seg om tilbakemeldinger, tar mindre hensyn til selve venteprosessen - mens han lyttet til musikk, glemte NNG-spesialisten hvor kjedelig det er å vente på en forbindelse med en operatør.

Formålet med en studie utført ved University of Nebraska-Lincoln var å bestemme hvor lang tid brukere er villige til å vente på at et nettsted skal lastes. En gruppe respondenter ble presentert for en versjon av siden med fremdriftsindikatorer (en animert lastelinje), og den andre - uten.

Som et resultat var de som ble vist nettsiden med indikatoren mer fornøyd med brukeropplevelsen og ventet i gjennomsnitt 3 ganger lenger enn de som ikke ble vist tilbakemeldingselementet.

Animerte lasteindikatorer

Selv om hastigheten digital tilkoblingøker hvert år, er problemet med sakte lasting av ressurser fortsatt aktuelt. Og som du vet, lav ytelse Nettsteder irriterer besøkende og får dem ofte til å forlate dem.

Viljen til brukere til å vente på nedlastinger bestemmes av flere faktorer:

Det haster og kompleksiteten av formålet med besøket.
Kontekst av ressursbruk - en besøkende som har det travelt med å laste ned et viktig prosjekt er mer sannsynlig å forlate ressursen enn noen som sitter i sosialt nettverkå drepe tid.
Oppfyller forventninger basert på tidligere erfaring med å samhandle med en ressurs eller utføre en lignende prosess.

Markedsførere kan ikke påvirke disse faktorene, men ved å følge anbefalingene nedenfor kan de øke brukernes vilje til å vente betydelig:

Vis alltid noen tilbakemeldinger

Siden ventetiden begynner umiddelbart etter å ha fullført en handling (for eksempel ved å klikke på et CTA-element), må systemet umiddelbart indikere at forespørselen er akseptert og behandles: for eksempel kan fargen på knappen som brukeren klikket endres , eller en lastelinje kan vises.

Den statiske karakteren til grensesnittet etter å ha sendt en forespørsel oppfattes av mange brukere som en feil, så de prøver ofte å utføre kommandoen på nytt, noe som igjen kan føre til negative konsekvenser.

Vis fremdriften til en prosess som tar mer enn 1 sekund

Brukernes oppmerksomhet begynner å vandre etter noen sekunders venting, noe som kan føre til at de drar. Derfor, for å vise fremdriften til prosesser hvis varighet er lengre enn ett sekund, bør du bruke syklisk animasjon eller en prosentindikator.

En grafikk med en looping-animasjon indikerer at systemet kjører, men gir ikke informasjon om estimert lastetid.

Slike elementer bør brukes til å vise status for prosesser som varer fra 2 til 10 sekunder. Hvis du bruker looping-animasjon for forespørsler som tar mindre enn et sekund å behandle, vil det føre til at brukere blir forvirret av at et uforståelig element plutselig dukker opp og forsvinner.

Fra et webutviklingsperspektiv er det fristende å bruke looping-animasjon i alle indikatorene dine fordi det ikke krever beregning av lastetider. Det anbefales imidlertid ikke å vise behandlingen av prosesser som varer mer enn 10 sekunder med looping-animasjon - mangelen på fremdriftsinformasjon vil oppmuntre brukere til å forlate. Dessuten i henhold til dette grafisk element det er umulig å avgjøre om systemet fungerer, noe som også øker muligheten for at digital interaksjon blir avbrutt.

En deltaker i en brukertest ventet i mer enn 15 minutter på at siden til en nettpublikasjon skulle lastes, og til slutt viste det seg at det hadde oppstått en feil og applikasjonen måtte startes på nytt. Det er åpenbart det ekte bruker vil ikke vente så lenge.

Legger til indikatorer tekstsymboler(f.eks. "Last inn kommentarer") kan også øke effektiviteten deres.

Det er verdt å merke seg at syklisk animasjon ikke er egnet for å vise fremdriften for nedlasting av data fra servere, siden kvaliteten på tilkoblingen, som påvirker hastigheten på arbeidet, er utenfor utviklernes kontroll. I henhold til standarder skal data ikke lastes lenger enn 2 sekunder, men dette tallet er ikke alltid oppnåelig.

Prosentvis fremdriftsindikatorer er den mest informative typen animerte tilbakemeldinger. Disse elementene lar brukere estimere omtrentlige ventetider (gir dem muligheten til å bestemme om de vil vente eller ikke), eliminere så mye usikkerhet som mulig angående behandlingstider og redusere tidsfølelsen.

Sirkler og horisontale søyler som fyller fra 0 til 100 % er eksempler på denne typen fremdriftsindikator.

Som en generell regel bør prosentindikatorer brukes for prosesser som varer i 10 sekunder eller mer - visuelt element, som reflekterer den gradvise fullføringen av behandlingen, beroliger og oppmuntrer til forventning. Disse elementene kan imidlertid brukes til å vise status for prosesser som krever mindre enn 10 sekunder, hvis de er relatert til fil- eller registerbehandling, siden besøkende forstår at systemet kjører med et visst beløp poster.

Det anbefales å legge til tekst til animerte prosentindikatorer (for eksempel "Filer nedlastede: 17 av 50"), og til indikatorer for lange prosesser for å legge til en avbryt-knapp i tilfelle brukeren ikke vil vente. Forresten, fraværet av et angreelement fratar brukere kontroll over systemet, noe som skader brukeropplevelsen.

Prosentindikatorer gir innsikt i prosessens varighet, noe som gjør endringer i fremdriftshastigheten mer merkbare, noe som igjen har en positiv innvirkning på brukeropplevelsen. Imidlertid blir brukere irriterte hvis indikatoren fylles for raskt og deretter stopper med noen få prosent igjen å fullføre - dette negerer den positive effekten av tilbakemeldingen.

Mange designere og utviklere som implementerer belastningsindikatorer står overfor problemet med å beregne hastigheten på prosesser. Følg disse anbefalingene for å takle denne oppgaven:

Still inn animasjonen slik at indikatoren begynner å fylles sakte, og etter hvert som den nærmer seg lasting, øker hastigheten – dette vil ikke skape høye forventninger til nettstedets ytelse blant besøkende. Det er alltid bedre å overgå kundenes forventninger enn å skuffe dem.
Det er verdt å merke seg at denne anbefalingen bare gjelder for belastningsindikatorer – studier har vist at fremdriftsindikatorer for undersøkelser, hvis fullføringsgrad avtar etter hvert som de skrider frem, senker fluktfrekvensen.
Vennligst angi omtrentlig eksakt tidspunkt Ventetider – i noen tilfeller vil nedlastingen sannsynligvis ta lengre tid enn den angitte tiden, noe som vil påvirke forbrukernes tillit negativt.
Enkel tekst som "Dette vil ta omtrent et minutt" eller "Omtrent 3 minutter igjen" er nok til å informere og beholde brukere. Legg også til noen ekstra sekunder til den angitte verdien i tilfelle uventede forsinkelser.
I stedet for å vise generell fremgang, er det i noen tilfeller optimalt å vise antall fullførte og gjenværende trinn - besøkende vil ikke vite nøyaktig hvor lang tid det vil ta å fullføre et bestemt trinn, men antall trinn vil hjelpe dem å få en grov idé og vil tiltrekke dem til å fullføre prosessen eller vente til den er ferdig.

Statiske indikatorer, for eksempel teksten "Vennligst vent, resultatene lastes inn" uten noen animerte elementer, er ineffektive. Slike indikatorer viser ikke informasjon om fremdriften til systemet og driftstilstanden, derfor bør de erstattes med dynamiske.

Den verste måten å forhindre utilsiktede ombestillinger og unødvendige klikk er å legge til en advarsel på CTA-knappen din som sier: "Å klikke på nytt kan resultere i en gjentatt bestilling." For det første er trusler motstridende grunnleggende standarder positivt Brukererfaring, og for det andre er slike advarsler rett og slett ineffektive, siden de sjelden blir tatt hensyn til.

Advarselstekst: "Ikke dobbeltklikk!"

Under studien «Barn i Verdensveven” (Barn på nettet), NNG-spesialister møtte mange interaktive verktøy og spill som tok lang tid å laste.

For å gjøre lasteskjermen morsom og engasjerende inkluderer designere ofte videoinnhold og minispill for å holde brukerne opptatt mens de venter. Imidlertid gjør slike modifikasjoner mer skade enn nytte, siden barn ofte ikke skiller ekte spill fra nedlastingsprosessen og forstår ikke hvorfor interaksjonen ble avbrutt.

Katie ga noen tips om hvordan du kan holde unge brukere interessert uten å distrahere dem fra hovedaktiviteten:

Bruk alltid synlige prosentindikatorer for å la barn få vite at systemet laster. Barn, som voksne, ønsker å vite om systemet fungerer og hvor lang tid det vil ta å starte opp.
Pass på at mellom-animasjonen ikke skjuler indikatoren eller ser ut som gameplay.
Bruk spennende og enkle animasjoner, relevant for hovedaktiviteten - disse er de mest effektive for å opprettholde oppmerksomhet og øke forventningene.

Konklusjon

Å gi tilbakemelding er et av de veiledende kravene til en positiv brukeropplevelse. Ved å åpent og transparent vise tiden det tar å laste, kan designere eliminere brukerforvirring om systemstatus og øke tiden de er villige til å bruke på å vente.

Sykliske indikatorer bør brukes for prosesser som varer 2-9 sekunder, og prosentindikatorer for forsinkelser som varer mer enn 10 sekunder. Men siden det ikke alltid er mulig å anslå lastetiden, bør du øke visningsforsinkelsen for prosesser som krever mer enn 10 sekunder. Jo høyere lastetidsustabilitet, desto lavere bør minimumsterskelen for å vise nøyaktig fremgang være.

Effektive fremdriftsindikatorer lar brukerne vente og påvirker positivt deres inntrykk av nettstedet/appen.

Denne stilige pilskjermen tjener til å presentere data om driften av servere. Den viser CPU-belastningsprosenten, tilfeldig tilgang minne Og harddisk datamaskin. Data vises ved hjelp av tre analoge pekerinstrumenter - voltmetere likestrøm ved 10 V (eller andre passende; å velge en motstand for å avlede nålen er ikke noe problem). Ansvarlig for kontroll over driften av systemet Bringebærmodul Pi Zero sammen med et system bestående av to operasjonsforsterkere LM358, drevet av en boost-omformer 5>12 V (klarmodul fra Ali).

Elektrisk diagram

DAC-krets basert på op-amp 358

For å koble voltmetre til utgangene trenger du enkelt program, skrevet i Python språk, som genererer tre PWM-signaler, proporsjonal med belastningen av dette elementet kontrollert server. Op-amp krets - analog omformer PWM spenningssignal.

Brett med deler - 2 LM358

DAC-en konverterer 3,3 V PWM-signalet som kommer fra Raspberry Pi til en spenning som varierer fra 0 til 10 V. analoge utganger- 1, 2 og 3 - kobles direkte til sensorene på panelet, og PWM-inngangene - 1, 2 og 3, er koblet til kontrolleren.

Indikatordesign

Det vanskeligste her er ikke å sette sammen diagrammet - men å skrive ut vakre 3 skalaer. Her er en tegning du kan bruke til enheten din.

Tegninger av den nye indikatorskalaen

Klipp den deretter ut og lim den på toppen av den originale måleskalaen.

Voltmeter skala

Type ferdig enhet

Indikatorene er montert på en plate malt grå. Du kan bygge det inn i datamaskindekselet, eller du kan ordne det i form av en egen boks. Hele systemet er montert i et kompakt hus, så det er ikke annet enn skiveindikatorer kan ikke se.

Klar-indikator - 3 stk.

Alt drives av én felles spenning på 5 Volt fra PC-strømforsyningen. På den ene siden driver den Raspberry Pi Zero, og på den andre, gjennom en 12 Volt omformer, driver den en analog krets som genererer en kontrollspenning fra 0 til 10 V for brytere. Kretsskjemaet og fastvaren til MK er ikke gitt - siden dette er en egen historie...

Se for deg situasjonen: du er i en butikk og prøver å finne et produkt og spør konsulenten hvor det er. Som svar på dette står konsulenten ganske enkelt stille uten å gjøre noe. Du vil mest sannsynlig føle deg skuffet og dra. Brukere som ser på "spinner"-belastningsindikatoren på skjermen for lenge, føler det på samme måte.

Spinnere er ikke for lang lasting

Spinnere forteller ikke brukeren hvor lang tid lasteprosessen vil ta. Hvis du bruker denne indikatoren i en for lang prosess, vil brukere begynne å tro at noe har gått galt og at det er et problem med applikasjonen. Mangel på informasjon skaper usikkerhet om at besøkende vil tolke på verst mulig måte.

Brukere vil bestemme at nedlastingen vil ta for lang tid, og dette, som du kan forestille deg, vil ikke lyse opp forventningene deres. Utålmodigheten vil bygge seg, og til slutt vil den besøkende ganske enkelt trykke på "tilbake"-knappen eller avslutte applikasjonen helt.

Fire andre regel

Hvis du vil at brukerne skal bli i appen din, ikke bruk spinnere på lastetider lengre enn fire minutter. Vitenskapelig forskning har vist at brukernes maksimale ventetoleranse er fire minutter. Dette betyr at etter fire sekunder endres atferdsintensjoner.

Når du skal bruke en spinner

Brukeren forventer et øyeblikkelig svar fra applikasjonen. Den umiddelbare reaksjonen varer mindre enn et sekund. Hvis brukeren ikke ser noen reaksjon på mer enn et sekund, begynner de å bekymre seg.

Hvis du har en prosess som varer mer enn et sekund, bruk en spinner. Dette vil fortelle brukerne at appen lastes inn, noe som vil lette ventetiden og bekymringene deres.

Lastestang for lange prosesser

Hvis prosessen tar mer enn fire sekunder, må du bruke lastestangen. I dette tilfellet har brukere en tendens til å være mer tolerante når de venter.

Dette er fordi du gir en klar forståelse av hvor lang tid ventetiden vil ta. Lastelinjen lar brukere se fremgang, noe som holder dem på sporet mens de venter. Hvis de bare ser spinneren, kan de ikke observere noen fremgang, og kan generelt ikke være sikre på at handlingen faktisk skjer. Den besøkende har rett og slett ikke noe insentiv til å vente.

Hvordan designe en lastestang

Fremdriftslinjen skal vise brukerne hvor mye fremgang som gjøres. Animasjon bør skje fra venstre til høyre i et gradvis og konsekvent tempo. Hvis animasjonen stopper for lenge i lang tid, begynner brukere å tro at prosessen har stoppet opp og ønsker ikke å vente lenger.

Du må også legge til en numerisk vurdering av fremgang. Hvis prosessen tar mindre enn ett minutt, viser du nedlastingen som en prosentandel av nedlastingen eller antall nedlastede filer. Informer brukerne om nøyaktig hvilken aktivitet applikasjonen utfører.

Dersom nedlastingen tar mer enn ett minutt, må du gi informasjon om hvor lang tid ventetiden vil ta. Dette vil gi brukerne en forståelse for at prosessen vil ta lengre tid enn vanlig. Angi gjenværende ventetid i minutter slik at personen kan bytte til noe annet og gå tilbake til applikasjonen innen den angitte perioden.

Ikke overbruk spinnere

Mange designere har for vane å bruke spinnere i enhver lasteprosess. Men hvis du bruker dem under lange lastetider, vil det føre til brukerfrustrasjon. Unngå dette ved å bruke lastestrimler når det er nødvendig.

Lastestangen gjør brukeren mer tolerant i venteprosessen. De har ikke noe imot å vente når de forstår at applikasjonen fungerer for dem i det øyeblikket. Men hvis denne prosessen tar lengre tid enn vanlig, trenger besøkende visuell tilbakemelding. Mangelen på informasjon om hvor lenge man skal vente provoserer utålmodighet og brukere drar rett og slett.

Oversettelse – Vaktrom