Varsler brukes for å fange brukerens oppmerksomhet og inneholder korte viktige meldinger som de bør ta hensyn til.
Alert inneholder varslene BannerAlertBox, SmallAlertBox, ExpandableAlertBox og ToastAlertBox. Til felles har de disse variantene:
Information: Informasjonsvarslingen er blå. Den gir brukeren relevante tips eller informasjon som man behøver å vite når man skal utføre en oppgave.
Success: Suksessvarselet er grønn og vises når en handling er vellykket. For eksempel i en kjøpsflyt der betalingen ble gjennomført.
Warning (ikke toast): Advarselen er gul og brukes for å advare brukeren om viktig informasjon som trenger oppmerksomhet. For eksempel avvik i trafikken eller at man skal benytte bakdører til av- og påstigning.
Negative (ikke toast): Feilvarslingen er rød. Den indikerer at noe gikk galt etter å ha utført en handling, eller for å varsle brukeren om en feil som trenger øyeblikkelig oppmerksomhet. For eksempel skjemaet kunne ikke lagres fordi det mangler data på noen felter.
BannerAlertBox har to spesifikke bruksområder: globale varsler og lokale varsler.
Globale varsler brukes når man ønsker å meddele informasjon på tvers av en applikasjon. Eksempler kan være cookie-info, et API som er nede eller generalstreik som påvirker alt og alle.
Globale varsler finnes i information, warning og negative-utførelse (ikke suksess). De skal dekke hele toppen av siden, og skyver ned sidens innhold. De har vanligvis muligheten til å bli lukket, slik at brukerne kan fjerne den. Beskjeden bør dukke opp igjen neste gang man laster siden, men dette er opp til konsumenten.
Lokale varsler brukes for å vise informasjon om en underside, en seksjon eller et skjema. Oppsummering av valideringsfeil, advarsel om manglende tariffkoder og generell avgangsinformasjon kan være gode brukseksempler.
Lokale varsler bør inneholde kort og konsis informasjon, men kan også inneholde mer detaljert informasjon for "proffe" brukere. Slik ekstra informasjon bør skjules bak en ekspanderbar lenke. Disse varslene bør vanligvis ikke være lukkbare, siden de ikke okkuperer like mye plass som de globale.
Dette er den typen varsel vi bruker oftest i løsningene våre, men de bør fortsatt brukes sparsomt. Siden de er ganske sterke visuelle virkemidler, bør hver og en få stå for seg selv og få den oppmerksomheten den fortjener.
SmallAlertBox brukes som kontekstuelle varsler i grensesnittet.
Kontekstuelle varsler finnes i alle typer og vises i direkte tilknytning til innholdet det omtaler. De brukes ofte for å supplere innhold med ekstra informasjon.
Kontekstuelle varsler bør ikke kunne lukkes, og bør være ekstra korte og konsise. Disse brukes ikke så ofte, og man kan ofte benytte valideringsmeldinger istedenfor.
Små alert-bokser brukes når de skal plasseres inni en annen UI-komponent.
Default så opptar disse varslene full bredde. Om ønskelig kan du sette width="fit-content" for å la dem ta størrelsen til innholdet.
Av og til vil du vise meldinger som gjerne inneholder mer informasjon, som du ikke alltid har behov for å vise.
Da kan man bruke SmallExpandableAlertBox eller BannerExpandableAlertBox for å vise en tittel, og ekstra informasjon skjult bak en ekspanderbart seksjon.
ToastAlertBox brukes i respons på visse typer handlinger og hendelser, og vises automatisk.
De bør forsvinne etter minst 6 sekunder, eller om man trykker på lukke-knappen.
Lukke-knappen bør dukke opp når man holder musepekeren over feltet, og "nedtellingen" for å automatisk fjerne knappen bør starte på nytt.
Toast er kun tilgjengelige i typene success og information, begrunnelsen for dette står beskrevet her. De skal kun brukes som reaksjon på en hendelse, eller vise tidssensitiv informasjon. Et godt eksempel kan være at brukeren er oppdatert, eller at en annen bruker har begynt å redigere samme dokument.
Toast-varsler skal ikke plasseres over kritisk funksjonalitet, som knapper, navigasjon og andre funksjoner. De dukker opp nedenfra på små flater, og ligger øverst i høyre hjørne på store flater.
Du får fiks ferdig toast-funksjonalitet på null komma niks med @entur/alert. Først må du wrappe appen din i en <ToastProvider />.
import { ToastProvider } from '@entur/alert';
const App = () => {
return (
<ToastProvider>
<Router>{/* Osv */}</Router>
</ToastProvider>
);
};
For å lage en toast, så må du bruke hooken useToast.
import { useToast } from '@entur/alert';
const SaveButton = ({ children }) => {
const { addToast } = useToast();
return <button onClick={() => addToast('Lagret!')}>
}
Du kan enten sende inn en string, eller et objekt med følgende form:
{
title: 'Tittelen på toasten',
content: <>Mer <em>utfyllende</em> informasjon</>
variant: 'information' // eller 'success', som er default
}
Toasts vil lukkes automatisk etter 6 sekunder, med mindre du flytter musepekeren over dem, eller lukker dem manuelt. Du kan sette den automatiske lukketiden for toasts i din app ved å sette delay propen på <ToastProvider /> (antall millisekunder):
<ToastProvider delay={10000} />
Komponenten skal brukes som en valideringsmelding som varsler brukeren om at noe de nettopp gjorde må korrigeres eller som en bekreftelse på at en handling ble fullført. Varsler brukes også som en utrop eller varsling for viktig informasjon som brukeren bør ta stilling til. Skriv en informativ tekst som gir brukeren en utfyllende beskrivelse av situasjonen, dens konsekvenser og måter å komme seg ut av.
Hvis feilen er knyttet til et spesifikk tekstfelt, bør man også gi disse feltene en feiltilstand
Hvis det kreves at brukeren må gjøre noe som svar på et varsel, må man gi beskjed om hva de trenger å gjøre for å gjennomføre oppgaven.
Ikke overdriv bruken av varsler. For mange vil enten overvelde eller irritere brukeren
Ikke legg skylden på brukeren ved en feilmelding. Ha en vennlig tone og hold språket forståelig
Ikke ta med varsler som ikke er relevant for brukerens nåværende oppgave
Toast-varsler kan være utfordrende med tanke på universell utforming. Derfor har vi valgt å ikke tilby variantene error og warning. Feilmeldinger og advarsler bør presenteres permanent og i kontekst, nær det aktuelle problemet, med tydelige forslag til rettelser.
WCAG-punkter som er relatert til bruk av toasts:
Kilder:
import { BannerAlertBox } from '@entur/alert';Denne komponenten har ingen props
import { SmallAlertBox } from '@entur/alert';Denne komponenten har ingen props
import { SmallExpandableAlertBox, BannerExpandableAlertBox } from '@entur/alert';Denne komponenten har ingen props
import { ToastAlertBox } from '@entur/alert';Denne komponenten har ingen props
import { useToast } from '@entur/alert';import { ToastProvider } from '@entur/alert';Denne komponenten har ingen props