Of je nu zelf aan de slag gaat met een nieuw ontwerp voor je eigen webshop of voor die van een klant. Natuurlijk heb je zelf een goed beeld van de functionaliteiten en de uitstraling, maar er is zoveel om aan te denken dat er snel iets vergeten kan worden. Daarom deze ‘Webshop Design Tips’ in de vorm van een handige downloadbare checklist (PDF). Omdat SEO in ons bloed zit en er veel overlap is in de gebruiksvriendelijkheid van een website en SEO, krijg je er ook nog een berg SEO-tips bij.
Niet verder lezen, maar direct downloaden? Geen probleemVergeet niet af en toe de laatste versie te downloaden. Deze pagina en het PDF bestand proberen we regelmatig bij te werken. Zodra er voldoende feedback is binnen gekomen wordt er een nieuwe versie live gezet.
Download de checklist als: PDF bestand.
Of bookmark de pagina door op de ☆ te klikken in de adresbalk.
Een checklist is overzichtelijk en makkelijk te raadplegen. Je ziet heel snel wat de status is van het project. Ook kan het achteraf gebruikt worden om te controleren of alle (of zoveel mogelijk) items juist worden ingezet. Werk je liever niet van papier? Geen probleem. Bookmark deze pagina en bekijk altijd de meest actuele versie van de ‘Webshop Design Tips’ Checklist.
Alhoewel dit een uitgebreide checklist met UX en SEO tips voor eCommerce websites is, zijn er altijd aanvullingen mogelijk. Denk aan nieuwe ontwikkelingen, andere of nieuwe inzichten welke invloed hebben op een hogere conversie ratio of betrokkenheid. Heb je suggesties of tips? Stuur ons dan even een e-mail.
| Wat | Uitvoer | Impact |
|---|---|---|
| Homepage | ||
| Geef een duidelijk waardevoorstel boven de vouw | ★ | ★★★ |
| Personaliseer de homepage | ★★★ | ★★★ |
| Stop de carousel indien er met de muis overheen wordt gegaan | ★ | ★★ |
| Zorg ervoor dat de homepage minimaal 350 woorden content kan bevatten | ★ | ★★★ |
| Navigatie | ||
| De naam van het menu item moet kunnen afwijken van de pagina titel | ★ | ★★ |
| Gebruik Schema Markup voor de navigatie | ★ | ★★ |
| Gebruik breadcrumbs op alle pagina’s (behalve checkout pagina) | ★ | ★★★ |
| Gebruik Schema Markup voor de breadcrumbs | ★ | ★★ |
| Maak het hoofditem in het menu clickable | ★ | ★★ |
| De navigatiehiërarchie moet visueel worden weergegeven | ★★ | ★★★ |
| Toon aanbiedingen direct in het hoofdmenu | ★★ | ★★★ |
| Toon veel gebruikte filters in de navigatie | ★★★ | ★★ |
| Maak de belangrijkste contactinformatie direct zichtbaar op de website | ★ | ★★ |
| Toon een locatie icoon die linkt naar offline locaties (indien van toepassing) | ★ | ★★ |
| Het logo dient altijd te verwijzen naar de homepage | ★ | ★★ |
| Zoeken | ||
| Toon een duidelijk zoekveld | ★ | ★★★ |
| Gebruik autofill | ★★★ | ★★★ |
| Toon zoekgeschiedenis | ★★ | ★★ |
| Toon geen resultaten zonder producten | ★★ | ★★★ |
| Toon het aantal gevonden items | ★ | ★★ |
| Gebruik Schema Markup voor het zoekveld | ★ | ★★ |
| Zorg ervoor dat de URL met variabele niet geïndexeerd worden m.b.v. de canonical tag | ★ | ★★ |
| (sub)categorie | ||
| Maak direct zichtbaat dat het een nieuw, exclusief of top product is | ★ | ★★★ |
| Toon varianten van het product | ★★ | ★★ |
| Sorteer het resultaat standaard o.b.v. hoe populaire producten zijn. Niet op alfabet | ★ | ★★★ |
| Toon het aantal overgebleven producten tijdens het filteren | ★★★ | ★★★ |
| Toon de gebruikte filters boven het resultaat. Deze dienen ook direct verwijderd te kunnen worden | ★ | ★★★ |
| Zorg ervoor dat direct onder de pagina titel ruimte is voor een contentblok (min. 100 woorden content) | ★ | ★★★ |
| Zorg ervoor dat er elders op de pagina ruimte is voor extra content (min. 450 woorden). Idealiter staat dit onderaan de pagina zodat het altijd groter kan worden gemaakt | ★ | ★★★ |
| Maak geen gebruik van infinite scroll | ★ | ★★★ |
| Gebruik Schema Markup voor de (sub)categorieën | ★ | ★★ |
| Product detailpagina | ||
| Toon minimaal 4 foto’s van goede kwaliteit | ★★★ | ★★★ |
| Gebruik thumbnails voor het tonen van andere foto’s | ★★ | ★★★ |
| Toon een maattabel waarbij de bezoeker de juiste maat kan vinden zonder de pagina te verlaten | ★★ | ★★★ |
| Toon de ingrediënten van het product direct op de pagina. Gebruik dus geen show/hide functie | ★ | ★★ |
| Toon de lengte van het model i.c.m. de maat van het product dat gedragen wordt | ★ | ★★ |
| Toon alternatieve producten | ★★ | ★★★ |
| Toon product ook als deze is uitverkocht. Toon direct alternatieven of een opt-in functie voor als het product weer voorradig is | ★★ | ★★ |
| Gebruik Schema Markup voor de product detailpagina | ★ | ★★ |
| Content dient middels een feed toegevoegd te kunnen worden | ★★ | ★★ |
| De content dient overschreven te kunnen worden | ★★ | ★★★ |
| De pagina dient minimaal 450 woorden content te kunnen bevatten | ★ | ★★★ |
| Winkelmandje | ||
| Laat de winkelwagen zien in een pop-up venster na het toevoegen van een product | ★★ | ★★★ |
| Bezoekers moeten het aantal producten kunnen verhogen/verlagen en kunnen verwijderen | ★★ | ★★★ |
| Laat bezoekers items verplaatsen vanuit de winkelwagen naar een wishlist | ★ | ★★ |
| Toon gelijkwaardige producten of upsell mogelijkheden in de winkelwagen | ★★ | ★★ |
| Toon de totaalprijs (incl. bezogkosten en belasting) | ★★ | ★★★ |
| Overweeg om gratis te bezorgen boven een bepaald bedrag | ★★ | ★★ |
| Checkout | ||
| Sta afrekenen als een gast toe | ★★ | ★★★ |
| Voorkom afleiding tijdens het afrekenen | ★ | ★★★ |
| Toon de labels boven de invoervelden (geen placeholders) | ★ | ★★★ |
| Maak geen gebruik van meerdere kolommen | ★ | ★★ |
| Toon een statusbalk als er meerdere stappen zijn | ★★ | ★★ |
| Implementeer minimaal het meest gebruikte betaalmiddels (iDeal, Bancontact etc.) | ★★ | ★★★ |
| Bied de mogelijkheid om na het betalen alsnog een account aan te maken | ★★ | ★★★ |
| Account | ||
| Toon de voordelen van het hebben van een account | ★ | ★★★ |
| Toon direct de eisen waar het wachtwoord aan moet voldoen | ★ | ★★ |
| Als er meerdere nieuwsbrieven zijn, bied de mogelijkheid om uit te schrijven van alle nieuwsbrieven | ★★ | ★★ |
| Mobiel | ||
| Beschrijf bepaalde functionaliteiten. Voorbeeld: gebruik 2 vingers om in te zoomen | ★★ | ★★★ |
| Toon het totaalbedrag van bovenaan de checkoutpagina | ★★ | ★★★ |
| Toon het juiste toetsenbord bij invoervelden (tekst/nummers) | ★ | ★★ |
| Toon bezorgkosten indien de locatie bekend is | ★ | ★★ |