Hvordan eliminerer man den negative effekt af lange læssetider ved hjælp af fremskridtsindikatorer? Hvilken belastningsindikator skal man vælge.

Animerede preloadere bruges af udviklere, når de indlæser webapplikationer og websidedata via Ajax. Nogle gange vil du bruge noget mere originalt i stedet for et standard kedeligt billede. Hvis du har brug for animeret GIF eller PNG (APNG) preloader (indikator) loading loading.gif Jeg råder dig til at være opmærksom på internettjenesten. Tidligere skulle du gøre en stor indsats for at finde passende billedfiler i princippet, der er ikke mange lignende tjenester, så fremkomsten af et andet projekt er bestemt et plus for designere og udviklere.

Så lad os se på Preloaders mere detaljeret - gratis generator GIF- og APNG-forindlæsere, der viser indlæsningsprocessen. Desuden er generatoren så enkel som muligt og meget praktisk. Med det samme når du kommer til siden, vil du se, at alle billeder, der kan downloades, er bekvemt sorteret i kategorier - 3D, humørikoner, stjernetegn, mennesker, religiøse tegn, astronomi osv. Du kan endda finde kategorien "Sociale netværk". I nutidens tid er sagen næsten uerstattelig. Forresten, udover kategorierne kan du se de mest populære animerede billeder eller de seneste 10.

Når du har besluttet dig for kategorien og hovedlæsseren (som kan vælges fra den tilsvarende rulleliste), kan du begynde at tilpasse den. Du kan definere:

Billedtype (format - gif eller apng);
Farven på selve bootloaderen/baggrunden (valgt ved hjælp af en praktisk "palette"), samt gennemsigtighed;
Animation hastighed;
Billedstørrelse (inklusive 128x128 pixel opløsning understøttet);
Nogle ekstra "effekter" (farveinversion, baggrundsreflektion, omvendt animation osv.).

En unik egenskab ved Preloaders.net-tjenesten er, at hvis du ikke finder den nødvendige loader i databasen, kan du bestille den! For at gøre dette skal du gå til sektionen "Bestil ny" og udfylde den enkleste formular:

For nybegyndere vil det være nyttigt detaljerede instruktioner af Preloaders.net-generatoren, som du kan finde. I princippet er der ikke mere at tilføje, da tjenesten er så enkel som muligt, du kan lave de nødvendige animerede preloadere med dens hjælp hurtigt og nemt. Tak til vores udviklere for dette nyttig service, bør alle, der programmerer i Ajax, sætte pris på det.

Visning af systemtilstand er en af de ti grundlæggende brugervenlighedsstandarder, der forbliver et af de vigtigste og mest universelle principper for UI-design.

Fremskridtsindikatorer implementeres til rettidig levering feedback om systemets/grænsefladens funktion. Ifølge Normans interaktionsteori skal disse elementer også hjælpe brugerne med at evaluere systemets tilstand.

En af de hyppigst anvendte former for feedback om driften af systemet er en animeret fremskridtsindikator - dette element viser belastningen på systemet/ressourcen ved behandling af information eller indlæsning af data.

I dag gør vi opmærksom på en oversættelse af en artikel af Katie Sherwin, en usability-specialist hos NNG (Nielsen-Norman Group, Nielsen-Norman Group), hvori hun talte om forskellige typer indikatorer for fremskridt og gav anbefalinger til deres anvendelse.

Styrken ved feedback - Få brugerne til at føle, at du hører dem

Fremskridtsindikatorer er ikke en af de nyeste, men deres implementering vil med garanti forbedre brugeroplevelsen - ved at modtage feedback på deres handlinger er brugerne overbevist om, at systemet har accepteret deres anmodning og behandler den.

Desværre viser de fleste websteder og systemer ikke information om status for en proces, før den er fuldført - dette irriterer brugerne, fordi de ikke ved, om deres kommando bliver udført, eller om systemet overhovedet kører. Desuden forårsager manglende bevidsthed om systemstatus gentagne ordrer og mange unødvendige klik.

Høj downloadhastighed er generelt krav for alle ressourcer, men nogle gange behandler servere data længere end normalt, og dette kan ikke rettes, selv ved at opgradere dem. I sådanne tilfælde bør forbrugerne informeres om, at systemet fungerer, og at deres kommando udføres. Hvis overførslen tager mere end 10 sekunder, anbefales det at angive den omtrentlige tid, indtil den er færdig - ellers vil mange brugere simpelthen ikke vente.

Som et eksempel på systemstatusfeedback delte Katie dette opkald med California Department of Motor Vehicles (DMV):

Forudsigeligt blev Sherwin informeret om, at alle operatører havde travlt.
Et par minutter senere blev en besked tændt, der indikerede, at Katie stadig var på linjen.
Den næste post oplyste, at den omtrentlige ventetid var 15-20 minutter - dette gjorde det muligt for NNG-specialisten at udføre sit arbejde uden frygt for at misse linjen.
Efter 15 minutter blev Katie bedt om at gå kontakt nummer så operatøren kan kontakte hende, når han har fri. Desuden blev Sherwin forsikret om, at hun ikke ville miste sin plads i køen.

DMV's feedbackværktøjer gjorde det nemmere at vente på at blive forbundet til en operatør – Katie blev ikke kun holdt orienteret om status for sit opkald, men tilbød også et praktisk alternativ til at vente. I øvrigt implementering lignende system fastholdelse er meget billigere end personaleudvidelse.

Indlæsningsindikatorer informerer brugerne om, at systemet tager længere tid at udføre en kommando (som kunne være at downloade en fil, installere en opdatering osv.) og vise den estimerede ventetid.

For klart at formidle egenskaberne af disse elementer, beskrev Katie deres fordele og trak en parallel med et opkald til California Department of Transportation:

Indikatorer eliminerer brugerens tvivl om den korrekte drift af systemet ved at vise dets status - dette blev opnået ved hjælp af en meddelelse om operatørernes travlhed.
Disse elementer giver et objekt at se, der gør det nemmere at vente – når et opkald er i venteposition, er det musik.
De opfordrer brugerne til at vente ved at vise en proces - Sherwin blev informeret om, at alle afdelingsrepræsentanter var optaget, og at operatøren ville være ledig inden for 15 minutter, så hun var villig til at vente.
Fremskridtsindikatorer svækker følelsen af tid, da brugere, der koncentrerer sig om feedback, er mindre opmærksomme på selve venteprocessen - mens de lyttede til musik, glemte NNG-specialisten, hvor kedeligt det er at vente på en forbindelse med en operatør.

Formålet med en undersøgelse udført ved University of Nebraska-Lincoln var at bestemme mængden af tid, brugere er villige til at vente på, at en hjemmeside bliver indlæst. En gruppe af respondenter blev præsenteret for en version af siden med fremskridtsindikatorer (en animeret indlæsningsbjælke), og den anden - uden.

Som følge heraf var de, der fik vist websiden med indikatoren, mere tilfredse med brugeroplevelsen og ventede i gennemsnit 3 gange længere end dem, der ikke fik vist feedback-elementet.

Animerede indlæsningsindikatorer

Selvom hastigheden digital forbindelse stiger hvert år, er problemet med langsomt at indlæse ressourcer stadig relevant. Og som du ved, lav ydeevne Websites irriterer besøgende og får dem ofte til at forlade.

Brugernes villighed til at vente på downloads bestemmes af flere faktorer:

Det haster og kompleksiteten af formålet med besøget.
Kontekst af ressourcebrug - en besøgende, der har travlt med at downloade et vigtigt projekt, er mere tilbøjelige til at forlade ressourcen end en person, der sidder i Socialt netværk at slå tiden ihjel.
Opfylder forventninger baseret på tidligere erfaring med at interagere med en ressource eller udføre en lignende proces.

Marketingfolk kan ikke påvirke disse faktorer, men ved at følge nedenstående anbefalinger kan de øge brugernes villighed til at vente markant:

Vis altid noget feedback

Da ventetiden begynder umiddelbart efter fuldførelse af en handling (f.eks. klik på et CTA-element), skal systemet straks angive, at anmodningen er blevet accepteret og behandles: for eksempel kan farven på knappen, som brugeren klikkede på, ændre sig , eller der vises muligvis en indlæsningsbjælke.

Den statiske karakter af grænsefladen efter at have sendt en anmodning opfattes af mange brugere som en fejl, så de forsøger ofte at udføre kommandoen igen, hvilket igen kan føre til negative konsekvenser.

Vis forløbet af enhver proces, der tager længere end 1 sekund

Brugernes opmærksomhed begynder at vandre efter et par sekunders venten, hvilket kan føre til, at de går. For at vise fremskridtene for processer, hvis varighed er længere end et sekund, bør du derfor bruge cyklisk animation eller en procentindikator.

En grafik med en looping-animation indikerer, at systemet kører, men giver ikke information om den estimerede indlæsningstid.

Sådanne elementer skal bruges til at vise status for processer, der varer fra 2 til 10 sekunder. Hvis du bruger looping-animation til anmodninger, der tager mindre end et sekund at behandle, vil det få brugerne til at blive forvirrede over den pludselige optræden og forsvinden af et uforståeligt element.

Fra et webudviklingsperspektiv er det fristende at bruge looping-animation i alle dine indikatorer, fordi det ikke kræver beregning af indlæsningstider. Det anbefales dog ikke at vise behandlingen af processer, der varer mere end 10 sekunder med looping-animation - manglen på fremskridtsinformation vil tilskynde brugerne til at forlade. Desuden ifølge denne grafisk element det er umuligt at afgøre, om systemet virker, hvilket også øger muligheden for, at digital interaktion afbrydes.

En deltager i en brugervenlighedstest ventede mere end 15 minutter på, at en online publikations side blev indlæst, og i sidste ende viste det sig, at der var opstået en fejl, og applikationen skulle genstartes. Det er indlysende rigtige bruger vil ikke vente så længe.

Tilføjelse til indikatorer tekst symboler(f.eks. "Indlæs kommentarer") kan også øge deres effektivitet.

Det er værd at bemærke, at cyklisk animation ikke er egnet til at vise fremskridtene med at downloade data fra servere, da kvaliteten af forbindelsen, som påvirker arbejdshastigheden, er uden for udviklernes kontrol. Ifølge standarder bør data ikke indlæses længere end 2 sekunder, men dette tal er ikke altid opnåeligt.

Procentvise fremskridtsindikatorer er den mest informative form for animeret feedback. Disse elementer giver brugerne mulighed for at estimere omtrentlige ventetider (hvilket giver dem mulighed for at beslutte, om de vil vente eller ej), eliminere så meget usikkerhed som muligt vedrørende behandlingstider og reducere tidsfornemmelsen.

Cirkler og vandrette streger, der fylder fra 0 til 100 %, er eksempler på denne type fremskridtsindikator.

Som en generel regel bør procentindikatorer bruges til processer, der varer 10 sekunder eller mere - visuelt element, der afspejler den gradvise afslutning af behandlingen, beroliger og tilskynder til forventning. Disse elementer kan dog bruges til at vise status for processer, der kræver mindre end 10 sekunder, hvis de er relateret til fil- eller registreringsdatabasen, da besøgende forstår, at systemet kører med et vist beløb optegnelser.

Det anbefales at tilføje tekst til animerede procentindikatorer (for eksempel "Downloadede filer: 17 ud af 50") og til indikatorer for lange processer for at tilføje en annulleringsknap, hvis brugeren ikke ønsker at vente. Fraværet af et fortryd-element fratager i øvrigt brugerne kontrol over systemet, hvilket skader brugeroplevelsen.

Procentindikatorer giver indsigt i processens varighed, hvilket gør ændringer i fremdriftshastigheden mere mærkbare, hvilket igen har en positiv indflydelse på brugeroplevelsen. Brugerne bliver dog irriterede, hvis indikatoren fyldes for hurtigt og derefter stopper med et par procent tilbage at fuldføre - dette negerer den positive effekt af feedbacken.

Mange designere og udviklere, der implementerer belastningsindikatorer, står over for problemet med at beregne hastigheden af processer. Følg disse anbefalinger for at klare denne opgave:

Indstil animationen, så indikatoren begynder at fylde langsomt, og efterhånden som den kommer tættere på indlæsning, øges hastigheden – det vil ikke skabe høje forventninger til sitets ydeevne blandt besøgende. Det er altid bedre at overgå kundernes forventninger end at skuffe dem.
Det er værd at bemærke, at denne anbefaling kun gælder for belastningsindikatorer - undersøgelser har vist, at undersøgelsesfremskridtsindikatorer, hvis gennemførelsesprocent falder, efterhånden som de skrider frem, sænker afvisningsprocenten.
Angiv venligst ca præcis tid Ventetider - i nogle tilfælde vil downloadingen sandsynligvis tage længere tid end den angivne tid, hvilket vil påvirke forbrugernes tillid negativt.
Simpel tekst som "Dette vil tage omkring et minut" eller "Omkring 3 minutter tilbage" er nok til at informere og fastholde brugerne. Tilføj også et par ekstra sekunder til den angivne værdi i tilfælde af uventede forsinkelser.
I stedet for at vise overordnet fremskridt, er det i nogle tilfælde optimalt at vise antallet af gennemførte og resterende trin - besøgende ved ikke præcis, hvor lang tid det vil tage at gennemføre et bestemt trin, men antallet af trin vil hjælpe dem med at få en grov idé og vil tiltrække dem til at fuldføre processen eller vente på, at den er færdig.

Statiske indikatorer, såsom teksten "Vent venligst, resultaterne indlæses" uden nogen animerede elementer, er ineffektive. Sådanne indikatorer viser ikke information om systemets fremskridt og tilstanden af dets drift, derfor bør de erstattes med dynamiske.

Den værste måde at forhindre utilsigtede genbestillinger og unødvendige klik på er at tilføje en advarsel til din CTA-knap, der siger: "Gen-klik kan resultere i en gentagelsesordre." For det første er alle trusler i modstrid grundlæggende standarder positiv brugererfaring, og for det andet er sådanne advarsler simpelthen ineffektive, da de sjældent bliver opmærksomme på.

Advarselstekst: "Dobbelklik ikke!"

Under undersøgelsen ”Børn i Internettet” (Børn på nettet), NNG-specialister stødte på en masse interaktive værktøjer og spil, som tog lang tid at indlæse.

For at gøre indlæsningsskærmen sjov og engagerende inkluderer designere ofte videoindhold og minispil for at holde brugerne beskæftiget, mens de venter. Sådanne ændringer gør dog mere skade end gavn, da børn ofte ikke skelner rigtigt spil fra downloadprocessen og forstår ikke, hvorfor interaktionen blev afbrudt.

Katie gav nogle tips til, hvordan man holder unge brugere interesserede uden at distrahere dem fra hovedaktiviteten:

Brug altid synlige procentindikatorer for at lade børn vide, at systemet indlæses. Børn vil ligesom voksne gerne vide, om systemet virker, og hvor lang tid det vil tage at starte op.
Sørg for, at den mellemliggende animation ikke skjuler indikatoren eller ligner gameplay.
Brug spændende og simple animationer, der er relevante for hovedaktiviteten - disse er de mest effektive til at bevare opmærksomheden og øge forventningerne.

Konklusion

At give feedback er et af de vejledende krav til en positiv brugeroplevelse. Ved åbent og gennemsigtigt at vise den tid, det tager at indlæse, kan designere eliminere brugerforvirring om systemstatus og øge den tid, de er villige til at bruge på at vente.

Cykliske indikatorer bør bruges til processer, der varer 2-9 sekunder, og procentindikatorer for forsinkelser, der varer mere end 10 sekunder. Men da det ikke altid er muligt at estimere indlæsningstiden, bør du øge visningsforsinkelsen for processer, der kræver mere end 10 sekunder. Jo højere ustabilitet i belastningstiden er, desto lavere skal minimumstærsklen for at vise nøjagtige fremskridt være.

Effektive fremskridtsindikatorer får brugerne til at vente og påvirker positivt deres indtryk af webstedet/appen.

Dette stilfulde piledisplay tjener til at præsentere data om driften af servere. Det viser CPU-belastningsprocenten, Random Access Memory Og harddiske computer. Data vises ved hjælp af tre analoge pointer-type instrumenter - voltmetre jævnstrøm ved 10 V (eller en hvilken som helst passende; det er ikke et problem at vælge en modstand til at afbøje nålen helt). Ansvarlig for kontrol over driften af systemet Hindbær modul Pi Zero sammen med et system bestående af to operationsforstærkere LM358, drevet af en boost-konverter 5>12 V (klarmodul fra Ali).

Elektrisk diagram

DAC-kredsløb baseret på op-amp 358

For at tilslutte voltmetre til udgangene skal du bruge enkelt program, skrevet i Python sprog, som genererer tre PWM-signaler, proportionalt med belastningen af dette element kontrolleret server. Op-amp kredsløb - analog konverter PWM spændingssignal.

Board med dele - 2 LM358

DAC'en konverterer 3,3 V PWM-signalet fra Raspberry Pi til en spænding fra 0 til 10 V. analoge udgange- 1, 2 og 3 - er forbundet direkte til sensorerne på panelet, og PWM-indgangene - 1, 2 og 3, er forbundet til controlleren.

Indikator design

Det sværeste her er ikke at samle diagrammet - men at printe smukke 3 skalaer. Her er en tegning, du kan bruge til din enhed.

Tegninger af den nye indikatorskala

Klip den derefter ud og indsæt den oven på den originale måleurskala.

Voltmeter skala

Type færdig enhed

Indikatorerne er monteret på en plade malet grå. Du kan bygge det ind i computerkabinettet, eller du kan arrangere det i form af en separat boks. Hele systemet er monteret i et kompakt hus, så der er ikke andet udenfor end skiveindikatorer kan ikke se.

Klar-indikator - 3 stk.

Alt drives af én fælles spænding på 5 volt fra pc-strømforsyningen. På den ene side driver den Raspberry Pi Zero, og på den anden side driver den via en 12 Volt konverter et analogt kredsløb, der genererer en styrespænding fra 0 til 10 V til switchmen. Kredsløbsdiagrammet og firmwaren for MK er ikke givet - da dette er en separat historie...

Forestil dig situationen: du er i en butik og prøver at finde et produkt og spørg konsulenten, hvor det er. Som svar på dette står konsulenten ganske enkelt stille uden at foretage sig noget. Du vil højst sandsynligt føle dig skuffet og gå. Brugere, der ser "spinner"-belastningsindikatoren på deres skærm for længe, har det på samme måde.

Spinnere er ikke til lang lastning

Spinnere fortæller ikke brugeren, hvor lang tid lastningsprocessen vil tage. Hvis du bruger denne indikator i en for lang proces, vil brugerne begynde at tro, at noget er gået galt, og der er et problem med applikationen. Manglende information skaber usikkerhed om, at besøgende vil tolke på den værst tænkelige måde.

Brugere vil beslutte, at overførslen vil tage for lang tid, og dette, som du kan forestille dig, vil ikke lyse op i deres forventninger. Utålmodigheden vil opbygges, og til sidst vil den besøgende blot trykke på "tilbage"-knappen eller forlade applikationen helt.

Fire sekunders regel

Hvis du vil have brugerne til at blive i din app, skal du ikke bruge spinnere på indlæsningstider længere end fire minutter. Videnskabelig forskning har vist, at brugernes maksimale ventetolerance er fire minutter. Det betyder, at efter fire sekunder ændres adfærdsmæssige intentioner.

Hvornår skal man bruge en spinner

Brugeren forventer et øjeblikkeligt svar fra applikationen. Den umiddelbare reaktion varer mindre end et sekund. Hvis brugeren ikke ser nogen reaktion i mere end et sekund, begynder de at bekymre sig.

Hvis du har en proces, der varer mere end et sekund, så brug en spinner. Dette vil lade brugerne vide, at appen indlæses, hvilket vil lette deres ventetid og bekymring.

Loading bar til lange processer

Hvis processen tager mere end fire sekunder, skal du bruge indlæsningsstangen. I dette tilfælde har brugerne en tendens til at være mere tolerante, når de venter.

Dette skyldes, at du giver en klar forståelse af, hvor lang tid ventetiden vil tage. Indlæsningsbjælken giver brugerne mulighed for at se fremskridt, hvilket holder dem på sporet, mens de venter. Hvis de kun ser spinneren, så kan de ikke observere nogen fremskridt, og kan generelt ikke være sikre på, at handlingen rent faktisk sker. Den besøgende har simpelthen ikke noget incitament til at vente.

Sådan designer du en læssestang

Statuslinjen skal vise brugerne, hvor meget fremskridt der gøres. Animation bør foregå fra venstre mod højre i et gradvist og konsekvent tempo. Hvis animationen stopper for længe i lang tid, begynder brugerne at tro, at processen er gået i stå og ønsker ikke at vente længere.

Du skal også tilføje en numerisk vurdering af fremskridt. Hvis processen tager mindre end et minut, skal du vise download som en procentdel af download eller antallet af downloadede filer. Informer brugerne om præcis, hvilken aktivitet applikationen udfører.

Hvis download tager mere end et minut, skal du oplyse, hvor lang tid ventetiden vil tage. Dette vil give brugerne en forståelse for, at processen vil tage længere tid end normalt. Angiv den resterende ventetid i minutter, så personen kan skifte til noget andet og vende tilbage til applikationen inden for den angivne periode.

Brug ikke spinnere for meget

Mange designere har for vane at bruge spinnere i enhver læsseproces. Men hvis du bruger dem under lange indlæsningstider, vil det føre til brugerfrustration. Undgå dette ved at bruge læssestrimler, når det er nødvendigt.

Indlæsningsstangen gør brugeren mere tolerant i sin venteproces. De har ikke noget imod at vente, når de forstår, at applikationen virker for dem i det øjeblik. Men hvis denne proces tager længere tid end normalt, har besøgende brug for visuel feedback. Manglen på information om, hvor længe man skal vente, fremkalder utålmodighed, og brugerne går simpelthen.

Oversættelse – Vagtværelse