De bästa gränssnitten är inte utformade för perfekt innehåll. De är utformade för att förbli tydliga när etiketterna blir längre, alternativen fler och en liten skärm ändrar spelreglerna. Den här fallstudien använder ett fungerande sidhuvud, ett integritetsmeddelande och en språkväljare för att visa robust innehållsdesign i praktiken.
1. Navigering som ger utrymme
Vad som hände när fem länkar blev fjorton – och varför det inte räckte att dölja det som inte fick plats.
Vi testade sidhuvudet med en avsiktligt överfull meny. Först försvann sökning och språkval utanför skärmen. Därefter förblev de synliga medan de sista länkarna klipptes bort. Den färdiga lösningen reserverar utrymme för viktiga åtgärder, låter navigeringslänkar brytas över flera rader och låter sidhuvudet växa utan att sidan blir bredare än skärmen. Det här är robust innehåll i praktiken: Ingen destination döljs bara för att redaktören lägger till en länk.
2. Språkval som människor förstår
Flaggorna fick språkkoder, en tydlig pil och en mobillayout med en starkare visuell rytm.
Engelska, norska och svenska visas med riktiga SVG-flaggor och de synliga koderna EN, NO och SE. En pil på 16 pixlar visar att kontrollen kan öppnas, aria-expanded förmedlar tillståndet till hjälpmedel och menyn visar tydliga flaggor på 36 pixlar. På mobil flyttas den aktiva koden under flaggan så att språkväljaren passar naturligt bredvid menyknappen i stället för att klämmas ihop av ordet ”Språk”.
3. Integritet och sökning med tydlig hierarki
Två praktiska funktioner förbättrades tills de kändes som genomtänkta delar av produkten.
Integritetsmeddelandet börjar nu med ”Vi värnar om din integritet”, har 16 pixlars inre avstånd, vit bakgrund och en diskret #ccc-kant. Huvudknappen för integritetsval är svart med vit text och öppningsknappen har en tydlig vit kant på 1 pixel. Sökfältet är bredare på dator och blir ett kompakt fält på 54 pixlar på mobil, med en vit knapp och svart kant prydligt placerad inne i fältet. Båda lösningarna visar hierarki genom kontrast, avstånd och placering, utan extra förklaringar.
Demochecklista: Det här visar sidan
En kort översikt för kundsamtal, genomgång av implementation och överlämning av innehåll.
- Innehållet kan växa utan att navigeringen döljs Sökning och språkval behåller sin placering Dator och mobil får anpassade layouter Språkval kombinerar visuella och textbaserade signaler Öppet/stängt tillstånd förmedlas till hjälpmedel Integritetsval har en tydlig visuell hierarki Långa texter begränsas till en behaglig läsbredd SVG-flaggor är skarpa i alla storlekar CMS-redaktörer kan kombinera löptext med strukturerade faktarutor Samma innehållsmodell stöder både redaktionella berättelser och produktdokumentation
Checklista för gränssnittet
En kort sammanfattning av valen som gjorde ett skört sidhuvud till ett robust gränssnitt.
- 16 px inre avstånd i integritetsmeddelandet Vit meddelandebakgrund med en diskret #ccc-kant Svart knapp för integritetsval med vit text 1 px vit kant på öppningsknappen för integritet 260 px sökfält på dator och 54 px sökkontroll på mobil Tre språkval med 36 px flaggor och synliga koder EN, NO och SE En pil på 16 px med tillgänglig information om öppet tillstånd Navigeringslänkar som radbryts i stället för att försvinna Sökning och språkval som behåller sin placering till höger på dator Flagga och språkkod på separata rader på mobil
