Progress bar

Apples design guide:

Fremskridtsindikatorer viser brugerne, at din app arbejder aktivt, mens den indlæser indhold eller udfører længerevarende operationer. Indikatorerne kan være determinerede, hvor fremskridtet kan måles (f.eks. filoverførsler), eller ubestemte, der bruges til opgaver med ukendt varighed (f.eks. synkronisering af komplekse data).

Determinerede indikatorer viser fremskridt ved at udfylde en linje eller en cirkulær bane, mens ubestemte indikatorer, som spinnere, bruger animationer til at indikere aktivitet. På macOS understøttes både ubestemte fremskridtslinjer og spinnere.

Det er best practise, at bruge determinerede indikatorer, når det er muligt, for at hjælpe brugerne med at vurdere, hvor lang tid en opgave vil tage, og planlægge deres næste handlinger. Det er vigtigt at sørge for, at fremskridtsopdateringer er nøjagtige og jævnt fordelt for at undgå at vildlede brugerne. Hold indikatorerne i bevægelse for at signalere, at appen fungerer. Hvis fremskridtet stopper, bør der gives feedback om forsinkelsen eller muligheder for, hvad brugerne kan gøre.

Placer indikatorerne konsekvent i din brugerflade, og giv brugerne mulighed for at annullere eller pause operationer, når det er muligt. Hvis det har konsekvenser at stoppe en opgave (f.eks. at miste downloadede data), skal brugerne informeres og bekræfte deres valg.

På iOS og iPadOS bør fremskridtslinjer i navigations- eller værktøjslinjer skjule den ikke-udfyldte del for at bevare et klart visuelt udtryk. Derudover giver opdateringskontroller på disse platforme brugerne mulighed for manuelt at genindlæse indhold ved at trække visningen ned, som det ses i apps som Mail. Der bør også implementeres regelmæssige automatiske opdateringer for at holde data friske uden behov for manuel input.

Skjul den ufyldte del af sporet i navigations- og værktøjslinjer.
Som standard viser en fremskridtslinjes spor både fyldte og ufyldte dele. Når du bruger en fremskridtslinje i en navigations- eller værktøjslinje – for eksempel til at vise indlæsning af en side – skal du konfigurere den til at skjule den ufyldte del af sporet.

En opdateringskontrol giver brugere mulighed for straks at genindlæse indhold, typisk i en tabelvisning, uden at vente på næste automatiske opdatering. Den er som standard skjult og vises, når brugere trækker ned i den ønskede visning, f.eks. i Mail for at tjekke nye beskeder.

Lidt mere psykologi bag fremskridtsindikatoren.

Progressionslinjer viser visuelt, at en anmodning er i gang, og hjælper brugere med at følge igangværende opgaver og estimere fuldførelsestid. Denne artikel fokuserer på de psykologiske principper bag progressionslinjer, herunder Zeigarnik-effekten, Endowed Progress Effect, Goal Gradient Hypothesis, målsvisualisering, Anchoring Bias og Perceived Control.

• Zeigarnik-effekten: Vore hjerner er drevet til at fuldføre uafsluttede opgaver, hvilket motiverer brugere til at afslutte processen.
• Endowed Progress Effect: Ved at vise indledende fremdrift øges motivationen, hvilket opfordrer brugeren til at fortsætte.
• Goal Gradient Hypothesis: Brugere intensiverer deres indsats, når de nærmer sig deres mål, hvilket øger engagementet.
• Målsvisualisering: Klare visuelle milepæle guider brugerne og gør opgaverne mere håndterbare.
• Anchoring Bias: Indledende fremdrift påvirker opfattelsen af hastighed og opnåelse, og sætter et mentalt referencepunkt.
• Perceived Control: En visuel progressionslinje giver brugerne en følelse af kontrol, hvilket hjælper dem med at føle sig trygge, når de gør fremskridt.

Ved at udnytte disse principper forbedres brugeroplevelse, motivation og engagement gennem opgaver.

Brug af progressionslinje i UI

Den enkle progressionslinje bliver ofte overset, men er en vigtig komponent i at forme brugerens opfattelse og øge tilfredsheden. 

Hvornår er det bedst at bruge progressionslinjer?
Det afhænger af, hvor længe brugeren skal vente. Hvis ventetiden er under tre sekunder, kan du bruge hurtige animationer eller kort tekst som “Indlæser, vent venligst.” Men over tre sekunder bør du bruge en progressionslinje for at berolige brugeren og give dem et tidsestimat.

Hvorfor bruge en progressionslinje?
De fleste brugere bliver utålmodige og overvejer at forlade en side uden respons efter tre sekunder. En progressionsindikator beroliger dem og viser, at platformen fungerer, og de ikke skal vente længe. Visualisering af fremdrift motiverer brugere til at fortsætte opgaver som formularer og onboarding, og giver en følelse af kontrol og indsigt, hvilket øger brugerengagement og tilfredshed.

5 typer af progressionslinjer:

1. Determineret eller indeterminert progressionslinje
   En determineret progressionslinje viser fuldførelsesstatus fra 0% til 100%, baseret på data om opgavens fremdrift. En indetermineret linje bruges, når det er umuligt at forudsige, hvor lang tid en proces tager, som ved generering af analyserapporter.

2. Looped animation eller spinner progressionslinje
   Bruges til hurtige handlinger, typisk under tre sekunder. En spinner er en roterende animation, der symboliserer aktiviteten, og bruges, når fremskridt er ukendt eller svært at kvantificere.

3. Procentuel progressionslinje
   Viser den præcise procentdel af en opgave, der er afsluttet, hvilket giver brugerne klar information om fremdrift, nuværende position og resterende arbejde.

4. Tidsestimat progressionslinje
   I stedet for at tælle op som en procent, tæller denne ned og viser estimeret tid tilbage i minutter eller timer, hvilket er nyttigt til langvarige opgaver som store filoverførsler og softwareopdateringer.

5. Trin tilbage progressionslinje
   Bruges til komplekse opgaver med flere trin, som onboarding eller spørgeskemaer, hvor hver sektion markerer et skridt i processen, hvilket gør det nemt for brugeren at følge fremdriften.