Sidlayout: gestaltlagar

Sidan uppdaterades senast: 2005-07-19


[ Hoppa direkt till textinnehållet ] [ Hjälp ] [ Tillgänglighetsinformation ]
Gå till LiU.se

Gestaltlagar

Du kan göra din sida lättare att förstå genom att följa det som i psykologin kallas för gestaltlagar:

  • Arrangera element på sidan i grupper
  • Innesluta element som handlar om samma sak
  • Upprepa form för liknande objekt
  • Variera designen av individuella objekt.

Gruppering

För att indikera att element hör ihop kan du gruppera dom nära varandra, med mellanrum till andra grupper. Eftersom hjärnan är väldigt bra på att känna igen mönster, så bidrar bra grupperingar till att få en lättbegriplig sida. Du bör undvika stora enformiga block.

Inneslutning

Ibland hör grupper av element ihop, men måste dessutom placeras nära element dom inte hör ihop med, eller ännu närmre. Då kan du använda dig av inneslutning, till exempel genom att rita en linje runt de element som hör ihop, eller genom att innesluta dem i ett område med samma färg. Sidhuvuden och sidfötter på sajter brukar vara inneslutna på det sättet.

Upprepning / rytm

Hjärnan är väldigt bra på att känna igen mönster. Det kan du använda dig av i din design. Du kan till exempel använda en rubrikstil för underrubriker på dina sidor, som avviker från resten av sidan, t.ex. med en avvikande färg. Det skapar också en trevlig rytm till sidan, som ser mer sammanhållen ut. Det ger utrymme för att andra aspekter av din layout kan vara varierade.

Variation

Det är bra att vara konsekvent, men det får inte gå till överdrift. Du bör variera din layout, för att göra det enklare att orientera sig på dina sidor. Om du till exempel har en lista med rubriker, så kan du få den varierad genom att ha olika stora rubriker, genom att ha olika mycket text under rubriken, och genom att ha illustrationer. Du kan ha illustrationer till några texter, men inte till andra. Det ger följande fördelar:

  • Enklare att se nytt material. Besökaren har lättare att se om det är någon skillnad på din sida nu, jämfört med vid förra besöket.
  • Enklare att re-orientera sig när man skrollat sidan. När man skrollar sidan är det lätt att tappa kollen på var man var. En varierad layout ger ögat "landmärken" som gör att man lättare re-orienterar sig.
  • En varierad layout kan också göra det enklare att känna igen sig mellan sidor. Om du har en lista med rubriker, som du placerat på olika sidor, så gör en varierad layout med landmärken att den är lättare att känna igen. Annars måste användaren anstränga sig för att se att det är samma lista som visats på en annan sida. Det är viktigt när du utformar din sajt, och använder rubriker som kontext till artikeln.

Linjer och mönster

Du bör också se till att sidelementen bildar snygga linjer och mönster. Om du till exempel har en lista, så bildar listans kant ett mönster. Ofta har du gjort så att den är jämn i höger eller vänsterkant, så att den bildar en linje. Element som t.ex. har jämn högerkant ser då ut att höra ihop. Om olika element på sidan bildar väldigt många olika linjer så kan sidan se rörig ut. Om dom bildar extremt få linjer kan sidan se stel ut. Element som bildar en taggig form, istället för en linje bidrar till att sidan ser levande och dynamisk ut, men om det överdrivs ser sidan rörig ut. Att ha flera element som följer samma linjer över en sida blir ofta snygt, särskilt om det är gjort både horisontellt och vertikalt. Att ha element som följer nästan samma linje blir ofta väldigt fult.

Mer läsning

Sajten Web design from scratch ger exempel på de riktlinjer som presenteras här. Den ger dessutom ytterligare några layoutregler som du kan följa.