10 tips voor het ontwerpen van een geweldige webwinkel

Ondernemers en fysieke retailers die willen uitbreiden naar online winkelen, hebben meer opties dan ooit voor hen beschikbaar, maar ze hebben ook meer website-overwegingen en technische opties om te ontcijferen. Het bouwen van een effectieve webwinkel heeft nog steeds turnkey-providers, zoals Wix Stores, die ervoor kunnen zorgen dat uw eerste aanwezigheid snel en eenvoudig opduikt. Maar degenen die echt serieus zijn over het laten groeien van hun online bedrijven, zullen merken dat hun behoeften redelijk snel verder gaan dan deze kant-en-klare diensten.

Er zijn veel vragen om eerst te beantwoorden voordat er iets daadwerkelijk in cyberspace verschijnt en daarna nog veel meer naarmate het bedrijf volwassener wordt. Gegevens verzamelen over klanten is een goed voorbeeld en een belangrijke vraag vandaag, vooral voor winkels die toegang willen krijgen tot Europese markten. Valutaconversie en verschillende e-commerce wetgeving zijn nog steeds netelige problemen in die markten, maar nu moet u ook omgaan met de Algemene verordening gegevensbescherming (AVG), die een veel zorgvuldiger afhandelingsproces voor klantgegevens vereist.

Transactiebeveiliging is een andere belangrijke vraag, omdat het betekent dat de behoefte aan klantveiligheid in balans moet worden gebracht met hoeveel hoepels u nodig hebt om door te springen voordat ze een aankoop kunnen doen. En ongeacht welke beslissingen u neemt voor uw standaardwebsite, u moet dezelfde discussies voeren voor de mobiele iteratie. Omdat mobiliteit zeker een van de lieve modewoorden van vorig jaar was, hebben de extra 12 maanden op geen enkele manier het belang ervan verminderd.

Het huidige denken geeft aan dat webbouwers eerst de mobiele ervaring moeten ontwerpen en vervolgens de desktopervaring naar behoefte moeten aanpassen.

"Elk element, elk stukje inhoud, moet functioneel zijn op mobiel", zegt Jimmy Rodriguez, Chief Operating Officer (COO) bij 3dcart. "Als je helemaal opnieuw begint, ontwerp je voor mobiel. Met een responsief ontwerp kun je de website bouwen om op mobiel te starten en vervolgens naar de desktop te brengen."

Om u te helpen bij het ontwerpen van uw e-commerce storefront voor zowel mobiele als desktopgebruikers, hebben we de onderstaande 10 belangrijke tips samengesteld. Rodriguez beveelt echter aan dat bedrijven, voordat ze een van deze in hun winkel opnemen, deze functies op specifieke productpagina's moeten testen om te zien hoe ze dit doen voordat ze deze op hun hele website implementeren.

1. Sticky header-navigatie

We zijn er allemaal geweest: we hebben naar de onderkant van een productpagina gescrolld om gebruikersrecensies of productdetails te lezen en nu zijn we klaar om de pagina te verlaten om terug te gaan naar het menu om verder te winkelen. Helaas moesten we meestal terugkeren naar het menu door op de knop 'Pagina omhoog' te klikken op onze desktoptoetsenborden of op onze mobiele apparaten boven aan het scherm te tikken.

Met Sticky Headers wordt het menu aangepast en aangepast terwijl u naar beneden scrolt. Het menu volgt u tijdens uw reis om de navigatie op het scherm te houden als u snel pagina's wilt overslaan. Je kunt dit zien op Bose.com. Ondanks dat u halverwege de pagina bent, kunt u toch toegang krijgen tot de hoofdnavigatie van de pagina zonder terug te gaan naar de bovenkant van het scherm.

2. Hamburgermenu's

Hoewel Hamburger Menu's klinken als een functie die het meest geschikt is voor fastfoodrestaurants, worden ze snel een must-have voor bedrijven die veel zaken doen op mobiele apparaten. Je hebt ze eerder gezien: Hamburgermenu's zijn het standaard mobiele pictogram geworden voor mobiele navigatie en menu's.

Ze hebben drie horizontale lijnen die, wanneer ingedrukt, een vervolgkeuzemenu van de navigatie van een website bieden. Ze zijn met name handig op mobiele apparaten waar schermvastgoed duur is. Maar we beginnen ze ook op desktopwebsites te zien, dus consumenten hebben een vergelijkbare ervaring op bedrijfswebsites, ongeacht het apparaat dat ze gebruiken.

"Veel mensen zien Hamburger Menu's en ze weten wat het betekent, maar ze weten niet dat het in feite de nieuwe standaard is, " zei Rodriguez. "Mobiele bezoekers hebben de betekenis van dit symbool geleerd, en websites zouden het moeten omarmen als een standaard voor mobiele navigatie."

Je ziet een Hamburger-menu in de rechterbovenhoek van Target.com en op de mobiele website van Target. Je kunt het ook hieronder zien.

3. Parallax scrollen

Parallax Scrolling is minder een functionaliteitsfunctie en meer een manier om de esthetiek van uw website te verbeteren, en maakt gebruik van grote banners vol afbeeldingen met een hoge resolutie om een ​​artistieke flair aan uw website toe te voegen. Door gebruik te maken van grote afbeeldingen op volledige breedte, kunt u een verplaatsingseffect creëren tussen de achtergrondafbeelding van uw website en de afbeelding die zich direct voor uw consument bevindt.

Zoals u in de onderstaande afbeelding van RimmelLondon.com kunt zien, verandert de achtergrondafbeelding van de website als u naar beneden scrolt. De wijziging vindt echter subtiel plaats wanneer de achtergrond- en voorgrondafbeeldingen in elkaar overgaan. De onderstaande schermafbeelding toont de website op het moment dat de achtergrondafbeelding verandert van paars in roze.

4. Oneindig scrollen

Oneindig scrollen klinkt meer als een marteltechniek dan als een e-commerce-functie. Met deze handige tool kunnen uw gebruikers echter voortdurend nieuwe producten bekijken zonder te hoeven klikken en een nieuwe pagina te laden. Dit werkt als volgt: wanneer u naar de onderkant van een e-commercepagina scrolt, laadt de pagina automatisch meer items onderaan de pagina. Ze worden nog steeds gecatalogiseerd als pagina's aan de achterkant, maar de bezoeker weet dat niet.

U ziet een vergelijkbare functie op UnderArmour.com. Helaas vereist Under Armour dat je op de knop "Meer laden" klikt om extra inhoud te zien. Sommige websites zijn uitgerust met een automatisch open mechanisme dat u meer inhoud laat zien zonder een klik te vereisen.

5. Een drijvende knop "toevoegen aan winkelwagentje"

Net als bij de Sticky Navigation tool, laten zwevende "Toevoegen aan winkelwagen" knoppen uw consumenten producten toe aan hun winkelwagen, ongeacht waar ze zich op de productpagina bevinden. Voorheen moesten gebruikers omlaag scrollen naar gebruikersrecensies, productdetails en andere elementen op de lagere pagina en, om het product aan hun winkelwagentje toe te voegen, moesten ze terug naar de bovenkant van de pagina scrollen. Nu laten bedrijven zoals Diesel.com u de prijs, hoeveelheid, kleuropties en afbeelding van het product zien, evenals de knop "Toevoegen aan winkelwagentje", ongeacht waar u zich op de productpagina bevindt.

6. Gebruik de wet van Fitts

We zullen je niet vervelen met de wiskunde achter de wet van Fitt, maar het is in wezen een theorie dat hoe groter en dichter een object bij ons is, hoe groter de kans is dat we ermee omgaan. Hetzelfde basisprincipe kan worden toegepast op e-commerce. Als u gebruikers naar productpagina's, winkelwagentjes en promoties wilt begeleiden, moet u die knoppen groot, kleurrijk en zo dicht mogelijk bij het midden-midden van de pagina maken.

Als u de wet van Fitt negeert en kleine, zwart-witknoppen langs de rails of onderaan pagina's plaatst, loopt u mogelijk potentiële kopers mis. Maak deze fout niet.

7. Klantrecensies en getuigenissen weergeven

U wilt niet dat klanten naar uw website komen, uw producten bekijken en vervolgens naar Amazon.com gaan om gebruikersrecensies te controleren. Amazon.com kan het product immers goedkoper verkopen of de klant kan de winkelervaring van Amazon.com verkiezen boven die van uw website.

Als u uw klanten de mogelijkheid geeft om producten te beoordelen en te beoordelen, kunt u die voorzichtige klanten afweren die de zekerheid van de mening van andere consumenten nodig hebben voordat ze een aankoop doen. De meeste e-commercehulpmiddelen maken beoordelingen en beoordelingen eenvoudig te implementeren, dus ga deze praktijk niet uit de weg.

8. Een effectieve klantenservice

Betrokkenheid met uw klant is cruciaal voor succes in de detailhandel, en nergens is het eenvoudiger of effectiever dan bij de klantenservice. De juiste zorg voor een woedende, ontevreden of zelfs gewoon verwarde klant is een van de zekerste manieren om zaken te herhalen. De servicedesk en helpdesk-applicaties van vandaag maken het eenvoudiger dan ooit. Met behulp van een van deze apps organiseert u niet alleen klantverzoeken, maar kunt u ook de klant- en responsgegevens verzamelen die deze ontmoetingen genereren en deze doorsturen naar uw motoren voor klantrelatiebeheer (CRM), marketing en bedrijfsanalyse. Hiermee kunt u beter in de gaten houden wat klanten van uw winkel en zijn producten vinden.

Waar u uw klantenservice-ankers en contactpunten plaatst, is belangrijk voor de algehele klantervaring. En of deze interactie de vorm aanneemt van een eenvoudige Contactpagina, of zelfs zo ver gaat dat een chatvenster wordt geopend met iemand die langer dan 60 seconden op de website blijft, is iets dat afhangt van het soort producten dat u verkoopt en de gemiddelde websitebezoekstatistieken voor uw winkel.

Maar van een klantenservice een succes maken is meer dan alleen software. Je moet ervoor zorgen dat er iemand professioneel is om met deze verzoeken om te gaan, anders is het een verspilde investering. Klanten die de moeite hebben genomen om op de knop 'Contact klantenservice' te klikken, verwachten live hulp van een echte persoon. U kunt dit beheren via de telefoon of via instant chat, een functie die steeds vaker voorkomt bij helpdeskserviceproviders. En als u vastzit voor personeel, kunt u uw klantenservice bedienen met intelligente chatbots die menselijk klinken, terwijl u in staat bent een stortvloed aan binnenkomende verzoeken op basisniveau af te handelen en alleen de meer complexe verzoeken door te geven aan een echte homo. sapiens.

9. Paneermeel Afrekenen

Wanneer klanten uw winkel uitchecken, willen ze graag weten waar ze zich in het proces bevinden, hoe ver van afwerking ze zijn en hoe ze gemakkelijk terug kunnen gaan zonder alle gegevens te verliezen die ze al hebben ingevoerd. Breadcrumb Checkout laat klanten precies zien waar ze zich bevinden door een lineair navigatieknopontwerp te gebruiken waarmee consumenten vooruit en achteruit kunnen klikken vanuit Aanmelden, Betalingsopties, Verzendopties, Bestelling plaatsen of Doorgaan met winkelen. Zonder deze lay-out kunnen consumenten op de knop Terug drukken, zien dat hun informatie niet is vastgelegd, gefrustreerd raken en vervolgens de website verlaten.

10. 360-graden weergaven

Ooit online een schijnbaar bescheiden jas gekocht om te beseffen dat het een strass steentje heeft? Welnu, toen je dat product terugzond, verspilde je je eigen tijd en die van de verkoper en kostte je het bedrijf geld. Maak je geen zorgen, het was niet jouw schuld. Meer dan waarschijnlijk had de verkoper alleen vooraanzicht- en zijaanzichtafbeeldingen van de jas. Als de verkoper 360-graden beeldweergave had aangeboden, had u die steentjes gezien en op de knop Bestelling annuleren geklikt.

Maak niet dezelfde fout op uw eigen website. Geef klanten niet alleen de mogelijkheid om op afbeeldingen in te zoomen, maar ook om te draaien of meerdere hoeken van de afbeelding te bekijken, net zoals Kenneth Cole.com. Op deze manier zijn ze niet verrast wanneer ze de bezorgdoos openen en een product eruit halen dat ze niet hadden verwacht.