Waarschijnlijk ben je er al eerder geweest. Hoe kiezen we tussen het tonen van een modaal aan gebruikers, en wanneer navigeren we ze naar een aparte, nieuwe pagina? En maakt het überhaupt uit? Eigenlijk wel. De beslissing beïnvloedt de stroom van gebruikers, hun context, hun vermogen om details op te zoeken, en daarmee de foutfrequentie en taakvoltooiing. Beide opties kunnen ontwrichtend en frustrerend zijn – op het verkeerde moment en op de verkeerde plaats. Dus we kunnen het maar beter goed aanpakken. Laten we eens kijken hoe we dat kunnen doen. Modals versus dialogen versus overlays versus lightboxen Hoewel we het vaak hebben over één enkele modale UI-component, negeren we vaak de fijne, ingewikkelde nuances tussen alle verschillende soorten modals. In feite is niet elk modaal hetzelfde. Modals, dialogen, overlays en lightboxes: ze klinken allemaal hetzelfde, maar zijn eigenlijk heel verschillend:
Dialoog Een algemene term voor “gesprek” (gebruiker ↔ systeem). OverlayEen klein inhoudspaneel dat bovenaan een pagina wordt weergegeven. ModalUser moet communiceren met overlay + achtergrond uitgeschakeld. NonmodalUser moet communiceren met overlay + achtergrond ingeschakeld. LightboxGedimde achtergrond om de aandacht op het modale te vestigen.
Zoals Anna Kaley benadrukt, verschijnen de meeste overlays op het verkeerde moment, onderbreken ze gebruikers tijdens kritieke taken, gebruiken ze slecht taalgebruik en onderbreken ze de gebruikersstroom. Ze zijn van nature onderbrekend en doorgaans zeer ernstig zonder dat daar een sterke behoefte aan is.
Gebruikers moeten zeker worden afgeremd en onderbroken als de gevolgen van hun actie grote impact hebben, maar voor de meeste scenario's zijn niet-modale oplossingen veel subtieler en een vriendelijkere optie om iets onder de aandacht van de gebruiker te brengen. Als er iets is, stel ik altijd voor dat dit een standaard is. Modals → Voor afzonderlijke, op zichzelf staande taken Als ontwerpers doen we modaliteiten vaak af als irrelevant en vervelend – en vaak zijn ze dat ook! – toch hebben ze ook hun waarde. Ze kunnen zeer nuttig zijn om gebruikers te waarschuwen voor mogelijke fouten of om gegevensverlies te voorkomen. Ze kunnen ook helpen bij het uitvoeren van gerelateerde acties of inzoomen op details zonder de huidige status van de pagina te onderbreken. Maar het grootste voordeel van modals is dat ze gebruikers helpen de context van het huidige scherm te behouden. Het betekent niet alleen de gebruikersinterface, maar ook bewerkte invoer, scrollpositie, staat van accordeons, selectie van filters, sorteren, enzovoort.
Soms moeten gebruikers een selectie snel bevestigen (bijvoorbeeld filters zoals hierboven weergegeven) en vanaf daar onmiddellijk verder gaan. Automatisch opslaan kan natuurlijk hetzelfde bereiken, maar het is niet altijd nodig of gewenst. En het blokkeren van de gebruikersinterface is vaak geen goed idee. Modaliteiten worden echter voor geen enkele taak gebruikt. Normaal gesproken gebruiken we ze voor afzonderlijke, op zichzelf staande taken waarbij gebruikers moeten inspringen, een taak moeten voltooien en vervolgens moeten terugkeren naar waar ze waren. Het is niet verwonderlijk dat ze goed werken voor korte interacties met hoge prioriteit (bijvoorbeeld waarschuwingen, destructieve acties, snelle bevestigingen). Wanneer modaliteiten helpen: 🚫 Modals zijn vaak ontwrichtend, invasief en verwarrend.🚫 Ze maken het moeilijk om te vergelijken en te kopiëren en plakken. ✅ Toch stellen modals gebruikers in staat om meerdere contexten te behouden. ✅ Nuttig om onomkeerbare fouten en gegevensverlies te voorkomen. ✅ Nuttig als het sturen van gebruikers naar een nieuwe pagina storend zou zijn. ✅ Toon alleen een modaal als gebruikers de verstoring op prijs stellen.✅ Geef standaard de voorkeur aan niet-blokkerende dialogen (“nonmodals”).✅ Sta gebruikers toe de dialoog later te minimaliseren, verbergen of herstellen.✅ Gebruik een modaal om gebruikers te vertragen, bijvoorbeeld door complexe invoer te verifiëren.✅ Geef een uitweg met “Sluiten”, de ESC-toets of klik buiten het kader. Pagina's → Voor complexe workflows met meerdere stappen Wizards of navigatie met tabbladen binnen modals werken niet zo goed, zelfs niet in complexe bedrijfsproducten; daar werken zijpanelen of laden doorgaans beter. Problemen beginnen wanneer gebruikers datapunten moeten vergelijken of ernaar moeten verwijzen. Maar modals blokkeren dit gedrag, zodat ze in plaats daarvan dezelfde pagina opnieuw openen op meerdere tabbladen.
Voor complexere stromen en processen die uit meerdere stappen bestaan, werken zelfstandige pagina's het beste. Pagina's werken ook beter als ze de volledige aandacht van de gebruiker opeisen, en verwijzingen naar het vorige scherm zijn niet erg nuttig. En laden werken voor subtaken die te complex zijn voor een eenvoudig modaal, maar geen volledige paginanavigatie nodig hebben. Wanneer moet u modaliteiten vermijden: 🚫 Vermijd modals voor foutmeldingen. 🚫 Vermijd modals voor functiemeldingen. 🚫 Vermijd modals voor onboarding-ervaring. 🚫 Vermijd modals voor complexe, langdurige taken die uit meerdere stappen bestaan. 🚫 Vermijd meerdere geneste modals en gebruik in plaats daarvan vorige/volgende. 🚫 Vermijd automatisch geactiveerde modals tenzij absoluut noodzakelijk. Vermijd beideVoor herhaalde taken In veel complexe, taakintensieve producten zullen gebruikers merken dat ze dezelfde taken herhaaldelijk en opnieuw moeten uitvoeren. Daar zorgen zowel modals als nieuwe paginanavigaties voor wrijving omdat ze de stroom onderbreken of gebruikers dwingen ontbrekende gegevens tussen alle verschillende tabbladen of weergaven te verzamelen. Te vaak eindigen gebruikers met een mislukte ervaring, vol eindeloze bevestigingen, overdreven waarschuwingen, uitgebreide instructies of gewoonweg ontbrekende referentiepunten. Zoals Saulius Stebulis al zei, werken in deze scenario's uitbreidbare secties of in-place bewerking vaak beter: ze houden de taak verankerd aan het huidige scherm. In de praktijk voeren gebruikers in veel scenario's hun taken niet geïsoleerd uit. Ze moeten gegevens opzoeken, waarden kopiëren en plakken, invoer op verschillende plaatsen verfijnen of gewoon vergelijkbare records bekijken terwijl ze hun taken uitvoeren. Overlays en laden zijn nuttiger bij het behouden van toegang tot achtergrondgegevens tijdens de taak. Hierdoor blijft de context altijd op zijn plaats, beschikbaar voor referentie of copy-paste. Bewaar modaliteiten en paginanavigatie voor momenten waarop de onderbreking echt waarde toevoegt, vooral om kritieke fouten te voorkomen. Modals versus pagina's: een beslissingsboom Een tijdje geleden heeft Ryan Neufeld een zeer nuttige gids samengesteld om ontwerpers te helpen kiezen tussen modals en pagina's. Het wordt geleverd met een handig PNG-spiekbriefje en een Google Doc-sjabloon met vragen onderverdeeld in 7 secties. Het is lang, uiterst grondig, maar heel gemakkelijk te volgen:
Het ziet er misschien intimiderend uit, maar het is een vrij eenvoudig proces van vier stappen:
Context van het scherm. Eerst controleren we of gebruikers de context van het onderliggende scherm moeten behouden. Complexiteit en duur van taken. Eenvoudigere, gerichte, niet-afleidende taken kunnen een modale taak gebruiken, maar lange, complexe stromen hebben een pagina nodig. Verwijzing naar onderliggende pagina. Vervolgens controleren we of gebruikers vaak op de achtergrond naar gegevens moeten verwijzen of dat de taak een eenvoudige bevestiging of selectie is. Het kiezen van de juiste overlay. Ten slotte: als een overlay inderdaad een goede optie is, begeleidt deze ons bij de keuze tussen modaal of niet-modaal (neigend naar een niet-modale).
Inpakken Vermijd waar mogelijk het blokkeren van de gehele gebruikersinterface. Laat een dialoog zweven, die gedeeltelijk de gebruikersinterface bedekt, maar navigatie, scrollen en kopiëren en plakken mogelijk maakt. Of toon de inhoud van de modal als zijlade. Of gebruik in plaats daarvan een verticale accordeon. Of breng gebruikers naar een aparte pagina als u veel details wilt weergeven. Maar als u de efficiëntie en snelheid van gebruikers wilt vergroten, vermijd dan ten koste van alles modaliteiten. Gebruik ze om gebruikers af te remmen, om hun aandacht te bundelen, om fouten te voorkomen. Zoals Therese Fessenden opmerkte: niemand wordt graag onderbroken, maar als het toch moet, zorg er dan voor dat het de kosten absoluut waard is. Maak kennis met “Smart Interface Design Patterns” Je kunt een hele sectie over modaliteiten en alternatieven vinden in Smart Interface Design Patterns, onze 15 uur durende videocursus met honderden praktische voorbeelden uit projecten uit de praktijk – met een live UX-training later dit jaar. Alles, van mega-dropdownmenu's tot complexe ondernemingstabellen, waarbij elk jaar vijf nieuwe segmenten worden toegevoegd. Ga naar een gratis voorbeeld. Gebruik de code BIRDIE om 15% korting te krijgen. Maak kennis met Smart Interface Design Patterns, onze videocursus over interface-ontwerp en UX.
Video + UX-trainingAlleen videoVideo + UX-training$ 495,00 $ 699,00
Ontvang video + UX-training25 videolessen (15 uur) + live UX-training. 100 dagen geld-terug-garantie. Alleen video$ 300,00$ 395,00
Ontvang de videocursus40 videolessen (15u). Jaarlijks bijgewerkt. Ook verkrijgbaar als UX-bundel met 2 videocursussen.
Nuttige bronnen
Verschillende soorten pop-ups, door Anna Kaley Best practices voor het ontwerpen van UI-modaliteiten, door Uxcel We gebruiken te veel verdomde modaliteiten: UX-richtlijnen, door Adrian Egger Modale en niet-modale dialogen, door Therese Fessenden Modern Enterprise UI-ontwerp: modale dialogen, door James Jacobs Modalen in ontwerpsystemen
