De beste grensesnittene er ikke laget for perfekt innhold. De er laget for å være tydelige når etikettene blir lengre, valgene flere og en liten skjerm endrer spillereglene. Denne casestudien bruker et fungerende toppfelt, et personvernvarsel og et språkvalg til å vise robust innholdsdesign i praksis.
1. Navigasjon som gir plass
Hva som skjedde da fem lenker ble til fjorten – og hvorfor det ikke var godt nok å skjule det som ikke fikk plass.
Vi testet toppfeltet med en bevisst overfylt meny. Først forsvant søk og språkvalg utenfor skjermen. Deretter ble de synlige, mens de siste lenkene ble klippet bort. Den ferdige løsningen reserverer plass til viktige handlinger, lar navigasjonslenker brytes over flere linjer og lar toppfeltet vokse uten at siden blir bredere enn skjermen. Dette er robust innhold i praksis: Ingen destinasjon skjules bare fordi redaktøren legger til en lenke.
2. Språkvalg som folk forstår
Flaggene fikk språkkoder, en tydelig pil og et mobiloppsett med en sterkere visuell rytme.
Engelsk, norsk og svensk vises med ekte SVG-flagg og de synlige kodene EN, NO og SE. En pil på 16 piksler viser at kontrollen kan åpnes, aria-expanded formidler tilstanden til hjelpemidler, og menyen viser tydelige flagg på 36 piksler. På mobil flyttes den aktive koden under flagget slik at språkvalget passer naturlig ved siden av menyknappen i stedet for å bli klemt av ordet «Språk».
3. Personvern og søk med tydelig hierarki
To praktiske funksjoner ble forbedret til de føltes som gjennomtenkte deler av produktet.
Personvernvarselet åpner nå med «Vi verdsetter personvernet ditt», har 16 pikslers innvendig avstand, hvit bakgrunn og en diskret #ccc-kant. Hovedknappen for personvernvalg er svart med hvit tekst, og åpneknappen har en tydelig hvit kant på 1 piksel. Søkefeltet er bredere på datamaskin og blir et kompakt felt på 54 piksler på mobil, med en hvit knapp og svart kant plassert pent inne i feltet. Begge løsningene viser hierarki gjennom kontrast, avstand og plassering, uten ekstra forklaringer.
Demosjekkliste: Dette viser siden
En kort oversikt til kundesamtaler, gjennomgang av implementering og overlevering av innhold.
- Innholdet kan vokse uten at navigasjonen skjules Søk og språkvalg beholder plasseringen Datamaskin og mobil får tilpassede oppsett Språkvalg kombinerer visuelle og tekstlige signaler Åpen/lukket tilstand formidles til hjelpemidler Personvernvalg har et tydelig visuelt hierarki Lange tekster begrenses til en behagelig lesebredde SVG-flagg er skarpe i alle størrelser CMS-redaktører kan kombinere løpende tekst med strukturerte faktabokser Den samme innholdsmodellen støtter både redaksjonelle fortellinger og produktdokumentasjon
Sjekkliste for grensesnittet
En kort oppsummering av valgene som gjorde et skjørt toppfelt til et robust grensesnitt.
- 16 px innvendig avstand i personvernvarselet Hvit varselbakgrunn med en diskret #ccc-kant Svart knapp for personvernvalg med hvit tekst 1 px hvit kant på åpneknappen for personvern 260 px søkefelt på datamaskin og 54 px søkekontroll på mobil Tre språkvalg med 36 px flagg og synlige koder EN, NO og SE En pil på 16 px med tilgjengelig informasjon om åpen tilstand Navigasjonslenker som brytes over flere linjer i stedet for å forsvinne Søk og språkvalg som beholder plasseringen til høyre på datamaskin Flagg og språkkode på separate linjer på mobil
