13 bästa praxis för webbdesign för 2021

numera kan du få en webbplats igång på några minuter. Men det finns en skillnad mellan att en webbplats är live och att den optimeras.

varför spelar design Roll? Det tar bara 0,05 sekunder för människor att bilda sig en uppfattning om din webbplats. Ja, du läste det korrekt-50 millisekunder för att någon ska blåsas bort eller avvisas av din webbplats. Det mesta av denna åsikt bildas av designen.

webbdesign påverkar också dina konverteringar, trovärdighet och i slutändan gör eller bryter framgången för din webbplats. Ingen webbplats är perfekt, men du bör optimera den så mycket som möjligt.

här är något att ta hänsyn till också: efter en dålig upplevelse är 88% av konsumenterna osannolikt att återvända till en webbplats. Dessutom fann en ny studie att 77% av byråerna säger att en dålig webbdesign är den viktigaste svagheten hos sina kunder.

nedersta raden: Om din webbdesign inte är optimerad för användarupplevelse (UX) kommer det att skada din framgång. Därför skrev jag den här guiden.

många faktorer går in på att designa en webbplats. Dessa är de tretton viktigaste elementen att prioritera 2021. Om du följer dessa bästa metoder kommer prestandan på din webbplats att förbättras drastiskt.

använd den här checklistan för att se till att du har en vinnande design

1. minimera text
2. Visa, berätta inte
3. använd korta meningar
4. prova kortare stycken
5. Välj ett färgschema som passar
6. gör din CTA klar
7. förstärka åtgärder med förtrogenhet
8. förenkla navigeringen
9. optimera din design för mobil
10. prioritera seo
11. övervaka din sidladdningshastighet
12. kör kontinuerligt A/B-tester

minimera text

fyll inte dina sidor med massiva block av text.

jag pratar inte om blogginlägg, som ibland behöver gå djupt (som den här!). Jag pratar om dina webbsidor (t.ex. hemsida, målsida). Håll texten till ett minimum här.

du vill berätta för dina webbplatsbesökare allt om dig, ditt företag, ditt varumärke och dina produkter. Men du måste lära dig att berätta den historien på bara några meningar eller—ännu bättre— några ord.

Visa, berätta inte

Visuals hjälper dig inte bara att bryta upp det skrivna innehållet, men de kan också ge djupare förklaring. Visa dina besökare vad du handlar om. De kommer att förstå mer på kortare tid.

Harrys produktsida förkroppsligar båda dessa två första designprinciper:

låt oss till exempel säga att din webbplats säljer rakhyvlar, blad, rakkräm och andra rakprodukter för män.

du använder en affärsmodell för prenumerationer och levererar dessa produkter till dina kunder varje månad. Designen på dina rakhyvlar är väldigt snygg-de är gjorda av snidat lövträ och är trevliga nog att ge som gåva.

i stället för att gå in på all denna detalj på din hemsida kan du helt enkelt få ett foto av dessa produkter med text som säger något som ”levereras till din dörr.”Du får ditt meddelande med bara fyra ord.

Visst, du kan gå in i större detalj ju djupare besökaren kommer in på dina sidor, men en lång textbeskrivning krävs inte.

använd korta meningar

korta meningar är lättare att läsa.

bombardera inte besökare med stora bitar av text. De vet inte var de ska börja läsa och kommer inte att kunna smälta ditt innehåll.

blanda upp det. Om du behöver en lång mening, följ den med en kort. Variety hjälper.

prova kortare stycken

använd styckebrytningar till din fördel. Det är okej att skriva längre stycken, men jag gillar att hålla min hemsida stycken till några meningar.

det är också viktigt att inte överdriva det. För mycket av en bra sak, är faktiskt en dålig sak.

börja varje stycke med ny information, så om någon rullar kan de snabbt berätta om de behöver läsa det stycket.

att eliminera onödig text på dina sidor minskar röran och lägger större vikt vid din uppmaning.

att ha CTA sticker ut ensam i sitt eget stycke är mer effektfullt än att begrava det i en massa text.

ett mycket användbart verktyg i denna situation är kulor. Istället för att lägga till stycken och långformsskrivning, överväg att använda listor. I dessa listor, använd punktpunkter.

studier visar att fler människor kommer att titta på listor med punktpunkter än andra format. Det beror på att de hjälper till att förbättra sidans skanbarhet och låter dig markera de viktigaste punkterna du vill göra.

Välj ett färgschema som passar din varumärkesstrategi

de färgval du gör på din webbplats är viktigare än du tror.

besökare bedömer din webbplats på mindre än 90 sekunder. Det mesta är ett resultat av de färger du väljer.

det bästa sättet att välja din webbplats färgschema är med branding. Se din logotyp. Passar färgerna på din webbplats med din varumärkesimage?

här är ett exempel. Tänk på Starbucks.

när du hör det här varumärket är jag säker på att du har en bild i ditt huvud. Kanske är det logotypen, ett tecken eller en butiksplats.

associerar du några färger med det namnet? Låt oss nu titta på deras hemsida.

det är ingen överraskning att de gick med ett grönt färgschema.

detta designval matchar deras logotyp och varumärkesimage, vilket förstärker vad konsumenterna redan associerar med varumärket. Genom att hålla saker konsekventa finns det ingen förvirring. Det skulle vara konstigt om du besökte denna webbplats och färgerna var gula och röda. Det har ingenting att göra med deras varumärke.

vi pratar mer om förstärkning i större djup när vi fortsätter.

gör din CTA tydlig och uppenbar

CTA bör inte begravas. De måste vara stora, djärva och kraftfulla och de måste tydligt stå ut som de åtgärder som dina besökare ska ta nästa.

ändå har de flesta webbplatser inte en CTA-knapp som kan upptäckas på mindre än tre sekunder. Det finns en god chans att du hamnar i gruppen som tar längre tid. Det är inte den kategorin du vill vara i.

du kan inte köra konverteringar utan en effektiv CTA-knapp.

jag ser nästan aldrig en CTA på ett företags inre sidor (sidorna som förklarar vad ditt varumärke gör och vad du erbjuder). Detta är en stor designfel. Du kan inte förvänta dig att besökare navigerar tillbaka till din hemsida för att konvertera.

ta en titt på denna CTA från Litmus.

titta hur enkelt den här designen är. Det finns minimal text på skärmen, så meddelandet är klart.

som ett resultat sticker CTA ”registrera dig gratis” ut. Faktum är att Litmus till och med lägger den på mer än en plats på skärmen.

där du ska placera din CTA skiljer sig från sida till sida. Till exempel bör blogginlägg ha CTA upp så att läsarna ser det snabbt och även längst ner efter att de har läst inlägget.

gå djupare: vill du optimera dina CTA? Här är 11 sätt att förbättra dina uppmaningar till handling.

förstärka åtgärder med förtrogenhet

om ditt meddelande är detsamma bör din CTA vara densamma på varje enskild sida.

Tänk på hur människor navigerar på din webbplats. Även om du ställer in ett visst flöde kommer inte alla att landa på en sida och konvertera på några sekunder. De kan bläddra runt lite först.

låt oss till exempel säga att du har en e-handelswebbplats. Du bör inte ändra CTA-knappen från sida till sida, vilket skulle se ut så här:

• hemsida: kassan nu
• kategorisida: Köp den idag
• produktsida: Klicka för att köpa

om en besökare ser en av dessa knappar på din hemsida, den andra på en kategorisida och den tredje på en produktsida, finns det ingen förstärkning.

håll istället meddelandet och stilen konsekvent. Här är ett bra exempel från smycken och accessoarer varumärke MVMT.

det spelar ingen roll om du är på deras glasögon, klockor eller smycken sida. Du kommer att se samma” SHOP NOW ” CTA för sina produkter.

varje sida överensstämmer också med deras webbplats övergripande minimalistiska, svartvita design.

applicera denna designprincip på din webbplats också.

Det går utöver CTA-knappen. Tanken är att ha denna typ av förstärkning med så många element som möjligt.

konsistens i språk, meddelanden och design förstärker din varumärkesidentitet och lämnar ett bestående intryck på dina besökares sinnen.

förenkla navigeringen

det borde inte vara svårt för en webbplatsbesökare att hitta vad de letar efter på din webbplats.

sätt dig själv i deras skor. Varför besöker du webbplatsen? Hur uppnår du den uppgiften? Kanske vill du köpa något, få mer information eller se vad som finns att erbjuda. Oavsett den anledningen kan vara, om besökare inte kan räkna ut det snabbt, kommer de att lämna.

det finns bara för mycket konkurrens där ute. Användare har ingen anledning att stå ut med otymplig webbplats navigering. Allt de behöver göra är att lämna din webbplats och hitta vad de behöver någon annanstans.

försök inte att återuppfinna hjulet med en komplex design. Håll fast vid standardformatet.

till exempel placerar de flesta webbplatser navigeringsmenyn horisontellt högst upp på varje sida. Om din meny är någon annanstans kan det förvirra dina besökare.

ju färre alternativ i menyn, desto bättre. Annars blir det för svårt för människor att hitta vad de behöver. Detta begrepp är känt som Hicks lag.

ju fler alternativ du ger någon, desto längre tid tar det dem att fatta ett beslut. Det är därför komplexa mönster och Navigeringar kommer att krossa dina omvandlingsfrekvenser.

det finns ett berömt experiment om detta, kallat jam-studien, som diskuterar valets paradox.

experimentet genomfördes i en lokal livsmedelsbutik. Konsumenterna presenterades med 24 sylt att prova på en dag, och sex sylt på följande dag:

• den större skärmen på dag ett lockade 60% av kunderna, men endast 3% av dessa gjorde ett köp.
• den mindre visningen av sex sylt på andra dagen lockade 40% av kunderna, men 30% av dem köpte.

genom att begränsa val var omvandlingar tio gånger högre. Samma koncept kan tillämpas på din webbplatsnavigering.

eliminera onödiga menyalternativ. Till exempel, istället för att ha en ”hem” – Knapp, Använd bara webbplatslogotypen för att länka tillbaka till startskärmen.

ta en titt på Square hemsida.

designen är super ren. Menyalternativen är extremt begränsade. Detta gör det enkelt för besökare att välja ett urval som passar deras behov.

du kommer att märka att det finns minimal text på skärmen, och CTA är tydlig och uppenbar.

denna typ av design gör det nästan omöjligt för webbplatsbesökare att gå vilse eller förvirrade när de navigerar.

för dig som har många alternativ på din webbplats, till exempel en e-handelsbutik, kan du lägga till ett sökfält för att förenkla navigationsprocessen utan att använda en komplicerad meny. Många mjukvaruföretag sätter sina funktioner i en fliken funktioner snarare än att ha en enskild flik för varje funktion.

optimera din design för Mobila enheter

mobil är hur majoriteten av världen får tillgång till Internet. Det betyder att om du inte är optimerad för mobil kommer din webbplats inte att fungera bra.

ta en titt på dessa data från Hootsuite:

sökmotorer känner igen detta och belönar webbplatser som är mobilvänliga. Här är några fler statistik för att träffa punkten hem:

• Google vet att 87% av smartphone-ägare använder sina enheter för att köra en internetsökning minst en gång per dag.
• 58% av alla Google-sökningar görs från en mobil enhet
• resultatet: 70% av resultaten på första sidan på Google är optimerade för Mobila enheter.

mobil SEO är det viktigaste du kan göra för att ranka bra på Google. Allvar.

om din webbplats inte ser bra ut på en smartphone, kommer folk inte vill stanna kvar. Så se till att dina webbdesigner är mobilvänliga.

gå djupare: vill du lära dig hur du optimerar din webbplats för Mobil? Kolla in vår kompletta guide till en mobilvänlig webbplats.

prioritera SEO

allt du gör på din webbplats behöver ringa tillbaka till SEO.

och det räcker inte att bara lägga till nyckelord här och där. Det är ett webbplatsövergripande system för att förbättra innehållet och obevekligt rikta in specifika ämnesområden för att bygga din webbplatsmyndighet i det området.

till exempel vill en målsida för en e-handelswebbplats fokusera på vissa element på sidan som:

• användbarhet. Hur lätt det är för dina besökare att använda och navigera.
• mobil. Hur din webbplats ser ut och fungerar på en mobil enhet.
• sökordsoptimering. De ord och fraser som du vill rangordna för.
• Interna Länkar. Hur ofta du länkar till andra sidor på din webbplats.
• rubrik. Detta är ofta den största texten på en webbsida. Som sådan, det gör det mesta av tunga lyft på din målsida.

skapa en XML-webbplatskarta. Detta gör det lättare för sökrobotar att analysera innehåll på din webbplats. En webbplatskarta visar bots platsen för sidor på din webbplats, när sidan senast uppdaterades, uppdateringsfrekvensen och förhållandet till andra sidor på din webbplats.

en korrekt webbplatskarta visar Google att du inte har duplicerat innehåll, vilket kan skada din SEO-ranking.

när du utformar din webbplats finns det massor av mindre uppenbara element som påverkar rankningen på Google också.

vi har redan gått igenom några aspekter som du kan förbättra på själva sidan. Men andra element inkluderar:

• domän. Din URL är ganska följd av din google rank. Viktiga faktorer inkluderar att ha ditt sökord i domänen, hur gammal domänen är och vad din domänförlängning är (t .ex .hög kvalitet som .com,. net,. gov,.org kontra icke traditionella förlängningar).
• webbplats kvalitet. Din webbplats måste vara till hjälp för besökare. Viktiga faktorer är en’ Om oss ’- sida, en ’Kontakta Oss’ – sida, hur ofta du uppdaterar din webbplats, hur lätt det är att navigera på din webbplats, drifttid (hur ofta din webbplats kraschar) och SSL-certifikat.
• bakåtlänkar. Detta hänvisar till hur ofta din webbplats är länkad till av andra webbplatser. Det är en avgörande faktor för att ranka bra på Google. Viktiga faktorer inkluderar antalet länkande sidor, kvaliteten och auktoriteten på de webbplatser som länkar till dig, ankartexten de använder för att länka till dig och huruvida dessa länkar kommer från .edu-eller .gov-domäner.

övervaka din sidladdningshastighet

jag vet vad några av er tänker. Vad har sidladdningshastighet att göra med webbdesign? Allt.

visst, laddningstider är relaterade till din webbhotellplan, server, trafik och saker av den typen. Designval kan dock också påverka dina laddningstider.

varje gång du lägger till ett element på din webbplats, särskilt bilder, videor och andra komplexa mediefiler, kan dina laddningstider påverkas. Som sådan kan det sakta ner HTTP-förfrågningar.

långsamma laddningstider leder till höga övergivningshastigheter. Du kan inte ignorera det här. Om dina sidor tar för lång tid att ladda kommer det att bli ett stort problem.

dessutom överger 25% av människor webbplatser som tar mer än fyra sekunder att ladda. Ja, fyra sekunder. Det är allt du har, annars förlorar du 25 av 100 besökare. De flesta besökare förväntar sig att en sida laddas på två sekunder eller mindre.

så hur kan du tillämpa detta på din webbdesign?

• minska filstorlekarna på dina bilder
• dra nytta av webbläsarens cachningsverktyg
• minska HTTP-förfrågningar
• förbättra din TTFB (tid till första byte)
• Minify och kombinera dina filer

det finns många verktyg tillgängliga online hjälpa dig att uppnå dessa saker. Kolla till exempel WordPress Rocket-plugin som en resurs för att minifiera och kombinera dina filer. Och använd verktyget Page Speed Insights från Google för att hjälpa dig att övervaka dina laddningstider när du gör designändringar på din webbplats.

kör kontinuerligt A/B-tester

när det gäller din webbdesign kan du inte bara ställa in den och glömma den.

som jag sa tidigare är ingen webbplats perfekt. Det finns alltid sätt för dig att förbättra din design.

det är därför du behöver köra A/B-test. Dessa gör att du kan göra regelbundna förbättringar på din webbplats och testa element för att se vad som fungerar bäst och, ännu viktigare, vad som inte fungerar alls.

nästan alla delar av din webbplatsdesign kan testas. Du kan till exempel skapa två olika målsidor som har olika CTA men annars är desamma. Om en målsida presterar bättre än den andra, vet du att dess CTA sannolikt får jobbet gjort.

här är några snabba förslag för att komma igång i rätt riktning:

• testa platsen för din CTA-knapp
• testa färgen på din CTA-knapp
• testa CTA-kopian
• testa bilderna som du använder på målsidor
• testa formuleringsvariationer av text på skärmen
• testa storleken på navigeringsfältet

det finns så många alternativ, jag kunde spendera hela dagen på att prata om detta. För dig som inte är bekant med A/B-tester eller behöver lite hjälp, kolla in min guide om allt du behöver veta innan du börjar A/B-testning.

slutsats

att säga att utformningen av en webbplats är viktig skulle vara en underdrift. Dina webbdesignval kommer i slutändan att påverka huruvida din webbplats är framgångsrik eller inte.

• allas webbplats kan förbättras. Använd den här listan som en guide som en resurs för att hjälpa dig att göra dessa förbättringar.
• bli inte överväldigad. Jag säger inte att du behöver implementera alla dessa designförslag över natten, men du måste börja någonstans.
• jag drog inte dessa tankar ur luften. Allt på denna lista stöds av forskning och statistik relaterad till designprinciper.

kom ihåg: varje webbplats är ett pågående arbete. Om du lägger in arbetet och alltid finjusterar din webbplats kommer du att förbättra din kant med dina konkurrenter.

det spelar ingen roll om din webbplats är helt ny eller om den har funnits i ett decennium. Det här är de bästa metoderna för webbdesign som du måste följa 2021.