Intro
Søkefelt lar brukerne utforske et nettsted eller en applikasjon ved å skrive nøkkelord eller setninger. Søk kan brukes som den primære måten å utforske innhold på, eller som et filter for å finne fram til innhold.
Egnet til:
- Alternativ til vanlig navigasjon
- Finne raskt fram til noe spesifikt i en stor menge innhold
Når bør man vurdere noe annet:
- På enkeltsider eller svært små nettsteder kan søk være unødvendig
aksel.nav.no
aksel.nav.no
Anatomi
- 1. Søketekstfelt
Tekstfelt hvor brukeren skriver inn søketeksten.
- 2. Søketekst
Teksten som brukeren søker på.
- 3. Nullstill-knapp
Ved å trykke her fjernes teksten som er skrevet inn i søkefeltet. Vises bare når det er skrevet inn tekst.
- 4. Søkeknapp
Søket gjennomføres ved å trykke på knappen.
Varianter
Størrelser
Komponenten kommer i to størrelser: medium og small. Medium er standard, og brukes både på eksterne og interne flater. Small brukes på interne flater der det er behov for et mer komprimert grensesnitt. En small variant kan også være knyttet til en komponent som for eksempel til filtrering av data i en data-tabell.
Med eller uten label
I de fleste tilfeller er det ikke nødvendig med en synlig label på søk. Søkefeltets utforming, knapp og søkeikon gjør funksjonen tydelig for brukeren. Selv om label ikke er synlig, skal den alltid være tilgjengelig for skjermleser.
Standard search
Tertiary er standardvarianten til søk. Hvis du er i tvil om hvilken variant du skal bruke, er det sikkert denne som er riktig.
Primary search
Primary skal brukes der søk er hoved-/primær-funksjon, f.eks. ved globalt søk. Merk at det som regel bare skal finnes ett primary søk på en og samme side.
Search dark
Søkefelt som brukes på mørk bakgrunn.
Disabled
Search kan ikke være disabled.
Tilgjengelighet
Interaksjon Tastatur
Vi har skrevet kode som håndterer ESC-klikk i selve search-komponenten. I mange nettlesere vil det også være en knapp til høyre i søkefeltet som lar brukeren slette innholdet. Vi har laget ekstra funksjonalitet som gjør at denne knappen kan motta tastaturfokus. Gi oss gjerne tilbakemelding om denne endringen!
| Kommando | Beskrivelse |
|---|---|
| Esc | Sletter tekst i søkefeltet. |
Bruk
Søkefeltets bredde
Søkefeltets bredde bør tilsvare størrelsen av søketermene som feltet er designet for. Feltets størrelse er en viktig cue til brukeren om hva de kan bruke søkefeltet til. Dvs., for et felt som brukes bare til å søke på personnumre bør feltets størrelse tilsvare størrelsen til en personnummer, mens for et nettsteds hovedsøk bør man bruke et bredere felt som lar brukerne se mange ord samtidig.
Ta gjerne en kikk på søkeloggene dine for å se hvordan brukerne dine ordlegger seg når de søker på sidene dine. Unngå at teksten i søkefeltet må scrolle for å romme typiske søk.
Placeholdertekst
Vi fraråder bruk av placeholdertekst for flere grunn:
- Teksten forsvinner så snart brukeren begynner å skrive i feltet, så du må uansett gjenta denne informasjonen i label eller beskrivelsen.
- Placeholdertekst må også møte kontrastkravene, men da blir teksten så mørk at brukere kan lett bli forvirret og tro at feltet allerede er fylt ut.
- Hjelpemidler håndterer placeholdertekst på forskjellige måter, så du kan ikke stole at informasjonen du har i placeholderen blir kommunisert til alle brukere.
Placeholdertekst kan vurderes på interne flater der det er behov for et mer kompakt design.