docs: update pattern documentation and add date and time article#4474
Open
docs: update pattern documentation and add date and time article#4474
Conversation
|
Contributor
|
Preview deployments for this pull request: www - |
mrosvik
requested review from
Barsnes,
eirikbacker,
mimarz and
oddvernes
as code owners
…systemet into docs/date-and-time
…systemet into docs/date-and-time
Collaborator
|
Perhaps all the images can now be removed? |
Ildest
approved these changes
Feb 24, 2026
Contributor
Ildest
left a comment
Ildest
left a comment
There was a problem hiding this comment.
Sånn, da ble det noen små formuleringsendringer også, men en som du må ta selv, for jeg forsto ikke setningen. Tips til fremover: Prøv å unngå verbformer med s-passiv, som løses, lagres osv. Si hvem som gjør noe (brukeren, du eller vi). Grunnen er at disse s-verbene ofte kommer helt til slutt i setningene og det blir vanskelig for brukeren å oppfatte hva som er handlingen og hvem som gjør den - det er en litt gammeldags måte å skrive på, som vi har med oss fra akademisk skriving alle sammen.
| title: Spør brukerne om dato og klokkeslett | ||
| sidebar_title: Dato og klokkeslett | ||
| category: Spør brukerne om... | ||
| description: Å spørre brukerne 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. |
Contributor
There was a problem hiding this comment.
Suggested change
| description: Å spørre brukerne 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. | |
| description: Det å spørre brukerne 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. |
| order: 10 | ||
| --- | ||
|
|
||
| Hvordan du ber brukerne 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, eller et tidspunkt i forhold til i dag. Andre ganger skal brukerne velge en dato eller et tidspunkt fra et forhåndsdefinert utvalg. |
Contributor
There was a problem hiding this comment.
Suggested change
| Hvordan du ber brukerne 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, eller et tidspunkt i forhold til i dag. Andre ganger skal brukerne velge en dato eller et tidspunkt fra et forhåndsdefinert utvalg. | |
| Hvordan du ber brukerne om dato og klokkeslett, bør ta utgangspunkt i hvilken informasjon du faktisk trenger. Noen datoer er enkle å huske, som fødselsdatoer, mens andre datoer må brukerne lese fra dokumenter eller kort. I noen situasjoner holder det med en omtrentlig dato, eller et tidspunkt i forhold til i dag. Andre ganger skal brukerne velge en dato eller et tidspunkt fra et forhåndsdefinert utvalg. |
|
|
||
| Hvordan du ber brukerne 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, eller et tidspunkt i forhold til i dag. Andre ganger skal brukerne velge en dato eller et tidspunkt fra et forhåndsdefinert utvalg. | ||
|
|
||
| Unngå å gjøre oppgaven mer komplisert enn nødvendig. Egenbygde datovelgere gir ofte lavere tilgjengelighet og mer friksjon enn enkle tekstfelt. De kan være vanskelige å bruke med tastatur, gi dårlig støtte for skjermleser og kreve unødvendig navigering når brukerne allerede kjenner datoen. |
Contributor
There was a problem hiding this comment.
Suggested change
| Unngå å gjøre oppgaven mer komplisert enn nødvendig. Egenbygde datovelgere gir ofte lavere tilgjengelighet og mer friksjon enn enkle tekstfelt. De kan være vanskelige å bruke med tastatur, gi dårlig støtte for skjermleser og kreve unødvendig navigering når brukerne allerede kjenner datoen. | |
| Unngå å gjøre oppgaven mer komplisert enn nødvendig. Egenbygde datovelgere gir ofte lavere tilgjengelighet og mer friksjon enn enkle tekstfelt. De kan være vanskelige å bruke med tastatur, gir dårlig støtte for skjermleser og krever unødvendig navigering når brukerne allerede kjenner datoen. |
|
|
||
| <Story story="KnownDates" /> | ||
|
|
||
| I eksempelet over bruker vi `inputmode="numeric"` for å gi brukeren numerisk tastatur på mobil og nettbrett. Vi velger bevisst å ikke bruke `type="number"` for dag, måned og år. `type="number"` er utviklet for numeriske verdier som kan økes og reduseres, og gir funksjonalitet som spinnknapper og automatisk validering som ikke alltid er hensiktsmessig for datoer. Det kan også skape [tilgjengelighetsutfordringer (mozilla.org)](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/number#accessibility), blant annet for skjermlesere og ved utilsiktet endring av verdi. |
Contributor
There was a problem hiding this comment.
Formuleringen i tredje setning er litt vanskelig. Hva hører sammen logisk der? Jeg kan ikke skrive det om, siden jeg ikke er sikker på hva som høre sammen rundt det med spinnknapper og validering. Prøv å forenkle setnignstrukturen.
|
|
||
| ## Dato fra et forhåndsdefinert utvalg | ||
|
|
||
| Hvis du vet at brukerne 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. |
Contributor
There was a problem hiding this comment.
Suggested change
| Hvis du vet at brukerne 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. | |
| Hvis du vet at brukerne 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 datoene som ferdige valg. |
|
|
||
| <Story story="PredefinedOptions2" /> | ||
|
|
||
| Du bør kun vise valg som har ledige timer, og unngå å for eksempel deaktivere uker som ikke har ledige timer, da det kan skape forvirring. Forklar i forkant at det kun er uker med ledige tidspunkt som vises, slik at brukerne forstår hvorfor noen uker ikke er tilgjengelige å velge. |
Contributor
There was a problem hiding this comment.
Suggested change
| Du bør kun vise valg som har ledige timer, og unngå å for eksempel deaktivere uker som ikke har ledige timer, da det kan skape forvirring. Forklar i forkant at det kun er uker med ledige tidspunkt som vises, slik at brukerne forstår hvorfor noen uker ikke er tilgjengelige å velge. | |
| Du bør kun vise valg som har ledige timer. Unngå for eksempel å deaktivere uker som ikke har ledige timer, da det kan skape forvirring. Forklar på forhånd at brukerne kun ser uker med ledige tidspunkt, slik at de forstår hvorfor det er noen uker de ikke kan velge. |
|
|
||
| ## Konkret dato i nær fremtid eller fortid | ||
|
|
||
| I noen tilfeller når brukerne skal velge en konkret dato tett opp mot dagens dato kan det være nyttig med visuell støtte. En [`Input`](/no/components/docs/input/overview) med `type="date"` lar brukerne enten skrive datoen direkte eller bruke nettleserens innebygde datovelger. Dette gir ofte en god balanse mellom fleksibilitet og støtte. Støtten varierer mellom nettlesere og enheter, både når det gjelder funksjonalitet, utseende og interaksjon, men løsningen er ofte mer tilgjengelig og robust enn egenbygde alternativer. |
Contributor
There was a problem hiding this comment.
Suggested change
| I noen tilfeller når brukerne skal velge en konkret dato tett opp mot dagens dato kan det være nyttig med visuell støtte. En [`Input`](/no/components/docs/input/overview) med `type="date"` lar brukerne enten skrive datoen direkte eller bruke nettleserens innebygde datovelger. Dette gir ofte en god balanse mellom fleksibilitet og støtte. Støtten varierer mellom nettlesere og enheter, både når det gjelder funksjonalitet, utseende og interaksjon, men løsningen er ofte mer tilgjengelig og robust enn egenbygde alternativer. | |
| Noen ganger når brukerne skal velge en konkret dato tett opp mot dagens dato, kan det være nyttig å gi visuell støtte. En [`Input`](/no/components/docs/input/overview) med `type="date"` lar brukerne enten skrive datoen direkte eller bruke nettleserens innebygde datovelger. Dette gir ofte en god balanse mellom fleksibilitet og støtte. Støtten varierer mellom nettlesere og enheter, både når det gjelder funksjonalitet, utseende og interaksjon, men løsningen er ofte mer tilgjengelig og robust enn egenbygde alternativer. |
|
|
||
| ## Klokkeslett – start og slutt | ||
|
|
||
| Når brukerne skal oppgi et tidsintervall, som åpningstid eller varighet på et møte, kan en [`Input`](/no/components/docs/input/overview) med `type="time"` brukes. Det lar brukerne skrive klokkeslettet direkte, samtidig som nettleseren tilbyr støtte. |
Contributor
There was a problem hiding this comment.
Suggested change
| Når brukerne skal oppgi et tidsintervall, som åpningstid eller varighet på et møte, kan en [`Input`](/no/components/docs/input/overview) med `type="time"` brukes. Det lar brukerne skrive klokkeslettet direkte, samtidig som nettleseren tilbyr støtte. | |
| Når brukerne skal oppgi et tidsintervall, som åpningstid eller varighet på et møte, kan du bruke en [`Input`](/no/components/docs/input/overview) med `type="time"`. Det lar brukerne skrive klokkeslettet direkte, samtidig som nettleseren tilbyr støtte. |
| ## Omtrentlig tidspunkt | ||
| Hvis brukerne bare trenger å oppgi måned og år, bør det være mulig å gjøre nettopp det. Dette er særlig relevant når hendelsen ligger langt tilbake i tid, og brukerne ikke nødvendigvis vet nøyaktig tidspunkt. | ||
|
|
||
| For eksempel kan du la brukerne oppgi omtrentlig tid i et fritekstfelt, eller tilby egne felt for kun måned og år slik som i eksempelet under. |
Contributor
There was a problem hiding this comment.
Suggested change
| For eksempel kan du la brukerne oppgi omtrentlig tid i et fritekstfelt, eller tilby egne felt for kun måned og år slik som i eksempelet under. | |
| For eksempel kan du la brukerne oppgi omtrentlig tid i et fritekstfelt, eller tilby egne felt for kun måned og år, som i eksempelet under. |
|
|
||
| ## Oppsummering | ||
|
|
||
| Start med behovet, og velg den løsningen som lar brukerne løse oppgaven raskest mulig. Ofte er vanlige tekstfelt mer tilgjengelige og raskere å bruke enn avanserte datovelgere. |
Contributor
There was a problem hiding this comment.
Suggested change
| Start med behovet, og velg den løsningen som lar brukerne løse oppgaven raskest mulig. Ofte er vanlige tekstfelt mer tilgjengelige og raskere å bruke enn avanserte datovelgere. | |
| Start med behovet, og velg den løsningen som lar brukerne løse oppgaven raskest mulig. Ofte er vanlige tekstfelt både mer tilgjengelige og raskere å bruke enn avanserte datovelgere. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
resolves #4288
Checks
pnpm changesetif relevant)