5 vanlige designfeil nettbutikker gjør
gard
1. For dårlige bilder
Ingenting drar ned førsteinntrykket like mye som dårlige bilder. Ofte begynner prosessen med en ny nettbutikk lenge før innholdet er klart. Dermed starter arbeidet med lorem ipsum og stockbilder. Kanskje litt upersonlig, men resultatet blir en moderne, pen og funksjonell side. Det er her mitt største irritasjonsmoment kommer inn. Det som tidligere var en moderne nettbutikk, blir dratt tilbake til 90-tallet. Kornete bilder, dårlig belysning og produktbilder i ulike formater er noen av feilene som går igjen.
Jeg har selv tatt produktbilder og vet hvor vanskelig prosessen kan være. I en ideell verden burde alle nettbutikker investert i profesjonelle bilder, men det lar seg ikke alltid gjøre. Den gode nyheten er at du kan ta fine bilder med et mobilkamera. Legger du noen hundrelapper på lys (dagslys er gratis), studio (kan bygges med papir og pappesker) og et redigeringsverktøy (GIMP koster ingenting), kan alle ta nesten-profesjonelle bilder. YouTube er en glimrende ressurs for nybegynnere.
2. Designer kun for egen skjerm
Hvis du sitter på en stor skjerm har du kanskje opplevd følgende. Du browser en side med bilder som strekker seg over hele skjermen, og plutselig ser du et bilde som bare dekker 70%. Hvorfor skjer dette? Det er et par grunner: Du sitter på en skjerm som er større enn originalbildet. Det er ikke definert noen fast bildestørrelse på forsiden (eksempelvis width: 100%;). Og designeren sitter på en skjerm som er mindre en din. Heldigvis er dette lett å unngå. Jeg anbefaler at du definerer en maks-bredde på siden. Dette er spesielt viktig i en verden hvor skjermer blir større og større.
En annen klassisk feil er tekst som ikke får plass på mobil. Dette er en feil du ofte ser på veldig lange ord – som sjokoladekakespisekonkurranse – som ikke har et naturlig brytepunkt. Og på tekst som ligger i bilder. Begge deler kan fikses med gode CSS-regler. Fontstørrelser kan for eksempel settes i rem, og du kan bruke media queries for å endre font-størrelsen på ulike skjermstørrelser. CSS har også støtte for å sette tekstbrytning med word-break.
Husk derfor å sjekke siden på ulike skjermstørrelser før du lanserer. Og ta kontakt med en webdesigner (meg, for eksempel) om CSS er gresk for deg.
3. Kontrast på kjøpsknapper
For en stund siden prøvde Gustav og jeg å løse det eldste mysteriet innen netthandel: Hvilken farge burde kjøpsknappen ha? Vi begynte å lese studier. Den vanligste konklusjonen: Kjøpsknappen burde være grønn. Den nest vanligste konklusjonen: Grønn er den fargen som selger dårligst. Så da var vi like langt.
Et par ting lærte vi riktig nok. Kjøpsknappen burde ha en tydelig kontrast. Det kan være så enkelt som en sterk bakgrunnsfarge. Det kan være en border eller skygge. Hover-effekten burde være relativt tydelig; musepekeren må endres fra pil til hånd, kanskje knappen bytter farge. Videre burde knappen passe inn med ditt uttrykk, men fortsatt skille seg ut. Og samtidig snakke til din målgruppe.
Når alt dette er på plass, kommer den viktigste jobben: testing. Vi kan sitte å prate om grunnregler, gjøre kalkulerte gjetninger. Men til syvende og sist er det dine kunder som bestemmer. Hva som trigger din målgruppe er det ingen studie som kan svare på. Det beste er å kjøre A/B-testing. Men det kan selvfølgelig også testes manuelt. Pass på at du har et analyseverktøy som gjør at du kan måle trafikk og resultater.
4. Kopierer innhold med formattering
Skriver du innhold i nettbutikken har du kanskje merket det selv. Du kopierer tekst fra et Word-dokument og limer det inn på nettsiden. Resultatet blir to ulike fonter i tre ulike størrelser. Kanskje er også fargen og tekst-justeringen forskjellig. Teksten din har rett og slett arvet formatteringen til originaldokumentet via usynlige HTML-klasser.
Heldigvis kan problemet løses. Øverst til høyre kommer du til å se to valg: «Visuell» og «Kode». Du sitter garantert i førstnevnte. Og bytter du til «Kode» kan du fritt lime inn teksten som normalt. Dessverre er også linjeskift en av de usynlige HTML-klassene, så dette må legges inn manuelt. Alternativt kan du også prøve å fjerne formateringen i original-dokumentet, men det er ikke alle redigeringsverktøy som enten støtter eller utfører akkurat den funksjonen spesielt bra.
5. Bruker all tiden på design
Misforstå meg rett: Det morsomste med å drive på nett er den kreative biten. Jeg liker også å gjøre småjusteringer frem og tilbake. Bruke noen timer på å finne den fonten. Justere sjatteringen på blåfargen 10-12 ganger. Og handlekurv-ikonet skal definitivt være 2.2 rem bredt og ikke 2. Men som Pia nylig skrev: Ikke glem å selg. Nettopp fordi design er så gøy (og sidebyggeren gjør det så enkelt), går dagene fort. Og selv om uttrykk er (veldig!) viktig, er det viktigste at nettbutikken din genererer omsetning.
Bruk heller tiden din på markedsaktiviteter og salg.