Kategorinavigasjon i nettbutikk ↗
Små sortiment trenger ofte en direkte produktliste. Større sortiment kan ha en kategoriinngang som hjelper kunder å velge retning.
Finn råd for oppgaven
du skal forbedre.
Søk etter et kundeproblem, velg en kjøpsoppgave eller utforsk artiklene som viser til et butikkdesign. Hver artikkel forklarer datakilden, begrensningene og hva du kan teste.
34 av 87 artikler
Søket bruker norsk og engelsk tekst. En designreferanse betyr ikke at alle funksjonene er implementert; les eksemplets avgrensning.
Søk, kategorier og produktlister ↗
13Produktsøk og nulltreff ↗
Et tomt søkeresultat bør gi relevante veier videre. Kunden trenger mulighet til å endre søket uten å starte hele besøket på nytt.
Kolleksjonsfiltre og variantmatching ↗
Vis aktive filtre og antall treff. Tillat flere valg innen samme filtergruppe, slik at for eksempel to farger kan passe samtidig.
Mobilfiltre med bruk og avbryt ↗
I et separat mobilfilter må kunden kunne gjøre flere valg og deretter bruke dem samlet, med en tydelig knapp som er lett å nå.
Brødsmulesti og tilbake til produktlisten ↗
Skill kategoriens plass i hierarkiet fra kundens forrige resultatliste. Et tilbakevalg bør bevare søk, filtre og sortering.
Forsiden: vis hva butikken faktisk selger ↗
Vis ulike relevante innganger til sortimentet. Et stort kampanjebilde skal ikke få hele butikken til å se ut som én produktserie.
Navigasjonsnavn som kunden forstår ↗
Bruk navn på produkter og behov i navigasjonen. Kreative kampanjenavn trenger en forklaring på hva lenken inneholder.
Kategoriforside eller direkte produktliste? ↗
En kategoriforside skal hjelpe kunden å velge en meningsfull undergruppe, med en tydelig vei til alle produktene.
Mobilmeny med tydelige produktinnganger ↗
La produktkategorier være lette å finne når menyen åpnes. Lukking skal være like lett som åpning.
Filtre: OR innen en egenskap, AND mellom egenskaper ↗
Brun eller svart kan være to akseptable farger. Størrelse L og lagerstatus skal likevel gjelde den samme varianten.
Valgte filtre: oversikt og fjerning av ett valg ↗
Vis aktive begrensninger over resultatlisten med lesbare navn. Kunden skal kunne fjerne ett valg uten å nullstille alt.
Filterantall og nulltreff uten å fjerne kundens valg ↗
Antallet ved et filter skal forklare hva valget kan gi i nåværende kontekst. Behold allerede valgte nullverdier som mulige å fjerne.
Mer lasting og tilbake til samme produktliste ↗
Behold valgt filter, sortering og plass når kunden går tilbake fra et produkt. Ekstra lasting må ha en forståelig slutt.
Produktvalg, bilder og produktinformasjon ↗
11Produktbilder, miniatyrer og zoom ↗
Miniatyrbilder viser hva de ekstra bildene inneholder. Gjør dem tilgjengelige også på mobil, slik at flere bilder er lette å oppdage.
Farger, størrelser og variantvalg ↗
Synlige størrelsesknapper gjør tilgjengelige og utsolgte størrelser enklere å oppdage enn en lukket nedtrekksmeny.
Lagerstatus, utsolgt og restordre ↗
Midlertidig utsolgte produkter trenger en vei videre. Restordre kan være nyttig når virksomheten faktisk kan levere senere og forklarer forventningene.
Størrelsesguide og måltabell ved produktvalg ↗
En størrelsesbetegnelse alene gir lite grunnlag for å vurdere passform. Gi relevante mål og forklar hvordan de tas.
Produktinformasjon i synlige seksjoner ↗
Kjerneinformasjon bør være synlig eller ligge i tydelige vertikale seksjoner. Ikke gjem viktige detaljer i horisontale faner.
Variantbilder som følger valgt farge ↗
Hovedbildet og variantnavnet skal vise samme valg. Et fargebytte må ikke stille kunden foran et gammelt bilde.
Fargenavn og størrelser som tekst, ikke bare symboler ↗
Vis et lesbart navn ved farge og størrelse. Fargeprøven er et tillegg til teksten, ikke en erstatning.
Utsolgte størrelser: forklar valget og neste mulighet ↗
Behold utsolgte størrelser synlige og forklar hvorfor de ikke kan velges. Restordre trenger egen tekst.
Mobil bildezoom med tydelig lukking og fokus ↗
La kunden inspisere detaljer i et større bilde uten å miste produktvalget. Tilby en synlig lukkeknapp og tastaturvei.
Produktvideo som tillegg til fakta og bilder ↗
Bruk video til å vise bevegelse eller bruk. Viktig informasjon må også finnes som tekst og stillbilder.
Fast kjøpsknapp på mobil: behold variant og pris ↗
En fast kjøpsknapp må ha samme tilstand som produktvalget og ikke dekke informasjon eller fokus.
Handlekurv, checkout og betaling ↗
4Handlekurv: antall, fjerning og angre ↗
Pluss/minus kombinert med et tallfelt gjør antallsendringer enklere. Oppdater summen automatisk og la kunden angre når en linje fjernes.
Kurv i skuff: redigering, sum og en tydelig utgang ↗
En skuff bør vise hva som ble lagt til og la kunden fortsette, redigere eller lukke. Ikke gjør den til en blindvei.
Endre størrelse eller farge direkte fra kurven ↗
La kunden korrigere en variant uten å fjerne varen og finne produktet på nytt. Behold antallet ved endringen.
Kontroller lager på nytt før checkout ↗
En lagret kurv er et ønske, ikke en lagerreservasjon. Forklar endret kjøpbarhet før kunden kan betale.
SEO og innholdsstruktur for nettbutikk ↗
2Produktside-SEO: stabil identitet og korrekt informasjon ↗
En produktside trenger et beskrivende navn, stabil URL og riktig tilgjengelighet. Rik produktdata skal bygge på ekte varer.
Bilde-SEO: beskrivelse, størrelse og riktig format ↗
Bruk relevante bilder med beskrivende alt-tekst og plass i layouten. Filformat skal støtte kvalitet og lasting, ikke fylle et søkeordkrav.
CRO, måling og ytelse ↗
1Ytelse i nettbutikk: lasting, respons og stabilitet ↗
Mål om siden blir synlig, reagerer på kundens handlinger og holder elementer på plass. Hastighet må vurderes på faktiske enheter og kjøpsoppgaver.
Tilgjengelige valg, skjema og dialoger ↗
3Dialoger: tastatur, Escape og tilbakeført fokus ↗
Åpning skal flytte fokus inn i dialogen, og lukking skal føre kunden tilbake til en meningsfull kontroll.
Redusert bevegelse uten å miste tilbakemelding ↗
Respekter redusert bevegelse for scrolling og ikke-essensielle overganger. Kunden skal fortsatt se hva som endret seg.
Trykkflater for farger, størrelser og kurvkontroller ↗
Gi små valg nok trykkflate og avstand. Den synlige fargeprøven kan være liten mens knappen er større.