Verdeel een configurator in stappen die aansluiten op de beslissingen van de klant, niet op de tabellen in het beheersysteem. Iedere stap beantwoordt één herkenbare vraag, toont alleen relevante keuzes en eindigt met duidelijke feedback over voortgang en gevolgen.
Een wizard is niet automatisch gebruiksvriendelijk. Tien schermen voor tien kleine velden voelen trager dan één overzicht; één scherm met veertig technische opties is evenmin werkbaar. Groepeer beslissingen op samenhang, onzekerheid en afhankelijkheid. Begin met keuzes die veel vervolgstappen bepalen.
Orden van breed naar specifiek
Vraag eerst naar gebruikssituatie of hoofdvariant, daarna naar maat en functionele onderdelen, vervolgens naar afwerking en tenslotte naar controle. Een vroeg antwoord kan latere irrelevante groepen weglaten. Zet zelden gebruikte technische uitzonderingen achter een toelichting of laat ze door een adviseur beoordelen.
| Stap | Vraag van de klant | Goede inhoud |
|---|---|---|
| 1. Basis | Wat wil ik samenstellen? | Model, toepassing of hoofdmaat |
| 2. Passend maken | Past dit in mijn situatie? | Maten, montage en beperkingen |
| 3. Uitbreiden | Welke onderdelen heb ik nodig? | Compatibele functionele opties |
| 4. Afwerken | Hoe moet het eruitzien? | Kleur, materiaal en zichtbare details |
| 5. Controleren | Wat bestel ik precies? | Samenvatting, prijs en aandachtspunten |
Gebruik stapnamen die betekenis hebben. “Optiegroep 3” helpt niemand; “Montage” of “Afwerking” wel. Laat zien hoeveel hoofdfasen volgen, maar maak voortgang niet misleidend als voorwaarden stappen toevoegen of overslaan. “3 van 5” moet dus uit de actuele route komen.
Houd de primaire navigatie op mobiel binnen bereik. Plaats “Vorige” en “Volgende” in een vaste, niet-overlappende actiebalk of direct onder de inhoud en zorg dat schermtoetsenbord en cookiebanner niets bedekken. De knoptekst mag de volgende betekenisvolle stap noemen, bijvoorbeeld “Naar afwerking”, zodat de gebruiker weet wat volgt.
Maak teruggaan veilig
Een klant hoort eerdere antwoorden te kunnen aanpassen zonder alles kwijt te raken. Herbereken afhankelijke keuzes wanneer een basisantwoord wijzigt en geef aan wat daardoor vervalt. Scroll of focus bij een fout naar de relevante groep, niet alleen naar de bovenkant van de pagina.
Bewaar voortgang alleen zo lang als nodig en leg uit wat “later verdergaan” betekent. Een browserrefresh tijdens dezelfde sessie mag niet alles wissen, maar een maandenoude configuratie moet actuele producten en prijzen opnieuw controleren. Voor ingelogde klanten kan bewust opslaan een aparte functie zijn.
Toon prijsverandering dichtbij de keuze die haar veroorzaakt én houd een actueel totaal in de samenvatting. Een animatie mag aandacht geven, maar mag de waarde niet verbergen voor schermlezers. Als levertijd of beschikbaarheid verandert, benoem dat eveneens bij de optie en herhaal het vóór toevoegen aan de winkelwagen.
Fictief voorbeeld: een akoestische werkplek
Kantoorleverancier Stilwerk verkoopt modulaire akoestische werkplekken. De oude productpagina begon met materiaaldiktes en profielcodes. In de nieuwe wizard kiest de klant eerst het aantal gebruikers en de plaatsing, daarna beschikbare afmetingen, vervolgens bureau- en kabelopties en pas daarna kleur.
Een vrijstaande opstelling toont andere bevestiging dan plaatsing tegen een wand. Wanneer de klant teruggaat van vier naar twee gebruikers verdwijnen twee niet-passende bureauonderdelen uit de samenvatting, met een korte melding. In de laatste stap staan afmetingen, onderdelen, aantallen, prijs en een waarschuwing dat montagecontrole op locatie nodig kan zijn.
Alleen na bevestiging ontstaan de definitieve WooCommerce-cartregels. Moeten die naar productie, voorraad en administratie, dan helpt een heldere gegevensstroom zoals beschreven bij webshop en ERP betrouwbaar koppelen.
Stilwerk houdt teksten per stap onder beheer van een producteigenaar. Technische codes blijven uit de klantweergave; maatbeperkingen krijgen een korte reden en een voorbeeld. Bij een wijziging van het assortiment wordt niet alleen de laatste stap getest, maar iedere route die door de aangepaste keuze wordt beïnvloed.
Gebruikstest in zes opdrachten
- Laat iemand zonder productkennis een standaardconfiguratie maken.
- Vraag daarna één vroege keuze te veranderen.
- Laat de tester uitleggen wat bij de wijziging verviel.
- Onderbreek op mobiel en hervat na een refresh.
- Laat een fout ontstaan en observeer waar de gebruiker zoekt.
- Vraag vóór toevoegen precies te benoemen wat wordt besteld.
Meet per stap niet alleen uitval, maar ook terugbeweging en foutfrequentie. Veel teruggaan kan twijfel, slechte volgorde of onduidelijke uitleg betekenen. Combineer cijfers met sessie-observatie en supportvragen voordat je een stap schrapt. Als het productproces sterk afwijkt van beschikbare plugins, vergelijk maatwerksoftware en standaardsoftware.
Vermijd optimaliseren op zo weinig mogelijk stappen als los doel. Een extra controlepagina kan juist fouten en retourvragen verminderen. Meet daarom of klanten een correcte, begrijpelijke configuratie afronden en of operations die zonder herstelwerk kan verwerken. Snelheid is slechts één onderdeel van kwaliteit.
Laat Yindle de beslisstructuur van jouw productconfigurator uitwerken.
Voor de technische uitvoering met echte productopties en een prijsinschatting die de winkelwagen niet vervangt, zie Yindle Kit Configurator en de gids Een WooCommerce-productconfigurator bouwen.