Separera innehåll med mellanrum
Ett av de viktigaste verktygen för en (webb)designer är mellanrum. Inte paragrafer, rubriker, eller grafik, utan just ytorna mellan dessa element. Mellanrummet kan justeras för att skapa olika resultat; öka mellanrummet för att separera element eller minska mellanrummet för att gruppera relaterade element.
Utan att tänka på detta kan ditt användargränssnitt enkelt feltolkas av användaren. Nedan är ett exempel från den gamla adminpanelen (version 2.6.2) i WordPress. Ser du skillnaden?
Det som stör mig med originalet (vänster) är mellanrummet mellan rubrik och relaterat innehåll. Se hur långt det är från ordet “Genvägar” till texten. Nu ska du titta på avståndet till länkarna ovanför. Rubriken är alltså närmare länkarna ovanför än texten den ska relateras med.
Den horisontala linjen är boven i det här exemplet, då den egentligen inte tillför något. I min variant (till höger) har jag fört samman de element som hör ihop samt flyttat den horisontella linjen till ovanför rubrikerna. Detta för att ytterligare separera innehåll mellan rubriker.
Att tänka på när du designar webb
- Gruppera relaterat innehåll och
- separera tydligt dessa grupper
Användare läser inte igenom varje sida, de överblickar och söker snabbt efter specifik information. Det ska gå på ett ögonblick att se vad som hänger ihop. Detta åstadkommer du lättast genom att relatera och separera innehåll med mellanrum.
Originalartikeln hittar du på Usability Post. Har du exempel och tankar att dela med dig?