De bedste grænseflader er ikke designet til perfekt indhold. De er designet til at forblive tydelige, når etiketterne bliver længere, valgene flere, og en lille skærm ændrer spillereglerne. Denne casestudie bruger et fungerende sidehoved, en privatlivsmeddelelse og en sprogvælger til at vise robust indholdsdesign i praksis.
1. Navigation, der giver plads
Hvad der skete, da fem links blev til fjorten – og hvorfor det ikke var nok at skjule det, der ikke var plads til.
Vi testede sidehovedet med en bevidst overfyldt menu. Først forsvandt søgning og sprogvalg uden for skærmen. Derefter forblev de synlige, mens de sidste links blev klippet væk. Den færdige løsning reserverer plads til vigtige handlinger, lader navigationslinks bryde over flere linjer og lader sidehovedet vokse, uden at siden bliver bredere end skærmen. Dette er robust indhold i praksis: Ingen destination skjules, blot fordi redaktøren tilføjer et link.
2. Sprogvalg, som folk forstår
Flagene fik sprogkoder, en tydelig pil og et mobillayout med en stærkere visuel rytme.
Engelsk, norsk og svensk vises med rigtige SVG-flag og de synlige koder EN, NO og SE. En pil på 16 pixels viser, at kontrollen kan åbnes, aria-expanded formidler tilstanden til hjælpemidler, og menuen viser tydelige flag på 36 pixels. På mobil flyttes den aktive kode under flaget, så sprogvalget passer naturligt ved siden af menuknappen i stedet for at blive klemt af ordet »Sprog«.
3. Privatliv og søgning med tydeligt hierarki
To praktiske funktioner blev forbedret, indtil de føltes som gennemtænkte dele af produktet.
Privatlivsmeddelelsen begynder nu med »Vi værner om dit privatliv«, har 16 pixels indvendig afstand, hvid baggrund og en diskret #ccc-kant. Hovedknappen til privatlivsvalg er sort med hvid tekst, og åbningsknappen har en tydelig hvid kant på 1 pixel. Søgefeltet er bredere på computer og bliver et kompakt felt på 54 pixels på mobil, med en hvid knap og sort kant placeret pænt inde i feltet. Begge løsninger viser hierarki gennem kontrast, afstand og placering uden ekstra forklaringer.
Demotjekliste: Dette viser siden
En kort oversigt til kundesamtaler, gennemgang af implementering og overdragelse af indhold.
- Indholdet kan vokse, uden at navigationen skjules Søgning og sprogvalg beholder deres placering Computer og mobil får tilpassede layouts Sprogvalg kombinerer visuelle og tekstlige signaler Åben/lukket tilstand formidles til hjælpemidler Privatlivsvalg har et tydeligt visuelt hierarki Lange tekster begrænses til en behagelig læsebredde SVG-flag er skarpe i alle størrelser CMS-redaktører kan kombinere løbende tekst med strukturerede faktabokse Den samme indholdsmodel understøtter både redaktionelle fortællinger og produktdokumentation
Tjekliste til grænsefladen
En kort opsummering af de valg, der gjorde et skrøbeligt sidehoved til en robust grænseflade.
- 16 px indvendig afstand i privatlivsmeddelelsen Hvid meddelelsesbaggrund med en diskret #ccc-kant Sort knap til privatlivsvalg med hvid tekst 1 px hvid kant på åbningsknappen til privatliv 260 px søgefelt på computer og 54 px søgekontrol på mobil Tre sprogvalg med 36 px flag og synlige koder EN, NO og SE En pil på 16 px med tilgængelig information om åben tilstand Navigationslinks, der bryder over flere linjer i stedet for at forsvinde Søgning og sprogvalg, der beholder placeringen til højre på computer Flag og sprogkode på separate linjer på mobil
