Vad du behöver veta för en e-handelswebsite omdesign 2021

Är det året du ska göra om din e-handelswebbplats? Om det har gått några år sedan, måste du veta att mycket har förändrats.

Det säger sig självklart att en modern e-handelssajt först måste utformas för mobil, eftersom de flesta som jag arbetar med nu får 70% eller mer av sin trafik från mobila enheter. Men det är bara en utgångspunkt - det finns många finesser att tänka på om du vill att din webbplats ska konvertera användare till kunder.

Jag har konsulterat om användbarhet för ett brett utbud av e-handelswebbplatser under de senaste fem åren och jag har utarbetat principerna som de bästa följer. Jag tar dig igenom åtta sätt att se till att din webbplats är upp till grund för dagens användare, inspirerad av riktlinjer från min bok Designa e-handelswebbplatser.

Undvik långa videor på hemsidan

Hemsidan är en plats att imponera på. Många webbplatser lägger pengar på high-end fotografering men du kanske överväger att använda video här för att visa upp produkter eller berätta varumärkeshistorien. När allt kommer omkring finns video överallt nu, särskilt på sociala medier.

När den används på rätt sätt kan video vara bra för att informera användare och spännande dem. Men oavsett hur prickande din video är, om användaren behöver klicka på uppspelning, var du beredd på de flesta människor att ignorera det. I de många användartest som jag har sett är detta det vanligaste beteendet med målsidevideoer.

Varför? I detta skede av användarresan är deras uppmärksamhetsspännen korta. Användare är mer benägna att lämna webbplatsen helt och studsande, inte förpliktar sig att titta på något okänt.

I början bör du hjälpa användare att gå snabbt igenom så hålla fast vid korta, tysta, autospelande, slingande videor. På så sätt får du informationen utan att de behöver engagera sig djupt. Längre videor kan bli mycket användbara senare på resan för att förklara saker som produktfunktioner när användaren är mer intresserad.

Prynt-webbplatsen använder en kort automatisk uppspelningsvideo för att visa produkten i aktion. Det finns också ett alternativ att titta på det hela med ljud.

Fyll inte din hemsida med överflödigt innehåll

Om du har gjort det hårda marknadsföringsarbetet för att få användare till din hemsida och har skapat en övertygande tonhöjd för din butik, vad händer då? Det finns mycket du kan berätta om ditt företag så är det nu chansen?

Var försiktig. Ju längre du gör din målsida desto mer riskerar du att användaren stänger av eller blir förvirrad. Medan användarna är roliga att rulla kommer de snart att sluta om innehållet inte är direkt relaterat till deras uppgift.

När du designer, håll dig till regeln om "en sida, ett syfte'. Syftet med denna sida är att presentera vad du säljer och få användaren att leta efter dessa produkter.

Behöver de verkligen se dina fem senaste blogginlägg, dina senaste tweets och en vägg med Instagram-bilder? Sociala inlägg är särskilt användbara eftersom du just har fått användare på din webbplats och klicka på dessa tar bort dem igen.

Ju fler saker du lägger på sidan, desto mer distraktioner du ger användaren från din huvudsakliga åtgärd och det viktigaste du vill att de ska göra. Mobilanvändare brukar ha kortare sessioner och fokusera på att uppnå uppgifter - extra innehåll hjälper inte med det.

Gör dina filter lättillgängliga

När du har många produkter är filter viktiga för att hjälpa användare att hitta det de behöver. De allra flesta e-handelswebbplatser (ungefär 90% av de jag har studerat) har sina filter i ett överlägg på mobil. Detta är meningsfullt när det inte finns mycket utrymme tillgängligt men det betyder att användarna inte är mycket troliga att se dem faktiskt.

I regel 95% av användarna ändrar inte standardvärden och detta gäller för att öppna en filtermeny för att välja specifika alternativ. Det är något som har bekräftats i de e-handelsanvändartester som jag har sett också. Att hitta produkter på listansidor är ett område där webbläsarupplevelsen för e-handel är överlägsen på skrivbordet.

Om dina användare filtrerar är det mer troligt att de hittar en produkt som de faktiskt vill ha. Din utmaning på mobil är att hitta platsbesparande sätt att göra det. En metod visar den mest relevanta filterkategorin på sidan med knappar för alternativen (se Macy's nedan). Genom att trycka på en laddas listor med det filtret som används, vid vilken punkt nästa mest relevanta filter skulle visas.

ecommerce redesign - Macy's filteralternativ
Macy's webbplats ger några filteralternativ på sidan som knappar. Burberry gör filterkategorierna synliga på sidan.

 

Se åtminstone till att din knapp för att nå hela filtermenyn är uppenbar. Det bör också tydligt indikera när ett filter används, så att användare vet när de ser en begränsad uppsättning resultat.

Omdesign dina listor för större bilder

De flesta sidor med e-handelslistor försöker visa många produkter på skärmen på en gång. Som ett resultat av produkten bilder tenderar att vara ganska små (det är därför de traditionellt kallas miniatyrbilder).

Ändå är bilden en viktig del av att hjälpa användaren att fatta ett beslut om vilken produkt han ska välja. I många fall berättar det mycket mer än någon text kan. Produkter som kläder och möbler förlitar sig på att användaren gör en subjektiv skillnad mellan de olika sakerna som erbjuds.

Du kan till och med ha stora bilder på mobilen. Appar som Instagram har fått användare att förvänta sig hög kvalitet var de än är och jag har ofta sett användare uppskatta detta. Det spelar ingen roll var de är på webbplatsen, bra fotografering är alltid älskad.

Airbnb har stora bilder som kan bläddras igenom (till vänster). Zara (till höger) har bilder på hela skärmbredd på sina listor.

Naturligtvis om du tror att något kan säljas bättre i några bilder så gör du det. Resesidor har ofta flera foton i miniatyrbilder med en subtil pil för att bläddra igenom dem. Många klädplatser erbjuder möjligheten att visa produkten på egen hand och bäras av en modell.

Visa produktalternativ som knappar

Du kommer att vara medveten om att många produkter är tillgängliga i variationer som färg, storlek, material eller något annat. Produktinformationssidan är där användarna i slutändan gör det valet. För att göra valet lättare bör du undvika att dumpa dessa alternativ i rullgardinsmenyer.

De borde vara visuella knappar för att hjälpa användaren att se alla alternativ och de bör tydliggöra när en variation innebär en prisändring. Om varianten ändrar utseendet på produkten (till exempel färgen) bör du välja den för att uppdatera huvudproduktbilden. Detta lämnar användaren utan tvekan om vad som kommer att beställas.

ecommerce redesign - alternativ i nike-storlek
John Lewis (till vänster) har produktfärger som knappar med visuella indikatorer. Nike (till höger) avslöjar alla storleksalternativ och inaktiverar de storlekar som inte är tillgängliga.

En annan fördel är att genom att inaktivera vissa knappar så kan användaren med en blick se vilka varianter som är slut. Återigen sparar detta bläddring genom en rullgardinslista med alternativ.

När det gäller val av storlek är det bäst att inte ha en standardstorlek. Om det finns användare kan de lägga till standarden snarare än de de vill ha. Detta kan leda till att du får massor av avkastning och frustrerade kunder.

Lämna ut delningsknapparna

Facebook Twitter, Pinterest, Instagram, LinkedIn, Snapchat. Dina användare hänger antagligen på en eller flera av dessa sociala nätverk. Ska du ge dem delningsknappar på dina produktinformationssidor?

Många e-handelswebbplatser presenterar fortfarande de lilla ikonerna i hopp om att det kommer att uppmuntra människor att marknadsföra sina varor på nätet. Tyvärr är de nästan säkert ett slöseri med tid.

Ingen klickar på dem. Faktum är att 0.2% av människorna gör det, enligt en studie. Det kan också verka som ett kodavsnitt men det kommer med massor av extra saker som saktar ner din sidhastighet.

Ökningen av betalda "influencers" innebär att den moderna användaren inte längre vill sända för varumärken utan något för dem. Fler människor kommer att vara villiga att dela privat med en vän eller familjemedlem. Länkar som tillåter delning via e-post eller en snabbmeddelandetjänst som WhatsApp fungerar sannolikt bättre.

Integrera betalplånbok

Betalning plånbokstjänster som PayPal, Apple Pay och Android Pay ökar. Det blir allt vanligare att se dem som alternativ i kassaflöden för e-handel. I själva verket kan de döda standardutcheckningen och eventuellt användningen av kreditkort och kontanter sammanlagt.

e-handel omdesign - Amazon betala integration
Tamara Mellon (till vänster) har möjlighet till Apple Pay, PayPal och Amazon Pay i sin korg och kassa. Gucci erbjuder möjligheten att hoppa till PayPal från meddelandet "Lägg till i väska".

Att ange ett lösenord, fingeravtryck eller ansiktsskanning och sedan kunna fullfölja kassan är så mycket bekvämare än att fylla i formulär. Med e-handel dominerad av mobil är det väsentligt att erbjuda enkel betalning som inte involverar fyldig formfyllning.

Den enkla användningen bör uppmuntra fler användare att slutföra kassan med dig. Det finns också en säkerhetsfördel eftersom användare troligen kommer att känna sig säkrare med en plånbok som mellanhand om de inte har hört talas om ditt varumärke tidigare.

Över de användartest som jag har kört på kassaflöden, jag hör regelbundet kommentarer som "Jag föredrar mycket att använda PayPal" och "Jag är mycket säkerhetsmedveten och betalar bara med PayPal". PayPal är för närvarande välkänt, men när du bestämmer vilken som ska användas går du med webbplatsens mest populära länder och enheter.

Låt användare samla in

Ett växande antal e-handelswebbplatser erbjuder användare möjlighet att samla in sin beställning snarare än att ha levererat den. Det är bra för användare som inte är hemma ofta och inte heller kan få leverans till sin arbetsplats. Om du ger det här alternativet ökar bara antalet användare som kan köpa från dig.

Den enklaste (och ofta den bästa) metoden är att lägga till samling som ett alternativ till leverans i kassan. Be användaren att ange sin plats och visa dem alternativ för var de kan hämta sin beställning. Det är också viktigt att du visar hämtningsplatsens öppettider - dessa data kommer ofta från att integreras med ett leveransföretag.

Ett klick- och samlingsfönster från ASOS-kassan, så att användaren kan välja vilken närbutik han vill skicka leveransen till.

Det mer komplexa tillvägagångssättet är för dig att integrera alternativet att samla in på varje produktinformationssida på webbplatsen. Detta är meningsfullt om du har det tegel och murbruk eftersom det tillåter aktiekontroll i specifika butiker.

Men problem kan uppstå när användare har flera produkter i sin ordning. Om de inte är försiktiga kan de hamna med några produkter för leverans och några för insamling (en "blandad" korg). För att undvika detta tidigast rekommenderar jag att låta användaren ange insamling eller leverans är i korgstadiet så det gäller hela beställningen.

Mer råd om e-handel

Det var åtta sätt att se till att din e-handelssajt är omdesignad så att den passar för 2020 och därefter. Naturligtvis finns det mer än det att tänka på när man utformar om en fullständig e-handelswebbplats. Jag har faktiskt skrivit en bok som innehåller 66 riktlinjer för att designa onlinebutiker som konverterar, baserat på 10 års UX-designerfaring.

Boken kallas Designing Ecommerce Websites, det är tillgänglig på Amazon i olika format inklusive pocketbok och Kindle. Eller så kan du få tag på digital PDF-version på min webbplats, som innehåller alla illustrationer från tryckbok. Du kan också få 15% rabatt den digitala versionen under en begränsad tid med kampanjkoden PLATFORMS.