👉 11 Webdesign prinsipper som vil øke konverteringsfrekvensen

31 Smarte blygenereringsideer du kan implementere umiddelbart (oppdatert)

Ønsker du å øke konverteringer på nettstedet ditt? Som smart markedsførere vet, kan designet gjøre hele forskjellen. I dette innlegget deler vi 11 webdesignprinsipper som vil øke konverteringsfrekvensen.

Mange markedsførere harp på viktigheten av SEO, sosiale medier, skaper blymagneter som konverterer og lignende, men å ha en utmerket nettside design til å begynne med er så ofte overset. Mens alle disse komponentene har betydning, er webdesign ikke bare et "pent ansikt": det kan faktisk gjøre eller ødelegge konverteringsfrekvensene.

Ifølge forskningen fra Stanford University, sier 46,1% av at et nettsteds design er de beste kriteriene for å bestemme om et selskap er troverdig eller ikke. Så det er ekstremt viktig at designet ser profesjonelt ut.

Hvorvidt nettstedet ditt er estetisk tiltalende, spiller også en stor rolle i optimalisering av konverteringsfrekvens. Gitt 15 minutter å konsumere innhold, ville to tredjedeler av folk heller lese noe vakkert designet enn noe vanlig (ifølge denne studien av Adobe). Så hvis du vil at folk skal lese blogginnleggene dine, må de se attraktive ut.

Men det er ikke alt. Hvis nettstedet ditt er uattraktivt, vil folk faktisk forlate nettstedet ditt helt og holdent. 38% av menneskene, for å være eksakte. Det er mange tapte kundeemner!

Så uansett om design er din forte, kan du ikke råd til å overse det. Lær webdesign, ansett en freelancer, ansett en designer eller gjør hva som helst!

Til å begynne med er det en håndfull viktige designprinsipper som gir deg et umiddelbart og bærekraftig løft i konverteringer …

1. Følg Hicks lov

Hicks lov er en populær teori som er sitert av en rekke individer til forskjellige formål, men refereres ofte til webdesign. Oppkalt etter britisk psykolog William Edmund Hick, sier loven at tiden det tar for en person å ta en beslutning, er direkte proporsjonal med de mulige valgene han eller hun har.

Med andre ord, ved å øke antall valg, blir beslutningstiden også økt.

Bilde via Usabilla

Du har kanskje hørt om den berømte studien av psykologene Sheena Iyengar og Mark Lepper der de fant ut at et displaybord med 24 forskjellige syltetøy tiltrukket seg mindre interesse enn et bord som bare viser seks forskjellige typer syltetøy. Faktisk var folk som så den større skjermen bare en tiendedel så sannsynlig å kjøpe som folk som så den lille skjermen!

Det er et eksempel på Hicks lov i handling: Handlingen går tapt i forhold til antall valg som presenteres.

Når det gjelder webdesign, kan du øke konverteringer ved å begrense antall valg brukere har. Det første som kommer i tankene når du tenker på hvor du skal kutte på antall valg på nettstedet ditt, er navigeringslinjen. Åpenbart vil du ikke ha for mange koblinger å velge mellom, ellers vil brukeren miste interessen for dem helt.

Med andre ord, gjør ikke dette:

Imidlertid stopper Hicks lov ikke der. Tenk på alle de mange forskjellige viktige avgjørelsene som brukerne må gjøre på nettstedet ditt, bortsett fra hvilken navigasjonslink du skal trykke på.

Her er bare noen få:

  • Bestemmer om du skal bruke navigasjonslinjen eller bla nedover siden mer
  • Skumme overskriftene for å se hvilket blogginnlegg som skal leses
  • Bestemme om du skal laste ned ledningsmagnet, dele innlegget ditt på sosiale medier, eller legg igjen en kommentar
  • Velger mellom å kjøpe, lese produktanmeldelser eller surfe etter flere produkter

Disse bare skrape overflaten av overflod av beslutninger som brukerne må gjøre. Det er normalt å føle seg overveldet og prøver å finne ut hvor du skal begynne å kutte på disse avgjørelsene, men det er en enkel måte å bruke Hicks lov i en klemme på.

Alt du trenger å gjøre er å installere en velkomstport på fullskjerm på hjemmesiden din. En velkommen gate dekker hele skjermen med en enkelt anrop til handling, slik at brukeren bare ser ett valg tilgjengelig først. Hvis de vil se flere valg, må de rulle nedover.

Dette gjør det mulig å minimere distraksjoner på hjemmesiden din, samtidig som funksjonaliteten til hjemmesiden din blir intakt.

Samlet sett, når du bruker Hick's Law til nettstedet ditt, er det viktig for deg å vite hvilke handlinger som er viktigst for bunnlinjen din. For eksempel, vil du at brukerne skal logge inn for ledemagnet, eller vil du at de skal legge et produkt i handlekurven? Hver side på nettstedet ditt skal oppnå ett hovedmål.

Jo mer du kan begrense brukerens valg, desto lettere vil nettstedet ditt være å bruke, og konverteringene dine vil skyte.

2. Utnytte regelen av tredjedeler

The Rule of Thirds er et populært fotograferingsprinsipp som også kan brukes til webdesign. Med tredjedelens regel, skal du visuelt dele et bilde (eller nettside) til tredjedeler (både vertikalt og horisontalt).

Dette gir deg ni like firkanter:

Ifølge regelen er de fire midtkryssene strategiske steder av interesse. Når objekter plasseres på disse punktene, skaper det det mest effektive bildet eller designet.

Når det gjelder webdesign, kan du plassere sidens viktigste elementer ved disse veikryssene for å få folk til å fokusere på dem, og øke konverteringene dine.

For eksempel har Chris Lema sin hjemmeside de viktigste elementene (testamentet og "Start her" -knappen) på de to venstre kryssene:

John Lee Dumas heltebilde inneholder en ring til action-knapp rett nederst til venstre krysset:

Kissmetrics legger også sin kall til handlingsknapp nederst til venstre krysset:

Legg merke til hvordan ingen av disse nettstedene plasserer navigasjonsfeltet hvor som helst i nærheten av kryssene.Dette bidrar til å holde besøkende fokusert på hovedaksjonen på siden, i stedet for å lede øyet til å navigere et annet sted.

Du trenger ikke å designe hele nettstedet ditt strengt etter regelen av tredjedeler, heller du kan bruke det som et verktøy for å hjelpe deg med å plassere dine viktigste elementer.

Prøv å ta et skjermbilde av nettstedet ditt (like over folden eller bare overskriften, ikke hele lengden på siden fordi ingen ser på en nettside på den måten), og del den opp i ni like firkanter. Deretter kan du bestemme om du vil gjøre noen tweaks.

3. Respekter brukernes tålmodighet

(Eller heller, jeg ertålmodighet.) Det viser seg at folk er utrolig utålmodige, spesielt når det gjelder surfing på nettet.

Ifølge en studie fra Aberdeen-gruppen resulterer bare en sekunds forsinkelse i sidelastetiden en reduksjon på 7% i konverteringer!

Så når det kommer til siden lasting hastighet, teller hvert sekund. For å sjekke sidens hastighet og feilsøke eventuelle problemer, kjør nettstedet ditt gjennom ett eller flere av disse gratis verktøyene:

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

4. Bruk negativt rom

I webdesign blir hvite rom ofte referert til som negativ plass. Positiv plass er plassen som inneholder alle elementene på nettstedet ditt, mens negativ plass er alt tomt mellomrom.

Til tross for navnet er negativ plass faktisk a positiv ting i webdesign, fordi uten at nettstedet ditt ville være ulæselig og ubrukelig.

Negativ plass refererer ikke bare til mellomrommet mellom de større elementene på siden din, for eksempel mellomrommet mellom overskriften og innholdet ditt, eller mellomrommet mellom sidelinjen og innholdet ditt. Det refererer også til mellomrummet mellom alle de mindre elementene på siden din, som mellomrom mellom avsnitt, mellomrom mellom tekstlinjer, og til og med mellomrom mellom bokstaver.

Vær oppmerksom på alle av former for negativ plass på nettstedet ditt tjener til å holde alt lesbart, skannbart (veldig viktig, fordi det er slik folk leser nettsteder) og lett på øynene. Og selvfølgelig fører alt dette til økte konverteringer.

Flat.io bruker massevis av negativ plass på hjemmesiden deres for å holde fokus på deres viktigste oppfordring til handling, som er å registrere seg med Google eller Facebook.

Her er noen tips for å sikre at du bruker nok negativ plass:

  • Jo mindre fonten din er, desto mer plass trenger du mellom bokstaver.
  • Din linjehøyde (definerer mellomrommet over og under tekstlinjer) skal være omtrent 150% av skriftstørrelsen for kroppseksemplar (i CSS, ville dette lese:linjehøyde: 1,5;).Bilde via Pearsonified
  • Men mindre skrifttyper trenger mer sjenerøse linjestørrelser. Legg merke til forskjellen som en større linjehøyde gjør i de to avsnittene nedenfor:Bilde via W3.org
  • Bryt opp store tekstblokker i mindre avsnitt for å øke den negative plassen mellom dem og gjøre blogginnleggene dine mer lesbare.
  • Legg til hvitt mellomrom mellom de større elementene på nettstedet ditt (sidebjelke, topptekst, kropp, bunntekst, etc.) ved å bruke gode marginer og polstring.

5. Vurder F-Layout

Forskere har funnet ut at brukerens naturlige oppførsel når du surfer på nettet, er å lese skjermen i et "F" -mønster.

Her er en varmekart som viser hvor brukerens øyne vanligvis lander på en nettside:

Bilde via Envato

Og her er det som ser ut som en wireframe:

Som du ser, ser folk først fra venstre mot høyre øverst på skjermen. Så skanner de siden nedover, og gjør små forays til innholdet. Området på en side som får minst synlighet er nederst til høyre.

Så hva betyr dette for å øke konverteringene dine? Vel, du kan dra nytte av denne oppførselen ved å plassere de viktigste objektene og handlingene langs F-formelinjer, og plassere objekter av mindre betydning i områder med lavere synlighet.

For eksempel kan du plassere hovedanropet til handling øverst på siden mot venstre side fordi det er der brukeren vil se først ut.

Deretter, hvis du vil at brukeren skal holde seg for å lese de siste blogginnleggene dine, kan du plassere disse overskriftene til venstre på siden. Mindre viktig informasjon (for eksempel sponsede annonser) kan gå i sidelinjen på høyre side av siden din, og du kan plassere informasjonen du vil ha den laveste synligheten (for eksempel en informasjonskapsel) i nedre høyre- hjørnet på siden.

6. Farger

"Farge er et ofte undervurdert aspekt av webdesign, men det kan spille en svært viktig rolle i brukervennlighet, så vel som formidle den generelle betydningen av et merke, så vel som det generelle stemningen til nettstedet, sier designer Tom Kenny. "Ulike fargekombinasjoner kan fremkalle forskjellige følelser og reaksjoner."

Når du velger et fargevalg for nettstedet ditt, må du sørge for å velge en kombinasjon som fremkaller følelsene du vil at merkevaren skal formidle.

En praktisk måte å gjøre dette på er å kurere et Pinterest-bord med bilder som reflekterer visjonen for ditt merke. Deretter kan du laste opp noen av bildene til Adobes fargelegg med kameraikonet øverst til høyre på skjermen.

Når bildet lastes opp, vil det automatisk lage et fargevalg for deg basert på fargene i bildet. Du kan også flytte valgene rundt hvis du vil tilpasse de enkelte farger.

Når du har opprettet fargevalg, er det en viktig ting å huske på som vil gjøre eller ødelegge konverteringene dine:

Kontrast.

Bruk kontrast til å holde tekst, overskrifter og ring til handlingsknapper merkbare og lesbare. Med andre ord, skal font- og knappfargene være i høy kontrast med bakgrunnen (f.eks.hvit bakgrunn med svart tekst), og elementene du vil markere (for eksempel abonnementsknapper) skal være i en farge som skiller seg ut fra resten av nettstedet ditt.

Så hvis vi skulle bruke fargeskjemaet vi opprettet ovenfor, ville vi gjerne gjøre nyanser av blå den overordnede fargen, og bruk den lyse gule sparsomt som en oppfordringsfarge (siden det gir mest kontrast).

La oss se på MailChimp for eksempel. Hvilke elementer trekker øyet?

Vel, selvfølgelig er bildet i midten med kvinnen veldig iøynefallende, men de to oransje kall-til-action-knappene er virkelig oppmerksomhet gripende. Det er fordi de står i sterk kontrast til alle bluesene på resten av siden.

Når det gjelder å velge de riktige fargene for knappene dine, kan du sjekke ut vår artikkel som fargeknapp konverterer best (her er hva forskningen viser).

7. Husk å K.I.S.S.

Du har sikkert hørt "Hold det enkelt, dumt" mantra før. Vel, det gjelder også webdesign.

Enkelhet er super viktig når det gjelder å kjøre konverteringer. Hver gang du lager en side, spør deg selv om det er en måte å gjøre det enklere. Resultatet er vanligvis mer estetisk tiltalende, og det konverterer nesten alltid bedre.

Husk Hicks lov? Det kommer inn i spill her, men enkelhet er mer enn bare å begrense mulighetene. Det handler om å skape en ren total design som er ryddig og minimerer distraksjoner.

I likhet med Hicks lov er det faktum at folk bare kan håndtere så mye informasjon om gangen. Visuelt, hvis vi ser for mange ting alle sammen i en side, blir vi overveldet og det plager oss. Å skape en flott brukeropplevelse på nettstedet ditt betyr å bli kvitt hva som helst Det er ikke helt nødvendig for designen.

Apple er et av de største eksemplene på enkelhet i webdesign, og det er så effektivt at utallige andre merker har fulgt etter.

8. Bruk 8-sekunders regel

Den generelle tommelfingerregelen er at du bare har 8 sekunder for å få en besøkendes oppmerksomhet, for det er lengden på menneskets oppmerksomhetsspenning. (Ja, det er kortere enn en gullfisk!)

Du har bare et veldig lite vindu med mulighet til å engasjere en bruker når de først lander på nettstedet ditt, så gjør disse sekundene telle!

Her er noen tips for å få tak i oppmerksomhet og øke konverteringer innen de første 8 sekundene:

  • Bruk en stor, fordel-drevet overskrift som er kort og til poenget.
  • Bruk iøynefallende bilder som formidler hovedpunktet eller hensikten med siden din og trekker øynene mot din viktigste oppfordring til handling.
  • Gjør oppslagsknappene store, enkle og klare.
  • Bruk kraftord for å gjøre din kopi mer fristende og engasjerende.
  • Inkluder multimedia som video, lyd eller annet interaktivt innhold.
  • Bruk sveveeffekter på knappene dine (for eksempel få dem til å endre farge på musen over) for å gjøre dem mer tilfredsstillende å klikke.
  • Bruk animerte exit-popups for å gjenoppta besøkende som mistet interessen.

9. Husk Gestalt Likhetsprinsipp

Gestalt-designprinsippene kan oppsummeres av denne uttalelsen fra Gestaltpsykologen Kurt Koffka: "Hele er annen enn summen av delene. "I utgangspunktet oppfatter det menneskelige øye og hjernen et enhetlig design på en annen måte enn de oppfatter de enkelte komponentene i den utformingen.

Det første Gestalt-prinsippet er loven om likhet, som sier at menneskets øye / hjerne liker å gruppere lignende gjenstander sammen. Det er en mekanisme som gir oss mulighet til å forstå ting og organisere støyende omgivelser.

Når det gjelder webdesign, kan du utnytte denne loven ved å gruppere elementer som du vil være tilknyttet hverandre, for eksempel testboks, konverterings knapper eller bilder.

For eksempel, hvis du har en fantastisk vurdering og du vil bruke den til å øke konverteringer på innkjøpsskjemaet ditt, kan du plassere det direkte under skjemaet. Selv om testamentet ikke ble skrevet spesielt med hensyn til ledemagnet, vil brukeren knytte de to fordi de er i umiddelbar nærhet.

via Chris Lema

Loven om likhet er også viktig for brukeropplevelsen. Ved å gruppere alle hovedelementene i påmeldingsskjemaet sammen (overskrift, beskrivelse og innkjøpsknapp) og holde dem langt nok unna de andre elementene på siden din (ved hjelp av negativ plass), vil brukerens hjerne kunne å behandle informasjonen raskere og mer effektivt.

Dette er selvfølgelig bra for konverteringer, spesielt fordi, som vi sa i det forrige punktet, har folk en veldig kort oppmerksomhetsspanne!

10. Bruk ansikter for å øke kjennskapen

Folk elsker menneskelige ansikter. "Når vi ser et ansikt, blir vi automatisk utløst for å føle noe eller å empati med den personen," sier designer Sabina Idler. "Hvis vi gjenkjenner innhold på et nettsted – som et problem, dilemma, vane eller hva som helst annet – føler vi oss koblet og forstått."

Sørg for å inkorporere ansikter i artiklene dine, casestudier og testimonials, innloggingssider og destinasjonssider for å øke konverteringene dine.

Hvis du er ansiktet på merkevaren din, er dette enkelt å gjøre. Få en fotografering gjort, og sørg for at fotografen tar mange horisontale bilder med negativ plass på den ene siden av deg. På den måten kan du ringe til handling, eller litt tekst der.

Her er et eksempel fra Melanie Duncan:

Men hvis du ikke er ansiktet på merkevaren din, kan du fortsatt bruke ansikter på nettstedet ditt ved å ansette modeller eller bruke lagerbilder. Bare vær sikker på at ansiktene du velger representerer ditt merke nøyaktig, slik at brukeren vil kunne forholde seg til ansiktet.

Vendeve, et sosialt nettverk for kvinnelige gründere, gjør en god jobb med dette ved å bruke ansikter som reflekterer deres mål demografiske:

11. Kilde Høy kvalitet bilder

Hvis det er en ting som virkelig kan trekke ned kvaliteten på et blogginnlegg eller en del innhold, er det lavkvalitetsbilder.

Faktisk kan bilder gjøre eller bryte en avtale. Bright Local fant at 60 prosent av forbrukerne er mer villige til å vurdere søkeresultater som inkluderer bilder, og en annen 23 prosent er mer sannsynlig å kontakte en bedrift som viser et bilde.

Spesielt bør du unngå å bruke livløse lagerfotografier som er irrelevante og tørre. Forskning fra Skyword fant at hvis innholdet ditt inneholder overbevisende bilder, får du et gjennomsnitt på 94% flere visninger!

Så i stedet for å bruke blide bilder, kild fotografier med høy kvalitet som utvikler positive foreninger med innholdet og den følelsen personlig. Husk: Folk som merker som de føler, ligner seg selv. Hvis bildene dine er for "tett" eller "bedrift", slår du dine besøkende bort.

Her er noen av våre favorittsteder for å finne gratis arkivfotografi som er høy kvalitet og personlig:

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

Nå som du forstår disse 11 webdesign prinsippene, legg dem til god bruk ved å ta en hard titt på din eksisterende design. Hvilke prinsipper bryter du?

Har du for mange navigasjonskoblinger? Ikke nok negativ plass? Eller kanskje du ikke har noen ansikter på nettstedet ditt?

Mange av disse problemene er raskt og enkelt løst med bare noen få tweaks. Du kan kjøre en konverteringsfrekvensrevisjon for å se hvor nettstedet ditt kunne bruke et løft.

Også, hvis du likte denne artikkelen, vil du kanskje sjekke ut vårt andre innlegg på 4 Design Tips for å forbedre Website Conversion Rates.

Like this post? Please share to your friends:
Legg att eit svar

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