När jag skissade layouten för en modellbutik för kaffe i 2014 blev det logiskt att beskriva sidhuvud, startsida, kategori och produktdetalj nästan som byggklossar: logotyp till vänster, varukorg till höger, filter här, köpknapp där.
Människors grundläggande förväntningar har inte förändrats särskilt mycket. Kontexten har förändrats: de flesta designer måste fungera på mobilen, erbjudandena är mer komplexa och varje extra skript konkurrerar om snabbhet och uppmärksamhet. Därför rekommenderar jag inte längre att kopiera en layout blint. Jag rekommenderar att gå igenom kundernas uppgifter.
Sidhuvudet ska orientera, inte visa alla alternativ
I sidhuvudet letar människor efter varumärke, navigering, sök, konto och varukorg. Allt behöver inte ha samma tyngd. Prioriteringen förändras med katalogen och köpfasen.
- Logotypen leder hem och har ett begripligt textnamn.
- Sök är lätt att nå när människor känner till en produkt eller parameter.
- Varukorgen visar sitt tillstånd och försvinner inte när en vara har lagts till.
- Kontakt eller hjälp går att hitta utan att konkurrera med köpet.
- Menyn fungerar med pekskärm, tangentbord och utan exakt muspekning.
En utfällbar meny kan hjälpa en bred katalog. Med tio kategorier är den ofta bara ett imponerande hinder. Google rekommenderar att kategorier och produkter kan nås via vanliga navigeringslänkar; enbart sök kanske inte gör hela katalogen synlig för robotar. Principerna beskrivs i dokumentationen om e-handelswebbplatsers struktur.
Startsidan ska fördela trafik, inte berätta om hela katalogen
På startsidan behöver jag snabbt förstå vad butiken säljer, vem den är till för och vart jag ska gå vidare. I stället för ett automatiskt bildspel föredrar jag en tydlig prioritet och flera stabila ingångar till de viktigaste köpsituationerna.
Bästsäljare kan hjälpa, liksom säsongskategorier, råd eller en anledning att lita på butiken. Varje block måste ha en uppgift. ”Så att sidan inte känns tom” är ingen uppgift.
En kategori hjälper till att begränsa valet
En kategori är inte SEO-text som klistrats ovanför ett produktgaller. Den är ett beslutsverktyg. Namnet och den korta introduktionen definierar erbjudandet, filtren begränsar det och sorteringen hjälper utifrån kundens situation.
- Namnge filter med kundernas språk, inte interna databasfält.
- Visa aktiva val efter filtrering och gör dem enkla att ta bort.
- Visa viktiga underkategorier som länkar, inte bara som skriptvärden.
- Visa listdata som behövs för jämförelse; lägg resten i detaljen.
- Ett tomt resultat bör erbjuda en väg tillbaka, inte en återvändsgränd.
Brödsmulor hjälper människor att förstå sin plats i katalogen och kan hjälpa sökmotorer att förstå hierarkin. Om du använder strukturerade data ska du följa Googles aktuella dokumentation om brödsmulor.
Produktdetaljen måste besvara frågor före och efter knappen
En synlig knapp för att lägga i varukorgen är en grund, inte hela produktdetaljen. Innan de bestämmer sig behöver människor namn, pris, variant, tillgänglighet, frakt, returer, fotografier och information som motsvarar köpets risk.
För kaffe spelar ursprung, smak, rostning, vikt och tillredning roll. För en borrmaskin är specifikationer, kompatibilitet och service viktigare. Det finns ingen universell ordning. Det finns en universell fråga: vad behöver kunden veta för att köpa rätt variant och inte returnera den senare?
Omdömen bör vara trovärdiga och gälla den specifika produkten. Rekommenderade varor bör stödja valet, inte leda någon bort från ett nästan slutfört köp. En social knapp på en produktdetalj är fortfarande ingen prioritet. Vi borde ha överlevt tiden då en gilla-knapp var svaret på allt.
Varukorg och kassa ska undanröja överraskningar
Varukorgen måste tillåta ändringar av antal och variant samt borttagning av varor. Visa totalpris, frakt och leveransdatum så tidigt som möjligt, inte efter det tredje steget och registreringen.
Gästkassa är ofta ett klokt standardval. Om ett konto erbjuder verkligt värde, erbjud det efter beställningen. Formulär behöver korrekta etiketter, autofyllning och felmeddelanden som förklarar vad som ska rättas. Pekmål måste vara tillräckligt stora; det aktuella kriteriet beskrivs i WCAG 2.2 under Target Size.
Mät uppgifter, inte knappens färg
A/B-testning kan hjälpa när ett företag har tillräckligt med trafik, en hypotes och ett avgörande mått. Veckovisa bannerbyten utan tillräckligt urval är en lekplats, inte en tillförlitlig slutsats.
Jag följer användningen av sök och filter, åtgärder för att lägga i varukorgen, formulärfel, avhopp vid varje steg, returer och supportfrågor. Jag kompletterar siffrorna med att observera människor och deras frågor. Analys visar var; en människa förklarar ofta varför.
Grunden för mätningen finns i Google Analytics 4. Jag diskuterar prestandakontroller i Så snabbar du upp en webbplats.
En webbutik behöver inte vara originell i var varukorgen finns. Den måste vara övertygande om varför man ska köpa just den här produkten här.
För argument på produkt- och säljsidor, fortsätt med Viktiga delar på en säljsida. Hela grunden för webbplatsen finns i Så startar du ett webbprojekt.