Als je eerder deze maand bij ons kwam voor ons UX-artikel, weet je dat we de 25 essentiële UX-ontwerpelementen voor je website hebben besproken.

Het basisidee is dit: bij UX-ontwerp gaat het erom in het hoofd van uw bezoeker te kruipen. Het gaat erom een ​​eenvoudige, naadloze en plezierige ervaring voor uw gebruikers te creëren. Het idee is om snel informatie te leveren en ze zelfs te laten glimlachen.

Een goed UX-ontwerp zorgt voor dopamine en geluk bij uw bezoekers. En daardoor zullen ze je eerder vertrouwen. Cruciaal is dat het waarschijnlijker is dat ze bij u kopen.

Nadat we de 25 basisprincipes in ons laatste UX-ontwerpartikel hebben doorgenomen, laten we eens kijken hoe het in actie werkt. We kijken met name naar het UX-ontwerp van e-commerce websites.

Hoe gebruiken deze websites slimme UX-ontwerptrucs om hun bezoekers aan te moedigen om te kopen?

1. Asos

Ik gebruik het voorbeeld van Asos veel, maar daar is een goede reden voor. Hun UX-ontwerp is briljant.

Het begint allemaal met een knock-out waardevoorstel. Geweldig beeld, eenvoudige uitleg, de ‘gratis levering’-garantie en de voor de hand liggende oproepen tot actie die u naar de mannen- of vrouwenafdeling leiden.

asos2

Een van hun opvallende UX-functies is de video-catwalk, zodat bezoekers echt kunnen zien hoe een outfit eruit ziet. Het geeft klanten het best mogelijke zicht op de artikelen en geeft hen vertrouwen om te kopen.

Ze hebben ook een uitstekende nieuwe functie genaamd ‘snelle weergave’. Op hun productpagina klik je op ‘snelle weergave’ en er verschijnt een kleine pop-up met extra afbeeldingen en alle informatie die je nodig hebt. Het bespaart de klant door heen en weer te klikken naar verschillende pagina’s. Eenvoudig, intuïtief ontwerp.

asos

2. Zara

Zara’s website is een masterclass in eenvoud. Schoon, intuïtief en beperkt. Het is een ode aan de wet van Hick: een ontwerpprincipe dat de navigatiekeuze beperkt en de gebruiker duidelijke maar beperkte opties biedt.

Het idee is dat te veel opties uw bezoeker zullen overweldigen. Door minder keuzes te bieden, voelen ze zich zelfverzekerder. We zullen in dit bericht meer uitstekende navigatie bekijken, maar die van Zara is een van de beste.

zara

3. Abof

Abof (All About Fashion) gebruikt een uitermate slimme UX-truc op hun website. Ga naar de startpagina en het ziet er niet uit als een traditionele e-commercesite. In plaats daarvan lijkt het meer op een blog. Het staat vol met sappige inhoud die zijn publiek inspireert.

abof

In hun verhalen en artikelen markeren ze vervolgens de kleding in een prominent gedeelte genaamd ‘Shop the story’. In ons vorige UX-artikel hadden we het over het belang van het creëren van een relatie met je publiek. Abof doet dit perfect met herkenbare verhalen en inhoud.

vanaf 2

Pas als de klant geïnspireerd is, proberen ze iets te verkopen.

Op hun productpagina hebben ze nuttige opmerkingen over ‘stijltips’, die perfecte voorbeelden zijn van ‘micro-interacties’ – kleine klompjes die contact opnemen met uw publiek.

vanaf 3

Merk op dat ze ook een ‘maattabel’ hebben om klanten te helpen hun exacte maten goed te krijgen (de angst dat kleding niet past is een van de grootste redenen waarom we winkelwagentjes verlaten). Ze gebruiken ook een gedeelte ‘geschatte levering’ om klanten nog meer informatie te geven.

4. Berghaus

Berghaus is een merk voor outdoorkleding, maar dat weet je binnen de eerste seconde na de landing op hun site.

berghaus

Dit is een merk dat zijn doelgroep intiem begrijpt en ervoor zorgt dat ze zo snel mogelijk met hen in contact komen. De eerste hero-shot is een inspirerende uitnodiging. Het maakt verbinding met de gemeenschap en lokt je binnen.

Het enige nadeel? Een sterkere call-to-action zou de deal hier echt bezegelen.

5. Apple

Je zou verwachten dat een bedrijf dat design en innovatie centraal stelt, uitblinkt in UX-design, en dat doen ze. Bekijk hun productpagina’s om te beginnen.

Ze gebruiken parallax-scrollen om de afbeeldingen dynamisch te maken, de gebruiker naar binnen te trekken en eventuele uitgangspunten te elimineren. Je wordt ondergedompeld in de wereld van Apple.

Schermopname 2016-07-28 om 8.43.00 uur

Slimme animaties laten u precies zien hoe de producten werken, zoals de nieuwe 3D-touch. Scrollende galerijen nodigen u uit om te communiceren en te verkennen, en een slimme kopie vertelt u precies hoe de nieuwe iPhone uw leven zal verbeteren (in plaats van een lange lijst met functies).

Hun navigatie is eenvoudig en overzichtelijk, en ik ben dol op het gebruik van afbeeldingen om de opties verder te differentiëren (we scannen het web, dus woorden hebben de gewoonte om in elkaar over te gaan)

appel 2

Tijdens het afrekenproces geven ze je de mogelijkheid om tijdens het kopen met een specialist te chatten. Het is een simpele maar nuttige truc. Het geeft nieuwkomers wat hulp over de hele linie, maar belet niet dat zelfverzekerde kopers hun creditcard eruit halen.

6. Bellroy

Als relatief nieuwe e-commerce verkoper, is uw eerste taak om klanten te laten zien hoe u anders bent dan alle anderen. Bellroy doet dit perfect met hun assortiment slimline, compacte portemonnees.

Bellroy 3

Beter nog, op zijn productpagina’s heeft elke portemonnee zijn eigen video, die klanten alle unieke functies laat zien.

Bellroy 4

7. Huur de landingsbaan

Rent The Runway heeft een vrij uniek concept: je leent een jurk of outfit voor een paar dagen in plaats van het te kopen. Dit is geweldig voor bruiloften of evenementen waar je geen zin hebt in een outfit die je misschien nooit meer zult dragen.

De website introduceert het concept eenvoudig en nodigt vervolgens gebruikersinteractie uit, wat hen ertoe aanzet de gelegenheid te kiezen.

baanhuur

Extra punten voor hun bezorgkalender, zodat klanten precies weten wanneer de outfit zal aankomen en wanneer deze moet worden geretourneerd.

baanhuur 2

Zo simpel, maar zo geruststellend.

8. Amazon

Amazon is de grootste e-commerce website ter wereld en eerlijk gezegd een van de beste. U kunt een van hun functies kiezen als voorbeeld van UX-ontwerp.

Van hun slimme bundels tot hun aanbevelingen van klanten, ze anticiperen op de behoeften van hun gebruikers en leveren. Het is echter hun bestelsysteem met één klik dat we vandaag benadrukken.

amazon

Het is nog steeds het beste voorbeeld van efficiëntie bij het uitchecken op internet. De kern van e-commerce UX-ontwerp is het winkelwagen- en uitcheckproces. Hoe soepeler hoe beter. En het wordt niet soepeler dan bestellen met één klik!

9. Grazen

Een afbeelding die je alles vertelt wat je moet weten. Formulering en vormgeving met een persoonlijkheid. Een onmiddellijke korting voor nieuwe gebruikers en een grote, gewaagde call-to-action.

grazen

Dit is een eenvoudige masterclass in UX-ontwerp.

10. TopShop

Winkels die veel producten verkopen, hebben het veel moeilijker als het gaat om UX-ontwerp. Hoe organiseer je elke verschillende spijkerbroek en presenteer je ze?

Gelukkig heeft TopShop een geweldig plan. Met een grote, dikke filterkiezer die met de pagina zweeft, kunt u de stijl, kleur, pasvorm en prijs van uw producten voortdurend aanpassen en wijzigen.

Topshop 2

Nog cooler, elk product schakelt over op een foto van het model dat ze draagt ​​als je er met je muis overheen zweeft. Het stimuleert interactie en geeft klanten een betere kijk op de items.

11. Protest

Protest heeft misschien wel de grootste en dikste navigatie op internet.

P

Het is duidelijk, beknopt en overzichtelijk. Het verkleint ook de kans dat de klant afdwaalt. De blauwe kleur houdt de aandacht van de klant precies daar waar ze het willen.

Protest gebruikt ook een heleboel kleine animaties op hun site. Ze worden allemaal geactiveerd wanneer u eroverheen scrolt. Het behoudt de aandacht van de klant, moedigt interactie aan en zorgt ervoor dat de hele site dynamisch aanvoelt.

12. Nieuwe look

New Look krijgt een plaats op de lijst voor hun innovatieve mand. Het staat te allen tijde op hun navigatiebalk met een vetgedrukte indicator om u eraan te herinneren dat het er is.

Nieuwe look 2

Als u erop klikt, wordt u niet naar een andere pagina weggesleept. In plaats daarvan krijg je een schuifpaneel dat vanaf de zijkant naar binnen beweegt om je te laten zien wat er in je tas zit. Het betekent dat klanten nooit verdwalen en dat ze gemakkelijk kunnen afrekenen wanneer ze maar willen.

Nieuwe look

13. Potlood, 53

Als je een styluspen voor bijna $ 60 gaat verkopen, moet je hem echt verkopen! Gelukkig doet ‘Pencil’ met 53 uitstekend werk, met behulp van een aantal UX-ontwerptrucs.

Ze gebruiken een lange, parallax-scrollpagina om alle functies uit te leggen en u precies te laten zien wat u ermee kunt doen.

potlood 2

Ze profiteren ook van goede recensies om uit te leggen waarom ze zo veel beter zijn dan de andere opties die er zijn. Het gebruik van een quote van ‘Wired’ is een briljante truc om het product geloofwaardig te maken en het voordeel ervan te schetsen.

Potlood

14. Farmdrop

In ons laatste artikel over UX-ontwerp hebben we uitgelegd hoe belangrijk het is om je in te leven in je doelgroep en contact met ze te maken. Farmdrop doet dit door hun missie centraal te stellen.

boerderij

Ze zijn ‘ziek en moe van het zien van voedsel dat van kilometers ver vandaan komt’. Dat is iets waar de meeste klanten mee aan de slag kunnen. Voordat ze je iets proberen te verkopen, komen ze in contact met je en geven ze je een reden om te kopen.

15. Sid Mashburn

Gewoon weer een geweldig vervolgkeuzemenu, compleet met kleine pictogrammen. Het is een simpele truc die ons helpt een uitgebreid menu te begrijpen. Bovendien geeft het de website een beetje meer persoonlijkheid.

pictogrammen

16. Langzame horloges

Dit is een horloge met slechts één hand. Het is een vrij uniek concept, dus er is wat uitleg voor nodig! Slow Watches doet dit heel goed met een uitlegvideo op volledig scherm.

langzame horloges

Naast het concept uitleggen, praten ze ook over hun filosofie achter het creëren ervan (geweldig om contact te maken met de klant) en gebruiken ze prachtige afbeeldingen die hun ideale publiek benadrukken en targeten.

17. Vuurhaard

Wees creatief als uw artikelen niet in normale categorieën passen! Firebox is gespecialiseerd in ongebruikelijke geschenken en oneerbiedige items. Hun top 50-kaart is de perfecte manier om hun populairste producten te ontdekken.

afbeeldingen

De boxlay-out is geweldig om snel door producten te bladeren en veel van de afbeeldingen zijn dynamisch, bewegend en interactief met de klant.

Omdat ze gespecialiseerd zijn in geschenken, hebben ze ook een ‘geschenkzoeker’ op hun navigatiebalk, een fantastische manier om de opties te beperken.

18. Lazy Oaf

Online winkelen voelt vaak nogal hetzelfde en velen zullen het oude proces van bladeren door een tijdschrift of catalogus missen.

Lazy Oaf brengt dit terug met hun coole ‘lookbooks’-sectie. In plaats van de kleren één voor één uit te leggen, laten ze de outfits in verschillende combinaties tegelijk zien. Zo zagen ze er tenslotte uit in een catalogus.

luie sukkel

Klik op de afbeeldingen en je krijgt een ‘snel kopen’-doos om elk van de drie getoonde items te kiezen. Het is een meer ouderwetse en meeslepende manier om te winkelen.

Wat je niet moet doen!

We houden er niet van om andere websites in stukken te scheuren, maar er zijn enkele grote namen die het helemaal verkeerd hebben … Hier zijn een of twee van de ergste overtreders.

1. Huis van Fraser

Ze zijn een van de grootste warenhuizen ter wereld, maar ze maken een grote fout zodra je hun website laadt.

Je wordt meteen geraakt door een pop-up van een volledige pagina waarin je wordt gevraagd je te abonneren op hun nieuwsbrief.

Uur van Fraser

Ook al zijn ze een grote naamwinkel, het is een erg opdringerige tactiek die de meeste klanten zal afschrikken. Onthoud dat dit de eerste indruk is. Het is veel beter om een ​​gebruikersreis te maken die uw bezoeker opleidt en inspireert voordat u om een ​​e-mailadres vraagt.

Niet alleen dat, maar er is geen echte prikkel om je aan te melden voor hun nieuwsbrief. Een korting op de tegoedboncode zou hier een goede optie zijn en zou klanten kunnen helpen de invasieve pop-up te vergeven.

2. Wal Mart

Wal Mart heeft een zware uitdaging. Ze verkopen vrijwel alles, dus hoe pak je het aan en maak je het eenvoudig? Nou, ik weet het niet zeker … maar niet zo …

Wall Mart

Helaas is dit slechts een puinhoop van categorieën die bijna onmogelijk te vinden is waarnaar u op zoek bent.

Er gebeurt hier gewoon teveel informatie. Wanneer u uw gebruikers te veel opties voorlegt, raken ze vaak gewoon in paniek en vertrekken.

3. Ray-Ban

Dit is een enigszins gemene keuze, omdat het grootste deel van de website van Ray-Ban zeer gebruiksvriendelijk is. In feite heeft het een heleboel coole functies.

Ze doen echter iets dat veel e-commercesites doen, wat klanten echt irriteert. Deze:

ray ban

Je hebt zo’n pagina waarschijnlijk al honderd keer gezien. Het lijkt niet zo erg, maar het creëert eigenlijk nog een belemmering voor de verkoop.

Als u een terugkerende klant bent, vraagt ​​u zich nu af welk wachtwoord u heeft gemaakt. Als je het niet meer weet, moet je het hele ‘wachtwoord vergeten’ proces doorlopen. U kunt die klant op elk moment verliezen …

Als je een nieuwe klant bent, is er een checkout voor gasten, maar het enige dat je hebt gedaan, is ze nog een knop geven om op te klikken. Nog een kans om weg te klikken.

Op dit moment is uw klant volledig losgekoppeld van zijn winkelwagentje en het koopproces. Sleep het niet weg, sluit gewoon de verkoop af!

Bij een geweldig UX-ontwerp draait alles om de kleine aanpassingen die het uw klanten gemakkelijker maken. Deze 18 websites doen het perfect.

Welke functies ga je gebruiken op je eigen website?

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