Navigation

Tags og chips

Tags og chips er de små, klikbare etiketter, brugeren møder, når de filtrerer en liste, ser deres aktive filtre eller indtaster flere værdier i ét felt. Brugt rigtigt gør de filtrering hurtig og overskuelig; brugt som en fritflydende tag-sky forvirrer de mere, end de hjælper. Her er definitionerne, evidensen, best practices og de typiske faldgruber.

5 min læsning

Definition

En chip er et kompakt, interaktivt element, der hjælper brugeren med at indtaste information, foretage valg, filtrere indhold eller udløse en handling. Chips optræder altid i en gruppe (et chip-set). Material Design skelner mellem fire typer: filter-chips (til at filtrere en liste), input-chips (afgrænsede stumper information brugeren selv har indtastet, fx modtagere), forslags-chips (dynamisk genererede forslag til input) og assist-chips (kontekstuelle handlinger). »Tags« bruges her både om filter-chips og om de fjernbare pills, der viser aktive filtre.

Hvorfor det virker

En chip er et kompakt, interaktivt element, der hjælper brugeren med at indtaste information, foretage valg, filtrere indhold eller udløse en handling. Material Design definerer fire typer — filter-, input-, forslags- og assist-chips — og understreger, at chips altid optræder i en gruppe (et chip-set), ikke som enkeltstående knapper. Det er en komponentdefinition, ikke et måltal.¹

Filter-chips bruger tags eller beskrivende ord til at filtrere indhold og er ifølge Material Design et godt alternativ til toggles eller checkboxes. Derfor hænger de tæt sammen med faceteret filtrering: hvert valgt facet kan repræsenteres som en chip.¹

Når aktive filtre vises som fjernbare pills, får brugeren øjeblikkelig visuel bekræftelse på, hvad der er slået til, og kan rydde et enkelt filter uden at åbne filterpanelet igen. Baymards benchmark viser, at 28% af sites ikke giver et overblik over anvendte filtre — et målbart, udbredt hul.³

Den fritflydende, vægtede tag-sky er derimod frarådet. Nielsen Norman Group konkluderer, at tag-skyer er overforbrugte: de bruger skærmplads ineffektivt, og mange brugere ved ikke, hvordan de skal bruges. Det er ekspertvejledning, ikke en kontrolleret statistik.²

Fordi en chip er interaktiv, skal den også kunne betjenes uden mus. En fjernbar chip skal have et tilgængeligt navn på sin luk-funktion og kunne fjernes med tastaturet; luk-målet bør ramme WCAG 2.2-kravet om mindst 24×24 CSS-pixels (niveau AA).¹⁴

Hvornår du bruger det — og hvornår ikke

Hvornår du bruger det

Når brugeren skal filtrere en liste på flere egenskaber samtidigt — filter-chips er et godt alternativ til checkboxes og toggles og hænger tæt sammen med faceteret filtrering.
Når aktive filtre skal vises som fjernbare pills, så brugeren kan se og rydde et enkelt filter uden at åbne filterpanelet igen.
Når brugeren skal indtaste flere afgrænsede værdier i ét felt (modtagere, søgeord, kategorier) — input-chips gør hver værdi til et selvstændigt, fjernbart element.

Hvornår du bør undgå det

Som en fritflydende, vægtet »tag-sky«, hvor skriftstørrelsen signalerer popularitet — den er pladskrævende, og mange brugere forstår ikke, hvordan de skal bruge den.
Til en enkelt til/fra-indstilling eller et lineært valg, hvor en almindelig toggle, radioknap eller et link er tydeligere og billigere at ramme.

Best practices

Vælg chip-typen efter opgaven
Filter-chips til at filtrere en liste, input-chips til flere indtastede værdier, forslags-chips til dynamiske forslag, assist-chips til kontekstuelle handlinger. Bland ikke typerne visuelt, så en handling ligner et filter.¹
Vis aktive filtre som fjernbare pills
Saml de anvendte filtre i et synligt overblik over resultatlisten. Det bekræfter, hvad der er slået til, og forklarer, hvorfor listen ser ud, som den gør — i stedet for at brugeren skal genåbne filterpanelet.³
Gør hvert filter individuelt fjernbart
Hver pill skal kunne klikkes væk enkeltvis, og der bør være et separat »Ryd alle«. Baymard finder, at testdeltagere fjerner filtre ved at klikke direkte på dem i overblikket frem for at scrolle i sidepanelet.³
Gør chippen synligt klikbar
En chip skal ligne noget, man kan trykke på — kant, baggrund eller ikon, der adskiller den fra ren tekst. En fjernbar chip bør have et tydeligt luk-ikon (×), så affordancen ikke er skjult. (Designvejledning, ikke måltal.)
Giv luk-funktionen et tilgængeligt navn og tastaturbetjening
Et bart ×-ikon er ikke nok: brug fx aria-label »Fjern «. Chippen skal kunne fokuseres og fjernes med tastatur, ikke kun med mus — ellers er filteret utilgængeligt.¹⁵
Ram et tilstrækkeligt stort luk-mål
Luk-knappen på en fjernbar chip bør være mindst 24×24 CSS-pixels eller have tilsvarende afstand til naboer, jf. WCAG 2.2-succeskriterium 2.5.8 (niveau AA). Små ×-ikoner tæt på hinanden er svære at ramme.⁴
Undgå fritflydende tag-sky til navigation
Vil du hjælpe folk med at browse, så brug tydelige, mutuelt eksklusive kategorier eller et filtreret facet-overblik i stedet for en vægtet tag-sky, hvor skriftstørrelsen signalerer popularitet.²

Typiske fejl

Vægtet tag-sky som primær navigation
Den ene løsning, evidensen fraråder: pladskrævende, og mange brugere forstår ikke, hvad de skal med den. Skriftstørrelse er et dårligt signal om, hvad den enkelte bruger vil klikke på.
Chips der ligner statiske labels
Uden kant, baggrund eller luk-ikon opfatter brugeren en chip som ren tekst og opdager ikke, at den kan klikkes eller fjernes.
Luk-ikon uden tilgængeligt navn eller tastatur
Et bart × uden aria-label og uden tastaturbetjening gør filteret umuligt at fjerne for skærmlæser- og tastaturbrugere.
For små luk-mål
Tætpakkede ×-ikoner under 24×24 CSS-pixels rammes forkert — især på touch — og brugeren fjerner det forkerte filter.

Eksempler i praksis

Gmails modtagerfelt (ofte fremhævet)

Gmail bliver ofte fremhævet som input-chips: hver modtager bliver til en afgrænset, fjernbar chip i »Til«-feltet, så flere adresser kan ses og redigeres enkeltvis. Material Design bruger netop Gmail-kontakter som eksempel på input-chips.

Anvendte filtre i webshops (ofte fremhævet)

E-handelskategorisider fremhæves ofte for at vise valgte facetter som fjernbare pills over produktlisten — et konkret udtryk for filter-chips koblet til faceteret filtrering.

Ofte stillede spørgsmål

Hvad er forskellen på et tag og en chip?

»Chip« er komponenten — et lille, klikbart element. »Tag« bruges typisk om indholdet: en etiket eller et nøgleord. I praksis vises et tag ofte som en chip, fx en filter-chip eller en fjernbar filter-pill.

Hvilke typer chips findes der?

Material Design skelner mellem fire: filter-chips (filtrer en liste), input-chips (afgrænsede værdier brugeren har indtastet), forslags-chips (dynamiske forslag til input) og assist-chips (kontekstuelle handlinger).

Hvorfor frarådes tag-skyer?

Nielsen Norman Group finder, at vægtede tag-skyer bruger skærmplads ineffektivt, og at mange brugere ikke ved, hvordan de skal bruges. Tydelige kategorier eller et facet-filter kommunikerer indholdet bedre.

Hvordan gør jeg en filter-chip tilgængelig?

Giv luk-funktionen et tilgængeligt navn (fx aria-label »Fjern «), gør chippen fokuserbar og fjernbar med tastatur, og sørg for, at luk-målet er mindst 24×24 CSS-pixels, jf. WCAG 2.2 (2.5.8).

Hvorfor vise aktive filtre som pills?

Det giver øjeblikkelig bekræftelse på, hvad der er slået til, og lader brugeren fjerne ét filter ad gangen. Baymard finder, at 28% af sites mangler dette overblik.

Kilder

Chips – GuidelinesMaterial Design 3 (Google) · komponentdefinition + de fire chip-typer; input-chips er fjernbare
Tag Cloud ExamplesNielsen Norman Group · tag-skyer frarådet: pladskrævende, svære at forstå
Filtering UX: Display "Applied Filters" in an OverviewBaymard Institute · 28% af sites mangler overblik; pills bør være individuelt fjernbare
Understanding SC 2.5.8: Target Size (Minimum)W3C / WAI (WCAG 2.2) · mindst 24×24 CSS-pixels, niveau AA
Chip – Material Web (accessibility)Material Components (Google), GitHub · aria-label/aria-labelledby på chips; input-chips fjernbare via remove-event