👉 11 webbdesign principer som kommer att öka din konverteringsfrekvens

31 Smarta blygenererande idéer du kan genomföra omedelbart (uppdaterad)

Vill du öka omvandlingar på din webbplats? Som smart marknadsförare vet kan din design göra skillnaden. I det här inlägget delar vi 11 webbdesignprinciper som ökar din konverteringsfrekvens.

Många marknadsförare harp på vikten av SEO, sociala medier, skapa ledmagneter som konverterar och liknande, men att ha en utmärkt webbdesign till att börja med är så ofta förbisedd. Medan alla dessa komponenter spelar roll, är din webbdesign inte bara ett "sött ansikte": det kan faktiskt göra eller bryta dina konverteringsfrekvenser.

Enligt forskning från Stanford University säger 46,1% att en webbplats design är de bästa kriterierna för att bestämma om ett företag är trovärdigt eller inte. Så det är extremt viktigt att din design ser professionell ut.

Huruvida din webbplats är estetiskt tilltalande spelar också en stor roll i omvandlingsfrekvensoptimering. Med tanke på 15 minuter för att konsumera innehåll skulle två tredjedelar av människor hellre läsa något vackert utformat än någonting vanlig (enligt denna studie av Adobe). Så om du vill att folk ska läsa dina blogginlägg måste de se attraktiva ut.

Men det är inte allt. Om din webbplats är oattraktiv, kommer folk faktiskt att lämna din webbplats helt och hållet. 38% av människorna är exakta. Det är en hel del förlorade ledningar!

Så oavsett om designen är din forte, har du inte råd att missa det. Lär dig webbdesign, hyra en frilansare, anställa en designer eller gör vad som helst!

Till att börja med är här en handfull viktiga konstruktionsprinciper som ger dig en omedelbar och hållbar ökning av omvandlingar …

1. Följ Hicks lag

Hick's Law är en populär teori som citeras av en mängd olika individer för olika ändamål, men refereras ofta när det gäller webbdesign. Uppkallad efter brittisk psykolog William Edmund Hick, säger lagen att den tid det tar för en individ att fatta ett beslut är direkt proportionellt mot de möjliga val som han eller hon har.

Med andra ord, genom att öka antalet val, ökar beslutstiden också.

Bild via Usabilla

Du kanske har hört talas om den berömda studien av psykologerna Sheena Iyengar och Mark Lepper där de upptäckte att ett displaybord med 24 sorter av sylt lockade mindre intresse än ett bord som endast visar sex sorter av sylt. Faktum är att människor som såg den större skärmen bara var en tiondel lika sannolikt att köpa som människor som såg den lilla skärmen!

Det är ett exempel på Hicks lag i aktion: åtgärden går vilse i proportion till antalet val som presenteras.

När det gäller webbdesign kan du öka konverteringar genom att begränsa antalet val som användare har. Det första som kommer att tänka på när man tänker på var man ska minska på antalet val på din webbplats är navigeringsfältet. Självklart vill du inte ha för många länkar att välja mellan, annars kommer användaren att förlora intresset för dem helt och hållet.

Med andra ord, gör inte så här:

Hicks lag upphör dock inte där. Tänk på alla de många olika viktiga besluten som användarna måste göra på din webbplats, förutom just vilken navigationslänk du vill trycka på.

Här är bara några:

  • Bestämmer om navigationsfältet ska användas eller bläddra ner mer på sidan
  • Skumma rubrikerna för att se vilket blogginlägg som ska läsas
  • Bestämmer om du ska ladda ner din ledmagnet, dela ditt inlägg på sociala medier eller lämna en kommentar
  • Välja mellan att göra ett köp, läsa produktrecensioner eller bläddra efter fler produkter

Dessa skrapar bara ytan på de många beslut som dina användare måste göra. Det är normalt att känna sig överväldigad och försöker lista ut var man ska börja skära på dessa beslut, men det finns en enkel metod att använda Hicks lag i en nypa …

Allt du behöver göra är att installera en helskärms-välkomstport på din hemsida. En välkommen port täcker hela skärmen med ett enda samtal till handling, så användaren ser bara ett val tillgängligt först. Om de vill se fler val måste de rulla ner.

Detta gör att du kan minimera distraktioner på din hemsida, samtidigt som funktionen på din hemsida är intakt.

Sammantaget är det viktigt att du vet vilka åtgärder som är viktigast för din botten när du tillämpar Hick's Law på din webbplats. Till exempel vill du att användarna ska välja in för din ledmagnet, eller vill du att de ska lägga en produkt i sin kundvagn? Varje sida på din webbplats ska uppnå ett huvudmål.

Ju mer du kan begränsa din användares val, desto lättare kommer din webbplats att vara, och dina omvandlingar kommer att höjas.

2. Utnyttja regeln för tredjedelar

Tredje regeln är en populär fotografiprincip som även kan tillämpas på webbdesign. Med tredjedelsregeln ska du visuellt dela upp en bild (eller webbsida) till tredje part (både vertikalt och horisontellt).

Detta ger dig nio lika stora kvadrater:

Enligt regeln är de fyra mittkorsningarna strategiska intressanta platser. När objekt placeras på dessa punkter skapar det den mest effektiva bilden eller designen.

När det gäller webbdesign kan du placera sidans viktigaste element vid dessa korsningar för att få människor att fokusera på dem, vilket ökar dina konverteringar.

Till exempel har Chris Las hemsida de viktigaste elementen (testamentet och "Start här" -knappen) på de två vänstra korsningarna:

John Lee Dumas hjältebild innehåller en anropsknapp till höger längst ned till vänster skärningspunkten:

Kissmetrics placerar också deras anrop till åtgärdsknapp längst ned i vänstra korsningen:

Lägg märke till hur ingen av dessa webbplatser placerar sin navigeringsfält någonstans nära korsningarna.Detta bidrar till att hålla besökarna inriktade på huvudåtgärden på sidan, i stället för att leda sitt öga för att navigera någon annanstans.

Du behöver inte utforma hela din webbplats strängt enligt regeln för tredje part, utan du kan använda den som ett verktyg för att hjälpa dig att placera dina viktigaste element.

Prova att ta en skärmdump av din webbplats (precis ovanför veckan eller bara rubriken, inte hela längden på sidan eftersom ingen tittar på en webbplats så) och dela upp den i nio lika stora rutor. Då kan du bestämma om du vill göra några tweaks.

3. Respektera användarnas tålamod

(Eller snarare, jag ärtålamod.) Det visar sig att människor är otroligt otåliga, särskilt när det gäller att surfa på webben.

Enligt en studie från Aberdeen-gruppen resulterar bara en sekundsfördröjning av sidlastningstid en minskning med 7% i omvandlingar!

Så när det gäller sidlastningshastighet, räknas varje sekund. Om du vill kontrollera din sidhastighet och felsöka några problem kör du din webbplats genom ett eller flera av dessa kostnadsfria verktyg:

  • Google PageSpeed ​​Insights
  • Pingdom
  • GTmetrix
  • KeyCDN
  • Sucuri

4. Använd negativt utrymme

I webbdesign kallas blankutrymme ofta som negativt utrymme. Positivt utrymme är det utrymme som innehåller alla element på din webbplats, medan negativt utrymme är allt tomt utrymme däremellan.

Trots namnet är negativt utrymme faktiskt a positiv sak i webbdesign, för utan din webbplats skulle vara oläslig och oanvändbar.

Negativt utrymme refererar inte bara till utrymmet mellan de större elementen på din sida, till exempel mellanrummet mellan din rubrik och ditt innehåll, eller mellanrummet mellan din sidofält och ditt innehåll. Det hänvisar också till mellanslag mellan alla de mindre elementen på din sida, som mellanrummet mellan punkter, mellanrummet mellan textrader och till och med mellanslag mellan bokstäver.

Att uppmärksamma Allt av formerna för negativt utrymme på din webbplats tjänar till att hålla allt läsbart, skannbart (mycket viktigt, för det är det sättet man läser webbplatser) och lätt på ögonen. Och självklart leder allt detta till ökade konverteringar.

Flat.io använder ett ton negativt utrymme på sin hemsida för att hålla fokus på deras huvudsakliga uppmaning till handling, vilket är att anmäla sig till Google eller Facebook.

Här är några tips för att se till att du använder tillräckligt med negativt utrymme:

  • Ju mindre typsnittet är, ju mer utrymme du behöver mellan bokstäverna.
  • Din linjehöjd (definierar utrymmet ovanför och under textrader) ska vara ungefär 150% av teckenstorleken för kroppskopia (i CSS skulle detta läsa:linjehöjd: 1,5;).Bild via Pearsonified
  • Men mindre teckensnitt behöver mer generösa linjer. Observera skillnaden som en större linjehöjd gör i de två styckena nedan:Bild via W3.org
  • Dela upp stora block av text i mindre stycken för att öka det negativa utrymmet mellan dem och göra dina blogginlägg mer läsbara.
  • Lägg till ett mellanslag mellan de större elementen på din webbplats (sidobar, sidhuvud, kropp, sidfot etc.) med rikliga marginaler och vadderingar.

5. Överväg F-Layout

Forskare har funnit att användarens naturliga beteende när man surfar på webben är att läsa skärmen i ett "F" -mönster.

Här är en värmekarta som visar var användarens ögon landar på en webbsida:

Bild via Envato

Och här är det som ser ut som en wireframe:

Som man ser ser man först från vänster till höger längst upp på skärmen. Sedan skannar de sidan neråt, vilket gör små forays till innehållet. Området på en sida som får minst synlighet är längst ned till höger.

Så vad betyder detta för att öka dina omvandlingar? Tja, du kan dra nytta av detta beteende genom att placera de viktigaste föremålen och samtal till handling längs F-form linjerna och placera objekt av mindre betydelse i områden med lägre synlighet.

Du kan till exempel placera ditt huvudanrop till handling längst upp på sidan mot vänster sida eftersom det är där användaren kommer att se först ut.

Om du vill att användaren ska hålla sig fast för att läsa dina senaste blogginlägg kan du placera de här rubriken längst ner till vänster på sidan. Mindre viktig information (som sponsrade annonser) kan gå i sidofältet på höger sida av din sida och du kan placera informationen som du vill få lägsta sikten (till exempel en cookie policy) sidans hörn.

6. Färgämnen

"Färg är en ofta underrated aspekt av webbdesign, men det kan spela en mycket viktig roll i användbarheten, samt förmedla den övergripande betydelsen av ett varumärke såväl som den allmänna stämningen på webbplatsen, säger designer Tom Kenny. "Olika färgkombinationer kan framkalla olika känslor och reaktioner."

När du väljer ett färgschema för din webbplats, se till att du väljer en kombination som framkallar känslor som du vill att ditt varumärke ska förmedla.

Ett praktiskt sätt att göra detta är att curating ett Pinterest-bord med bilder som speglar din vision för ditt varumärke. Sedan kan du ladda upp några av dessa bilder till Adobes färghjul med hjälp av kamerans ikon i övre högra hörnet av skärmen.

När bilden har laddats upp skapar den automatiskt ett färgschema för dig baserat på färgerna på fotot. Du kan också flytta markeringarna om du vill anpassa de enskilda färgerna.

När du har skapat ditt färgschema finns det en viktig sak att tänka på som kommer att göra eller bryta dina omvandlingar:

Kontrast.

Använd kontrast för att hålla texten, rubrikerna och knapparna till åtgärdsknapparna märkbara och läsbara. Med andra ord bör dina teckensnitt och knappfärger stå i hög kontrast med bakgrunden (t.ex.vit bakgrund med svart text) och de element som du vill markera (t.ex. prenumerera knappar) ska vara i en färg som sticker ut från resten av din webbplats.

Så om vi skulle använda det färgschema som vi skapade ovan skulle vi vilja göra nyanser av blå den övervägande färgen och använda den ljusgula sparsamt som en åtgärdsfärg (eftersom det ger mest kontrast).

Låt oss titta på MailChimp till exempel. Vilka element drar ditt öga?

Jo självklart är bilden i mitten med kvinnan väldigt iögonfallande, men de två orange knapparna till handlingsknappar är verkligen uppmärksamhetsfyllda. Det beror på att de står i skarp kontrast till alla blues på resten av sidan.

När det gäller att välja rätt färger för dina knappar, kan du kolla in vår artikel där färgknappen konverterar bäst (här är vilken forskning som visas).

7. Kom ihåg att K.I.S.S.

Du har förmodligen hört "Håll det enkelt, dumt" mantra innan. Tja, det gäller även webbdesign.

Enkelhet är super viktig när det gäller att driva omvandlingar. När du skapar en sida, fråga dig själv om det finns ett sätt att göra det enklare. Resultatet är vanligtvis mer estetiskt tilltalande och det omvandlas nästan alltid bättre.

Kom ihåg Hicks lag? Det kommer in i spel här, men enkelheten är mer än bara att begränsa alternativen. Det handlar om att skapa en ren övergripande design som är enkel och minimerar distraktioner.

I likhet med Hicks lag är det faktum att människor bara kan hantera så mycket information på en gång. Visuellt, om vi ser för mycket saker allt ihop på en sida, blir vi överväldigade och det stör oss. Att skapa en bra användarupplevelse på din webbplats innebär att bli av med något Det är inte absolut nödvändigt för designen.

Apple är ett av de bästa exemplen på enkelhet i webbdesign, och det är så effektivt att otaliga andra märken har följt efter.

8. Använd 8-sekunders regel

Den allmänna tumregeln är att du bara har 8 sekunder för att få besökarens uppmärksamhet, för det är längden på den mänskliga uppmärksamhetsspänningen. (Ja, det är kortare än en guldfisk!)

Du har bara ett mycket litet fönster med möjlighet att engagera en användare när de först landar på din webbplats, så gör de sekunderna räkna!

Här är några tips för att fånga uppmärksamhet och öka konverteringar inom de första 8 sekunderna:

  • Använd en stor, nytta-driven rubrik som är kort och till den punkten.
  • Använd iögonfallande bilder som förmedlar huvudpunkten eller syftet med din sida och gör ögat mot ditt huvudsakliga uppmaning till handling.
  • Gör anmälningsknapparna stora, enkla och klara.
  • Använd kraftord för att göra din kopia mer lockande och engagerande.
  • Inkorporera multimedia som video, ljud eller annat interaktivt innehåll.
  • Använd svängverkan på dina knappar (t ex att de ändrar färg på mus-över) för att göra dem mer tillfredsställande att klicka.
  • Använd animerade exit-popup-fönster för att engagera besökare som förlorat intresse.

9. Kom ihåg Gestalt Likhetsprincipen

Gestalt-designprinciperna kan sammanfattas av detta uttalande från Gestaltpsykologen Kurt Koffka: "Hela är andra än summan av delarna. "I grund och botten uppfattar det mänskliga ögat och hjärnan en enhetlig design på ett annat sätt än de uppfattade de enskilda komponenterna i den designen.

Den första Gestalt-principen är lagen om likhet, som säger att människans öga / hjärna tycker om att gruppera liknande föremål tillsammans. Det är en mekanism som gör att vi kan känna av saker och organisera bullriga miljöer.

När det gäller webbdesign kan du utnyttja denna lag genom att gruppera objekt som du vill vara associerade med varandra, till exempel testrutor, konverterings knappar eller bilder.

Om du till exempel har en fantastisk recension och du vill använda den för att öka konverteringarna på din inloggningsformulär, kan du placera den direkt under formuläret. Även om testet inte skrivits specifikt med avseende på din ledmagnet, kommer användaren att associera de två eftersom de är i närheten.

via Chris Lema

Lagen om likhet är också viktig för användarupplevelsen. Genom att gruppera alla huvudelement i din anmälningsblankett tillsammans (rubrik, beskrivning och opt-in-knapp) och hålla dem tillräckligt långt borta från de andra elementen på din sida (med negativt utrymme) kommer användarens hjärna att kunna att bearbeta informationen snabbare och mer effektivt.

Det här är givetvis bra för omvandlingar, särskilt för att vi, som vi sa i den föregående punkten, har en mycket kort uppmärksamhet!

10. Använd ansikten för att öka kännedom

Människor älskar mänskliga ansikten. "När vi ser ett ansikte utlöses vi automatiskt för att känna något eller att empati med den personen", säger designer Sabina Idler. "Om vi ​​känner igen innehåll på en webbplats – som ett problem, dilemma, vana eller vad som helst annat – vi känner oss anslutna och förstår."

Se till att inse ansikten i dina artiklar, fallstudier och testimonials, inloggningssidor och målsidor för att öka dina konverteringar.

Om du är ansiktet på ditt varumärke, är det enkelt att göra. Få en fotografering klar och se till att fotografen tar massor av horisontella skott med negativt utrymme på ena sidan av dig. På så sätt kan du ringa till handling eller någon text där.

Här är ett exempel från Melanie Duncan:

Men om du inte är ansiktet på ditt varumärke kan du fortfarande använda ansikten på din webbplats genom att hyra modeller eller använda lagerfoton. Se bara till att ansikten du väljer representerar ditt varumärke exakt, så att användaren kommer att kunna relatera till ansiktet.

Vendeve, ett socialt nätverk för kvinnliga entreprenörer, gör ett bra jobb med detta genom att använda ansikten som speglar deras måldemografiska:

11. Källa Högkvalitativa bilder

Om det finns en sak som verkligen kan dra ner kvaliteten på ett blogginlägg eller en del innehåll, är det bilder av låg kvalitet.

Faktum är att bilder kan göra eller bryta en affär. Bright Local fann att 60 procent av konsumenterna är mer villiga att överväga sökresultat som innehåller bilder, och ytterligare 23 procent är mer benägna att kontakta ett företag som visar en bild.

Specifikt bör du undvika att använda livlösa lager bilder som är irrelevanta och intetsägande. Forskning från Skyword fann att om ditt innehåll innehåller övertygande bilder får du i genomsnitt 94% fler synpunkter!

Så, i stället för att använda dyra bilder, källa högkvalitativa bilder som utvecklar positiva föreningar med innehållet och den känslan personlig. Kom ihåg att människor som märken som de känner liknar dem själva. Om din bildspråk är för "täppt" eller "företag", så slår du dina besökare bort.

Här är några av våra favoritplatser för att hitta gratis lagerfotografi som är högkvalitativ och personlig:

  • Pexels
  • Död till lager
  • StockSnap
  • Unsplash
  • Superfamous Studios
  • Negativt utrymme
  • Gratisography
  • Lite visuella
  • Picjumbo
  • Kaboompics

Nu när du förstår dessa 11 webbdesign principer, sätta dem till nytta genom att ta en hård titt på din befintliga design. Vilka principer bryter du?

Har du för många navigationslänkar? Inte tillräckligt med negativt utrymme? Eller kanske har du inga ansikten på din webbplats?

Många av dessa problem fixas snabbt och enkelt med bara några tweaks. Du kan köra en omvandlingsfrekvensrevision för att se var din webbplats kan använda en boost.

Om du också haft den här artikeln kanske du vill kolla in vårt andra inlägg på 4 designtips för att förbättra webbplatsens konverteringsfrekvens.

Like this post? Please share to your friends:
Kommentera

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: