Stepper

[Febakke]

Related issues or relevant information?

• Design new concept for form navigation Altinn/app-frontend-react#97
• As a user I would like to see my progress in the application Altinn/app-frontend-react#188 (Progress indicator made for "Elevundersøkelsen")

Related research:

• https://www.linkedin.com/posts/vitalyfriedman_ux-design-activity-7127577055029796864-0JVK?utm_source=share&utm_medium=member_ios

Other Stepper components

• Carbon progress-indicator: https://carbondesignsystem.com/components/progress-indicator/usage/
• Carbon progress-bar: https://carbondesignsystem.com/components/progress-bar/usage/
• Gov UK: https://design-system.service.gov.uk/patterns/step-by-step-navigation/
• Fælles designsystem: https://designsystem.dk/komponenter/trinindikator/
• Entur: https://design.entur.org/komponenter/navigasjon/stepper
• Nav: https://aksel.nav.no/komponenter/core/stepper
• Atlassian: https://atlassian.design/components/progress-tracker/examples (See also progress bar and progress indicator)
• Mattilsynet: https://design.mattilsynet.no/?path=/docs/designsystem-steps--docs&globals=theme:Light+large
• Gjensidige: https://www.gjensidige.builders/docs/core/?path=/story/packages-builders-components-progress--step-horizontal

Specification and requirements

• Add specification and requirements

Issue: #85

[mrosvik]

See examples from Enova and Udir in Figma:

[eirikbacker]

In Mattilsynet, we experience stepper is not necessarily the correct pattern to show progress of forms, as it takes a lot of space, needs to vary between mobile and desktop and can be confusing if steps appear/disapear. Stepper is very practical to show timelines though.
Inspiration from Fortum:

[Camulos]

Våpenregisteret - used in for example forms to edit weapons or weapon-parts

[Camulos]

Concept: Subscription service for kunngjøringer, used in form to set up new subscription.
Desktop

Mobile

[kimandrefladen]

For øyeblikket ser Fiskeridirektoratets stepper-aktige komponent slik ut:

Før du åpner et substep:

Inne i et substep:

[unekinn]

Vi har eit par variantar i Udir:

• ProgressBar er kun i bruk i skjema med veldig mange sider med spørsmål, der alle spørsmål er frivillige
• FormNavigation er tenkt for dei fleste fleirside-skjema med validering

Vi ser at vi kanskje treng ein slags "tvungen flyt" / wizard som ikkje nødvendigvis er kun skjema, men har ikkje komme så langt som å undersøke det nærare enno.

ProgressBar

FormNavigation