Forsiden er ikke et galleri eller en brochure. Den er en vejviser. Dens eneste opgave er at få den rigtige besøgende hen til det rigtige produkt så hurtigt som muligt. Alle designvalg på forsiden skal tjene det mål.
Her kan du læse, hvordan du designer en forside til en webshop, der virker. Hvad du skal have med, hvad du skal lade være, hvilke fejl der dræber salget, og hvordan du tænker layout på mobil, hvor de fleste af dine købere kigger.
Vil du have det fulde billede af, hvilke sider din webshop har brug for, så start med hvilke sider enhver webshop har brug for.
Hvad er forsiden egentlig til?
Forsiden er til besøgende, der endnu ikke har besluttet sig. De ved noget om dit brand, eller de fandt dig via søgning eller sociale medier, men de har ikke besluttet at købe. Forsiden er det øjeblik, hvor de afgør, om de vil gå videre.
Den skal svare på tre spørgsmål med det samme. Hvad sælger webshoppen? Er den til en som mig? Hvad skal jeg gøre nu? Hvis et af svarene er uklart, går de besøgende. Ikke fordi dine produkter er dårlige, men fordi forsiden ikke gav dem en grund til at blive.
Sådan designer du hero-sektionen
Hero-sektionen er det første, en besøgende ser. Den ligger øverst på siden, før man ruller, og den bærer det meste af vægten i det første indtryk.
En stærk hero har fire elementer. En overskrift, der siger, hvad du sælger, på almindeligt sprog. En kort linje under, der tilføjer sammenhæng, ofte en vigtig fordel eller det, der adskiller dig. Et billede, der viser produktet eller det, det gør for kunden. Og én opfordring til handling på en knap, der fortæller den besøgende præcis, hvor vedkommende skal hen.
Overskriften er det vigtigste. Gør den specifik. "Håndlavede lædertasker til hverdagen" virker. "Hvor håndværk møder funktion" gør ikke. Købere skimmer hurtigt. Kræver din overskrift fortolkning, har du allerede mistet dem.
Knappen skal nævne et sted, ikke en følelse. "Se tasker" eller "Se nyheder" virker. "Opdag mere" eller "Udforsk nu" gør ikke. Giv den besøgende en retning, ikke et forslag.
Dit hero-billede skal vise produktet tydeligt. Livsstilsbilleder virker godt, når produktet har brug for en sammenhæng for at give mening, som tøj eller ting til hjemmet. Billeder af kun produktet virker bedre, når klarhed betyder mere end drømme, som med værktøj eller elektronik. Brug billeder af høj kvalitet. Et sløret eller dårligt oplyst hero-billede underminerer alt andet.
Hvad du skal vise under hero-sektionen
Når en besøgende ruller forbi hero-sektionen, leder vedkommende efter mere konkrete grunde til at blive. Denne del af forsiden skal vise produkter eller kategorier, der passer til det, dine købere mest sandsynligt vil have.
Prøv ikke at vise alt. Vælg dine bestsellere, de produkter med den højeste avance eller den kategori, de fleste af dine købere ender i. Tre til seks udvalgte produkter er et rimeligt antal. Mere end det begynder at se rodet ud og gør det svært at vælge.
Kategoriblokke virker godt i webshops med et bredt sortiment. I stedet for enkelte produkter kan du vise de tre eller fire største kategorier med et tydeligt billede og en betegnelse for hver. Lad køberne selv vælge den rigtige del af webshoppen.
Den udvalgte del bør også ændre sig. Tag sæsonvarer, udsalgsvarer eller nyheder med. En forside, der aldrig ændrer sig, giver tilbagevendende besøgende ingen grund til at rulle.
Sådan bruger du socialt bevis på forsiden
Købere stoler mere på andre købere end på webshops. Socialt bevis på forsiden skaber troværdighed, før en besøgende når en produktside.
De mest effektive former for socialt bevis på forsiden er korte kundeanmeldelser eller stjerner, et antal kunder eller afsendte ordrer, omtale i pressen eller logoer fra medier og tillidsmærker fra tredjepart som ikoner for sikker betaling eller kendte certificeringer.
Hold det kort. Én eller to stærke udtalelser virker bedre end en mur af femstjernede anmeldelser. Ét pressemedies logo fra et kendt medie gør mere end en liste med ti ukendte navne. Vælg det bevis, der betyder mest for den køber, der er mest skeptisk over for at købe hos dig for første gang.
Skal du have et afsnit med brandets historie?
Et kort afsnit med brandets historie på forsiden er valgfrit, men det hjælper i nogle sammenhænge. Det virker bedst, når grundlæggerens historie er en del af grunden til, at en køber ville vælge netop dit brand frem for en større konkurrent. Håndlavede varer, etisk indkøb, brands drevet af et fællesskab og produkter med en grundlægger i front har alle gavn af et kort menneskeligt øjeblik på forsiden.
Tager du et med, så hold det kort. To eller tre sætninger og et link til hele Om os-siden er nok. Sæt det ikke øverst på siden eller over de udvalgte produkter. Historien giver varme, men det er produkterne, der driver beslutningerne.
Hvis produktet står stærkt af sig selv, så spring afsnittet over. En side, der sælger almindelige standardvarer, har ikke brug for en historie om, hvordan det hele begyndte. Brug pladsen til at vise flere produkter i stedet.
Hvad forsiden ikke har brug for
Rod på forsiden er lige så skadeligt som et manglende afsnit. Hvert element, der ikke gør et stykke arbejde, tager opmærksomhed fra noget, der gør.
Almindelige fejl på forsider er for mange opfordringer til handling, der konkurrerer på samme niveau, videoer eller animationer, der starter af sig selv og gør siden langsom, store tekstblokke, som ingen læser, en navigation med mere end seks eller syv punkter og pop-ups, der dukker op, før den besøgende har haft tid til at se noget.
Hvert ekstra valg, du tvinger ind på en besøgende, er en lille gnidning. Forsiden skal føles tydelig, ikke travl. Kan du ikke vælge mellem to elementer, så fjern det, der ikke er direkte knyttet til at få en besøgende hen til et produkt.
Design af forsiden til mobil
Mere end halvdelen af al trafik til webshops kommer fra mobil. Din forside skal bygges til mobil først og ikke tilpasses bagefter fra computer.
På mobil skal hero-overskriften være kort nok til at kunne læses på to linjer. Knappen skal være stor nok til at kunne trykkes let. Produktbilleder skal stå pænt over hinanden i én kolonne. Navigationen skal folde sig sammen til en menu, der ikke fylder skærmen.
Test hver ændring af forsiden på en telefon, før du udgiver den. Det, der ser rent ud på en computerskærm, kan blive en forvirrende rulning på en lille skærm. Købernes oplevelse på mobil er din vigtigste designbegrænsning, ikke noget, du tænker på til sidst.
Tydelighed om forsendelse betyder også noget på mobil. Købere på telefonen er ofte tæt på at beslutte sig. Et synligt banner med grænsen for gratis fragt eller forventet levering på forsiden kan gøre et besøg, hvor man bare kigger, til et besøg, hvor man køber. Vil du vide mere om at sætte forsendelse op i din webshop, så læs hvordan du sætter fragt op i din webshop.
Sådan understøtter WEMASY design af forsiden
WEMASY's e-handelssystem har værktøjer til layout af forsiden, bygget til webshops. Hero-sektioner, gitre med udvalgte produkter, kategoriblokke og afsnit med socialt bevis er alle med uden særlig kode. Det samme system klarer layoutet til mobil automatisk.
Se, hvilke værktøjer til forside og webshop der er med i hver plan, på siden med WEMASY's priser.
Ofte stillede spørgsmål
Hvor mange opfordringer til handling skal en forside have?
Én primær opfordring øverst på siden, og derefter sekundære længere nede, knyttet til bestemte afsnit. Den primære opfordring skal være den vigtigste handling, du vil have en førstegangsbesøgende til at gøre, typisk "Shop nu" eller et link til en bestemt kategori. Flere primære opfordringer med samme visuelle vægt spreder opmærksomheden og får færre til at klikke på nogen af dem. Med WEMASY's hjemmesidebygger kan du sætte det op direkte i din webshop.
Skal jeg vise priser på forsiden?
Ikke nødvendigvis på selve forsiden, men det hjælper at vise priser på kortene for de udvalgte produkter. Købere skimmer prisleje for at se, om webshoppen ligger inden for deres budget. At skjule priserne, til man kommer til produktsiden, giver gnidninger og kan virke undvigende. Er dine produkter dyre, sætter en startpris forventningerne positivt i stedet for at give en overraskelse.
Hvor ofte skal jeg opdatere forsiden?
Opdatér de udvalgte produkter og sæsonafsnit, når du har nyheder, kører en kampagne, eller der sker et sæsonskifte i det, købere leder efter. Hero-sektionen kan stå stabil længere, men opdatér den, når dit hovedtilbud eller din positionering ændres. En forside, der ser ens ud et helt år, signalerer en webshop, der ikke er aktiv.
Påvirker forsidens indlæsningshastighed salget?
Ja. En forside, der tager mere end tre sekunder at indlæse på mobil, mister en stor del af de besøgende, før de har set noget. Store ukomprimerede billeder er den almindeligste årsag. Komprimér billeder, før du uploader dem, undgå video, der starter af sig selv, i hero-sektionen, og begræns scripts fra tredjepart. Hastighed er et designvalg på forsiden, ikke kun et teknisk valg.
Skal forsiden linke til alle produktkategorier?
Ikke nødvendigvis. Link til de kategorier, de fleste af dine købere vil have. En navigationsmenu kan rumme hele listen af kategorier. Forsidens indhold skal vise de kategorier, der giver flest salg, eller som du vil prioritere. At linke til det hele skaber visuel støj og svækker de sider, der betyder mest.
Hvor skal tillidsmærker sidde på forsiden?
Tæt på hero-sektionen, tæt på knappen, eller i en særlig tillidsbjælke mellem hero-sektionen og de udvalgte produkter. Købere leder mest sandsynligt efter tillidstegn i det øjeblik, de overvejer at klikke på en knap. Sætter du mærkerne kun i sidefoden, når de kun købere, der allerede har rullet helt ned, og det er for sent for de fleste førstegangsbesøgende.