# Ti designvalg i nettbutikken som målbart løfter konverteringen

> Ikke «bruk mer luft», ikke «test knappefargen». De konkrete valgene innen visuelt hierarki, fotografi, typografi og mobil som faktisk flytter konverteringen i ekte butikker.

Ryan Badger - 3. november 2024 - 7 min lesing

## Designvalg som faktisk flytter konverteringen

Designartikler havner vanligvis i én av to leire. «Bruk masse luft!» (for vagt) eller «A/B-test 47 knappefarger» (for detaljert). Ingen av delene hjelper den som ser på butikken sin og lurer på hvorfor den konverterer på 1,3 %.

Dette innlegget handler om de konkrete visuelle designvalgene som målbart flytter konverteringen i nettbutikker. Ikke smak. Ikke merkevareestetikk. Valgene innen layout, hierarki, farge og typografi som enten hjelper folk å kjøpe eller står i veien.

## 1. Visuelt hierarki: det viktigste skal se viktigst ut

De fleste butikker gir alt på produktsiden lik visuell vekt: 16 px brødtekst, 18 px pris, 18 px overskrifter. Alle elementene konkurrerer, ingen vinner. Øyet har ikke noe sted å gå inn.

Løsningen: det du vil ha klikket på, skal være det største og kontrastrikeste på siden.

- Produkttittel: 28-36 px
- Pris: 20-24 px, fet, tydelig avgrenset
- Legg i handlekurv-knappen: full bredde på mobil, det visuelt tyngste elementet på siden
- Beskrivelser, spesifikasjonslister, fraktinfo: 14-16 px, dempet

Når du ser på produktsiden din fra to–tre meters avstand (ja, bokstavelig talt, len deg bakover), kan du se hva som er hovedhandlingen? Hvis hele siden ser ut som grå suppe, er hierarkiet ødelagt.

## 2. Luft rundt CTA-en, ikke overalt

«Bruk mer luft» slenges frem som et universelt designråd. Det som faktisk betyr noe, er luft rundt knappene og nøkkelelementene, ikke luft for luftens skyld.

- Minst 40-60 px utfylling rundt Legg i handlekurv-området
- Prisen i sitt eget rene rom, ikke trengt opp av annen tekst
- Produktbilder med rom rundt seg (ikke marginløst kant til kant)

Pakk alt annet (anmeldelser, fraktinfo, relaterte produkter) tettere. Det er sekundært. CTA-området vinner ved å være det eneste som har pusterom.

## 3. Konsekvent produktfotografi slår «bedre» produktfotografi

En katalog med 50 produkter der bildene er litt forskjellige (ulik bakgrunn, ulikt lys, ulik zoom) ser amatørmessig ut. En katalog der hvert bilde har samme vinkel, samme lys, samme utsnitt og samme bakgrunn ser profesjonell ut.

Dette er et volumproblem, ikke et kvalitetsproblem. De 5 mest solgte kan ha polerte hovedbilder. Alt annet bør fotograferes likt, selv om det blir litt mindre glamorøst. Inkonsekvens signaliserer «liten, upålitelig butikk» mer enn lav kvalitet gjør.

Praktisk regel:

- Hovedbilde: hvit eller nøytral bakgrunn, sentrert, samme utsnitt gjennom hele katalogen
- Sekundære bilder: livsstil / i bruk, konsekvent tone
- Alle bilder med samme bildeformat og oppløsning

## 4. CTA-kontrast, ikke CTA-farge

«Oransje knapper konverterer X % bedre enn grønne!» Du ser denne påstanden mye. Den er tøv alene. Det som teller, er **kontrasten mot siden rundt**. En oransje knapp på et oransje nettsted er usynlig. En blå knapp på det samme nettstedet er et fyrtårn.

Velg fargen som har høyest kontrast mot nettstedets dominerende palett. Hvis siden din er hvit + svart + beige, bør CTA-en være den ene fargen som ikke finnes andre steder.

Et sekundært poeng: unngå spøkelsesknapper (bare omriss, ingen fyll) for primære CTA-er. De ser elegante ut, men gir dårlig konvertering fordi de signaliserer «sekundær» til øyet. Bruk solid fyll for Legg i handlekurv, Fullfør bestilling, Kjøp nå.

## 5. Skriftstørrelse og linjelengde på mobil

De fleste mobilbutikker har tekst som er for liten og for bred. Telefoner viser tekst med høyere pikseltetthet; det som er 16 px på desktop, føles lite på mobil.

Gulvet for mobiltypografi:

- Brødtekst: minst 16-18 px
- Linjelengde: 40-60 tegn per linje
- Linjehøyde: 1,4-1,6 ganger skriftstørrelsen
- Knapper / trykkflater: minst 44 px høye (Apples retningslinje for tilgjengelighet)

Hvis besøkende klyper for å zoome på produktbeskrivelsene dine, er skriften for liten. Test på en ekte telefon i armlengdes avstand, ikke i nettleserens mobilemulator.

## 6. Klistrende Legg i handlekurv på mobil

Scroll nedover en lang produktside på mobil: Når du har lest beskrivelsen, er Legg i handlekurv-knappen tre skjermhøyder oppe. Kunder som har bestemt seg for å kjøpe, må nå scrolle tilbake, og det drar ned konverteringsraten.

Løsningen: en klistrende Legg i handlekurv som flyter nederst i mobilvisningen når den opprinnelige knappen har scrollet ut av syne. Ett trykk, handlekurven åpnes, ingen leting.

Desktop: klistrende handlekurv blir valgfritt (visningsområdet er større). Mobil: ikke til forhandling.

## 7. Hovedbilder som viser resultatet, ikke produktet

De fleste hero-seksjoner viser produktet, frittstilt, på hvit bakgrunn. Greit som referansebilde, feil som hovedbilde. Hovedbildet må kommunisere «hvordan er livet med dette» på 2 sekunder.

Bedre: produktet i bruk, i kontekst, med en person eller et miljø som matcher målkjøperen din.

- Hudpleie: noen som bruker det, morgenlys, bad
- Møbler: stykket i et ekte rom, levd i
- Klær: på en kropp, i bevegelse, ikke på en utstillingsdukke
- Mat/kaffe: mens det tilberedes eller nytes, ikke et produktbilde

Hovedbildet med produktet i bruk konverterer bedre enn det med frittstilt produkt fordi det gjør mer av fantasiarbeidet for kjøperen. De kan se seg selv bruke det uten å måtte forestille seg det.

## 8. Konsekvente komponenter i hele butikken

En vanlig feil: produktsidene bruker én kortstil, kategorisidene en annen, og forsiden en tredje. Kunder merker denne inkonsekvensen selv om de ikke kan sette ord på den. Butikker virker troverdige når de samme komponentene dukker opp konsekvent.

Et lite designsystem for nettbutikk består av:

- Én produktkortkomponent (brukt på forsidens utvalg, kategorioversikter, relaterte produkter og søkeresultater)
- Ett knappesystem (primær, sekundær, tertiær; bare disse tre)
- Ett system for overskriftsstiler (H1, H2, H3; brukt konsekvent)
- Én fargepalett (maks 3 merkevarefarger, pluss gråtoner)
- Én typeskala (maks 3-4 størrelser)

De fleste butikker lager 15 varianter av hver når én hadde holdt. Færre varianter = mer profesjonelt uttrykk.

## 9. Første skjermbilde er reklamen for å scrolle

Det synlige området ved første innlasting (over bretten) har én jobb: få den besøkende til å ville scrolle. Det er alt. Ikke prøv å gjøre salget i første skjermbilde.

Det som trengs over bretten:

- Hvem dette er for (på én linje)
- Hva produktet er (visuelt, ett godt bilde)
- Én tydelig CTA (Legg i handlekurv eller Handle nå)
- Ett betryggende tillitssignal (vurdering + antall anmeldelser, eller et pressesitat, eller en kjent kunde)

Det som IKKE trengs over bretten:

- Flere CTA-er som konkurrerer om oppmerksomheten
- En hero-karusell som skifter automatisk hvert 3. sekund (konverteringsdreper; kunder fryser når innholdet beveger seg)
- Alle fordelene produktet har
- Gallerier med omtaler

## 10. Fjern karusellen på forsiden

Relatert til punktet over, men verdt et eget punkt: hero-karuseller på forsider er døde. Studier viser gjentatte ganger at roterende hero-slides blir klikket på i 1-3 % av tilfellene, og at bare det første lysbildet får betydelig oppmerksomhet. Velg budskapet du ville satt på lysbilde 1, og sett det som en statisk hero. Kutt resten.

## Hva Shoprocket tar seg av

Butikkfronten med tema leveres med maler som allerede følger mønstrene for visuelt hierarki, kontrast og mobil ovenfor. Hvis du bruker widget-innbyggingen på ditt eget nettsted, styrer du designet på siden rundt, men:

- **Handlekurvskuff** (ikke handlekurv på egen side) er standard
- **Klistrende handlekurv på mobil** støttes
- **Responsive produktbilder** med automatisk WebP-levering og riktig bildeformat
- **Nettstedsbygger + over 40 temaer** så du slipper å bygge designsystemet fra bunnen
- **Egendefinerte CSS-hooks** lar deg style innbyggingen slik at den matcher nettstedet ditt

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

Det Shoprocket ikke styrer: hovedbildene dine, hvor konsekvent fotograferingen er, tekstene dine, fargesystemet ditt. Der er det du som lykkes eller feiler.

> **Tips:** Åpne butikken din på telefonen akkurat nå. Ta én produktside. Ser du Legg i handlekurv uten å scrolle? Er prisen tydelig det nest største elementet? Kan du lese beskrivelsen uten å myse? Hvis svaret på noen av disse er nei, er det den første designrettingen du bør gjøre.

## Kort oppsummert

- **Hierarki:** det viktigste elementet skal se viktigst ut. Sjekk med tometerstesten
- **Luft rundt CTA-en**, ikke overalt for luftens skyld
- **Konsekvent fotografi** slår fotografikvalitet. Én stil gjennom hele katalogen
- **CTA-kontrast, ikke farge.** Fargen med høyest kontrast mot sidens palett vinner
- **Mobiltypografi: brødtekst på 16 px+, trykkflater på 44 px+**
- **Klistrende Legg i handlekurv på mobil** er ikke til forhandling
- **Hovedbilder viser resultater** (produkt i bruk), ikke produkt på hvitt
- **Lite designsystem (3 farger, 4 størrelser, 3 knappevarianter)** ser mer profesjonelt ut enn 15 varianter
- **Første skjermbilde selger scrollingen**, ikke produktet. Ett tydelig budskap, én CTA
- **Fjern karusellen på forsiden**. Statisk hero vinner

[Start en gratis prøveperiode](https://app-v3.shoprocket.io/signup) hvis du vil ha en butikkfront med tema og disse mønstrene innebygd. 14 dager, uten kort.

---

- HTML version: https://v3.shoprocket.io/nb/blogg/ti-designvalg-nettbutikk-som-loefter-konverteringen
- Language: Norsk (nb)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/ecommerce-design-entscheidungen-die-conversion-messbar-steigern.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [English](https://v3.shoprocket.io/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Español](https://v3.shoprocket.io/es/blog/diez-decisiones-de-diseno-ecommerce-que-mejoran-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/dix-decisions-design-ecommerce-qui-augmentent-la-conversion.md), [עברית](https://v3.shoprocket.io/he/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/sepuluh-keputusan-desain-ecommerce-yang-terukur-menaikkan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/dieci-scelte-di-design-ecommerce-che-aumentano-la-conversione.md), [日本語](https://v3.shoprocket.io/ja/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/desimt-e-parduotuves-dizaino-sprendimu-didinanciu-konversija.md), [Nederlands](https://v3.shoprocket.io/nl/blog/tien-ontwerpkeuzes-webshop-die-conversie-verhogen.md), [Polski](https://v3.shoprocket.io/pl/blog/dziesiec-decyzji-projektowych-w-e-commerce-ktore-podnosza-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/dez-decisoes-de-design-que-aumentam-a-conversao-no-ecommerce.md), [Română](https://v3.shoprocket.io/ro/blog/zece-decizii-de-design-ecommerce-care-cresc-masurabil-conversia.md), [Русский](https://v3.shoprocket.io/ru/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md), [Türkçe](https://v3.shoprocket.io/tr/blog/donusumu-artiran-on-eticaret-tasarim-karari.md), [中文](https://v3.shoprocket.io/zh/blog/ten-ecommerce-design-decisions-that-measurably-lift-conversion.md)