De beste lay-outontwerphiërarchie voor uw startpagina om meer klanten en verkopen te grijpen

Het neerzetten van uw online winkel roept verschillende vragen op. Uw startpagina fungeert als een hub voor de beste dingen in je online winkel, met componenten zoals afbeeldingsschuifregelaars, knoppen voor winkelwagentjes, productminiaturen en knoppen en abonnementsformulieren voor e-mailmarketing.

Elk is essentieel, maar hoe organiseer je ze om meer klanten te trekken, aangezien de startpagina over het algemeen de meest bezochte pagina op je site is? Als we enkele van de creatiefste en succesvolste e-commerceshops bekijken, kunnen we een standaardlay-outhiërarchie vinden, die enigszins een sjabloon genereert voor de plaats van elk van deze componenten op uw startpagina.

We beginnen met de bovenkant van de startpagina en werken naar beneden. Blijf lezen om meer te weten te komen over de beste lay-outontwerphiërarchie voor uw startpagina om meer klanten te bereiken.

Uw logo links of in het midden (en kopcomponenten)

De koptekst van uw startpagina omvat ook uw gehele site, dus deze modules vereisen enige aandacht. Het doel van uw koptekst is om mensen snel te laten zien waar uw site over gaat en om gebruikers enkele van de meest functionerende knoppen en velden te bieden voor het vinden van inhoud.

Het logo

logo locatie

Begin met uw logo. Een mooi ontworpen logo biedt hier de meeste waarde, maar u moet ervoor zorgen dat het in de linkerbovenhoek van in het midden van de kop wordt geplaatst. Mensen lezen van links naar rechts en het logo geeft meestal een idee van wat de site te bieden heeft. Als uw logo uw bedrijf niet meteen uitlegt, voeg dan een korte slogan hieronder of aan de zijkant van het logo toe.

De zoekbalk

belang van de zoekbalk

Elke ecommerce-site is een kleine zoekmachine binnen zichzelf. Als een van uw klanten, laten we hem Steven noemen, op uw homepage terechtkomt op zoek naar een ketting, heeft hij maar een paar opties om te vinden wat hij nodig heeft.

De eerste, en minder efficiënte methode, is het klikken op een van de navigatie-menu's. De tweede methode, die gebruikers meestal iets sneller naar de juiste pagina brengt, is een zoekbalk. Als de zoekbalk verborgen is onder uw schuifregelaar of ergens langs uw zijbalk staat, dwingt u uw klanten om door de rommel te ziften om een ​​eenvoudige zoekopdracht uit te voeren.

Plaats dit in je header en maak het duidelijk.

Winkelwagen pictogram en knop

Screen Shot op 2015 06-01 11.25.00-AM

Aangezien zoveel online winkels het winkelwagentje-pictogram in de rechterbovenhoek van de site plaatsen, kunt u ervan uitgaan dat de meeste klanten daar instinctief naar opzoeken om te vinden wat zich in het winkelwagentje bevindt.

Helaas zit u meestal vast met alles wat uw thema- of e-commerceplatform biedt in termen van de winkelwagenmodule, maar hier is een leidraad als u op de markt bent voor het wijzigen van het ontwerp:

  • Voeg een winkelwagentje toe
  • Neem een ​​link of pictogram op waarmee u met één klik kunt betalen vanaf elke pagina op de site
  • Toon een cijfer om aan te geven hoeveel items in het winkelwagentje zitten

Verzendaankondigingen

Screen Shot op 2015 06-01 11.25.09-AM

Een mooie manier om urgentie te creëren is om gratis verzending of andere incentives aan te bieden nadat gebruikers een bepaalde hoeveelheid product hebben gekocht. Als u ervoor kiest om zoiets in uw strategie op te nemen, is het essentieel om de aankondiging in uw websitekop te maken.

De bovenstaande schermafbeelding toont een mooi voorbeeld van hoe het bedrijf Kutoa zijn verzendbeleid uitlegt zonder te veel ruimte in beslag te nemen.

Seizoensgebonden banners

Dit is vergelijkbaar met het scheepvaartbeleid waar we het eerder over hadden, maar als je een seizoenspromotie of een speciale deal hebt, hoe verwacht je dan dat mensen dit leren? Reserveer een spatie in je header voor kleine promotiebanners. Op deze manier, wanneer de feestdagen ronddraaien, hoeft u alleen een afbeelding in te vullen en op te laten totdat de promotie is afgelopen.

Login / registratie knop

Dit is een van de pijlers op e-commerce startpagina's. Toon duidelijk een inlog / registratielink in de kop. Het zorgt voor een naadloos betaalproces voor de klant en u kunt een deel van de klantinformatie verzamelen.

Een navigatiemenu met de juiste tabbladen

Uw menu-items zijn volledig afhankelijk van welk type bedrijf u uitvoert, maar het is duidelijk iets dat moet worden opgenomen in de homepagehiërarchie. De beste tactiek is om op te schrijven waarheen uw klanten het eerst willen verhuizen en op basis daarvan uw menu-items te kiezen. Verkoop je voornamelijk shirts? Maak van een van je eerste menu-items een directe link naar je populairste shirts.

Afbeelding of schuifregelaar met Overlay-oproep tot actie en knop

CTA-schuifregelaars

De afbeeldingschuifbalk bevindt zich direct onder de koptekst en dient als een manier om verbluffende foto's van uw producten te delen. Een schuifregelaar met alleen afbeeldingen is echter nutteloos. Gebruik call-to-actions en knoppen die gebruikers naar enkele van uw populairste producten of promoties duwen.

Neem vier of vijf dia's op in de schuifregelaar en wijzig deze afhankelijk van uw eigen strategie.

Product Thumbnail Grid of schuifregelaar

thumbnail als een schuifregelaar of raster

De Shopify blog legt uit hoe het aanbieden van te veel keuzes klanten verwart, duwen ze om uw website te verlaten of minder aankopen te doen. Hoewel uw startpagina een productraster nodig heeft net onder de afbeeldingschuif, moet u twee keer nadenken over het inpakken van meer dan vier of vijf items.

E-mailmarketingabonnement

E-mails verzamelen voor het verzenden van toekomstige promoties en nieuwsbrieven is een van de gemakkelijkste manieren om klanten te behouden en ze in de gaten te houden. Dit is een van de gebieden waar populaire e-commerce-winkels verschillen op het punt waar de nieuwsbrief zich op de startpagina bevindt. Eén conclusie is echter duidelijk: als u wilt dat mensen zich aanmelden, moet u een aanmeldingsformulier op de startpagina plaatsen.

De eerste methode is om gebruikers te raken met het aanmeldingsformulier in de kop. Dit veronderstelt dat uw nieuwsbrief inhoud van hoge kwaliteit biedt en u zich niet schaamt om deze direct te vermarkten.
voeg aanmelding in header toe

Andere winkels geven de voorkeur aan de zijbalk of het voetgedeelte bij het delen van het aanmeldingsformulier voor de nieuwsbrief. Ik heb gemerkt dat online winkels de formulieren meestal onderaan de pagina plaatsen als ze niet veel e-mails versturen. Ze proberen simpelweg e-mails te verzamelen om af en toe een promotie uit te sturen.
Screen Shot op 2015 06-01 11.25.39-AM

Mijn favoriete tactiek voor het verwerven van e-mail is het pop-upformulier, dat zich een paar seconden na een gebruiker op uw site openbaart. Deze genereren meestal de meeste abonnementen en u kunt duidelijk aangeven dat de klant iets terug ontvangt.
popups

Sidebars of op grid gebaseerde lay-outs?

De zijbalk biedt een unieke kans om uw minder belangrijke componenten te consolideren, terwijl ze toch de bekendheid krijgen die ze verdienen. Een vergelijkbare methode is wat we de rasterlay-out noemen, waarbij uw hele startpagina een enigszins geruit patroon bevat met vierkante modules naast elkaar gestapeld.

gridbased lay-out

Wat zijn enkele vaste componenten om in de zijbalk op te nemen?

  • Een knop of link naar uw blog
  • Promotionele of seizoensgebonden banners
  • Medialinks
  • Sociale modules of links
  • Een Over ons-widget of een gebied waarin wordt uitgelegd waar de site over gaat

Laatste Tweets

De voettekst

De meerderheid van uw klanten zal niet naar het voetgedeelte navigeren, maar een paar belangrijke, maar minder dringende links zijn nodig.

De voettekst

Ik vind vaak dat het samenstellen van de perfecte e-commerce footer een vervelende taak is omdat het gemakkelijk is om een ​​paar van de vereiste items te vergeten. Hier is een lijst om mee te beginnen:

  • Neem contact met ons op
  • E-mail ons link
  • Telefoonnummer
  • Bestelstatus link
  • Veelgestelde vragen
  • Sociale knoppen
  • Garantiekoppeling
  • Privacybeleid link
  • Bloglink
  • Verzend info link
  • Terug info link
  • Bedrijfsinformatielink
  • Banen link

Het genereren van een effectieve hiërarchie voor e-commercehomepage is een kunst, maar met een beetje hulp en inzicht in welke gebieden de meeste klanten omzetten, kunt u van uw startpagina een centrum voor activiteiten maken. Dat gezegd hebbende, laat ons hieronder een opmerking achter als je denkt aan andere items die in deze lijst horen.

Feature afbeelding curtsey van Chris Bannister

Catalin Zorzini

Ik ben een blogger voor webdesign en ben dit project gestart na een paar weken worstelen om erachter te komen welke dat is het beste e-commerceplatform voor mezelf. Bekijk mijn huidige top 10 bouwers van e-commerce-sites.