Hva du trenger å vite for en ny design av e-handel nettstedet i 2020

Er det året du skal redesigne nettstedet for e-handel? Hvis det er noen år siden du har det, må du vite at mye har endret seg.

Det sier seg selv at et moderne netthandelsnett først må utformes for mobil, ettersom de fleste som jeg jobber med nå får 70% eller mer av trafikken fra mobile enheter. Det er imidlertid bare et utgangspunkt - det er mange finesser du bør vurdere om du vil at nettstedet ditt skal konvertere brukere til kunder.

Jeg har konsultert om brukervennlighet for et bredt spekter av netthandel de siste fem årene, og jeg har utarbeidet prinsippene som de beste følger. Jeg tar deg gjennom åtte måter å sikre at nettstedet ditt er opp til grunn for dagens bruker, inspirert av retningslinjer fra boken min Designe nettstedsnettsteder.

Unngå lange videoer på hjemmesiden

Hjemmesiden er et sted å imponere. Mange nettsteder bruker penger på high-end fotografering, men du kan vurdere å bruke video her for å vise frem produkter eller fortelle merkevaren. Tross alt er video overalt nå, spesielt på sosiale medier.

Når den brukes riktig, kan video være bra for å informere brukere så vel som å spennende dem. Likevel uansett hvor prangende videoen din er, hvis brukeren trenger å klikke på avspilling, være forberedt på folk flest å ignorere det. I de mange brukertestene jeg har sett, er dette den vanligste oppførselen med destinasjonssidevideoer.

Hvorfor? På dette stadiet av brukerreisen er oppmerksomhetsspennene deres korte. Det er mer sannsynlig at brukere forlater nettstedet og spretter, og ikke forplikter seg til å se på noe ukjent.

I starten bør du hjelpe brukere med å komme seg raskt gjennom, så hold deg til korte, lydløse, automatisk spillende, loopende videoer. På denne måten får du informasjonen uten at de trenger å engasjere seg dypt. Lengre videoer kan bli veldig nyttige senere på reisen for å forklare ting som produktfunksjoner, når brukeren er mer interessert.

Prynt-nettstedet bruker en kort videoavspilling for å vise produktet i aksjon. Det er også et alternativ å se hele saken med lyd.

Ikke fyll hjemmesiden din med overflødig innhold

Hvis du har gjort det harde markedsføringsarbeidet med å få brukere inn på hjemmesiden din og har laget en overbevisende tonehøyde for butikken din, hva neste? Det er mye du kan fortelle dem om selskapet ditt, så er det nå sjansen?

Vær forsiktig. Jo lengre du lager destinasjonssiden, desto mer risikerer du at brukeren slår seg av eller blir forvirret. Selv om brukerne er komfortable med å bla, vil de snart stoppe hvis innholdet ikke er direkte relatert til oppgaven deres.

Når du designer, hold deg til regelen om 'en side, ett formål'. Hensikten med denne siden er å introdusere det du selger, og få brukeren til å lete etter disse produktene.

Trenger de virkelig å se de fem siste blogginnleggene dine, de siste tweetsene dine og en vegg med Instagram-bilder? Sosiale innlegg er spesielt lite nyttige, ettersom du nettopp har fått brukere inn på nettstedet ditt, og hvis du klikker på disse vil du fjerne dem igjen.

Jo flere ting du legger på siden, jo mer distraksjoner du gir brukeren fra hovedhandlingen og det viktigste du vil at de skal gjøre. Mobilbrukere har en tendens til å ha kortere økter og fokusere på å oppnå oppgaver - ekstra innhold hjelper ikke med det.

Gjør filtrene dine lett tilgjengelige

Når du har mange produkter, er filtre avgjørende for å hjelpe brukere med å finne det de trenger. De aller fleste e-handelssteder (ca. 90% av de jeg har studert) har filtrene sine i et overlegg på mobil. Dette er fornuftig når det ikke er mye plass tilgjengelig, men det betyr at brukerne ikke har stor sannsynlighet for å se dem.

Som en regel 95% av brukerne endrer ikke standardinnstillinger og dette gjelder for å åpne en filtermeny for å velge spesifikke alternativer. Det er noe som har blitt gjennomgått i brukertestene for netthandel jeg har sett også. Å finne produkter på oversiktssidene er et område der nettopplevelsessurfing er overlegen på skrivebordet.

Hvis brukerne dine filtrerer, er det mer sannsynlig at de finner et produkt de faktisk ønsker. Din utfordring på mobil er å finne plassbesparende måter å gjøre det på. En metode viser den mest relevante filterkategorien på siden med knapper for alternativene (se Macy's nedenfor). Ved å trykke på en vil laste opp lister med det anvendte filteret, på hvilket tidspunkt neste mest relevante filter vil vises.

ecommerce redesign - Macy's filteralternativer
Macy's nettsted bringer noen filteralternativer inn på siden som knapper. Burberry synliggjør filterkategoriene på siden.

 

Sørg i det minste for at knappen for å komme til fullfiltermeny er åpenbar. Det skal også tydelig indikere når et filter brukes, slik at brukerne vet når de ser et begrenset sett med resultater.

Redesign oppføringene dine for større bilder

De fleste netthandelsoppføringssider prøver å vise mange produkter på skjermen samtidig. Som et resultat av produktet bilder har en tendens til å være ganske små (det er derfor de tradisjonelt er kjent som miniatyrbilder).

Likevel er bildet en sentral del av å hjelpe brukeren til å ta en beslutning om hvilket produkt han skal velge. I mange tilfeller forteller det deg mye mer enn noen tekst kan. Produkter som klær og møbler er avhengige av at brukeren gjør et subjektivt skille mellom de forskjellige tingene som tilbys.

Du kan til og med ha store bilder på mobilen. Apper som Instagram har ført til at brukere forventer høy kvalitet uansett hvor de er, og jeg har ofte sett brukere sette pris på dette. Det spiller ingen rolle hvor de er på siden, god fotografering er alltid elsket.

Airbnb har store bilder som kan rulles gjennom (til venstre). Zara (til høyre) har bilder i full skjermbredde på listene.

Selvfølgelig, hvis du tror at noe kan selges bedre i noen få bilder, så gjør det. Reisesider har ofte flere bilder i miniatyrbilder med oversiktlig pil for å bla gjennom dem. Mange klesider tilbyr muligheten til å vise produktet på egen hånd og bæres av en modell.

Vis produktalternativer som knapper

Du vil være klar over at mange produkter er tilgjengelige i varianter som farge, størrelse, materiale eller noe annet. Produktdetaljer-siden er der brukere til slutt tar det valget. For å gjøre valget lettere, bør du unngå å dumpe disse alternativene i rullegardinmenyene.

De burde være visuelle knapper for å hjelpe brukeren med å se alle alternativene, og de bør gjøre det klart når en variasjon betyr en prisendring. Hvis varianten endrer utseendet til produktet (for eksempel fargen), bør du oppdatere hovedproduktbildet hvis du velger det. Dette lar brukeren ikke være i tvil om hva som vil bli bestilt.

e-handel redesign - alternativer for nike størrelse
John Lewis (til venstre) har produktfarger som knapper med visuelle indikatorer. Nike (til høyre) avslører alle størrelsesalternativer og deaktiver størrelsene som ikke er tilgjengelige.

En annen fordel er at ved å deaktivere visse knapper, kan brukeren med et øyeblikk se hvilke varianter som er utsolgt. Igjen sparer dette bla gjennom en nedtrekksliste med alternativer.

Når det gjelder valg av størrelse, er det best å ikke ha en standardstørrelse. Hvis det er brukere, kan de ende opp med å legge til standard i stedet for de de ønsker. Dette kan føre til at du får masse avkastning og frustrerte kunder.

La ut delingsknappene

Facebook, Twitter, Pinterest, Instagram, LinkedIn, Snapchat. Brukerne dine henger sannsynligvis sammen på en eller flere av disse sosiale nettverk. Så skal du gi dem delingsknapper på produktdetaljsiden?

Mange netthandelssider viser fremdeles de små ikonene i håp om at det vil oppmuntre folk til å markedsføre varene sine på nettet. Dessverre er de nesten helt sikkert bortkastet tid.

Ingen klikker dem. Egentlig gjør 0.2% av mennesker, ifølge en studie. Også det kan virke som et kodebit, men det kommer med mange ekstra ting som bremser siden hastighet.

Fremveksten av betalte 'påvirkere' betyr at den moderne brukeren ikke lenger ønsker å kringkaste for merker uten at noe er i det for dem. Flere vil være villige til å dele privat med en venn eller familiemedlem. Koblinger som tillater deling via e-post eller en direktemeldingstjeneste som WhatsApp, vil sannsynligvis fungere bedre.

Integrer betalingslommebøker

Betalingslommetjenester som PayPal, Apple Pay og Android Pay er på vei oppover. Det blir stadig mer vanlig å se dem som alternativer i e-handel kassestrømmer. Faktisk kan de drepe av standard kassen og muligens bruk av kredittkort og kontanter helt.

e-handels redesign - amazon pay integration
Tamara Mellon (til venstre) har muligheten til Apple Pay, PayPal og Amazon Pay i handlekurven og kassen. Gucci tilbyr muligheten til å hoppe til PayPal fra "legg til bag" -varselet.

Å legge inn et passord, fingeravtrykk eller ansiktsskanning og deretter kunne fullføre kassen er så mye mer praktisk enn å fylle ut skjemaer. Med netthandel dominert av mobil er det essensielt å tilby enkel betaling som ikke innebærer en fyldig formutfylling.

Den store brukervennligheten bør oppmuntre flere brukere til å fullføre kassen med deg. Det er også en sikkerhetsgevinst da brukere sannsynligvis vil føle seg tryggere med en lommebok som mellommann hvis de ikke har hørt om merkevaren din før.

På tvers av brukertestene jeg har kjørt på kassestrømmer, hører jeg regelmessig kommentarer som "Jeg foretrekker mye å bruke PayPal" og "Jeg er veldig sikkerhetsbevisst og vil bare betale med PayPal". PayPal er foreløpig godt kjent, men når du bestemmer deg for hvilken som skal brukes, gå til nettstedets mest populære land og enheter.

Tillat brukere å samle

Et økende antall netthandel nettsteder tilbyr brukerne muligheten til å samle inn bestillingen i stedet for å få den levert. Det er bra for brukere som ikke er hjemme veldig ofte og heller ikke kan få levering til deres arbeidssted. Hvis du gir dette alternativet, vil det bare øke antall brukere som kan kjøpe fra deg.

Den enkleste (og ofte den beste) tilnærmingen er å legge til samling som et alternativ til levering i kassen. Be brukeren angi stedet og vise dem alternativer for hvor de kan hente bestillingen. Det er også viktig at du viser hentingstedets åpningstider - disse dataene kommer ofte fra integrering med et leveringsselskap.

Et klikk og samle vindu fra ASOS-kassen, slik at brukeren kan velge hvilken nærbutikk han vil sende leveringen til.

Den mer komplekse tilnærmingen er for deg å integrere muligheten til å samle inn på hver produktinformasjonsside på nettstedet. Dette er fornuftig hvis du har det murstein og mørtelbutikker da det tillater aksjekontroll i spesifikke butikker.

Imidlertid kan det oppstå problemer når brukere har flere produkter i sin rekkefølge. Hvis de ikke er forsiktige, kan de ende opp med noen produkter for levering og noen for henting (en 'blandet' kurv). For å unngå dette tidligst anbefaler jeg å la brukeren spesifisere henting eller levering er i kurvstadiet, så det gjelder hele bestillingen.

Flere råd om netthandel

Det var åtte måter å sørge for at e-handelsnettstedet ditt er omgjort for å være i form for 2020 og utover. Selvfølgelig er det mer enn det du må tenke på når du skal designe et komplett nettsted for e-handel. Faktisk har jeg skrevet en bok som inneholder 66 retningslinjer for å designe nettbutikker som konverterer, basert på 10 års UX-designerfaring.

Boken heter Designing Ecommerce Websites, den er tilgjengelig på Amazon i en rekke formater, inkludert pocket og Kindle. Eller du kan få tak i digital PDF-versjon på nettstedet mitt, som inkluderer alle illustrasjonene fra trykkboka. Du kan også få 15% avslag den digitale versjonen i en begrenset periode med kampanjekoden PLATFORMS.