Systemvarsler #1801
Replies: 6 comments
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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 Feilmeldingsider404 - finner ikke siden
varsler /alert /modaleks:
Toast
Ekstra informasjon/ Warning melding (fra Studio til bruker)
Valideringfeil hos brukeren, eller mangel på utfylling som er påkrevd. Mønster på å vise feil - veiledning til feil StatusFeil 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
"Er du sikker" - meldinger (popup)
Opplæring av systemetMå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.
Autosave animasjonBehov for å vise brukeren at de endringene som er gjort er lagret. 
Beta Was this translation helpful? Give feedback.
-
|
[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: ***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
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:
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!
|
Beta Was this translation helpful? Give feedback.
-
|
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! |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
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:
Eksempler
Feilmeldingssider
Slik bør det ikke gjøres:
Ofte brukt ved klassiske 404 feil. Hvor nettsiden ikke finner innholdet brukeren ber om.
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
Beta Was this translation helpful? Give feedback.
All reactions