Hvad du behøver at vide for et nyt e-handelswebdesign i 2021

Er dette året du skal redesigne dit websted for e-handel? Hvis der er gået et par år siden, har du brug for at vide, at meget er ændret.

Det siger næsten sig selv, at et moderne e-handelswebsted først skal designes til mobil, da det meste, som jeg arbejder med, nu får 70% eller mere af deres trafik fra mobile enheder. Men det er bare et udgangspunkt - der er en masse subtile overvejelser, hvis du vil have dit websted til at konvertere brugere til kunder.

Jeg har hørt om usability for en bred vifte af e-handelswebsteder i de sidste fem år, og jeg har udarbejdet de principper, som de bedste følger. Jeg tager dig gennem otte måder for at sikre dig, at dit websted er op til bunden for dagens bruger, inspireret af retningslinjer fra min bog Designe e-handelswebsteder.

Undgå lange videoer på startsiden

Hjemmesiden er et sted at imponere. Mange websteder lægger penge i avanceret fotografering, men du kan overveje at bruge video her til at vise produkter eller fortælle brandhistorien. Når alt kommer til alt er video overalt nu, især på sociale medier.

Når videoen bruges korrekt, kan video være god til at informere brugere såvel som at begejstre dem. Uanset hvor prangende din video er, hvis brugeren har brug for at klikke på play, skal du være forberedt på de fleste mennesker til at ignorere det. I de mange brugertest, jeg har set, er dette den mest almindelige opførsel med destinationssidevideoer.

Hvorfor? På dette stadie af brugerrejsen er deres opmærksomhedsspænd korte. Brugere er mere tilbøjelige til at forlade webstedet helt og studs og ikke forpligte sig til at se noget ukendt.

I starten skal du hjælpe brugere med at komme hurtigt igennem, så hold dig til korte, lydløse, autospilende, loopende videoer. På denne måde får du informationerne igennem, uden at de behøver at engagere sig dybt. Længere videoer kan blive meget nyttige senere på rejsen til at forklare ting som produktfunktioner, når brugeren er mere interesseret.

Prynt-webstedet bruger en kort automatisk afspilningsvideo til at vise produktet i handling. Der er også en mulighed for at se det fulde ved lyd.

Fyld ikke din startside med overskydende indhold

Hvis du har gjort det hårde markedsføringsarbejde med at få brugere til din startside og du har oprettet en overbevisende tonehøjde til din butik, hvad derefter? Der er partier, du kan fortælle dem om dit firma, så er det nu chancen?

Vær forsigtig. Jo længere du laver din destinationsside, desto mere risikerer du, at brugeren slukker eller bliver forvirret. Mens brugere er komfortable med at rulle, stopper de snart, hvis indholdet ikke er direkte relateret til deres opgave.

Når du designer, skal du holde dig til reglen om 'en side, et formål'. Formålet med denne side er at introducere det, du sælger, og få brugeren til at kigge efter disse produkter.

Har de virkelig brug for at se dine fem seneste blogindlæg, dine seneste tweets og en mur af Instagram-billeder? Sociale stillinger er især uhensigtsmæssige, da du lige har fået brugere ind på dit websted, og hvis du klikker på disse, fjernes de igen.

Jo flere ting du lægger på siden, jo mere distraktioner, du giver brugeren fra din hovedhandling og den nøgleafdeling, du vil have dem til at gøre. Mobilbrugere har en tendens til at have kortere sessioner og fokusere på at udføre opgaver - ekstra indhold hjælper ikke med det.

Gør dine filtre let tilgængelige

Når du har en masse produkter, er filtre vigtige for at hjælpe brugerne med at finde, hvad de har brug for. Langt de fleste e-handelswebsteder (ca. 90% af dem, jeg har studeret) har deres filtre i et overlay på mobilen. Dette giver mening, når der ikke er meget plads tilgængelig, men det betyder, at brugerne ikke meget sandsynligt vil se dem.

Som regel 95% af brugerne ændrer ikke standardindstillingerne og dette gælder for åbning af en filtermenu for at vælge specifikke indstillinger. Det er noget, der er blevet gennemgået i brugertestene for e-handel, jeg også har set. At finde produkter på lister sider er et område, hvor browsingoplevelsen til e-handel er overlegen på skrivebordet.

Hvis dine brugere filtrerer, er det mere sandsynligt, at de finder et produkt, som de faktisk ønsker. Din udfordring på mobil er at finde pladsbesparende måder at gøre det på. En metode viser den mest relevante filterkategori på siden med knapper til indstillingerne (se Macy's nedenfor). Hvis du trykker på en, indlæses lister med det anvendte filter, på hvilket tidspunkt det næste mest relevante filter vises.

e-handels-redesign - Macy's filterindstillinger
Macy's websted bringer nogle filterindstillinger ind på siden som knapper. Burberry gør filterkategorierne synlige på siden.

 

I det mindste skal du sørge for, at din knap for at nå den fulde filtermenu er indlysende. Det skal også tydeligt indikere, hvornår et filter anvendes, så brugerne ved, hvornår de ser et begrænset sæt resultater.

Gendesign dine lister for større billeder

De fleste sider med e-handelsfortegnelser forsøger at vise mange produkter på skærmen på én gang. Som et resultat af produktet billeder har en tendens til at være ganske små (det er derfor, de traditionelt kaldes miniaturebilleder).

Alligevel er billedet en vigtig del af at hjælpe brugeren med at tage en beslutning om, hvilket produkt han skal vælge. I mange tilfælde fortæller det dig meget mere, end enhver tekst kan. Produkter som tøj og møbler er afhængige af, at brugeren foretager en subjektiv sondring mellem de forskellige ting, der tilbydes.

Du kan endda have store billeder på mobilen. Apps som Instagram har ført til, at brugerne forventer høj kvalitet, uanset hvor de er, og jeg har ofte set brugere sætte pris på dette. Det betyder ikke noget, hvor de er på webstedet, god fotografering er altid elsket.

Airbnb har store billeder, der kan rulle gennem (til venstre). Zara (til højre) har billeder på fuld skærmbredde på deres lister.

Selvfølgelig, hvis du tror, ​​at noget bedre kan sælges på et par billeder, så gør det. Rejsesider har ofte flere fotos i lister-miniaturebilleder med en subtil pil for at rulle gennem dem. Mange tøjsteder tilbyder muligheden for at vise produktet på egen hånd og bæres af en model.

Vis produktindstillinger som knapper

Du vil være opmærksom på, at mange produkter er tilgængelige i variationer som farve, størrelse, materiale eller noget andet. Produktdetaljer-siden er, hvor brugerne i sidste ende træffer dette valg. For at gøre valget lettere skal du undgå at dumpe disse indstillinger i rullemenuer.

Det skulle de være visuelle knapper for at hjælpe brugeren med at se alle indstillinger, og de bør gøre det klart, når en variation betyder en prisændring. Hvis varianten ændrer udseendet på produktet (f.eks. Farve), skal det at opdatere hovedproduktbilledet, hvis du vælger det. Dette giver brugeren ingen tvivl om, hvad der vil blive bestilt.

e-handels redesign - indstillinger for nike størrelse
John Lewis (til venstre) har produktfarver som knapper med visuelle indikatorer. Nike (til højre) udsætter alle størrelsesindstillinger og deaktiverer de størrelser, der ikke er tilgængelige.

En anden fordel er, at ved at deaktivere visse knapper, kan brugeren derefter se med et øjeblik, hvilke varianter der er udsolgt. Igen gemmer dette rulle gennem en rulleliste med indstillinger.

Når det kommer til størrelsesvalg er det bedst ikke at have en standardstørrelse. Hvis der er brugere, kan de ende med at tilføje standard i stedet for dem, de ønsker. Dette kan føre til, at du får masser af afkast og frustrerede kunder.

Lad være med at dele delingsknapperne

Facebook, Twitter, Pinterest, Instagram, LinkedIn, Snapchat. Dine brugere hænger sandsynligvis sammen med en eller flere af disse sociale netværk. Så skal du give dem delingsknapper på dine produktdetailsider?

Mange e-handelssteder præsenterer stadig disse små ikoner i håb om, at det vil tilskynde folk til at reklamere for deres varer på nettet. Desværre er de næsten helt sikkert spild af tid.

Ingen klikker på dem. Faktisk gør 0.2% af mennesker, ifølge en undersøgelse. Det kan også virke som et kodestykke, men det kommer med masser af ekstra ting, der sænker din sides hastighed.

Stigningen af ​​betalte 'influencere' betyder, at den moderne bruger ikke længere ønsker at udsende for mærker uden noget i dem for dem. Flere mennesker er villige til at dele privat med en ven eller familiemedlem. Links, der tillader deling via e-mail eller en chatbeskedtjeneste som WhatsApp fungerer sandsynligvis bedre.

Integrer betalings tegnebøger

Betaling tegnebog tjenester såsom PayPal, Apple Pay og Android Pay stiger. Det bliver stadig mere almindeligt at se dem som muligheder i e-handels checkout-strømme. Faktisk kan de dræbe standardcheck og muligvis brugen af ​​kreditkort og kontanter helt.

e-handels redesign - amazon pay integration
Tamara Mellon (til venstre) har mulighed for Apple Pay, PayPal og Amazon Pay i deres kurv og kasse. Gucci tilbyder muligheden for at hoppe til PayPal fra meddelelsen 'tilføj til taske'.

Det er så meget mere praktisk at indtaste en adgangskode, fingeraftryk eller ansigtsscanning og derefter kunne fuldføre kassen end at udfylde formularer. Med e-handel, der er domineret af mobil, er det vigtigt at tilbyde nem betaling, der ikke involverer uformel udfyldning af formularer.

Den rene brugervenlighed bør tilskynde flere brugere til at gennemføre kassen med dig. Der er også en sikkerhedsfordel, da brugerne sandsynligvis føler sig mere sikre med en tegnebog som mellemmand, hvis de ikke har hørt om dit brand før.

På tværs af brugertestene, jeg har kørt på kassestrømme, hører jeg regelmæssigt kommentarer som "Jeg foretrækker meget at bruge PayPal" og "Jeg er meget sikkerhedsbevidst og betaler kun ved hjælp af PayPal". PayPal er i øjeblikket velkendt, men når du beslutter, hvem der skal bruges, skal du gå til dit websteds mest populære lande og enheder.

Tillad brugere at samle

Et stigende antal e-handelswebsteder tilbyder brugerne mulighed for at indsamle deres ordre snarere end at få den leveret. Det er godt for brugere, der ikke er hjemme meget ofte og heller ikke kan få levering til deres arbejdsplads. Hvis du giver denne mulighed, øges kun antallet af brugere, der kan købe fra dig.

Den letteste (og ofte den bedste) tilgang er at tilføje indsamling som et alternativ til levering i kassen. Bed brugeren om at indtaste deres placering og vise dem indstillinger for, hvor de kan afhente sin ordre. Det er også vigtigt, at du viser afhentningsplaceringens åbningstider - disse data kommer ofte fra integration med et leveringsfirma.

Et klik og saml vindue fra ASOS-kassen, så brugeren kan vælge, hvilken dagligvarebutik han vil sende deres levering til.

Den mere komplekse tilgang er for dig at integrere muligheden for at indsamle på hver side med produktdetaljer på webstedet. Dette giver mening, hvis du har det mursten og mørtel butikker da det tillader lagerkontrol i specifikke butikker.

Imidlertid kan der opstå problemer, når brugerne har flere produkter i deres rækkefølge. Hvis de ikke er forsigtige, kan de ende med nogle produkter til levering og nogle til indsamling (en 'blandet' kurv). For at undgå dette tidligst anbefaler jeg at lade brugeren specificere indsamling eller levering er i kurvstadiet, så det gælder hele ordren.

Flere råd om e-handel

Det var otte måder at sikre, at dit e-handelswebsted bliver redesignet til, så det passer til 2020 og fremover. Der er selvfølgelig mere end det at overveje, når man redesigne et komplet websted for e-handel. Faktisk har jeg skrevet en bog, der indeholder 66 retningslinjer for design af online butikker, der konverterer, baseret på 10 års UX-designerfaring.

Bogen kaldes Designing E-handelswebsteder, den er tilgængelig på Amazon i forskellige formater, herunder pocket og Kindle. Eller du kan få fat i digital PDF-version på mit websted, der inkluderer alle illustrationer fra trykbogen. Du kan også få 15% rabat den digitale version i en begrænset periode med promo-koden PLATFORMS.