Tips for design og layout

Starter Yes
Mini Yes
Active Yes
Pro Yes

Hvordan får man en fin og brukervennlig design i nettbutikken? I våre nettbutikker kan du velge mellom mange forskjellige maler som er gode utgangspunkt. Hvis du vil ha en personlig og unik design kan det gjøres med små endringer i malen. Her går vi gjennom ting som kan være bra å tenke på når du planlegger butikkens layout og design.

Lag et utkast av strukturen

Det kan være lurt å først bestemme seg hva slags design man vil ha. Begynn med å skisse opp hvordan du vil at designen skal se ut, du kan til og med begynne med papir og blyant. Du kan også bruke et bildebehandlingsprogram for å enkelt skape et mer presist bilde av designen. Det er enklere å se hva som ser bra ut, når du enkelt kan velge typesnitt, farger, layout osv. Tenk også på hvilke felt du vil ha med på siden; sidehode, sidefot, sidefelt til høyre og/eller venstre. Når du har et klart bilde på hvordan du vil at designen skal se ut, kan du starte med å undersøke hvordan du kan gjøre dette i administrasjonen i nettbutikken. Vanligvis finnes det ingen tekniske hindringer, det meste kan gjøres på en eller annen måte.

Det kan også være lurt å ta en titt på konkurrenters nettsider. Søk på Google etter både norske og engelske nettbutikker som selger liknende produkter, "lån" de beste idéene som kan passe i din butikk.

  • Se på liknende nettbutikker og tenk på hva som er bra i deres design

  • Hvilke av disse idéene kan du selv bruke i din butikk?

  • Tenk på hvilke sideområder du skal bruke (venstre, høyre, sidehode og sidefot)

Brukervennlighet først!

Det er viktig å forstå hvordan de ulike delene påvirker helhetsinntrykket og brukervennligheten av siden. F.eks. ved valg av farger er det viktig at de er harmoniske og at det ikke er for mange forskjellige farger. Ved hjelp av farger kan man forsterke elementer, som f.eks. kjøp-knappen, og dermed rette kundenes oppmerksomhet mot de viktigste delene av siden. Hvis det på samme side er forsterket titalls lenker på forskjellige deler av siden, kan man regne med at kundenes oppmerksomhet reduseres til null. Man må forsøke å finne balansen mellom en fin design og bra brukervennlighet. Hvis kjøp-knappen ikke syntes p.g.a. for mange dekorasjonsbilder, kan det være lurt å starte på nytt.

  • Arranger produktkategoriene, navigasjonslenkene og handlekurvlenkene sånn at de er enkle å finne. Hvis noen mindre viktige elementer forstyrrer brukervennligheten, flytt disse elementene til en annen del av siden eller fjern dem helt.

  • Husk at det viktigste er at butikken er enkel å bruke og at de viktigste elementene er lette å finne. Bestem deg først for sidens oppsett, senere kan du starte å tenke på hvordan det kan se bra ut.

  • Test butikkens brukervennlighet med noen utenforstående, som ikke kjenner butikken. Se om de kan gjennomføre en bestilling og finne nødvendige funksjoner og informasjon. Spør om tilbakemelding om hva som kan forbedres.

Vær forsiktig med valg av farger

Det kan være en god idé å holde antallet farger nede, for sidens klarhet og enkelhet. Bakgrunnen kan gjerne være hvit og teksten kan være svart. Det gjør teksten lettere å lese, og en enkel fargesetting øker butikkens pålitelighet. Det betyr selvfølgelig ikke at designen behøver å være kjedelig, et velvalgt og godt plassert bilde kan gjøre siden uttrykksfull. Overskrifter og lenker kan f.eks. også være i andre farger enn svart, det gjør at de skiller seg ut og drar oppmerksomhet.

Man kan velge ut 2-3 hovedfarger. Svart og hvit reknes ikke med, heller ikke forskjellige nyanser av grått. Som hovedfarger kan man f.eks. velge farger som brukes i logen, da passer logen automatisk naturlig inn på siden. Utenom hovedfargene kan man bruke lysere nyanser av disse fargene på større områder, som f.eks. bakgrunnsfarge i tabeller osv. Velg den lysere nyansen ved å først velge hovedfargen og så dra markøren mot det hvite hjørnet, til du har ca. en femtedel igjen fra startpunktet til det hvite hjørnet. I et bildebehandlingsprogram kan man få samme effekt ved å velge 20% transparens.

Lagre alle hovedfarger og nyanser i fargevelgeren. Du lagrer farger ved velge rett nyanse (eller fylle inn fargekode) og deretter klikke på en tom rute under "Brukerdefinerte farger" i fargevelgeren. Da slipper du å huske fargekodene og du unngår å bruke "nesten samme farge" på ting som egentlig skal være like.

  • Velg 2-3 hovedfarger og, hvis det trengs, lysere nyanser av dem

  • Lagre de fargene du velger, så du enkelt finner de rette nyansene senere

  • Bruk de fargene du har valgt til overskrifter, lenker og bakgrunnsfarger.

Fonter og overskrifter

I nettbutikkens administrasjon finnes det ikke så stort utvalg av fonter, men de fontene som finnes er fonter som er tilgjengelige i alle operativsystemer, noe som gjør at man kan være sikker på at teksten alltid ser lik ut, for alle som besøker nettbutikken. Det finnes også tjenster somGoogle Fonts som kan brukes for å få ett større utvalg.

Velg de fontene du vil bruke, og lagre dem i designverktøyet i administrasjonen. Når du skriver produktbeskrivelser, nyhetstekster på startsiden osv. er det mulig å velge en font for akkurat det innlegget i tekstredigeringen, men vi anbefaler å ikke bruke forskjellige fonter for spesifikke tekstinnlegg, la teksten være i den fonten som ble valgt i designen. Da passer sidene bedre sammen, og du kan enkelt endre fonten for tekster(uten å endre hvert enkelt teksinnlegg). kildekoden holder seg også enkel (sidene lastes raskere og forskjellene i de ulike nettlesere er mindre). Vanligvis er det bra å bruke samme font i alle felt på siden, men man kan selvfølgelig bruke andre fonter i f.eks. sidehodet. Velg størrelsen på fontene slik at de er store nok til at det er enkelt å lese, også lengre tekster.

Brødteksten kan gjerne være svart. Overskriftene kan være i en annen farge, helst fra en av hovedfargene, sånn at det blir en sammenheng. En nyanse av grått kan også være bra. Velg f.eks. forskjellige farger/nyanser for overskrift 1, 2 og 3 så de er lette å skille fra hverandre.

  • Velg fonter og lagre dem i designinnstillingene

  • Unngå å endre font for spesifikke tekster, bruk i stedet fonten fra designinnstillingene

  • Kontroller at også lengre tekstavsnitt er lettleste

Lenker

Velg en måte for å fremheve lenkene. Det kan gjøres på egne måter for de forskjellige feltene på siden. Understrekning av tekst brukes ofte for lenker, derfor antar man ofte at tekst med understrekning er en lenke. Lenker kan også ytterligere framheves ved å presentere dem med en annen farge, men unngå å bruke samme farge som på overskriftene, da blir det mer oversiktlig. Aktive lenker, d.v.s. når brukerens markør er over lenken, kan også framheves ved å f.eks. gi den en litt sterkere nyanse en normale lenker. Det lokker brukeren til å klikke på lenken. Bruk ikke fet stil for aktive lenker hvis ikke vanlige lenker også har det.

  • Løft frem lenkene med understreking og/eller farge, så brukeren ser med en gang at det er en lenke, uten å behøve styre markøren over lenken

  • Hvis det er behov, bruk en litt sterkere nyanse av fargen på aktive lenker for å lokka brukeren til å åpne den

Bilder

Bildene utgjør en stor del av designen. Et lite utfyllingsbilde på rett plass kan gi en bedre følelse for hele siden, med en gang. Når bilder skal velges, bør det tenkes gjennom hvilke farger bildet inneholder og hvordan de passer sammen med fargene i butikken. Med et bildebehandlingsprogram kan fargenyansene justeres noe, for å få dem til å passe sammen med butikkens øvrige farger. Gode posisjoner for bilder kan f.eks. være øverst i innholdet på startsiden, eller i sidehodet, hvis bildet skal vises på alle undersider også. Sidefeltet kan også være bra for bilder, men da bør det også legges til en slags funksjon for bildet, f.eks. at det er en lenke til produkttilbud eller nyheter.

Produktbildene har også en vesentlig betydning for designet. Legg til noen populære produkter på startsiden. Hvis det er flere nivåer på kategoriene, kan man også legge til noen produkter på kategorisidene i forkant av underkategoriene.

Utfyllingsbildene behøver ikke nødvendigvis ha noen sammenheng med selve virksomheten, de er merl for å skape en spesiell stemning eller inspirasjon. Det kan være vanskelig å finne bra bilder, men det er verdt å legge litt tid i det. Det finnes flere forskjellige bildebanker på nettet, hvor man kan lete etter passende bilder. Bildene er ofte ikke gratis, men digitale bilder med bra kvalitet  kan man få for rundt 20 kroner. Utover å tenke på fargene og følelsen i bildene, bør også dimensjonene tas i betraktning. Hvis du f.eks vil legge til et bilde i sidehodet, bør det beskjæres sånn at det er bredt nok, og ikke for høyt.

 

Mer informasjon:

Instruktionsvideo - ePages Design for beginners (på engelsk)

Share on social media