Artikel först publicerad 2014, senast uppdaterad i juli 2018

En hemsida eller webshop med enhetlig design gör upplevelsen bättre för dina besökare och sparar dig både tid och pengar. Följer din webbplats kriterierna?

Vad är enhetlig design?

Enhetlig eller konsekvent webbdesign handlar om att skapa din hemsida eller webshop med sammanhängande och logisk design som gör det enkelt för dina besökare att navigera och hitta rätt. Alla undersidor ska hänga ihop och ha samma färger, typsnitt, placering av objekt och liknande. Konceptet kan delas upp i estetiskt enhetlig design och beteendemässigt enhetlig design.

Estetiskt enhetlig design

Estetiskt enhetlig webbdesign handlar om saker som färgval, typsnitt, former och annat som besökarna ser när de besöker din webbplats. Din webbplats framstår som mer seriös om du har samma grafiska riktlinjer genomgående för alla undersidor. Då slipper besökarna undra om de lämnat den när saker plötsligt ser annorlunda ut.

Beteendemässigt enhetlig design

Med beteendemässigt enhetlig design menar vi hur webbplatsen är uppbyggd när det gäller placering av menyer, knappar och andra interaktiva element samt vad som händer när besökaren klickar på något.

Webbanvändare är vana vid att saker finns på ett visst ställe och fungerar på ett visst sätt och du kan göra deras upplevelse enklare genom att följa de oskrivna regler som finns.

Det tar en stund att lära sig att navigera på en ny webbplats. För varje undersida dina besökare surfar in på blir de snabbare och säkrare och målet ska vara att de inte behöver tänka på hur de ska hitta eller vart de ska klicka. Om du har en splittrad upplevelse där olika sidor är designade på olika sätt måste besökarna lära sig på nytt och tillslut tröttnar de och går till en konkurrent med mer enhetlig webbdesign.

Varför ha enhetlig webbdesign?

Professionellt och tryggt

Webbplatsen framstår som mer professionell och visar att den inte är byggd av någon som bara testar och experimenterar med ”modern” design. Detta gör dina besökare tryggare.

Lättare att navigera

Enhetlig design håller samman webbplatsen och gör det lättare för dina besökare att snabbt hitta informationen de är ute efter. Eftersom designen är logisk, konsekvent och känns igen från andra webbplatser slipper de känna sig dumma och lära sig nya sätt att navigera på olika undersidor. Tack vare detta kan de fokusera helt på innehållet istället för på att hitta rätt och lära sig navigera.

Sparar tid och pengar

Med enhetlig design jobbar du utifrån samma stilmallar när du skapar nytt innehåll till din webbplats vilket sparar mycket tid gentemot att skapa ny design för olika undersidor. Den tiden kan du istället lägga på att skapa bra innehåll som genererar inkomster till företaget.

Ökar din försäljning

Med en bättre och mer konsekvent upplevelse kommer dina besökare få mer tid över till att surfa runt bland din information och dina produkter. Detta leder till att färre besökare lämnar webbplatsen och fler konverterar och blir kunder.

Hur skapar du enhetlig webbdesign?

Placering av menyer

Placera dina menyer så att de är lätta att komma åt och se till att de konsekvent är på samma ställe, oavsett vart man är på webbplatsen. Exempelvis kan huvudmenyn ligga horisontellt längst upp på sidan och undermenyn vertikalt i vänsterspalten. Varje gång du krånglar till navigeringen för dina besökare riskerar du att de lämnar dig och går till dina konkurrenter.

Riktlinjer för färger och typsnitt

Ha tydliga riktlinjer över vilka färger som får användas på webbplatsen, max 4-5 stycken som gärna passar bra ihop. Vad gäller typsnitt räcker det ofta med två olika som du jobbar med i olika varianter. Exempelvis kan huvudrubriker (H1) vara i fetstil och extra stora. Samma stil genomgående på webbplatsen hjälper besökarna att snabbt förstå vad som är viktigast, vad som är en bildtext etc.

Andra läste även: Konsten att välja färger till din hemsida

Riktlinjer för knappar, ikoner och länkar

Skapa även riktlinjer för hur knappar ska se ut, vart de ska placeras och vad som händer när man klickar på dem. Det ska vara samma funktionalitet på alla undersidor. Ikoner bör ha samma formspråk och storlek och länkar samma färg och stil. Det ska vara tydligt vart man kan klicka och vad som kommer hända när man klickar.

Layoutmallar

Skapa några få layoutmallar för ditt innehåll och håll dig till dem när du lägger upp nya sidor. Enhetlig struktur av text och bilder får besökarna att känna sig hemma och gör det lättare att läsa flera artiklar eller titta på flera produkter.

Med ett fåtal layoutmallar som i bilderna ovan får du relativt fria händer trots att du jobbar med enhetlig design. Att jobba efter mallar sparar dessutom tid när du bygger upp nya undersidor.

Besökarnas externa influenser

Om du skulle läsa ett magasin och innehållsförteckningen dök upp på mittuppslaget, hur skulle du reagera då? Konstigt va? Den ska ju vara på en av de första sidorna! Precis som för printmedia finns det en del oskrivna regler för hur en webbplats ska vara. Detta kallar vi externa influenser. Det är vad dina besökare är vana vid och förväntar sig. Allt annat måste de lära sig och det äter av tiden de lägger på din webbplats.

Håll dig till reglerna om du inte har en vettig anledning att inte göra det. Överdrivet kreativ design kan göra besökarna förvirrade och det är sällan positivt.

Här kommer några av de oskrivna reglerna för hur en webbplats ska designas:

• Logotyp uppe till vänster, klick leder till startsidan.
• Meny i toppen
• Eventuella breadcrumbs (meny som visar vart i strukturen man är) horisontellt under toppmenyn.
• Huvudinnehållet i mitten.
• Relaterat innehåll och/eller annonser i högerspalten.
• Eventuell sökfunktion uppe till höger.
• Sidfot med vanligt besökta sidor och/eller företagsinformation.

Förväntad funktionalitet

Externa influenser inrymmer också vad dina besökare förväntar sig kunna hitta för information och länkar på startsidan. Titta dig omkring bland dina konkurrenter. Finns det några viktiga länkar eller funktioner som finns med på allas startsidor? Då är sannolikheten stor att dina besökare kommer förvänta sig samma hos dig.

Ett exempel är webbplatser där kunder eller medlemmar kan logga in för att nå sina sidor. Då finns nästan alltid Logga in-knappen uppe till höger. Placerar du din Logga in-knapp nere till vänster för att du tycker det är snyggt blir dina kunder frustrerade av att du bryter mot normen.

Uppdatera även dina gamla undersidor

Du har säkert ett gäng undersidor som ligger och skräpar och inte används mycket men ändå syns i Googles sökresultat och får besök då och då. Enhetlig webbdesign innebär att du måste uppdatera även gamla sidor till samma stil som de nya. Ett plötsligt besök på en undersida designad på 90-talet kan skrämma iväg även den mest köpbenägne besökaren.

Enhetlig webbdesign i korta drag

Webbanvändare har en hel del förutfattade meningar om hur en webbplats bör vara och ju mer du håller dig till de oskrivna reglerna, desto enklare blir det för dina besökare att navigera. Är det enkelt att navigera kan de fokusera på ditt innehåll och det leder till fler affärer och nöjdare besökare.

Enhetlig webbdesign innebär att du nitiskt följer ett gäng riktlinjer när det gäller hur alla undersidor på din hemsida eller webshop ska se ut och fungera. Du ska konsekvent använda dig av samma menyer, färger, typsnitt, knappar, struktur av innehåll och placering av nyckelfunktioner. Utöver nöjdare besökare och fler affärer sparar detta arbetssätt tid då du inte behöver uppfinna hjulet varje gång du ska bygga ut webbplatsen med nytt innehåll.

Se över din egen webbplats. Har alla undersidor en enhetlig design, både när det gäller form och funktion? Känns det sammanhängande? Fungerar navigationen likadant överallt? Följer du de oskrivna reglerna? Börja sätta upp riktlinjer för hur det ska vara och följ dem sedan till 100% så kommer du få nöjdare besökare som köper mer och rekommenderar dig till sina vänner.