Blog

Webdesign skal ikke ‘bare se godt ud’. Det skal også skabe handling!

Maja Agerskov Hermansen 15. november 2019, website

I 1990’erne var der nogle faste elementer i designet, som gik igen på alle websites: Blinkende GIF’er i loops, besøgstælleren og tekst skrevet i Comic Sans.

Du husker det sikkert.
Hvis ikke kan du få et sjovt tilbageblik lige her: http://nineties.website/

Mulighederne for et unikt, tilpasset design var naturligvis ikke de samme som i dag, og trenden var en anden dengang. Heldigvis er vi rykket langt inden for webdesign siden da. Din virksomheds website ser ikke sådan ud længere.

(Hvis det gør, så send os lige en besked, ikke?)

Når det er sagt, er der stadig en masse at arbejde med i dag. Særligt, når det kommer til at få webdesignet til at understøtte kunderejsen og skabe handling.

Mens det i 90’erne handlede om at bruge så mange livlige webelementer som muligt, handler det i dag om at få designet til at understøtte den handling, vi gerne vil have den besøgende til at udføre.

Vi ved altså lidt mere om, hvad webdesignet kan bruges til i dag.

Derfor vil jeg i blogindlægget her gennemgå fundamentet i et webdesign netop med de briller på: At opbygge sider og få designet til at understøtte handling på websitet.

Vælg et digitalt økosystem Skab en sammenhængende kæde mellem marketing og salg. Med et digitalt økosystem kan du følge kunden helt fra den første annonce til kontrakten er skrevet under.

Sådan bygger du sider, der skaber handling

 

1. Fastlæg websitets overordnede formål

Hos inovo starter vi alle nye webprojekter ud med at skabe overblik over det website, vi skal i gang med at opbygge. Vi stiller os selv to spørgsmål:

  1. Hvem er sitet til for? 
  2. Og hvilken rolle har sitet i forhold til at skabe forretning? 

Svarene på de spørgsmål udgør kommunikationsbasen, som hele websitets kommunikation og opbygning udspringer af. 

Med kommunikationsbasen har vi altid målgruppen og det overordnede formål med i overvejelserne, når der skal træffes valg undervejs i designet.

 

2. Fastlæg hver sides formål

Ud fra kommunikationsbasen definerer vi de sidetyper, sitet skal bestå af.

Gode, gennemarbejdede sidetyper er vigtige for designet, fordi de sikrer et ensartet udtryk på tværs af sitet. Og et ensartet udtryk skaber ro og gør det nemmere for den besøgende at navigere og finde frem til relevant indhold.

Der er typisk 5-8 sidetyper på et website, som har hver deres funktion, fx at vise produkter, præsentere cases og medarbejdere eller give plads til at videndele gennem en blog.

Sidetyperne har altid ét overordnet fokus. Det er vores fornemmeste ansvar, at den besøgende nemt kan afkode det.

 

3. Skab det rette indhold til siden

Så kigger vi igen på, hvem siden henvender sig til og vurderer ud fra det, om indholdet på siden er relevant for den besøgende.

Er siden rodet til med indhold, der stikker i øst og vest, mindsker det ikke blot chancen for konverteringer, det kan også risikere at skade dit brand, fordi det fremstår som en rodebutik. Det er vigtigt altid at give et godt indtryk på hele websitet med en strømlinet og gennemtænkt opbygning.

For at holde overblik over hele websitets indhold udarbejder vi et sitemap, hvor vi har defineret målgruppen, sidetyperne og konverteringer (Call-To-Actions):

I sitemappet indgår de tre stadier på kunderejsen: erkendelse, overvejelse og beslutning.

På den måde giver sitemappet også overblik over, hvad der skal lægges vægt på i forhold til målgruppen: Skal indholdet hjælpe dem med at erkende et behov? Skal det hjælpe dem med at researche sig frem til den rette løsning? Eller skal det servere dem de afgørende argumenter for et køb?

 

4. Fokuser på den rette konvertering

Når vi tager fat i den enkelte sidetype, målgruppen og stadiet på kunderejsen, har vi et rigtig godt udgangspunkt for at vælge hvilke konverteringer, siden skal indeholde.

Konverteringer kan groft sagt deles i to kategorier: hårde og bløde.

Bløde konverteringer er eksempelvis tilmelding til nyhedsbrev, mens en hård konvertering vil være tættere på et salg fx et booket møde eller workshop.

I inovo opererer vi med en primær CTA, en sekundær CTA og en kampagne CTA. Flere konverteringsmuligheder kan nemlig godt figurere på samme side, så længe de understøtter sidens formål. Det er dog vigtigt at få dem prioriteret i din opbygning af siden, så det er helt tydeligt, at din primære konvertering er den primære.

 

5. Visualiser og justér

Med kommunikationsbasen og sitemappet på plads er vi godt på vej til at skabe et konverterende design på dit website. Nu skal det blot omformes til noget konkret.

I inovo designer vi direkte i browseren, fordi Wiz (platformen, vi bygger websites i) gør det så nemt at arbejde med de enkelte elementer på en side. Man kan også vælge den traditionelle løsning og lave mockups som her:

Ved at tegne alle elementer ind på siden, er det lettere at flytte rundt på dem, så siden får præcis det udtryk, du ønsker.

Men det er vigtigt at huske på, at hver eneste gang du tilføjer endnu et element til siden, risikerer du at fjerne fokus fra det, der skal få den besøgende til at konvertere - og dermed skabe forretning for dig.

Det er vi derfor meget opmærksomme på i designprocessen.

En anden ting, vi er meget opmærksomme på, er, at et website bliver besøgt via mange forskellige skærmtyper. Derfor tjekker vi altid hvor mange elementer, der kan ses over fold på andre skærmtyper end den, vi arbejder på. Det er nemlig ikke sikkert, at dine kunder sidder ved en 27” skærm ligesom os, når de besøger websitet.

Selv med et responsivt design bør man gennemgå visningen på mobil og tablet løbende. Man kan ikke forvente, at den besøgende vil scrolle sig frem til sidens primære CTA. Derfor skal siden simplificeres, så CTA’et altid springer lige i øjnene.

Få et digitalt økosystem Gør salgs- og marketingarbejdet lidt lettere med CMS, marketing automation og CRM i én samlet platform.

Når vi har opbygget siderne med deres klare formål - og de spiller max på diverse skærmtyper - er det alfa og omega, at designet er med til at understøtte indholdet.

En vellykket handling eller CTA er en, som den besøgende nemt kan få øje på og afkode. Her er farvevalget faktisk lige så vigtigt som ordlyden på knappen, linket eller boksen.

Derfor skal vi nu kigge lidt på farver.

Sådan får du designet til at understøtte sidens handling

Alle de timer, du har siddet i billedkunstlokalet som barn og studeret farvecirklen, har ikke været forgæves, for nu skal den findes frem igen. Farverne har nemlig en universel betydning:

Det skaber ro for øjet og en rød tråd gennem hele websitet, hvis man vælger tre farver at arbejde med. Farverne må gerne være kontrastfarver (du ved, dem der står overfor hinanden i cirklen) for at kunne udnytte farverne til at skabe opmærksomhed.

Mange virksomheder har i forvejen et farvet logo som en del af den visuelle identitet. Den farve kan danne udgangspunkt, når de resterende to farver skal udvælges.


TIP
Hvis du har brug for et kreativt indspark til farveudvælgelsen, findes der mange gode værktøjer, som kan hjælpe dig med at udvælge farver, der spiller godt sammen. Min personlige favorit finder du her.


 

En tommelfingerregel i arbejdet med de tre farver er 60-30-10-reglen, som hjælper til at skabe balance i farverne, så de understøtter dit indhold frem for at forstyrre øjet.

  • 60 % af farverne på dit website skal være en basefarve. Den bruger man typisk som baggrundsfarve bag tekst og billeder.

  • 30 % udgøres af en sekundære farve. Den skal bruges som supplement til basefarven og kan fx bruges til at fremhæve udvalgte sektioner på sitet.

  • De sidste 10 % skal være den mest iøjnefaldende og kontrastfyldte farve i forhold til de to øvrige farver. Den bruger man til at fremhæve de vigtigste steder på sitet - typisk de steder, hvor man vil skabe handling (Call-To-Action).

Et website med et farvetema, hvor alle knapper har samme farve, ser måske pænt ud, men det ødelægger desværre synligheden af dine CTA’er. Ved kun at bruge din kontrastfarve på udvalgte steder vil du nemt kunne lede den besøgende frem mod handlingspunkterne på sitet og dermed understøtte konverteringerne.

Her kan du se et par eksempler på websites, som bruger klare farver til at skabe fokus på de vigtigste CTA’er:


(Podimo)


(Spotify Premium)


(Wolt)

Vær ikke bange for at lave om!

Som det oftest forholder sig med marketingtiltag skal du være klar til at optimere på dit design løbende. Men du behøver ikke nødvendigvis at redesigne hele dit website for at løfte dit design.

Du kan med fordel starte med at tage et kig på de sidetyper, du allerede har i spil på dit website og betragte opbygningen med et kritisk blik: er der et tydeligt formål med siden - og er det tydelig for andre end dig selv?

Test også løbende hvordan dine sider konverterer ved at eksperimentere med de kontrastfyldte CTA-farver. Hvilken skaber mest fokus? Det er den, du skal implementere.

Det kan virke besværligt at teste og lave om, hvis du skal have fat i en udvikler hver gang, du vil prøve noget nyt af. Jeg har selv prøvet at hænge i røret hos en webleverandør for at få tilpasset en knap på en kampagne-CTA. Det er… trættende. Og også tit en dyr fornøjelse. Men sådan behøver det ikke at være.

inovo Wiz giver dig mulighed for at udvikle og eksperimentere med designet på egen hånd. Du får en brugervenlig platform, der leveres med et gennemarbejdet design, men som du samtidig har rig mulighed for selv at tilpasse efterfølgende.

Så bliver det ikke nemmere for dig at konverteringsoptimere dit website og dermed skabe det allerbedste udgangspunkt for din forretning.

Maja Agerskov Hermansen

Som projektleder i inovo er det vigtigt for mig at sørge for, at alle dele af projektet hænger sammen. Fra det tekniske setup til det kommunikative budskab og den visuelle fremtoning. Derfor kan jeg godt lide at have fingrene i lidt af hvert. Det giver mig en fornemmelse for helheden.

Se også

Modtag nye blogindlæg

Få dem sendt direkte til din indbakke.

Ved tilmelding afgiver du samtykke til, at inovo må markedsføre til dig som beskrevet i vores betingelser