Hjelp ønskes
Det er et par ting vi lurer på:
- Gir navnet "Read more" mening for denne komponenten?
- Vi tester med gjennomsiktig gråfarge på hover state. Funker det der du bruker denne komponenten?
Intro
Vi har ofte situasjoner hvor brukerne trenger en forklaring på noe eller en begrunnelse for hvorfor noe er på en bestemt måte. Read more gjør dette på en god måte. Den består av en knapp som du klikker på for å åpne et panel med tekst.
Egnet til:
- Forklare vanskelige begreper eller ord
- Begrunne spørsmål eller konsepter
Når bør man vurdere noe annet:
- Vise ekstra innhold (overflow) i artikler
- Vise rikt innhold eller filer
aksel.nav.no
aksel.nav.no
Anatomi
- 1. Read more
Teksten i knappen er introen til hva som forklares i panelet. Knappen er utløseren som åpner panelet.
- 2. Read more content
Panelet med innhold som åpner seg når du klikker på knappen.
Demo
Varianter
Tekststørrelse
Komponenten kommer med tekststørrelsene medium og small. Small er designet for ekspertsystemer med tett layout.
Åpen og lukket
Når du trykker på knappen, vil panelet åpne seg og dytte annet innhold på siden nedover. Standard tilstand er lukket.
Tilgjengelighet
Interaksjon Tastatur
| Kommando | Beskrivelse |
|---|---|
| Space | Når ReadMore har fokus, veksler panelet mellom åpnet og lukket |
| Enter | Når ReadMore har fokus, veksler panelet mellom åpnet og lukket |
Bruk
Tekst på knappen
Teksten på knappen skal skrives slik at bruker forstår hva som vises i panelet som åpnes. Ofte refererer dette til teksten som ligger over knappen. Eks: Grunnen til at vi spør om dette.
Brukertester har avdekket at teksten på knappen ikke bør skrives som et spørsmål (Hvorfor spør vi om dette?). Det forvirret brukerne.
Det er enklere å forstå hva read more skal forklare om teksten på knappen er kort, helst 1 linje.
Innhold
Innholdet i panelet skal forklare eller gi detaljer til teksten som ligger over. Innholdet bør være så enkelt som mulig. Vi anbefaler vanlig tekst med enkel formatering. For eksempel en liste. Panelet dytter annet innhold på siden nedover, så du må tenke på mengden innhold i panelet. Om det er mye innhold du må scrolle i er det fare for at knappen som lukker panelet forsvinner ut av skjermbildet.
Figma
Text property
Header- og body-tekst er nå definert som text property. Det gjør at teksten kan redigeres i høyrepanelet i Figma. Ganske digg når et tekstlag er gjemt i en tilstand av komponenten.