Om du gick med till vår UX-artikel tidigare denna månad vet du att vi diskuterade de 25 viktiga UX-designelementen för din webbplats.

Den grundläggande idén är detta: UX-design handlar om att komma in i din besökares huvud. Det handlar om att skapa en enkel, sömlös och rolig upplevelse för dina användare. Tanken är att leverera information snabbt och till och med få dem att le.

Bra UX-design gnistor dopamin och lycka hos dina besökare. Och det gör dem mer benägna att lita på dig. Av avgörande betydelse gör det dem mer benägna att köpa av dig.

Efter att ha gått igenom de 25 grunderna i vår senaste UX-designartikel, låt oss ta en titt på hur det fungerar i handling. Specifikt tittar vi på UX-designen för e-handelswebbplatser.

Hur använder dessa webbplatser smarta UX-designknep för att uppmuntra sina besökare att köpa?

1. Asos

Jag använder Asos exempel mycket, men det finns en god anledning till det. Deras UX-design är lysande.

Det hela börjar med ett utslag av utslagningsvärde. Fantastisk bild, enkel förklarare, “gratis leverans” -garantin och de uppenbara uppmaningarna till åtgärder som leder dig till mäns eller kvinnors sektion.

asos2

En av deras utmärkta UX-funktioner är videoklippet, så att besökare faktiskt kan se hur en outfit ser ut. Det ger kunderna bästa möjliga bild av artiklarna och ger dem förtroende att köpa.

De har också en utmärkt ny funktion som kallas ‘snabbvy’. På deras produktsida trycker du på ‘snabbvy’ och en liten popup visas med extra bilder och all information du behöver. Det sparar kunden att klicka fram och tillbaka till olika sidor. Enkel, intuitiv design.

asos

2. Zara

Zaras webbplats är en masterclass i enkelhet. Ren, intuitiv och begränsad. Det är en aning till Hicks lag: en designprincip som begränsar navigeringsvalet och ger användaren tydliga men begränsade alternativ.

Tanken är att för många alternativ kommer att överväldiga din besökare. Genom att erbjuda färre val känner de sig mer självsäkra. Vi tittar på mer utmärkt navigering i hela det här inlägget, men Zara’s är en av de bästa.

zara

3. Abof

Abof (All About Fashion) använder ett vanvittigt smart UX-trick på deras webbplats. Klicka på hemsidan så att den inte ser ut som en traditionell e-handelswebbplats. Istället ser det mer ut som en blogg. Det är fullt av saftigt innehåll som inspirerar sin publik.

abof

Inom sina berättelser och artiklar markerar de sedan kläderna i ett framträdande avsnitt som heter “Handla historien”. I vår tidigare UX-artikel talade vi om vikten av att skapa en relation med din publik. Abof gör detta perfekt med relatabla berättelser och innehåll.

abof 2

Först när kunden är inspirerad försöker de sälja något.

På deras produktsida har de användbara “stiltips” -anteckningar, som är perfekta exempel på “mikro-interaktioner” – små nuggar som når ut och engagerar din publik.

abof 3

Lägg märke till att de också har en ‘storlekguide’ för att hjälpa kunderna att få sina exakta mätningar rätt (rädslan för att kläder inte passar är en av de största orsakerna till att vi lämnar kundvagnar). De använder också ett avsnitt om ”beräknad leverans” för att ge kunderna mer information.

4. Berghaus

Berghaus är ett utomhusklädmärke, men du vet det inom den första sekunden av landningen på deras webbplats.

Berghaus

Detta är ett varumärke som intimt förstår sin målgrupp och ser till att få kontakt med dem så snabbt som möjligt. Det första hjälte skottet är en inspirerande inbjudan. Den ansluter till samhället och lockar dig in.

Den enda nackdelen? En starkare uppmaning skulle verkligen försegla affären här.

5. Apple

Du kan förvänta dig att ett företag som sätter design och innovation i sitt hjärta ska utmärka sig för UX-design, och de gör det. Kolla in deras produktsidor för en början.

De använder rullning med parallax för att göra bilderna dynamiska, dra användaren in och eliminera eventuella utgångspunkter. Du är nedsänkt i Apple-världen.

Screen Shot 2016-07-28 kl. 8.43.00

Smarta animationer visar dig exakt hur produkterna fungerar, som den nya 3D-touch. Rullande gallerier inbjuder dig att interagera och utforska, och smart kopia berättar exakt hur den nya iPhone kommer att förbättra ditt liv (snarare än en lång speciell lista med funktioner).

Deras navigering är enkel och ren, och jag älskar deras användning av bilder för att ytterligare differentiera alternativen (vi skannar på webben, så ord har en vana att blanda in varandra)

äpple 2

Under kassaprocessen ger de dig möjlighet att chatta med en specialist när du köper. Det är ett enkelt men användbart trick. Det ger nybörjare lite hjälp över linjen, men hindrar inte säkra köpare från att få ut sitt kreditkort.

6. Bellroy

Som en relativt ny e-säljare är din första uppgift att visa kunderna hur du är annorlunda än alla andra. Bellroy gör detta perfekt med deras sortiment av smala, kompakta plånböcker.

bellroy 3

Ännu bättre, på sina produktsidor har varje plånbok sin egen video som visar kunderna alla de unika funktionerna.

bellroy 4

7. Hyr landningsbanan

Rent The Runway har ett ganska unikt koncept: du lånar en klänning eller outfit i några dagar, snarare än att köpa den. Det här är bra för bröllop eller evenemang där du inte vill ha ut för en outfit du aldrig får ha på dig.

Webbplatsen introducerar konceptet helt enkelt och bjuder sedan in interaktion mellan användare och får dem att välja tillfället.

banauthyrning

Extra märken för deras leveranskalender, så att kunderna vet exakt när dräkten kommer och när den måste returneras.

banauthyrning 2

Så enkelt, men så lugnande.

8. Amazon

Amazon är världens största e-handelswebbplats och ärligt talat en av de bästa. Du kan välja någon av deras funktioner som ett exempel på UX-design.

Från sina smarta paket till sina kundrekommendationer förutser de sina användares behov och levererar. Det är emellertid deras beställningssystem med ett klick som vi markerar idag.

amazon

Det är fortfarande det bästa exemplet på utcheckningseffektivitet på webben. Kärnan i e-handeln UX-design är kund- och utcheckningsprocessen. Ju mjukare desto bättre. Och det blir inte smidigare än beställning med ett klick!

9. Beta

En bild som berättar allt du behöver veta. Ordbok och design med en personlighet. En omedelbar rabatt för nya användare och en stor, djärv uppmaning.

beta

Detta är en enkel masterklass i UX-design.

10. TopShop

Butiker som säljer många produkter har ett mycket svårare jobb när det gäller UX-design. Hur organiserar du varje olika jeans och presenterar dem?

Lyckligtvis har TopShop en fantastisk plan. Med en stor, tjock filterfilter som flyter med sidan kan du ständigt finjustera och ändra stil, färg, passform och pris på dina produkter.

Topshop 2

Ännu svalare byter varje produkt till en bild av modellen som bär dem när du svävar över med musen. Det uppmuntrar till interaktion och ger kunderna en bättre titt på artiklarna.

11. Protest

Protest kanske bara har den största, fetaste navigering på webben.

P

Det är tydligt, kortfattat och oklart. Det minskar också chansen att kunden vandrar av. Den blå färgen håller kundens uppmärksamhet precis där de vill ha den.

Protest använder också massor av små animationer över hela webbplatsen. Var och en utlöser när du bläddrar över den. Det behåller kunduppmärksamhet, uppmuntrar till interaktion och får hela webbplatsen att känna sig dynamisk.

12. Ny look

New Look får en plats på listan för deras innovativa korg. Den sitter hela tiden på deras navigationsfält med en djärv indikator för att påminna dig om att den är där.

New Look 2

När du klickar på den drar du dig inte bort till en annan sida. Istället får du en skjutpanel som flyttar in från sidan för att visa dig vad som finns i din väska. Det betyder att kunder aldrig går vilse, och att de enkelt kan kassa när de vill.

Nytt utseende

13. Blyertspenna, 53

Om du ska sälja en pennpenna till nästan 60 dollar måste du verkligen sälja den! Lyckligtvis är ‘Pencil’ av 53 ett utmärkt jobb med ett antal UX-designtricks.

De använder en lång, parallax rullningssida för att förklara alla funktioner och visa dig exakt vad du kan göra med det.

penna 2

De utnyttjar också bra recensioner för att förklara varför de är så mycket bättre än de andra alternativen där ute. Att använda en offert från “Wired” är ett lysande trick för att ge produktens trovärdighet och beskriva dess fördel.

Penna

14. Lantgård

I vår sista artikel om UX-design förklarade vi hur viktigt det är att vara empatisk med din målgrupp och ansluta till dem. Farmdrop gör detta genom att sätta sitt uppdrag utifrån och centrum.

bruka

De är “sjuka och trötta på att se mat hämtad från miles bort”. Det är något som de flesta kunder kan få ombord med. Innan de försöker sälja dig någonting kommer de i kontakt med dig och ger dig en anledning att köpa.

15. Sid Mashburn

Bara en annan bra rullgardinsmeny, komplett med små ikoner. Det är ett enkelt trick som hjälper oss att känna till en omfattande meny. Dessutom ger det webbplatsen lite mer personlighet.

ikoner

16. Långsamma klockor

Detta är en klocka med bara en hand. Det är ett ganska unikt koncept, så det krävs lite förklaring! Slow Watches klarar det riktigt bra med en förklarande video på helskärm.

långsamma klockor

Förutom att de förklarar konceptet, pratar de också genom sin filosofi bakom att skapa det (bra för att ansluta till kunden), och de använder vackra bilder som belyser och riktar sin ideala publik.

17. Eldbox

När dina artiklar inte passar in i vanliga kategorier, bli kreativa! Firebox är specialiserat på ovanliga presenter och irreverenta föremål. Deras topp 50-diagram är det perfekta sättet att utforska sina mest populära produkter.

bilder

Boxens layout är utmärkt för att snabbt bläddra igenom produkter, och många av bilderna är dynamiska, rörliga och interagerar med kunden.

Eftersom de är specialiserade på gåvor har de också en ‘presentationssökare’ i sin nav-bar, ett fantastiskt sätt att begränsa alternativen.

18. Lazy Oaf

Onlineshopping känns ofta ganska likadant, och många kommer att sakna den gamla processen att bläddra igenom en tidning eller katalog.

Lazy Oaf tar tillbaka detta med deras coola “lookbooks” -avsnitt. I stället för att lägga ut kläderna åt gången, visar de kläderna i olika kombinationer samtidigt. När allt kommer omkring så var de såg ut i en katalog.

lat oaf

Klicka på bilderna så får du en “snabbköp” -ruta för att välja var och en av de tre artiklarna som visas. Det är ett mer old-school och uppslukande sätt att shoppa.

Vad man inte ska göra!

Vi gillar inte att rippa andra webbplatser i bitar, men det finns några stora namn där ute och gör allt fel … Här är en eller två av de värsta gärningsmännen.

1. House of Fraser

De är ett av världens största varuhus, men de gör ett enormt misstag så fort du laddar upp deras webbplats.

Omedelbart träffar du en pop-up-sida på hela sidan som ber dig prenumerera på deras nyhetsbrev.

Hourse of Fraser

Även om de är en butik med stora namn, är det en väldigt påträngande taktik som kommer att göra att de flesta shopparna kommer ifrån. Kom ihåg att detta är första intrycket. Det är mycket bättre att skapa en användarresa som utbildar och inspirerar din besökare innan du ber om en e-postadress.

Inte bara det, men det finns inget riktigt incitament att registrera sig för deras nyhetsbrev. En rabatt på kupongkod skulle vara ett bra alternativ här och kan hjälpa kunder att förlåta den invasiva popupen.

2. Wal Mart

Wal Mart har en tuff utmaning. De säljer i stort sett allt, så hur går du att kategorisera det och göra det enkelt? Tja, jag är inte säker … men gillar inte det här …

vägg mart

Tyvärr är det bara ett kross av kategorier som nästan är omöjligt att hitta det du letar efter.

Det här är helt enkelt för mycket information. När du presenterar dina användare med för många alternativ får de ofta bara panik och lämna.

3. Ray-Ban

Detta är ett något meningsfullt val, eftersom de flesta av Ray-Ban webbplats är mycket användarvänlig. Det har faktiskt massor av coola funktioner.

Men de gör något som många e-handelswebbplatser gör som verkligen irriterar kunderna. Detta:

strålförbud

Du har förmodligen sett en sida så här hundra gånger. Det verkar inte så illa, men det skapar faktiskt ytterligare en hinder för försäljningen.

Om du är en återvändande kund är du nu upptagen med att undra vilket lösenord du skapade. Om du inte kommer ihåg det måste du gå igenom hela det “glömda lösenordet”. Du kan förlora kunden när som helst …

Om du är en ny kund finns det en gästkassa, men allt du har gjort är att ge dem en annan knapp att klicka på. En annan chans att klicka bort.

Vid denna tidpunkt är din kund helt kopplad från sin kundvagn och köpprocessen. Dra inte ut det, bara lås försäljningen!

Stor UX-design handlar om de små tweaks som underlättar för dina kunder. Dessa 18 webbplatser gör det perfekt.

Vilka funktioner kommer du att använda på din egen webbplats?

Kim Martin
Kim Martin Administrator
Sorry! The Author has not filled his profile.
follow me