Je leest een pagina en er schuift iets over je scherm. Meld je aan voor onze nieuwsbrief. Je zoekt het kruisje, vindt het niet meteen en klikt weg. Niet het venster, maar de hele site.
Dat is de reden dat dit onderdeel zo’n slechte naam heeft. Terwijl de techniek zelf uitstekend is.
Het verschil zit in wie het venster opent. Vraagt je bezoeker erom, dan is het behulpzaam. Verschijnt het uit zichzelf, dan is het een onderbreking.
Ik gebruik ze daarom bijna altijd na een klik. Een offerteformulier, een bevestiging voor het verwijderen van iets, of een grotere weergave van een foto.
Een venster dat de rest blokkeert, dus gebruik het spaarzaam.
Wat is een modal?
Een modal is een venster over de pagina dat de rest tijdelijk blokkeert. Het woord modaal betekent hier: je zit in een aparte stand.
Je bezoeker moet er iets mee doen voordat hij verder kan. Sluiten, bevestigen of invullen.
Het verschil met een lightbox
Technisch zijn ze hetzelfde: een venster over je pagina. Het verschil zit in de inhoud.
Een lightbox toont beeld, meestal een vergrote foto. Een modal toont een handeling: een formulier, een keuze of een melding.
Wanneer je hem gebruikt
Bij een handeling die om aandacht vraagt en die je bezoeker zelf heeft gestart.
Waar het bij mijn klanten voor dient
Een formulier in een venster, zodat iemand op de pagina blijft.
Een bevestiging vragen voordat er iets verwijderd wordt.
Een keuze uit opties, bijvoorbeeld een maat of een datum.
Een melding die je echt gelezen moet hebben.
Die eerste is de nuttigste. Iemand die halverwege je dienstenpagina overtuigd raakt, hoeft dan niet naar een aparte contactpagina.
Waarom pop-ups irriteren
Omdat ze de afspraak breken. Je bezoeker was iets aan het doen en wordt onderbroken door iets wat jij wilt.
Ze werken soms wel degelijk voor je aanmeldingen. Maar reken ook de kant mee die je niet meet: de mensen die wegklikken en niet terugkomen.
Gebruik je er toch een? Doe het dan bij het verlaten van de pagina. En toon hem een keer per bezoeker, niet bij elke pagina.
Toegankelijkheid
Dit is waar het technisch het vaakst misgaat. Drie dingen horen geregeld te zijn.
sluiten met escape moet werken, naast een zichtbare sluitknop. Alleen naast het venster klikken is niet genoeg.
De focus hoort in het venster te blijven zolang het open staat. Dat heet focus vasthouden. Kun je er met de tabtoets achterlangs, dan raakt iemand het spoor bijster.
En hulpsoftware moet weten dat er iets is geopend. Zonder aankondiging verandert er voor een screenreader niets. Meer daarover lees je bij accessibility.
Vindbaarheid
Inhoud in een venster telt gewoon mee, want hij staat in je pagina. Toch raad ik het af voor tekst die belangrijk is.
Google waardeert inhoud die direct zichtbaar is hoger dan inhoud die verborgen zit. En je bezoeker moet ervoor klikken, wat een drempel is die je niet nodig hebt.
Een uitzondering is je toestemmingsvenster, zie cookie. Dat hoort er te zijn, mits het niet je hele scherm blokkeert. Meet daarna of het je conversie kost. Dat gebeurt vaker dan gedacht.
Wat Google ervan vindt
Een venster dat je inhoud onbereikbaar maakt op mobiel, kan je posities kosten. Daar zijn richtlijnen voor sinds een jaar of acht.
Een toestemmingsmelding valt daarbuiten, want die is wettelijk verplicht. Een nieuwsbriefvenster dat je hele scherm vult niet.
Bouwen of laten bouwen
De techniek is tegenwoordig eenvoudiger dan vroeger. Browsers hebben er een ingebouwd element voor dat de meeste toegankelijkheidseisen zelf regelt.
Bouwt hij er zelf een met los JavaScript? Vraag dan hoe hij focus en toetsenbord heeft afgehandeld. Dat is de vraag die het onderscheid maakt.
Test het in twee minuten
Open het venster en probeer het te sluiten met alleen je toetsenbord. Lukt dat, dan zit het waarschijnlijk goed.
Doe daarna hetzelfde op een telefoon. Valt de sluitknop binnen beeld?
Meer vragen over Modal
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is een modal?
Wanneer gebruik je een modal?
Wat is het verschil tussen een modal en een lightbox?
Hoe maak je een modal toegankelijk?
Zijn modals slecht voor je vindbaarheid?
Waarom irriteren pop-ups bezoekers?
Wat is een modal?
Bij een handeling die om aandacht vraagt en die je bezoeker zelf heeft gestart.
Bij mijn klanten zijn dat er vier. Een formulier in een venster, zodat iemand op de pagina blijft waar hij overtuigd raakte.
Een bevestiging voordat er iets verwijderd wordt. Een keuze uit opties, bijvoorbeeld een maat of een datum. En een melding die je echt gelezen moet hebben.
Die eerste is de nuttigste. Iemand die halverwege je dienstenpagina besluit contact op te nemen, hoeft dan niet naar een aparte contactpagina.
Elke stap die je weghaalt tussen twijfel en actie, levert je aanvragen op. Meer daarover lees je bij conversie.
Kijk of je een stap kunt weghalen tussen twijfel en actie. Een formulier in een venster op je dienstenpagina scheelt je bezoeker een klik en een pagina. Meet daarna of het effect heeft, want dat is het enige dat telt. Zo houd je het venster in dienst van je bezoeker.
Wanneer gebruik je een modal?
Een modal is een venster over je pagina dat de rest tijdelijk blokkeert. Het woord modaal betekent hier dat je in een aparte stand zit.
Je bezoeker moet er iets mee doen voordat hij verder kan. Sluiten, bevestigen of invullen.
Dat blokkeren is precies waarom je er voorzichtig mee moet zijn. Je onderbreekt iemand die ergens mee bezig was.
Het verschil tussen behulpzaam en irritant zit in wie het venster opent. Vraagt je bezoeker erom door te klikken, dan is het een reactie op zijn handeling.
Verschijnt het uit zichzelf na drie seconden, dan is het een onderbreking. Dezelfde techniek, een totaal andere ervaring. Meer over de beeldvariant lees je bij lightbox.
Let bij je eigen site op wie het venster opent. Verschijnt het uit zichzelf, dan is de kans op irritatie groot, hoe mooi het ook is gemaakt. Vraag jezelf af of je het zelf prettig zou vinden op andermans site.
Waarom irriteren pop-ups bezoekers?
Omdat ze de afspraak breken. Je bezoeker was iets aan het lezen en wordt onderbroken door iets wat jij wilt.
Daar komt bij dat het sluiten vaak lastig is. Een klein kruisje in een hoek, soms buiten beeld op een telefoon. Dan klikt iemand niet het venster weg maar de hele site.
Ze werken soms wel degelijk voor je aanmeldingen. Dat is het argument dat je altijd te horen krijgt.
Reken dan ook de kant mee die je niet meet: de mensen die wegklikken en nooit terugkomen. Die staan in geen enkel rapport.
Gebruik je er toch een, doe het dan bij het verlaten van de pagina en niet na drie seconden. En toon hem een keer per bezoeker, niet op elke pagina opnieuw.
Reken ook de mensen mee die wegklikken en niet terugkomen. Die staan in geen enkel rapport, terwijl ze wel je omzet raken. Vergelijk je aanvragen in de maand voor en na het plaatsen van zo’n venster.
Hoe maak je een modal toegankelijk?
Hier gaat het technisch het vaakst mis. Drie dingen horen geregeld te zijn.
Sluiten met de Escape-toets moet werken, naast een zichtbare sluitknop. Alleen naast het venster klikken is niet genoeg, want dat weet niet iedereen.
De focus hoort in het venster te blijven zolang het open staat. Kun je er met de tabtoets achterlangs, dan raakt iemand het spoor bijster zonder te zien waar hij is.
En hulpsoftware moet weten dat er iets is geopend. Zonder aankondiging verandert er voor een screenreader niets, terwijl het scherm compleet anders oogt.
Zodra het venster sluit, hoort de focus terug te gaan naar de knop waarmee je hem opende. Meer daarover lees je bij accessibility.
Test het met alleen je toetsenbord. Kom je erin, kun je invullen en kom je er weer uit? Dat is een test van twee minuten. Doe daarna hetzelfde op een telefoon en let op de sluitknop. Valt de sluitknop daar binnen beeld, dan zit het goed.
Zijn modals slecht voor je vindbaarheid?
De inhoud telt gewoon mee, want die staat in je pagina. Toch raad ik het af voor tekst die belangrijk is.
Google waardeert inhoud die direct zichtbaar is hoger dan inhoud die verborgen zit achter een klik. Dat is geen straf, maar wel een nadeel.
Er is ook een menselijke kant. Je bezoeker moet ervoor klikken, en dat is een drempel die je niet nodig hebt. Zet je dienstomschrijving dus gewoon op je pagina.
Een uitzondering is je toestemmingsvenster. Dat hoort er te zijn, mits het niet je hele scherm blokkeert.
Google heeft daar richtlijnen voor: een venster dat je inhoud onbereikbaar maakt op mobiel, kan je posities kosten. Meet daarnaast of het je aanvragen kost, want dat gebeurt vaker dan gedacht.
Zet belangrijke tekst gewoon op je pagina en niet achter een klik. Zowel Google als je bezoeker waardeert wat direct zichtbaar is hoger. Bewaar het venster voor handelingen en niet voor uitleg.
Twijfel je of dat venster op jouw site helpt of juist bezoekers kost? Stuur me de link via het formulier hieronder. Ik kijk wanneer hij verschijnt, of hij goed te sluiten is en wat hij doet op een telefoon. Vermeld je plaats, dan weet ik meteen waar je zit.
Waar kan ik je mee helpen?
Ook bekend als: Modaal venster, dialoogvenster, overlay
