Designprinciper för webbplatser som fungerar
Mycket av det som sägs om webbdesign är preferens presenterad som princip. Det finns dock en liten uppsättning regler som håller i praktiken och som märks när de saknas.
Den här guiden går igenom dem, med vad var och en löser och hur du kontrollerar att den efterlevs.
Hierarki: att säga vad som är viktigast#
Hierarki är den princip som mest påverkar om människor förstår sidan, och den lättaste att kontrollera.
- En sak är viktigast på varje skärm. Finns det tre väljer besökaren ingen.
- Storlek, vikt och utrymme runtom kommunicerar vikt bättre än färg.
- Huvudhandlingen ska sticka ut visuellt från allt annat på sidan.
- Gruppera besläktat med närhet; avstånd kommunicerar åtskillnad.
- Använd inte mer än två eller tre rubriknivåer. Fler läses inte längre som hierarki.
- Testa genom att kisa: det som fortfarande är läsbart är vad människor ser först.
Kisningstestet tar fem sekunder och fångar de flesta hierarkiproblem.
Utrymme, kontrast och läsbarhet#
Tre mätbara saker som skiljer bekväma sidor från tröttsamma.
| Element | Praktisk regel | Vanligt fel |
|---|---|---|
| Radlängd | 60 till 80 tecken | Rader över hela skärmbredden |
| Brödtextstorlek | 16 px eller mer på mobil | 14 px «för att få plats med mer» |
| Radavstånd | 1,5 i brödtext | Tätt radavstånd, kompakt block |
| Textkontrast | Minst 4,5:1 | Ljusgrått på vitt |
| Utrymme mellan sektioner | Generöst och konsekvent | Allt ihopklistrat, ingen luft |
| Träffytor | Minst 44 px | Små länkar på mobil |
| Antal typsnitt | Ett eller två | Fyra typsnitt på en sida |
Konsekvens och tydlighet#
Konsekvens gör att människor kan lära sig webbplatsen en gång istället för att lära om den på varje sida.
- Samma element beter sig alltid likadant på hela webbplatsen.
- Knappar med samma vikt ser alltid likadana ut.
- Länkar går att känna igen som länkar utan att hovra.
- Etiketter säger vad som händer: «Begär offert» istället för «Skicka».
- Skriv på kundens språk, inte internt språk.
- Formulärfel visas vid fältet och säger hur de rättas.
- Element som inte är klickbara ska inte se klickbara ut.
Etikettregeln ger störst avkastning: att byta «Skicka» mot «Begär offert» höjer konverteringen utan att något annat ändras.
Vad som är smak och inte princip#
Upprepade regler som inte håller mot data och som kostar tid i diskussion.
| Påstående | Verklighet |
|---|---|
| Allt måste ligga ovanför vikningen | Människor scrollar; tydlighet betyder mer |
| Färre klick är alltid bättre | Rätt klick slår få klick |
| Karusell på startsidan är obligatorisk | Har oftast mycket låg interaktion |
| Minimalism är alltid bättre | För lite kontext försvårar beslutet |
| Öppna aldrig länkar i nytt fönster | Beror på sammanhang; dokument är undantag |
| Rött är aggressivt | Beror helt på bransch och kultur |
| Sidan måste vara originell | Igenkänning hjälper användningen |
Bekanta mönster är inte brist på kreativitet: de är skälet till att människor kan använda en webbplats de aldrig sett.
Vanliga frågor
Konverterar en snygg webbplats bättre?
En tydlig webbplats konverterar bättre; estetik hjälper genom trovärdigheten den ger de första sekunderna. Estetik fallerar när den konkurrerar med förståelse — animationer som fördröjer, låg kontrast i elegansens namn, kreativa etiketter ingen begriper. Tydlighet först, estetik i tydlighetens tjänst.
Hur många färger ska jag använda?
En varumärkesfärg, en accentfärg för handlingar och en gråskala. Därefter behöver varje extra färg funktionell motivering — fel-, framgångs- och varningstillstånd. Stora paletter gör det svårt att lyfta fram det viktiga, eftersom allt konkurrerar med allt.
Ska jag följa designtrender?
Med måtta. Trender daterar webbplatsen och tvingar fram ombyggnader av estetiska snarare än funktionella skäl. Det som åldras väl är tydlig typografi, generöst utrymme och solid hierarki — principer med decennier på nacken. Anta trender där de är billiga att backa och undvik dem i strukturen.
Hur vet jag om min design fungerar?
Titta på beteendet: når människor huvudhandlingen, eller lämnar de? Var fastnar de i formulär? Sessionsinspelningar och formuläranalys visar detta på minuter. Intern åsikt om estetik är den sämsta tillgängliga indikatorn, eftersom teamet ser webbplatsen dagligen och besökarna en gång.
designprinciper webbplatsvisuell hierarkiläsbarhet webbtextkontrastanvändbarhet webbplatsdesign och konvertering
