Systemvarsler

[Febakke]

Da vi startet arbeidet med feilmeldinger, delte vi dem inn i Brukerutløste feil og Systemvarsler.

Systemvarsler brukes for å varsle brukeren enten om feil i systemet eller holde dem informert om viktige ting de bør få med seg. Vi bruker dem til feil som ikke tilhører et skjemaelement, og som ikke validerer brukerens inndata. De bør derfor ha et annet utseende enn brukerutløste feil.

Systemvarsler kan for eksempel komme i form av alert, toast, modal, popover eller feilside.

Eksempler på varsler:

• Tjenesten vår er dessverre nede, men vi jobber med saken. Prøv igjen om litt. Hvis du fortsatt har problemer, kan du ta kontakt med oss.
• Det kan se ut som du ikke er koblet til internett. Sjekk tilkoblingen din og prøv igjen.
• Tjenesten vil være nede onsdag 24. juni 2029 mellom klokken 04-06.
• Du har nå tatt i bruk den nyeste versjonen av tjenesten. Du kan bytte tilbake til den gamle versjonen ved å klikke her.
• Du har ikke foretatt deg noe på en stund, og påloggingen er i ferd med å utløpe. Du vil bli logget ut om 5 minutter. Arbeidet ditt er lagret.
• Er du sikker på at du vil avbryte nå? Du kan miste arbeidet du allerede har gjort.

Eksempler

Feilmeldingssider

Slik bør det ikke gjøres:

Ofte brukt ved klassiske 404 feil. Hvor nettsiden ikke finner innholdet brukeren ber om.

•  Finn flere eksempler på typiske feilmeldingssider

Status/alert/toast

Statusbeskjeder er laget for å gi brukeren informasjon eller varseler uten å avbryte oppgaven de jobber på. I motsetning til en feilmeldingsside vil ofte brukeren kunne fortsette med oppgaven eller rette opp feil.

relevante linker

digdir/innsiktsbibliotek#40
Gov.uk: Page not found
designsystem.arbetsformedlingen.se: Felmeddelandesidor
NAV Aksel: 404-side
NAV Aksel: 5XX-side

[Annikenkbrathen]

Foreslår en variant av helpText som er en gul varsel-sirkel i stedet for en blå sirkel med spørsmåltegn

Deler nyttig diskusjon/behov knyttet til dette
https://designsystemet.slack.com/archives/C05RK9VEGJ0/p1723458328321279

[mrosvik]

Takk for eksemplene @Annikenkbrathen. Jeg flyttet dem inn i tråden her:

---

Studio har mange eksempler på systemmeldinger, men ingen system på mønstrene. Håper dette kan være en pilot/et eksempel som dere kan bruke når dere jobber med denne

Vi har samlet noen eksempler og noen forslag på bruksmønstre i denne Figma filen

Feilmeldingsider

404 - finner ikke siden

varsler /alert /modal

eks:

• Du har gjort noe i koden som krasjer med det du har gjort i Studio grensesnitt

Toast

• Dersom noe ikke blir lagret som det skulle /feil
• når appen er publisert (vellykket eller ikke)
  

Ekstra informasjon/ Warning melding (fra Studio til bruker)

• Du må huske på å gjøre dette...
• Du har ikke tilgang...
• Du må minst ha en regel
  

Validering

feil hos brukeren, eller mangel på utfylling som er påkrevd.

Mønster på å vise feil - veiledning til feil

Status

Feil i studio/ mangler hos brukeren. Bør være tilgjengelig for brukeren, slik at den kan sjekkes gjevnlig. / evt satser underveis i systemet, i form av tags på komponenten det gjelder

• Du har lagt til en kobling, som nå er ugyldig (utdatert)
  

"Er du sikker" - meldinger (popup)

Opplæring av systemet

Målet med dette er at brukeren får hjelp til å forstå konsekvenser, hvorfor de må fylle ut noe, hva som trengs for at det skal funke, anbefalinger, standarder.

• Guide til på bruke verktøy
• Første gang brukeren er inne, og man vil vise litt ekstra informasjon/ forklaringer
• Vise anbefalinger/ anbefalte valg, eller standardinnstillinger/standardvalg
  
  
  

Autosave animasjon

Behov for å vise brukeren at de endringene som er gjort er lagret.
Kan være en toast (men kan bli litt mye støy), så gjerne noe mer diskret. Kanskje en lignende løsning som Word bruker eller evt bruke en spinner med en label?

![Skjermbilde 2024-07-08 kl 10 45 38](https://github.com/digdir/designsystemet/assets/100292724/3

0b7f402-f50f-4aff-a441-d34e06a9d79a)

[Annikenkbrathen]

[like] Bråthen, Anniken Kjos reacted to your message:

…

________________________________ From: Marianne Røsvik ***@***.***> Sent: Monday, August 19, 2024 12:34:07 PM To: digdir/designsystemet ***@***.***> Cc: Bråthen, Anniken Kjos ***@***.***>; Mention ***@***.***> Subject: Re: [digdir/designsystemet] Error message: Systemfeil (Discussion #1801) [ Ekstern e-post ] Takk for eksemplene @Annikenkbrathen<https://github.com/Annikenkbrathen>. Jeg flyttet dem inn i tråden her:

________________________________ Studio har mange eksempler på systemmeldinger, men ingen system på mønstrene. Håper dette kan være en pilot/et eksempel som dere kan bruke når dere jobber med denne<#1801> Vi har samlet noen eksempler og noen forslag på bruksmønstre i denne Figma filen<https://www.figma.com/design/l1Gs7lZ1asnfpHV4soGszo/Studio-design-system-og-konsept?node-id=143-556&t=XVIrWZmYJvC5Px4m-1> Feilmeldingsider 404 - finner ikke siden Skjermbilde.2024-07-08.kl.10.46.12.png (view on web)<https://github.com/digdir/designsystemet/assets/100292724/b1729a5d-4e8c-49b9-b779-77a93081df60> varsler /alert /modal eks: * Du har gjort noe i koden som krasjer med det du har gjort i Studio grensesnitt Skjermbilde.2024-07-08.kl.14.06.58.png (view on web)<https://github.com/digdir/designsystemet/assets/100292724/232a9de0-9599-4b24-adaf-6f6ebadde421> Toast * Dersom noe ikke blir lagret som det skulle /feil * når appen er publisert (vellykket eller ikke) Skjermbilde.2024-07-08.kl.14.32.57.png (view on web)<https://github.com/digdir/designsystemet/assets/100292724/0055787a-6702-4a46-b48e-415a2302b58f> Ekstra informasjon/ Warning melding (fra Studio til bruker) * Du må huske på å gjøre dette... * Du har ikke tilgang... * Du må minst ha en regel Skjermbilde.2024-07-08.kl.14.03.53.png (view on web)<https://github.com/digdir/designsystemet/assets/100292724/44144b66-4369-4dde-87c3-a1a9c010ed22> Validering feil hos brukeren, eller mangel på utfylling som er påkrevd. Skjermbilde.2024-07-08.kl.14.28.17.png (view on web)<https://github.com/digdir/designsystemet/assets/100292724/2e869ab3-a523-4500-98e5-9302b271e98a> Mønster på å vise feil - veiledning til feil Skjermbilde.2024-07-08.kl.14.27.04.png (view on web)<https://github.com/digdir/designsystemet/assets/100292724/644c0fb9-4a58-48fd-bda8-111876ffbad5> Status Feil i studio/ mangler hos brukeren. Bør være tilgjengelig for brukeren, slik at den kan sjekkes gjevnlig. / evt satser underveis i systemet, i form av tags på komponenten det gjelder Skjermbilde.2024-07-08.kl.14.23.21.png (view on web)<https://github.com/digdir/designsystemet/assets/100292724/18c09bdf-beb7-4686-8125-9b3299778500> * Du har lagt til en kobling, som nå er ugyldig (utdatert) Skjermbilde.2024-07-08.kl.14.26.20.png (view on web)<https://github.com/digdir/designsystemet/assets/100292724/5f978614-b23d-4cb4-8370-97a1b3a6a922> Skjermbilde.2024-07-08.kl.14.24.24.png (view on web)<https://github.com/digdir/designsystemet/assets/100292724/bae372ea-ec82-4d5e-9b39-672208cf9c38> "Er du sikker" - meldinger (popup) Skjermbilde.2024-07-08.kl.14.04.17.png (view on web)<https://github.com/digdir/designsystemet/assets/100292724/f5063771-1cfb-4629-9d98-5feb4598b902> Opplæring av systemet Målet med dette er at brukeren får hjelp til å forstå konsekvenser, hvorfor de må fylle ut noe, hva som trengs for at det skal funke, anbefalinger, standarder. * Guide til på bruke verktøy * Første gang brukeren er inne, og man vil vise litt ekstra informasjon/ forklaringer * Vise anbefalinger/ anbefalte valg, eller standardinnstillinger/standardvalg Skjermbilde.2024-07-08.kl.14.06.02.png (view on web)<https://github.com/digdir/designsystemet/assets/100292724/5dc9597a-c1da-48df-88e9-320d6c93e1ee> Skjermbilde.2024-07-08.kl.14.24.50.png (view on web)<https://github.com/digdir/designsystemet/assets/100292724/3a8933e5-c5f5-44c6-98f5-55046983e3ab> Skjermbilde.2024-07-08.kl.14.25.11.png (view on web)<https://github.com/digdir/designsystemet/assets/100292724/9021cdce-fa04-4c60-8195-c2151b761c53> Autosave animasjon Behov for å vise brukeren at de endringene som er gjort er lagret. Kan være en toast (men kan bli litt mye støy), så gjerne noe mer diskret. Kanskje en lignende løsning som Word bruker eller evt bruke en spinner med en label? <https://github.com/digdir/designsystemet/assets/100292724/2939c25e-043d-44b5-b1b9-0f2a9191f2ae> 0b7f402-f50f-4aff-a441-d34e06a9d79a) — Reply to this email directly, view it on GitHub<#1801 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AX5FQ5HOP3RTKEEBR5S23QDZSHQ37AVCNFSM6AAAAABGAK5RVSVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMZYGMZDQMA>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[mrosvik]

Arbeidsgruppen for "Systemfeil" hadde første arbeidsmøte onsdag 21.aug. Vi så gjennom artikkelen vi jobbet med forrige runde for brukerutløste feilmeldinger, og startet arbeidet med Systemfeil ved å samle eksempler og innsikt fra egen org. samt andre relevante kilder.

Her er noen punkter vi var inne på at retningslinjene kan ta for seg:

• Ulike alvorlighetsgrader av feilen og hvordan dette fremstilles visuelt og tekstlig.
• Ulike kontekster og tidsaspekt - når inntreffer feilen, når og hvordan skal vi varsle?
  • Hvordan skiller vi mellom varsler brukeren må ta stilling til umiddelbart og varsler de ikke trenger å ta stilling til med en gang.
• Hvilke type systemfeil skal brukes i ulike tilfeller?
  • Når bruker vi Alert?
  • Når bruker vi Modal?
  • Når bruker vi Toast?
  • Når bruker vi en full side?
• Globale systemfeil vs. dypere feil i konkrete deler av løsningen.
• Hvordan skiller vi systemfeil fra brukerutløste feil, og sikrer at brukeren ser et kritisk varsel, selv om det samtidig er flere brukerutløste feilmeldinger på siden.

Frem til neste arbeidsmøte kommer vi til å jobbe litt hver for oss med å samle innsikt. Vi vil deretter gå gjennom eksemplene, vurdere innsikten, identifisere ulikheter og velge en felles tilnærming. Alle er velkommen til å bidra med innsikt og eksempler her i tråden!

Tusen takk til de som deltok i arbeidsmøtet @Astrid Eline Øksnes(Politiet), @Bernard Tømmerbakke (Oslo Kommune), @Roy Halvor Frimanslund (Brreg), @Camilla (Skatteetaten), @Vegard Haugstvedt (Nav), @Lasse Straum (Digdir), @Frida Almqvist (Entur), @Anniken Bråthen (Digdir) og meg selv! :D

[mrosvik]

Arbeidsgruppen for "Systemvarsler" hadde tredje arbeidsmøte i dag. Vi er ikke i mål med mønsteret enda, men er godt i gang!

I dagens møte gikk vi gjennom det som er gjort så langt. Vi gikk gjennom flere eksempler på når vi bør bruke feilsider, modaler, popover og alerts med ulike alvorlighetsgrader.

Vi var innom et par problemstillinger/diskusjoner:

API-kall i skjema: Når vi utvikler skjema ønsker vi ofte å hente data fra andre kilder slik at bruker slipper å fylle ut informasjon vi allerede vet. Det finnes flere måter å vise denne type data på. Kanskje som ren tekst eller som felter hvor bruker kan endre skrive inn selv, eller at de er låst slik at det kun er dataen vi henter som kan fylle ut disse feltene. Men når noe går galt i det vi henter dataen, hvordan forteller vi dette til brukeren. I noen tilfeller vil det ikke være mulig å gå videre eller sende inn skjema før vi har hentet data. Vi må kunne informere om hva som gikk galt og si noe om hvordan brukeren kommer seg videre. Vi må også se nærmere på hvordan vi skiller på feilmeldinger som kommer av at systemet ikke kan hente data og feilmeldinger som kommer av manglende input fra brukeren.

Tilgjengelighetshensyn: Når og hvordan bruke aria-live områder for varsler? Hvor i HTML strukturen burde slike varsler leve? Som en del av header eller som en del av main ? Vi diskuterte også utfordringer med at skjermlesere ikke fanger opp kritiske globale varsler hvis varslene ligger øverst på siden og brukeren velger å hoppe direkte til hovedinnholdet.

Har du innspill eller tanker om noe av dette setter vi pris på om du vil legge igjen en kommentar her.

Vi kommer til å legge ut artikkelen her så snart vi har et første utkast så dere kan komme med tilbakemeldinger!

[mrosvik]

Artikkelen er publisert: https://www.designsystemet.no/monstre/systemvarsler

Det er alltid mulig å gjøre endringer og forbedringer, så vi lar denne tråden stå åpen for videre innsikt i temaet.