As a user I would like to see my progress in the application

[Febakke]

Description

We should look into including a progress bar as component for our forms. For longer / more complex application it might give the user an extra feeling of progressing trough the form.

Screenshots

Screenshots or links to Figma (make sure your sketch is public)

Considerations

How would we calculate the progress? It might change depending on branching in the form.

Acceptance criteria

Describe criteria here (i.e. What is allowed/not allowed (negative tesing), validations, error messages and warnings etc.)

Specification tasks

• [ ] Development tasks are defined
• [ ] Test design / decide test need

Development tasks

Add tasks here

Definition of done

Verify that this issue meets DoD (Only for project members) before closing.

• [ ] Documentation is updated (if relevant)
  • [ ] Technical documentation (docs.altinn.studio)
  • [ ] User documentation (altinn.github.io/docs)
• [ ] QA
• [ ] Manual test is complete (if relevant)
• [ ] Automated test is implemented (if relevant)
• [ ] All tasks in this userstory are closed (i.e. remaining tasks are moved to other user stories or marked obsolete)

[benteSSB]

Ved lange, komplekse skjema med fleire sporval er det ikkje å anbefale å operera med framdriftsindikator. Ein form for meny / grov oversikt over hovuddelane/-temaa skjemaet består av, fungerer betre (ref. https://github.com/Altinn/altinn-studio/issues/5893).

[lasseklovstad]

This is something we would like in Udir/Elevundersøkelsen. We are working on sketches!

Thoughts about implementation: Create a new component which displays (in prosent %) your progress relative to which page you are on.

The progressbar can be added in the pageLayout like this:

{
        "id": "progressbar-id",
        "type": "Progressbar"
}

The logic will be simalar to what NavigationBar does in calculating the progress.

@Febakke Does there exist any sketches here?

[lasseklovstad]

We would ideally like two variants. One standard that can look something like this:

And one that looks like this (Where the snail image can be an svg that is optinal):

Et annet forslag:

[haakemon]

NavigationBar støtter ikke sporvalg, er det noe som trengs for ProgressBar?

[lasseklovstad]

NavigationBar støtter ikke sporvalg, er det noe som trengs for ProgressBar?

Per idag er ikke dette et behov, men hvis det ikke krever for mye tid kan det være behov for det senere.

[mrosvik]

Hei @lasseklovstad, Begge forslagene du viser er fine. Den kontinuerlige linjen fungerer nok best på små skjermer dersom det blir mange sider.

Jeg har sett litt på å tilpasse ProgressBar til øvrige designjusteringer som er planlagt, og vil gjerne dele noen forslag. (Jeg fant ikke snegle-ikonet du brukte, så ble et fra material ui foreløpig) :)

• Tror det kan være lurt at "Side 5/8" følger etter sneglen, for en enda tydeligere indikasjon.
• En stegindikator som dette krever dessverre mye plass, og etter at vi har introdusert flere andre ting i øvre del av skjemaet, kan det fort bli mye "greier" før selve innholdet kommer. Et alternativ kan være å legge stegindikatoren i bunnen?

For mobil kan vi evt. vurdere å henge den fast i bunnen (sticky)?

Figma-skisser

---

@haakemon , @Febakke : Siden denne progressBaren tar mye plass, tror jeg vi også bør vurdere å legge opp til en enklere variant (senere?), slik at en ikke er tvunget til å bruke denne visningen dersom det er behov for en stegindikator.

Den enkle varianten av sideindikatoren kunne evt. vært vist i stedet for sidenavigering når dette er valgt som løsning av apputvikler.

Ettersom sideindikator (ProgressBar) legger opp til en lineær progresjon tror jeg ikke den bør kunne kombineres med NavigationBar. Her tror jeg de som planlegger hver enkelt skjema må se an brukerens oppgave, og legge opp til enten 1) Sidenavigering (Navigation bar) 2) Sideindikator (ProgressBar) 3) Ingen av delene...

Det er planlagt et nytt design på NavigationBar (se issue 97 ) som gjør at sidenavigasjon ikke tar opp mye plass uten at man selv velger å åpne den. Den er også bevisst plassert ved siden av tittelen på siden man står på.

Bildet under viser sidenavigeringen når den er åpnet av bruker:

---

Også vært å merke seg studier fra gov uk som er gjort på progress bar:

---

Hører gjerne fra dere igjen angående forslagene. :)

Marianne

[Febakke]

@lasseklovstad Beklager at det tok litt lenger tid, men vi har nå fått sett på en mer diskre type av progresjonsbaren. I disse forslagene endte vi ikke opp med å beholde linjen slik som i andre design, men heller gått for sirkel for å ta litt mindre plass.

Fordeler: Tar mindre plass, vi unngår å dytte hovedinnholdet lenger ned på siden Beholder fordelen ved å ha både en visuell og tekstlig beskrivelse av progresjon Skalerer bra over til mobilvisning Ulemper: Er mindre synlig enn tidligere design (Har ikke skilpadden! Edit: Eller snegle som det heter 🙈)

Gjerne ta kontakt med spørsmål eller tilbakemeldinger på designet Lenke til Figmaskisser

[lasseklovstad]

Hey! Vi liker den nye diskre varianten og kan gjerne gå for den som en "standard" variant. Men vi skulle gjerne ønsket å kunne i tillegg lage den mer lekende versjonen som Marianne kom med. Progressbaren kan da ha 2 varianter man kan velge mellom. Vi tenker mest på den kontinurelig linjen med snegle, der man kan velge om å plassere den oppe eller nede :P

[Febakke]

Supert! 👍 Siden det er dere som skal ta denne i bruk og dere er fornøyd med den versjonen så foreslår jeg at dere fokuserer på det første forslaget. Så får vi heller ta opp den diskre typen senere om det skulle dukke opp et behov. Kanskje legge inn mulighet til å skjule sneglen også? 😄

[olemartinorg]

Foreslår at vi lukker denne saken, ettersom fremdriftsindikatoren som foreslått over ble implementert i #221. Hva gjelder videre arbeid rundt fremtidige fremdriftsindikatorer, bør det først og fremst foregå i designsystemet (som jeg ser @mrosvik har lenket til over).