4 tricks til at lave belastningstider føles hurtigere
Ligegyldigt hvor godt designet din brugergrænseflade er, på et eller andet tidspunkt vil folk, der bruger det, skal vente på noget at indlæse.
Indlæsningstiden kan skade den samlede oplevelse. Gør brugerne vente for længe, fordi din app skal indlæse, kan gøre brugerne utålmodige. Hvis brugerne får den følelse, vil de opgive dit websted og gå et andet sted. Heldigvis er der et par ting, du kan gøre for at fremskynde din brugers følelse af tid og få dem til at føle, at dit indhold belastes hurtigere end det gør.
1. Lad aldrig brugerne vente uden at give dem feedback
Hvis brugerens forbindelse er langsom, kan det tage et stykke tid for et websted at udfylde indhold på skærmen. En brugers ventetid begynder det øjeblik, de indleder en handling, og det værste tilfælde er, når de ikke har nogen indikator for, at webstedet har modtaget det.
Når dit websted ikke underretter brugere om, at det har brug for noget tid til at gennemføre en handling, tror brugerne ofte, at den ikke modtog anmodningen, og de forsøger igen. Masser af ekstra kraner er opstået på grund af manglende feedback. For at gøre folk glade skal vi give en indikation på, at der sker noget , giver visuel feedback.
2. Undgå statiske fremdriftsindikatorer
Statiske progresindikatorer er dem, der har et unmoving billede eller en tekst, som f.eks. "Indlæser ..." eller "Vent venligst ..." for at angive, at anmodningen er modtaget. Mens nogen feedback er bedre end ingen, er statiske indikatorer dårlige UX. Brugere har ingen indikator for, at indholdet bliver indlæst, så de er ikke sikre på, om processen rent faktisk sidder fast.
3. Brug animerede indlæsningsindikatorer
Psykologiske undersøgelser af ventetiden viser, at brugerfokus begynder at skifte efter et sekund at vente uden nogen tilbagemelding. For at reducere en brugers usikkerhed skal du bruge en fremdriftsindikator for enhver handling, der tager længere tid end den. (Bemærk: Brug af animation anbefales ikke til noget, der tager mindre end et sekund at indlæse, fordi brugere måske føler sig bekymrede for, hvad der bare blinkede på og uden for skærmen).
Uendelig loading spinner til rimeligt hurtige operationer
Den enkleste form for animerede indikatorer er en loading spinner. Denne type visuel feedback siger blot, at brugeren skal vente, men siger ikke hvor længe de skal vente. Som hovedregel skal du bruge denne type fremdriftsindikator til hurtige handlinger (2-10 sekunder).
En spinner af grå linjer udstråler fra et centralt punkt er en standard tilgang.
Indlæsning af spinnere bruges ofte sammen med træk til opdatering gestus. Det fungerer som mellemmand mellem to stater i brugergrænsefladen og hjælper brugerne med at forstå, hvad der sker, når skærmen ændres.
Apple Mail app til iOS
Procent-færdig animation til langvarige operationer
Indlæsning af spinnere er ikke den rigtige måde at indikere langvarig lastning på. Det er meget mere utholdeligt at vente på noget, hvis vi ved, hvornår det vil ske. Derfor skal du for langvarige operationer give brugerne en klar indikation af, hvor længe de skal vente. Som en generel tommelfingerregel skal du bruge en procentfærdig animation til længere processer, der tager 10 eller flere sekunder.
Billedkredit: Behance
Alternativt kan du give et generelt tidsoverslag for operationen. Prøv ikke at være præcis, en simpel, "Dette kan tage et øjeblik" kan være tilstrækkeligt til at informere brugeren og opfordre dem til at vente det.
Installation af softwareopdatering i Mac OS X
4. Tweaking brugerens opfattelse af tid
Hvor hurtigt dit indhold belastes er i brugerens sind. Når du forsøger at skabe en hurtigere brugeroplevelse, kan du forkorte den opfattede tid i stedet for den aktuelle tid. For at gøre det kan du udfylde ventetider ved hjælp af indhold, animationer eller handlinger, som brugeren kan udføre.
Progress bars
En fremdriftslinje gør det muligt for brugere at udvikle en forventning om, hvor hurtigt handlingen behandles. Den måde, hvorpå din statuslinje bevæger sig, påvirker, hvordan de opfatter belastningstiden. For at gøre en fremgangslinje føler du hurtigere for brugere, du kan bruge følgende enkle teknikker:
- Fremdriftslinjen skal aldrig stoppe, ellers vil brugerne tro, at webstedet er frøs. Det værst mulige tilfælde er, når fremgangslinjen nærmer sig 99% og pludselig stopper. De fleste brugere vil blive frustreret af denne adfærd.
- Du kan forklare små forsinkelser i din fremdriftslinje ved at flytte det øjeblikkeligt og stabilt.
- Flyt fremdriftslinjen langsomt i begyndelsen og accelerere den mod slutningen for at give brugerne en hurtig følelse af færdiggørelsestid.
Billedkredit: Dribbble
Skelet skærmbilleder
Ventetiden er et rigtigt tidspunkt for skeletskærme (også midlertidige informationsbeholdere). En skelett skærm er i det væsentlige en blank version af en side, hvor information er gradvist indlæst. Det giver et alternativ til de traditionelle animerede indikatorer. I stedet for at vise en abstrakt widget skaber skeletskærme forventning om, hvad der skal komme og gør brugeren opmærksom på fremskridt i stedet for ventetider.
Skeletbilleder belastes hurtigt, da det er et lille billede, der ofte består af enkle former. Disse teknikker kan tages endnu længere i mobile apps, fordi skabelonskabelonen kan gemmes lokalt sammen med appens data. Facebooks app til iOS viser brugere grå blokke og linjer til at repræsentere billeder og tekst som appen indlæser. Når den er færdig med at blive ilagt, vises billederne og teksten i stedet for de midlertidige beholdere. Dette er ikke hurtigere end at have en læsningsskærm med en spinner, men i brugerens sind føles det som om det er.
Baggrundsoperationer
Et andet hurtighedstrick du kan bruge er baggrundsoperationer. Handlinger, der er pakket i baggrundsoperationer, har to fordele - de er usynlige for brugeren og sker, før brugeren faktisk beder om dem. Giv brugere andre ting at fokusere på, da en proces foregår i baggrunden. Et godt eksempel på dette er at uploade billeder på Instagram. Så snart brugeren vælger et billede at dele, begynder det at uploade. App'en inviterer brugere til at tilføje titel og tags, mens billedet uploades i baggrunden. På det tidspunkt, hvor brugerne vil være klar til at trykke på en 'Share' -knap, vil upload blive gennemført, og det vil være muligt at dele deres billede med det samme .
Progressiv billedindlæsning
Da moderne apps og websteder indlæser flere og flere billeder, er det godt at tænke på deres indlæsningsproces, da det påvirker ydeevnen og brugeroplevelsen. Ved hjælp af en sløret effekt kan du oprette en progressiv billedindlæser effekt.
Et godt eksempel er Medium, der blurer efter billeddækslet samt billeder i postindholdet, indtil billedet er fuldt indlæst. For det første lægger det et lille sløret billede (thumbnail) og overfører derefter til det store billede. Miniaturerne er meget små (kun få kilobytes), som kombineret med den uskarpe effekt giver mulighed for en bedre pladsholder end en solid farve, uden at ofre for nyttelast.
Medium bruger uskarphed for at skabe en progressiv billedindlæser effekt
Visuel distraktion
Du bør altid forsøge at gøre venten mere behagelig, hvis du ikke kan forkorte linjen. For at sikre, at folk ikke keder sig, mens de venter på at noget skal ske, giver dem lidt distraktion. Fine animationer kan distrahere dine besøgende og få dem til at ignorere lange belastningstider.
Animeret skærm. Billedkredit: Ramotion (Dribbble)
Billedkredit: Vimeo