11 Webdesign principper, der vil øge din konverteringsfrekvens

31 Clever Lead Generation Ideer Du kan implementere øjeblikkeligt (opdateret)

Ønsker du at øge konverteringer på dit websted? Som smart marketingfolk ved, kan dit design gøre hele forskellen. I dette indlæg deler vi 11 webdesign principper, der vil øge din konverteringsfrekvens.

Mange marketingfolk harp på betydningen af ​​seo, sociale medier, skabe bly magneter, der konverterer og lignende, men at have et fremragende website design til at begynde med er så ofte overset. Mens alle disse komponenter gør noget, er dit webdesign ikke bare et "smukt ansigt": det kan faktisk gøre eller ødelægge dine konverteringsfrekvenser.

Ifølge forskningen fra Stanford University siger 46,1% af folk, at et websteds design er de bedste kriterier for at beslutte, om et selskab er troværdigt eller ej. Så det er ekstremt vigtigt, at dit design ser professionelt ud.

Uanset om dit websted er æstetisk tilfredsstillende spiller det også en stor rolle i optimeringen af ​​konverteringsfrekvensen. I løbet af 15 minutter for at forbruge indhold, ville to tredjedele af mennesker hellere læse noget smukt designet end noget almindeligt (ifølge denne undersøgelse fra Adobe). Så hvis du vil have folk til at læse dine blogindlæg, skal de se attraktive ud.

Men det er ikke alt. Hvis din hjemmeside er uinteressant, vil folk rent faktisk forlade dit websted helt. 38% af befolkningen er nøjagtige. Det er en masse tabte kundeemner!

Så uanset om design er din forte, har du ikke råd til at overse det. Lær webdesign, ansæt en freelancer, ansat en designer eller gør hvad det kræver!

Til at begynde med er her en håndfuld vigtige designprincipper, der giver dig et øjeblikkeligt og bæredygtigt boost i konverteringer …

1. Følg Hick's Law

Hick's Law er en populær teori, der er citeret af en række individer til forskellige formål, men er ofte henvist til webdesign. Opkaldt efter britisk psykolog William Edmund Hick, hedder loven, at den tid det tager for en person at træffe en beslutning, er direkte proportional med de mulige valg, han eller hun har.

Med andre ord, ved at øge antallet af valg, øges beslutningstiden også.

Billede via Usabilla

Du har muligvis hørt om den berømte undersøgelse af psykologerne Sheena Iyengar og Mark Lepper, hvor de fandt ud af, at et skærmbord med 24 slags syltetøj tiltrak mindre interesse end et bord med kun seks sorter af syltetøj. Faktisk var folk, der så den større skærm, kun en tiendedel så tilbøjelige til at købe som folk der så den lille skærm!

Det er et eksempel på Hicks lov i aktion: Handlingen går tabt i forhold til antallet af valg, der præsenteres.

Med hensyn til webdesign kan du øge konverteringer ved at begrænse antallet af valg, brugerne har. Det første, der kommer til at tænke på, når man tænker på, hvor man skal skære ned på antallet af valg på din hjemmeside, er navigationslinjen. Du vil selvfølgelig ikke have for mange links at vælge imellem, ellers vil brugeren miste interessen for dem helt.

Med andre ord, gør ikke dette:

Hicks lov stopper dog ikke der. Tænk på alle de mange forskellige vigtige beslutninger, som brugere skal lave på din hjemmeside, bortset fra, hvilken navigationskobling der skal trykkes på.

Her er blot nogle få:

  • Bestemmer, om du skal bruge navigationslinjen eller rul ned på siden mere
  • Skumme overskrifterne for at se, hvilket blogindlæg der skal læses
  • Bestemmer, om du skal downloade din blymagnet, dele dit indlæg på sociale medier eller send en kommentar
  • Vælge mellem at foretage et køb, læse produktanmeldelser eller søge efter flere produkter

Disse skraber kun overfladen af ​​de mange beslutninger, som dine brugere skal lave. Det er normalt at føle sig overvældet og forsøger at finde ud af, hvor man skal begynde at skære ned på disse beslutninger, men der er en simpel måde at bruge Hick's Law i en kniv …

Alt du skal gøre er at installere en fuldskærms velkomstport på din hjemmeside. En velkomstport dækker hele skærmen med et enkelt opkald til handling, så brugeren kun ser et valg til rådighed først. Hvis de ønsker at se flere valg, skal de rulle ned.

Dette giver dig mulighed for at minimere distraktioner på din hjemmeside, mens du stadig holder funktionaliteten på din hjemmeside intakt.

Når du anvender Hick's Law på din hjemmeside, er det generelt vigtigt at vide, hvilke handlinger der er mest vigtige for din bundlinje. For eksempel ønsker du, at brugerne skal logge ind for din blymagnet, eller vil du have dem til at lægge et produkt i deres indkøbskurv? Hver side på dit websted skal nå et hovedmål.

Jo mere du kan begrænse dine brugeres valg, jo lettere dit websted vil være at bruge, og dine konverteringer vil skyde op.

2. Udnytte reglen for tredjedele

Tredje regel er et populært fotografibegreb, som også kan anvendes til webdesign. Med tredjedelsregel skal du visuelt dele et billede (eller en hjemmeside) til tredjedele (både lodret og vandret).

Dette giver dig ni lige firkanter:

Ifølge reglen er de fire midterkrydsninger strategiske steder af interesse. Når genstande placeres på disse punkter, skaber det det mest effektive billede eller design.

Med hensyn til webdesign kan du placere sidernes vigtigste elementer ved disse kryds og få folk til at fokusere på dem, hvilket øger dine konverteringer.

For eksempel har Chris Lemas hjemmeside de vigtigste elementer (testimonialen og "Start Here" -knappen) på de to venstre kryds:

John Lee Dumas heltebillede indeholder et opkald til handlingsknap lige nederst til venstre i krydset:

Kissmetrics placerer også deres opfordring til handlingsknap i nederste venstre kryds:

Bemærk, hvordan ingen af ​​disse websteder placerer deres navigationsbjælke hvor som helst i nærheden af ​​krydsene.Dette hjælper med at holde besøgende fokuseret på den vigtigste opfordring til handling på siden, i stedet for at lede deres øje til at navigere et andet sted.

Du behøver ikke designe hele din hjemmeside strengt efter reglerne for tredjedele, men du kan bruge det som et værktøj til at hjælpe dig med at placere dine vigtigste elementer.

Prøv at tage et skærmbillede af din hjemmeside (lige over folden eller bare din overskriftsafdeling, ikke hele længden af ​​siden, fordi ingen ser på en hjemmeside på den måde) og opdele det i ni lige firkanter. Derefter kan du bestemme, om du vil lave nogen tweaks.

3. Respekter brugerens tålmodighed

(Eller hellere, Jeg ertålmodighed.) Det viser sig, at folk er utroligt utålmodige, især når det kommer til at surfe på internettet.

Ifølge en undersøgelse fra Aberdeen-koncernen resulterer kun en sekunders forsinkelse på sideindlæsningstiden i en omsætning på 7%!

Så når det kommer til sideindlæsningshastighed, tæller hvert sekund. For at kontrollere din sidens hastighed og fejlfinding af eventuelle problemer skal du køre dit websted gennem et eller flere af disse gratis værktøjer:

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

4. Brug negativt rum

I webdesign betegnes whitespace ofte som negativt rum. Positivt mellemrum er det rum, der indeholder alle elementerne på dit websted, mens negativt rum er alt det tomme mellemrum.

På trods af navnet er negativt rum faktisk a positiv ting i webdesign, fordi uden det ville dit websted være ulæseligt og ubrugeligt.

Negativt rum henviser ikke kun til mellemrummet mellem de større elementer på din side, f.eks. Mellemrummet mellem dit overskrift og dit indhold eller mellemrummet mellem din sidebjælke og dit indhold. Det refererer også til mellemrummet mellem alle de mindre elementer på din side, som mellemrummet mellem afsnit, mellemrummet mellem tekstlinjer og endda mellemrummet mellem bogstaver.

Vær opmærksom på alle af formerne for negativt rum på dit websted tjener til at holde alt læseligt, scannable (meget vigtigt, fordi det er den måde folk læser websteder på) og let på øjnene. Og selvfølgelig fører alt dette til øgede konverteringer.

Flat.io bruger et ton negativt rum på deres hjemmeside for at holde fokus på deres vigtigste opfordring til handling, som er at tilmelde dig med Google eller Facebook.

Her er nogle tips til at sikre, at du bruger nok negativt rum:

  • Jo mindre din skrifttype er, desto mere plads skal du have mellem bogstaverne.
  • Din linjestørrelse (definerer mellemrummet over og under tekstlinjer) skal være ca. 150% af skriftstørrelsen for body copy (i CSS, ville dette læse:linjens højde: 1,5;).Billede via Pearsonified
  • Men mindre skrifttyper har brug for mere generøse liniehøjder. Bemærk forskellen, at en større liniehøjde gør i de to afsnit nedenfor:Billede via W3.org
  • Opsæt store tekstblokke i mindre afsnit for at øge det negative mellemrum mellem dem og gøre dine blogindlæg mere læsbare.
  • Tilføj hvidt mellemrum mellem de større elementer på dit websted (sidebjælke, overskrift, krop, sidefod osv.) Ved hjælp af rigelige margener og polstring.

5. Overvej F-Layout

Forskere har fundet ud af, at en brugers naturlige opførsel, når de surfer på internettet, er at læse skærmen i et "F" -mønster.

Her er en varmekort, der viser, hvor brugerens øjne typisk lander på en webside:

Billede via Envato

Og her ser det ud som en wireframe:

Som du kan se, ser folk først fra venstre til højre øverst på skærmen. Så scanner de siden nedad og laver små forays i indholdet. Området på en side, der får mindst synlighed, er nederst til højre.

Så hvad betyder dette for at øge dine konverteringer? Nå kan du udnytte denne adfærd ved at placere de vigtigste objekter og opfordringer til handling langs F-formelinierne og placere objekter af mindre betydning i områder med lavere synlighed.

For eksempel kan du placere dit hovedopkald til handling øverst på siden mod venstre side, fordi det er her brugeren ser først ud.

Så, hvis du vil have din bruger at holde fast for at læse dine seneste blogindlæg, kan du placere disse overskrifter nede i venstre side af siden. Mindre vigtige oplysninger (som sponsorerede annoncer) kan gå i sidelinjen på højre side af din side, og du kan placere de oplysninger, du vil have den laveste synlighed (f.eks. En cookiepolitik) hjørne af siden.

6. Farveforhold

"Farve er et ofte undervurderet aspekt af webdesign, men det kan spille en meget vigtig rolle i brugervenlighed såvel som formidle den overordnede betydning af et mærke såvel som den generelle stemning på hjemmesiden", siger designer Tom Kenny. "Forskellige farvekombinationer kan fremkalde forskellige følelser og reaktioner."

Når du vælger et farveskema til din hjemmeside, skal du sørge for at vælge en kombination, der fremkalder de følelser, som du vil have dit mærke til at formidle.

En praktisk måde at gøre dette på er at kurere et Pinterest bord med billeder, der afspejler din vision for dit brand. Derefter kan du uploade et par af disse billeder til Adobes farvehjul ved hjælp af kameraikonet øverst i højre hjørne af skærmen.

Når billedet uploades, opretter det automatisk et farveskema for dig baseret på farverne på billedet. Du kan også flytte markeringerne rundt, hvis du vil tilpasse de enkelte farver.

Når du har oprettet dit farveskema, er der en vigtig ting at huske på, som vil gøre eller ødelægge dine konverteringer:

Kontrast.

Brug kontrast til at holde tekst, overskrifter og opkald til handling knapper synlige og læsbare. Med andre ord skal dine skrifttyper og knapfarver være i høj kontrast med baggrunden (f.eks.hvid baggrund med sort tekst), og de elementer, du vil fremhæve (f.eks. abonnentknapper), skal være i en farve, der skiller sig ud fra resten af ​​dit websted.

Så hvis vi skulle bruge det farveskema, vi skabte ovenfor, ville vi gerne gøre nuancer af blå den overvejende farve og bruge den lyse gule sparsomt som en opfordring til handling farve (da det giver mest kontrast).

Lad os se på MailChimp for eksempel. Hvilke elementer trækker dit øje?

Jo selvfølgelig er billedet i midten med kvinden meget iøjnefaldende, men de to orange opkald til handlingsknapper er virkelig opmærksomme greb. Det er fordi de står i skarp kontrast til alle blues på resten af ​​siden.

Når det kommer til at vælge de rigtige farver til dine knapper, vil du måske se vores artikel, hvilken farveknap konverterer bedst (her er hvad forskning viser).

7. Husk at K.I.S.S.

Du har sikkert hørt "Hold det simpelt, dumt" mantra før. Nå, det gælder også webdesign.

Enkelhed er super vigtig, når det kommer til at køre konverteringer. Når du opretter en side, spørg dig selv, om der er en måde at gøre det lettere. Resultatet er normalt mere æstetisk tiltalende, og det konverterer næsten altid bedre.

Husk Hicks lov? Det kommer til spil her, men enkelhed er mere end blot at begrænse mulighederne. Det drejer sig om at skabe et rent overordnet design, der er uklart og minimerer distraktioner.

I lighed med Hicks lov er det faktum, at folk kun kan håndtere så meget information på én gang. Visuelt, hvis vi ser for mange ting, alle sammenpakkede på en side, bliver vi overvældede, og det generer os. At skabe en god brugeroplevelse på dit websted betyder at slippe af med hvad som helst det er ikke absolut nødvendigt for designet.

Apple er et af de største eksempler på enkelhed i webdesign, og det er så effektivt, at utallige andre mærker har fulgt efter.

8. Brug 8-sekunders regel

Den generelle tommelfingerregel er, at du kun har 8 sekunder til at få en besøgendes opmærksomhed, for det er længden af ​​den menneskelige opmærksomhed. (Ja, det er kortere end opmærksomheden på en guldfisk!)

Du har kun et meget lille vindue med mulighed for at engagere en bruger, når de først lander på dit websted, så få disse sekunder til at tælle!

Her er nogle tips til at gribe opmærksomhed og øge konverteringer inden for de første 8 sekunder:

  • Brug en stor, fordelagtig overskrift, der er kort og til punktet.
  • Brug iøjnefaldende billeder, der formidler hovedpunktet eller formålet med din side og trækker øjet mod dit hovedopkald til handling.
  • Gør registreringsknapperne store, enkle og klare.
  • Brug magtord til at gøre din kopi mere tiltrækkende og engagerende.
  • Inkorporere multimedie som video, lyd eller andet interaktivt indhold.
  • Brug svæveffekter på dine knapper (fx få dem til at ændre farve på mouse-over) for at gøre dem mere tilfredsstillende at klikke.
  • Brug animerede exit-popups til at genindgive besøgende, der mistede interessen.

9. Husk Gestalt Likhedsprincippet

Gestalt-designprincipperne kan opsummeres af denne udsagn fra Gestaltpsykologen Kurt Koffka: "Det hele er Andet end summen af ​​delene. "I det væsentlige opfatter det menneskelige øje og hjernen et samlet design på en anden måde, end de opfattede de enkelte komponenter i designet.

Det første Gestalt-princip er loven om lighed, som siger, at det menneskelige øje / hjerne kan lide at gruppere lignende objekter sammen. Det er en mekanisme, der giver os mulighed for at gøre mening for ting og organisere støjende omgivelser.

Med hensyn til webdesign kan du udnytte denne lov ved at gruppere elementer, som du vil være forbundet med hinanden, f.eks. Testboks, konverterings knapper eller billeder.

Hvis du f.eks. Har en fantastisk vidnesbyrd, og du vil bruge den til at øge konverteringerne på din opt-in-formular, kan du placere den direkte under formularen. Selvom testimonialen ikke blev skrevet specifikt i forhold til din blymagnet, vil brugeren forbinde de to, fordi de er tæt på hinanden.

via Chris Lema

Loven om lighed er også vigtig for brugeroplevelsen. Ved at gruppere alle hovedelementerne i din tilmeldingsformular sammen (overskriften, beskrivelse og opt-in-knappen) og holde dem langt nok væk fra de andre elementer på din side (ved hjælp af negativt mellemrum), vil brugerens hjerne kunne at behandle oplysninger hurtigere og mere effektivt.

Dette er selvfølgelig godt til konverteringer, især fordi folk som vi sagde i det foregående punkt har en meget kort opmærksomhed span!

10. Brug ansigter til at øge kendskabet

Folk elsker menneskelige ansigter. "Når vi ser et ansigt, udløses vi automatisk for at føle noget eller at empati med den person," siger designer Sabina Idler. "Hvis vi genkender indhold på et websted – som et problem, dilemma, vane eller hvad som helst andet – føler vi os forbundet og forstået."

Sørg for at inkorporere ansigter i dine artikler, casestudier og testimonials, opt-in sider og destinationssider for at øge dine konverteringer.

Hvis du er ansigtet på dit mærke, er det nemt at gøre. Få et fotografering gjort, og sørg for at fotografen tager masser af vandrette skud med negativt rum på den ene side af dig. På den måde kan du foretage et opkald til handling eller en tekst der.

Her er et eksempel fra Melanie Duncan:

Men hvis du ikke er ansigtet på dit mærke, kan du stadig bruge ansigter på din hjemmeside ved at ansætte modeller eller bruge lagerbilleder. Bare sørg for, at ansigterne du vælger repræsenterer dit mærke præcist, så brugeren vil kunne relatere til ansigtet.

Vendeve, et socialt netværk for kvindelige iværksættere, gør et godt stykke arbejde ved at bruge ansigter, der afspejler deres demografiske målgruppe:

11. Kilde Høj kvalitet billeder

Hvis der er en ting, der virkelig kan trække ned kvaliteten af ​​et blogindlæg eller et indhold, er det lavkvalitetsbilleder.

Faktisk kan billeder lave eller bryde en aftale. Bright Local fandt ud af, at 60 procent af forbrugerne er mere villige til at overveje søgeresultater, der indeholder billeder, og yderligere 23 procent er mere tilbøjelige til at kontakte en virksomhed, der viser et billede.

Specielt bør du undgå at bruge livløse lagerfotos, der er irrelevante og intetsigende. Forskning fra Skyword viste, at hvis dit indhold indeholder overbevisende billeder, får du et gennemsnit på 94% flere visninger!

Så i stedet for at bruge blide billeder, kilde billeder af høj kvalitet, der udvikler positive foreninger med indholdet og den følelse personlig. Husk: Folk som mærker, som de føler, ligner sig selv. Hvis dit billedmateriale er for "prikket" eller "corporate", slår du dine besøgende væk.

Her er nogle af vores yndlingssteder for at finde fri lagerfotografi, der er høj kvalitet og personlig:

  • Pexels
  • Død til lager
  • StockSnap
  • Unsplash
  • Superfamous Studios
  • Negativt rum
  • Gratisography
  • Little Visuals
  • Picjumbo
  • Kaboompics

Nu hvor du forstår disse 11 webdesign principper, sæt dem til gode ved at tage et kig på dit eksisterende design. Hvilke principper bryder du?

Har du for mange navigationskoblinger? Ikke nok negativt rum? Eller måske har du ingen ansigter på dit websted?

Mange af disse problemer løses hurtigt og nemt med kun få tweaks. Du kan køre en konverteringsfrekvensrevision for at se, hvor dit websted kunne bruge et boost.

Hvis du også nyder denne artikel, kan du også tjekke vores andet indlæg på 4 Design Tips til forbedring af Website Conversion Rates.

Like this post? Please share to your friends:
Skriv et svar

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