Tags

[onordbo]

Som et ledd i inventory prosjektet vårt ønsker vi tilbakemelding og stemmer fra både design og teknologi for å kartlegge hvilke komponenter og behov vi burde prioritere. Nedenfor følger en kort hypotese/slutning fra Designsystem-teamet, i tillegg til en rekke kommentarer vi har merket oss gjennom arbeidet.

Se på skjermbildene fra inventory tilgjengelig her for referanse. Legg gjerne til ønsker, behov, tanker, meninger og annet som kommenaterer i denne tråden, så vi kan sørge for at oppgavene blir så godt beriket med informasjon som mulig, dette gjør det enklere for alle involverte å ta tak i og løse de utfordringene vi møter sammen.

---

TL;DR 👉 Denne ser vi flere teams har behov for. Stor visuell spredning p.t

• SAM (ønske/behov): Tags er et behov som er viktig for SAM teamet?
• Motor (ønske/behov): “Tags”, farget statustekst
• Flyt (ønske/behov): Jøkul tags
• Det finnes en sak på dette i GitHub som burde følges opp og prioriteres
• Bør legge føringer for bruk av stor og liten tekst
• Trenger tags en utvidet fargepalett?

Brukes i dag av SAM, SeOpp og Flyt, til en viss grad.

Behov: Merkelapp med annen farge enn bakgrunnsfargen. Brukes til korte statustekster som "Påbegynt", "e-kunde", "Ny", "Til utfylling", og lingnende.

Det finnes et tilfelle av ikon brukt inni en tag.

[wkillerud]

Den nevnte diskusjonen: #1668

[wkillerud]

Forslag til beskrivelse

Tags er små informasjonsbobler som kan brukes til å presentere en eller flere biter med informasjon tilknyttet et hovedtema.

Tags inneholder kun tekst. Teksten starter med stor forbokstav etterfulgt av små, med mindre det er en forkortelse eller merkevare. Teksten bør ikke overskride 12 tegn, og mellomrom bør unngås hvis mulig.

Vi har to kategorier av tags:

1. status - vises med en passende farge
2. emne, metadata - nøytral

Fargene i statustags har en betydning på samme måte som Message box:

• Grønt betyr at noe er vellykket eller ferdig
• Gult informerer om noe som kan ha innvirkning på brukeren, men hvor det ikke kreves en handling
• Rødt betyr at en handling kreves eller noe har gått galt så handlingen ikke kunne gjennomføres

Blått kan brukes om de andre kategoriene ikke passer, men bare dersom samme sted vil kunne vise en annen statusfarge hvis situasjonen var annerledes. Blått er med andre ord ikke en nøytral farge som kan brukes til informasjon utenfor statuskategorien. Til det brukes emnevarianten.

Når bruker vi tags?

Før du bruker en tag bør du stille noen kontrollspørsmål:

• Er teksten kort nok til å passe inn i en tag?
• Er det tydelig for brukeren hva tagsene er tilknyttet? Også for brukere av skjermlesere?
• Passer informasjonen jeg skal vise inn i én av de to kategoriene – status og emne?
• Vises informasjonen i en tabell? I så fall, gir det verdi å bruke en tag i stedet for en vanlig tekstkolonne?

[onordbo]

Legger ved et forslag til visuell implementering med basalbehovene dekket; nøytral og et par fargekoder—inspirert av MessageBox komponenten vår. Hva synes dere @Murstam, @Stormoen og @AudunBerdal?

[HavardPede]

Kan kanskje bli litt vanskelig å se forskjell på hva som er Button og hva som er Tag, spesielt ved invertert nøytral.

edit: spesifiserte hvilken type.

[karimarkhus]

syns de var kjempefine!!! absolutt et behov for tags! men enig i at de ligner litt på button. Men det kommer kanskje an på størrelsen også?

[HavardPede]

Det er et godt poeng.
Her er et eksempel vi har i SAM. Dette er i en utviklingsbranch, så skal ryddes opp før det er i prod.

Men her har vi:

1. Tags noe lignende det dere foreslår, for å beskrive kundeinformasjon (NSF, ekunde toppen av siden).
2. En ny annen versjon av en tag vi testet ut for å skille fra button (Utkast).
3. Button (Sett til Digital Aksept).
   

Så det at dere implementerer en Tag er supert, så kan vi erstatte våre.
Grunnen for at vi implementerte en firkantet tag var for å lettere skille mellom button og tag.
Er enig @karimarkhus at størrelse vil påvirke dette, samt hvor det er brukt.

[Stormoen]

Supert utkast. Jeg er enig i at de blir litt for lik buttons hva gjelder form. Også litt usikker på når man skal bruke "blå info" kontra "nøytral", greit å definere noen regler her så ikke meldingsfargene løper løpsk avgårde :)

[karimarkhus]

jeg lurer også på om det går an å ha litt ulike versjoner? f.eks noen ganger har man behov for å vise ulike kategorier med f.eks tags, men kanskje det ikke har noe å gjøre med info, feil, suksess og advarsel

[Stormoen]

Veldig gode eksempler alle tre! Det første jeg tenkte på når jeg så farger i tags var at de sikkert blir misbrukt slik som eksempelet "miljøvennlig". Så lenge fargene brukes for å kommunisere på samme måte som meldingsboksene er det innafor tenker jeg.

[wkillerud]

Kategorier tenkte vel @onordbo og jeg faller under emner, så nøytral farge. Trengs det farger for å differensiere? Åpen for å overbevises, vi ønsket bare å starte med så få varianter som mulig 😄 @karimarkhus

[karimarkhus]

@wkillerud tanken var bare at hvis man f.eks skal merke et kort med flere "tags" så kunne det vært fint å ha ulike kategorier sånn at man lettere kan "skanne" innholdet.

[onordbo]

Dette er et veldig godt innspill vi burde ta med—la oss se på noen variasjoner sammen i neste iterasjon @karimarkhus 🎯

[Stakset]

Litt skeptisk til at de har samme avrunding som knappene. Prøvde det i noen eksempler og føler det blir en konflikt med knapp og toggle switch. Hva om de heller hadde samme avrunding som kortene våre?

En annen idé kunne vært å ha nøytral i fargen varde slik at man kan bruke sort skrift på alle, og likt mellom light og dark mode.

[Stormoen]

Liker at de tar igjen formen fra meldingsboksene. Og enig i varde, slik at differansen til knapp også blir større.

[onordbo]

+1 liker definitivt bedre litt mindre avrunding, godt innspill @Stakset

[onordbo]

Oppdatert! https://www.figma.com/file/eL15GtAzhsUk9MHWxZ92DP/tags?node-id=1997%3A6990

cc @Stakset @Stormoen

[onordbo]

[Stakset]

Liker tempoet deres :) Godt jobba!

[HavardPede]

👏

[piofinn]

Smud! Hva med å teste den i UU-guiden i Portalen? Enkel måte å få testet dark mode på også.

Ikke helt tilfeldig valg av tema i screenshot-et heller 😆

[onordbo]

Ser ut som vi er innafor på kontrast hvertfall, @piofinn 😉

[Murstam]

Bra jobba! Enig i form og farge :) Tenker teksten kan være i Granitt for det er vel all tekst ellers nå.

Testet den litt i tabell og førsteinntrykket mitt er at den er litt stor, spesielt på compact? Et alternativ kan være å kutte padding fra 12/4 til 8/2. Også kan det hende at teksten holder i regular, men litt usikker på den.

Legger ved nåværende pluss to alternativer



.

[onordbo]

Enig at den kan virke litt stor i noen kontekster, la oss se litt på om vi kan skru til paddingen enda mer. Dog tror jeg definitivt vi burde holde på bold for lesbarhetens skyld, spesielt om vi gjør tag'en enda mer kompakt.

[Stakset]

Må være granitt ja.

Kunne vi hatt varianter av tags? Slik vi gjør message box. Compact kunne vært 8/2, også kunne vi hatt mulighet til å ha regular. Den stjeler veldig mye fokus med bold slik det er satt i tabellen nå ihvertfall. Føler ikke det har noe å si for det overordna uttrykket at vi har varianter. Så lenge folk ikke blander, men det gjelder alle komponenter :)

[piofinn]

kunne vi hatt mulighet til å ha regular

Jeg legger merke til at alle eksemplene på nåværende implementasjoner i denne tråden er med normal vekt. Kanskje vi kunne fått sett noen eksempler på de nye i dark mode med normal fontvekt @onordbo, siden det virker som det var der det smertet mest? (Skjønner at selve komponenten er lik, men kontrasten kan oppfattes annerledes mot mørk bakgrunn).

[Stakset]

Ganske slitsomt å lese regular 16 px tags i darkmode. Det gjelder egentlig for dagens accessibility-side i darkmode også.

[Stormoen]

Fint og enig med kompaktversjonen av tags! Synes kanskje det holder med bold tekst. Hvis man velger å bruke tags så tenker jeg at meninga er at det er skal fremheves. Nå har vi jo samme versjon for mørk og lys bakgrunn, så da er det blir det vanskelig å forhindre "feilbruk" med regular tekst på mørk bakgrunn.