Separera innehåll med mellanrum

måndag den 2 februari 2009 två kommentarer

En 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 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 gammal adminpanelen (version 2.6.2) i WordPress. Ser du skillnaden?

Separera innehåll med mellanrum

Det som stör mig med orginalet (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.

Orginalartikeln hittar du på Usability Post. Har du exempel och tankar att dela med dig? Lämna gärna en kommentar.


Jag hoppas du gillade inlägget!

Facebook Delicious RSS Du kan prenumerera på alla inlägg via RSS, e-post eller genom att följa mig på Bloggy.


Kommentarer

Gravatar

Jonas Karlsson sa..

tisdag den 10 februari 2009

Du och Dmitry tycker ganska lika :) Han skrev om det här i höstas nångång tror jag.

Gravatar

Erik Pettersson sa..

torsdag den 12 februari 2009

@Jonas: Skarpt av dig att snappa upp det. Jag missade att referera till Dmitrys artikel på Usability Post, fixat! :)


RSS Lämna en kommentar du också!

Namn: *

E-postadress: (alternativ för att visa din Gravatar)

Webbplats: (självklart får du en länk utan nofollow)

Kommentar: * (ej HTML)