diff --git a/apps/www/app/content/patterns/en/button-placement-and-order.mdx b/apps/www/app/content/patterns/en/button-placement-and-order.mdx index 39d0bcbbf3..087eec6294 100644 --- a/apps/www/app/content/patterns/en/button-placement-and-order.mdx +++ b/apps/www/app/content/patterns/en/button-placement-and-order.mdx @@ -1,7 +1,7 @@ --- title: Button placement and order sidebar_title: Button placement -category: Upcoming +category: Upcoming patterns description: How can we create a more predictable and inclusive experience by standardizing button placement and order? partners: Digdir, Nav, Skatteetaten ++ search_terms: placement, order diff --git a/apps/www/app/content/patterns/en/date-and-time.mdx b/apps/www/app/content/patterns/en/date-and-time.mdx new file mode 100644 index 0000000000..fbef330a16 --- /dev/null +++ b/apps/www/app/content/patterns/en/date-and-time.mdx @@ -0,0 +1,15 @@ +--- +title: Ask users for date and time +sidebar_title: Date and time +category: Ask users for... +description: Date and time can often be solved more simply than many people think. +partners: Digdir, Brønnøysundregistrene +date: 2026-02-05 +order: 10 +--- + +Asking users for date and time is often solved in a more complex way than necessary. In many situations, a simple [`Textfield`](link) is both faster to use and easier to understand than more advanced solutions. + +## Ask users for date of birth + +Example.... diff --git a/apps/www/app/content/patterns/en/errors.mdx b/apps/www/app/content/patterns/en/errors.mdx index 321a107ba6..b78caf5efc 100644 --- a/apps/www/app/content/patterns/en/errors.mdx +++ b/apps/www/app/content/patterns/en/errors.mdx @@ -1,7 +1,7 @@ --- title: User-triggered error messages sidebar_title: Error messages -category: Completed +category: Basic patterns description: How to tell users that something has been filled in incorrectly or is missing in a form. partners: Digdir, Nav, Skatteetaten ++ search_terms: validation diff --git a/apps/www/app/content/patterns/en/external-links.mdx b/apps/www/app/content/patterns/en/external-links.mdx index 77a3d77b5d..3a9b4e1bb5 100644 --- a/apps/www/app/content/patterns/en/external-links.mdx +++ b/apps/www/app/content/patterns/en/external-links.mdx @@ -1,7 +1,7 @@ --- title: Labeling Links description: How should we label links, and which language and design principles should we follow? -category: Completed +category: Basic patterns partners: Digdir, Nav, Skatteetaten ++ search_terms: linktext, target, navigation, url date: 2025-05-12 diff --git a/apps/www/app/content/patterns/en/representation.mdx b/apps/www/app/content/patterns/en/representation.mdx index 1ec20d4dec..b49b256382 100644 --- a/apps/www/app/content/patterns/en/representation.mdx +++ b/apps/www/app/content/patterns/en/representation.mdx @@ -1,7 +1,7 @@ --- title: Sign-in and representation sidebar_title: Representation -category: Upcoming +category: Upcoming patterns description: How do we handle switching between actors across services? partners: Digdir, Nav, Skatteetaten ++ date: 2025-12-03 diff --git a/apps/www/app/content/patterns/en/required-and-optional-fields.mdx b/apps/www/app/content/patterns/en/required-and-optional-fields.mdx index 99057ce79a..89a35d5ed7 100644 --- a/apps/www/app/content/patterns/en/required-and-optional-fields.mdx +++ b/apps/www/app/content/patterns/en/required-and-optional-fields.mdx @@ -1,7 +1,7 @@ --- title: Required and optional form fields sidebar_title: Required fields -category: Completed +category: Basic patterns description: To help users understand which fields must be completed, required fields must be clearly and consistently labelled. partners: Digdir, Nav, Skatteetaten ++ date: 2026-02-02 diff --git a/apps/www/app/content/patterns/en/systemnotifications.mdx b/apps/www/app/content/patterns/en/systemnotifications.mdx index 4c0bd8bc82..18706af1e2 100644 --- a/apps/www/app/content/patterns/en/systemnotifications.mdx +++ b/apps/www/app/content/patterns/en/systemnotifications.mdx @@ -1,7 +1,7 @@ --- title: System notifications sidebar_title: System notifications -category: Completed +category: Basic patterns description: How to help users understand situations in the service that are not caused by their own actions. partners: Digdir, Nav, Skatteetaten ++ search_terms: alert, modal diff --git a/apps/www/app/content/patterns/no/button-placement-and-order.mdx b/apps/www/app/content/patterns/no/button-placement-and-order.mdx index 08d6652f89..5dd0ca7b25 100644 --- a/apps/www/app/content/patterns/no/button-placement-and-order.mdx +++ b/apps/www/app/content/patterns/no/button-placement-and-order.mdx @@ -1,7 +1,7 @@ --- title: Plassering og rekkefølge på knapper sidebar_title: Plassering av knapper -category: Kommende +category: Kommende mønstre description: Hvordan kan vi skape en mer forutsigbar og inkluderende opplevelse ved å standardisere plassering og rekkefølge på knapper? partners: Digdir, Nav, Skatteetaten ++ search_terms: button, knapperekkefølge, knappplassering diff --git a/apps/www/app/content/patterns/no/date-and-time.mdx b/apps/www/app/content/patterns/no/date-and-time.mdx new file mode 100644 index 0000000000..19bbbc8d6c --- /dev/null +++ b/apps/www/app/content/patterns/no/date-and-time.mdx @@ -0,0 +1,122 @@ +--- +title: Spør brukeren om dato og klokkeslett +sidebar_title: Dato og klokkeslett +category: Spør brukeren om... +description: Å spørre brukeren om dato og klokkeslett blir ofte løst mer komplisert enn nødvendig. I mange situasjoner er vanlige input-felt både raskere å bruke og lettere å forstå enn egenbygde datovelgere. +partners: Digdir, Brønnøysundregistrene +date: 2026-02-05 +order: 10 +--- + +Hvordan du ber brukeren om dato og klokkeslett, bør ta utgangspunkt i hvilken informasjon du faktisk trenger. Noen datoer er enkle å huske, som fødselsdato, mens andre må leses fra dokumenter eller kort. I noen situasjoner holder det med en omtrentlig dato, som «desember 2017», eller en dato i forhold til i dag, som «4 dager fra nå». Andre ganger skal brukeren velge en dato eller et tidspunkt fra et forhåndsdefinert utvalg. + +Unngå å gjøre oppgaven mer komplisert enn nødvendig. Avanserte datovelgere gir ofte lavere tilgjengelighet og mer friksjon enn enkle tekstfelt. + +## Kjente datoer + +Når du spør om kjente datoer, som fødselsdato eller bryllupsdato, fungerer enkle tekstfelt godt. Brukeren vet allerede svaret og ønsker ofte å skrive det direkte, uten å måtte navigere i en kalender. + +Del gjerne datoen opp i separate felt for dag, måned og år. Det gjør det enklere å skrive inn datoen korrekt og gir bedre støtte for hjelpemidler. + +Tre separate felt for dag, måned og år + +Når du ber brukeren om en dato slik den står i et bankkort, pass eller annet dokument, bør feltene samsvare med formatet i dokumentet. Det gjør det enklere å overføre datoen korrekt og reduserer risikoen for feil. + +## Konkret dato i nær fremtid eller fortid + +I noen tilfeller skal brukeren velge en konkret dato tett opp mot dagens dato, for eksempel ved bestilling av time eller valg av frist. Da kan det være nyttig med visuell støtte. Et [`Textfield`](link) med `type="date"` lar brukeren enten skrive datoen direkte eller bruke nettleserens innebygde datovelger. Dette gir ofte en god balanse mellom fleksibilitet og støtte. Merk at utseende og interaksjon vil variere mellom nettlesere og enheter. + +Tekstfelt med innebygd datovelger + +## Start- og sluttdato + +Når brukeren skal oppgi en periode, bør startdato og sluttdato vises tydelig sammen. Bruk to separate felt, og gjør det klart hvilken dato som er hvilken. + +Plasser feltene i logisk rekkefølge, og valider at sluttdato ikke er før startdato. Hvis datoene avhenger av hverandre, bør feilmeldinger forklare hva som er galt og hvordan brukeren kan rette det. + +Tekstfelt for startdato og sluttdato + +## Klokkeslett – start og slutt + +Når brukeren skal oppgi et tidsintervall, som åpningstid eller varighet på et møte, fungerer et [`Textfield`](link) med `type="time"` godt. Det lar brukeren skrive klokkeslettet direkte, samtidig som nettleseren kan tilby passende hjelp. + +Bruk separate felt for start- og sluttid, og vis dem tydelig sammen. + +To tekstfelt for start- og sluttid + +## Omtrentlig tidspunkt +Gi brukeren mulighet til å oppgi en omtrentlig dato eller et tidspunkt når de ikke nødvendigvis vet eller husker nøyaktig. Dette er særlig relevant når hendelsen ligger lengre tilbake i tid. + +For eksempel kan du la brukeren skrive «desember 2025» i et felt som spør etter når ulykken skjedde, eller tilby egne felt for måned og år. + +Felt for måned og år +Hvis brukeren bare trenger å oppgi måned og år, bør det være mulig å gjøre nettopp det. + +## Dato relativt til en annen dato + +I noen situasjoner er det mer naturlig å spørre om datoer relativt til i dag eller til en annen dato, for eksempel når brukeren setter opp en påminnelse. Da kan det være bedre å bruke en [`Select`](link) for å gi brukeren valg om «i morgen», «om 3 dager» eller «1 dag før». Hvis ukedag er viktig for oppgaven, bør denne vises tydelig i tillegg. + +Valg av relative datoer + +## Dato fra et forhåndsdefinert utvalg + +Hvis du vet at brukeren skal velge en dato eller et tidspunkt fra et begrenset utvalg, for eksempel ledige timer den kommende uken, kan det være mer effektivt å tilby disse som ferdige valg. + +Bruk en [`Select`](link) eller [`Radio`](link) når antallet valg er lavt. Det gjør det raskt og enkelt å velge riktig alternativ uten å måtte skrive noe selv. + +Når utvalget er svært begrenset, for eksempel noen få datoer eller tidspunkter, kan [`Radio`](link) være et godt valg. Brukerne ser alle alternativene samtidig og kan raskt sammenligne dem før de velger. + +Forhåndsdefinert utvalg datoer eksempel 1 + +Når antall valg øker, kan en Select for å begrense utvalget være nyttig først. Den tar mindre plass og gjør det enklere å håndtere flere alternativer uten at siden blir uoversiktlig. + +Forhåndsdefinert utvalg datoer eksempel 2 + +Når det finnes mange mulige datoer eller tidspunkter, bør du hjelpe brukeren med å avgrense valgene før de presenteres. Dette kan gjøres på mange måter, for eksempel med Select slik som i eksempelet under. + +Forhåndsdefinert utvalg datoer eksempel 3 + +Du bør kun vise tidspunkter som faktisk kan velges, og forklare hvorfor de andre datoene ikke vises. + +[Eksempel på datoer som kan og ikke kan velges. En kalender vises] + +## Kilder og relevant informasjon +- [Who needs a JavaScript date picker? (dbushell.com)](https://pikaday.dbushell.com/) +- [Maybe You Don’t Need a Date Picker (adrianroselli.com)](https://adrianroselli.com/2019/07/maybe-you-dont-need-a-date-picker.html) +- [Ask users for dates (gov.uk)](https://design-system.service.gov.uk/patterns/dates/) \ No newline at end of file diff --git a/apps/www/app/content/patterns/no/errors.mdx b/apps/www/app/content/patterns/no/errors.mdx index 59d07d60e2..500b247c42 100644 --- a/apps/www/app/content/patterns/no/errors.mdx +++ b/apps/www/app/content/patterns/no/errors.mdx @@ -1,7 +1,7 @@ --- title: Brukerutløste feilmeldinger sidebar_title: Feilmeldinger -category: Ferdig +category: Grunnleggende mønstre description: Slik forteller du brukeren at noe er fylt ut feil eller mangler i et skjema. partners: Digdir, Nav, Skatteetaten ++ search_terms: validation, validering, feil diff --git a/apps/www/app/content/patterns/no/external-links.mdx b/apps/www/app/content/patterns/no/external-links.mdx index dbcd49d16a..04f462f9e4 100644 --- a/apps/www/app/content/patterns/no/external-links.mdx +++ b/apps/www/app/content/patterns/no/external-links.mdx @@ -1,7 +1,7 @@ --- title: Merking av lenker description: Hvordan merke lenker og hvilke språk- og designprinsipper bør vi følge? -category: Ferdig +category: Grunnleggende mønstre partners: Digdir, Nav, Skatteetaten ++ search_terms: url, lenketekst, ekstern date: 2025-05-12 diff --git a/apps/www/app/content/patterns/no/representation.mdx b/apps/www/app/content/patterns/no/representation.mdx index fbdfc14ea0..3eac60f6bf 100644 --- a/apps/www/app/content/patterns/no/representation.mdx +++ b/apps/www/app/content/patterns/no/representation.mdx @@ -1,7 +1,7 @@ --- title: Innlogging og representasjon sidebar_title: Representasjon -category: Kommende +category: Kommende mønstre description: Hvordan håndterer vi aktørbytte på tvers av tjenester? partners: Digdir, Nav, Skatteetaten ++ date: 2025-12-03 diff --git a/apps/www/app/content/patterns/no/required-and-optional-fields.mdx b/apps/www/app/content/patterns/no/required-and-optional-fields.mdx index 92aa4dac71..fc7e72a23d 100644 --- a/apps/www/app/content/patterns/no/required-and-optional-fields.mdx +++ b/apps/www/app/content/patterns/no/required-and-optional-fields.mdx @@ -1,7 +1,7 @@ --- title: Obligatoriske og valgfrie skjemafelt sidebar_title: Obligatoriske felt -category: Ferdig +category: Grunnleggende mønstre description: For at brukerne skal forstå hvilke felter som må fylles ut, må obligatoriske felt merkes tydelig og konsekvent. partners: Digdir, Nav, Skatteetaten ++ search_terms: required, optional, påkrevd, valgfritt diff --git a/apps/www/app/content/patterns/no/systemnotifications.mdx b/apps/www/app/content/patterns/no/systemnotifications.mdx index b4c9597503..a8a3d59206 100644 --- a/apps/www/app/content/patterns/no/systemnotifications.mdx +++ b/apps/www/app/content/patterns/no/systemnotifications.mdx @@ -1,7 +1,7 @@ --- title: Systemvarsler sidebar_title: Systemvarsler -category: Ferdig +category: Grunnleggende mønstre description: Slik hjelper du brukerne å forstå situasjoner i tjenesten som ikke skyldes deres egne handlinger. partners: Digdir, Nav, Skatteetaten ++ search_terms: alert, modal, systemvarsel, systemmelding diff --git a/apps/www/app/layouts/patterns/layout.tsx b/apps/www/app/layouts/patterns/layout.tsx index addb4bbc3e..8f2a6fe935 100644 --- a/apps/www/app/layouts/patterns/layout.tsx +++ b/apps/www/app/layouts/patterns/layout.tsx @@ -38,15 +38,15 @@ export const loader = async ({ params: { lang } }: Route.LoaderArgs) => { } = {}; if (lang === 'no') { - cats.Ferdig = []; - cats['Under arbeid'] = []; - cats.Kommende = []; + cats['Grunnleggende mønstre'] = []; + cats['Spør brukeren om...'] = []; + cats['Kommende mønstre'] = []; } if (lang === 'en') { - cats.Completed = []; - cats['Under construction'] = []; - cats.Coming = []; + cats['Basic patterns'] = []; + cats['Ask users for...'] = []; + cats['Upcoming patterns'] = []; } /* Map over files with mdx parser to get title */ diff --git a/apps/www/public/img/date-and-time/example1.webp b/apps/www/public/img/date-and-time/example1.webp new file mode 100644 index 0000000000..e201c0004b Binary files /dev/null and b/apps/www/public/img/date-and-time/example1.webp differ diff --git a/apps/www/public/img/date-and-time/example2.webp b/apps/www/public/img/date-and-time/example2.webp new file mode 100644 index 0000000000..710dcf2d78 Binary files /dev/null and b/apps/www/public/img/date-and-time/example2.webp differ diff --git a/apps/www/public/img/date-and-time/example3.webp b/apps/www/public/img/date-and-time/example3.webp new file mode 100644 index 0000000000..39de835ed0 Binary files /dev/null and b/apps/www/public/img/date-and-time/example3.webp differ diff --git a/apps/www/public/img/date-and-time/example4.webp b/apps/www/public/img/date-and-time/example4.webp new file mode 100644 index 0000000000..68fe697ab2 Binary files /dev/null and b/apps/www/public/img/date-and-time/example4.webp differ diff --git a/apps/www/public/img/date-and-time/example5.png b/apps/www/public/img/date-and-time/example5.png new file mode 100644 index 0000000000..185c66cc4e Binary files /dev/null and b/apps/www/public/img/date-and-time/example5.png differ diff --git a/apps/www/public/img/date-and-time/example6.png b/apps/www/public/img/date-and-time/example6.png new file mode 100644 index 0000000000..6ee35e013c Binary files /dev/null and b/apps/www/public/img/date-and-time/example6.png differ diff --git a/apps/www/public/img/date-and-time/example7.webp b/apps/www/public/img/date-and-time/example7.webp new file mode 100644 index 0000000000..0ad440866c Binary files /dev/null and b/apps/www/public/img/date-and-time/example7.webp differ diff --git a/apps/www/public/img/date-and-time/example8.webp b/apps/www/public/img/date-and-time/example8.webp new file mode 100644 index 0000000000..4c8bbb952e Binary files /dev/null and b/apps/www/public/img/date-and-time/example8.webp differ diff --git a/apps/www/public/img/date-and-time/example9.webp b/apps/www/public/img/date-and-time/example9.webp new file mode 100644 index 0000000000..c35ac67e60 Binary files /dev/null and b/apps/www/public/img/date-and-time/example9.webp differ