Design new concept for form navigation

mrosvik commented 2 years ago

As a user I would like a clear back and forth navigation between pages in an app, so that I can change my answers later in the process.

We should have one consistant way of showing navigation. We should avoid using multiple main buttons on a single page, because having more than one main call to action reduces their impact, and makes it harder for users to know what to do next.

[ ] Some users has been confused about what the back button does when its placed above the app title. The back button should be placed together with a next-button to indicate that you can navigate both back and forward between pages.
[ ] It should be possible to see all of the pages inside an app, and navigate directly to a specific page.
[ ] If you navigate from page 1 to page 5, and there was required fields in page 3, that page should turn red with an exclamation mark in the overview of pages.
[ ] If you completed all required fields in some pages, they should turn green with a checkmark in the overview of pages.

Updated task list

[x] Prepare prototype of navigation for user testing
[x] Plan and conduct user tests
[x] Prepare stepper component for Design system
[x] (Possibly necessary) Design alternative version for Apps with their respective requirements

### Tasks
- [ ] https://github.com/Altinn/app-frontend-react/issues/2231
- [ ] https://github.com/Altinn/app-frontend-react/issues/2232
- [ ] https://github.com/Altinn/app-frontend-react/issues/2233
- [ ] https://github.com/Altinn/app-frontend-react/issues/2234

benteSSB commented 2 years ago

@elwal: Fint om du kan leggje til label "org/ssb" på denne.

SimenRokaas commented 1 year ago

@mrosvik @elwal @RonnyB71 Hei, hva er planen for denne saken - er det noe håp om å få inn dette i nærmeste fremtid? Legg gjerne til DSB som label på denne også.

hannefinnoy commented 10 months ago

@olavflar kan du oppdatere denne saken med forslagene fra Miro?

olavflar commented 10 months ago

Camulos commented 5 months ago

Would be helpful with examples that has a lot of pages/steps (20+) and with only 2-3. Also the steps should have some sort of "completed" indicator, or even an indicator for unanswered questions.

Steps with longer names?

How would the indicator function/animate or in other ways show when additional steps is added?

RonnyB71 commented 4 months ago

This issue should also be taken into account: https://github.com/Altinn/app-frontend-react/issues/1724

Altinn / app-frontend-react

Design new concept for form navigation #97

Updated task list