Wel of géén modal windows en lightboxes

Om mijn punt duidelijk te maken moet ik je eerst kort uitleggen wat een modal-window is. Een Modal-Window is een window op je computerscherm dat onaangekondigd verschijnt en meteen al je aandacht claimt. Je ontkomt er niet aan om het eerst af te handelen voordat je verder kunt met je werk. Je kent ze vast wel. Zoals het bewaardialoog bij het afsluiten van je tekstdocument of de ‘Lightbox’ op het web. Bij de Lightbox kleurt je hele webpagina mysterieus donker en wordt alles onleesbaar, zodat je de witte ‘box’ in het midden niet meer kan negeren.

Onder ontwerpers, ook op m’n werk, is nogal wat discussie over dit soort windows. Het heeft namelijk een enorme impact op je workflow: je kunt niet verder, de computer verplicht je een vraag actief te beantwoorden terwijl je daar helemaal geen zin in hebt. Het liefst klik je het window weg. Ik zet eerst even de problemen op een rij:

  1. De ontwerper dwingt de gebruiker actief een keuze te maken en haalt die gebruiker uit zijn concentratie. Dwingend keuzes maken is helemaal niet zo gebruiksvriendelijk.
  2. Een Lightbox verbergt informatie van de pagina, informatie die de gebruiker mogelijk nodig heeft om de keuze te maken. Jakob Nielsen (2008, 10 Best Application UIs) schrijft: Users often have to refer to information on the background display to resolve the situation in the foreground dialog box. If the background is dimmed too much, such information can be hard to read.
  3. Een Lightbox breekt met het idee van de terugknop. Een Lightbox is geen nieuwe pagina maar ook niet de huidige pagina. De gebruiker moet zoeken of nadenken over hoe hij terug komt bij zijn informatie, hij denkt: Kan ik de terugknop nog gebruiken of niet?, Hoe kan ik dit ongedaan maken?, of nog erger: de gebruiker sluit de webbrowser en verliest alle informatie. Resultaat: ergernis en een klant kwijt.
  4. Vaak komt een Lightbox als een complete verrassing, het is in conflict met de verwachtingen van de gebruiker. De verwachting was een nieuwe webpagina.
  5. Vooral binnen applicaties is een modal-window meestal een uitvlucht voor het weglaten van een veel gebruiksvriendelijke ‘undo’ functie. Meer hierover later.

Maar als een modal-window zoveel problemen oplevert, waarom komt het dan überhaupt nog voor? Heel simpel, een modal-window heeft ook een aantal aantrekkelijke voordelen, namelijk:

  1. Het verbetert het bewustzijn van de gebruiker voor een keuze. Een modal-window zorgt ervoor dat de gebruiker niet per ongeluk iets verkeerds doet.
  2. Het houdt de gebruiker op zijn pad. Je kunt een modal-window gemakkelijk in verschillende situaties oproepen. Door in de achtergrond de pagina gedeeltelijk te laten zien, zegt het modal-window: Wees niet bang, zodra je met mij klaar bent kan je weer verder gaan met waarmee je bezig was. Perfect voor tijdelijke zijwegen van het hoofdproces.
  3. De ontwerper hoeft niet een nieuwe pagina op te maken voor een klein beetje informatie.

Dit brouwsel van nadelen en voordelen zorgt dus voor die discussies onder ontwerpers. Wanneer moet je wel en wanneer moet je geen modal-window of Lightbox gebruiken? Deze blog gaat daarover en geeft je een aantal handvatten.

Gebruik geen modal-window wanneer je iets ongedaan kan maken

Om nog even terug te komen op het bewaardialoog van je tekstverwerker. Liever wil je dat de computer je document automatisch bewaart en dat je later altijd nog terug kan keren naar een oudere versie. Autosave met versions is een veel gebruikersvriendelijkere oplossing dan dat de computer je elke keer vraagt of je het wel of niet wil bewaren. Bij versiebeheer kan je altijd terug naar een vroegere versie; een actie ongedaan maken is altijd beter dan een actie expliciet te moeten bevestigen. De kans is namelijk veel groter dat je alles al goed deed. Ook door een actie eerst uit te voeren ziet de gebruiker welk effect het heeft op zijn document en kan dan beslissen of het goed is of niet. Het verbetert de zichtbaarheid van keuzes.

Een groot voordeel van een modal-window lijkt een bewustere keuze, maar dat is helaas schone schijn. Gebruikers klikken uit gewoonte snel op ‘Oké’ om van de keuze af te zijn en kiezen mogelijk onbewust voor iets wat ze juist helemaal niet willen. Ingesleten gedrag, gewoontes, is iets waar ontwerpers continue rekening mee moeten houden.

Have you ever had that sinking feeling when you realize—just a split second too late—that you shouldn’t have clicked “Okay” in the “Are you sure you want to quit?” dialog?

Knoppen moeten acties beschrijven, en ‘Oké’ is geen actie

Gebruikers klikken standaard op ‘Oké’ en slaan uitleg over. Zorg er dus voor dat knoppen de acties duidelijk beschrijven, nooit ‘Oké’ maar wel: ‘Bewaar’ of ‘Verder naar overzicht’. Er zijn meer tactieken, maar dit is voldoende binnen dit bestek.

Gebruik contextueel-window in plaats van modal-window

Sta je toch op het punt een Lightbox te gebruiken om je gebruikers op het proces-pad te houden? Gebruik dan een contextueel-window. Dit is een window dat een visuele relatie heeft met de uitgevoerde actie. Het zit als ware aan de knop vast, vergelijkbaar met een menu.

Contextueel-window in Apple’s Safari.

Het voordeel hiervan is dat een contextueel-window de gebruiker niet forceert een keuze te maken. Als de gebruiker er geen zin in heeft, leest hij verder in de pagina en kiest voor iets anders. In feite annuleert hij door simpelweg, weg te kijken. Dat is veel vriendelijker en werkt sneller dan forceren om een keuze te maken. Doordat je de onderliggende webpagina niet half wegstopt of dat het lijkt dat de gebruiker klem zit, vraagt de bezoeker zich ook niet meer af of hij de terugknop kan gebruiken.Voor zijn gevoel zit hij nog steeds op de huidige pagina.

Een contextueel-window heeft de voordelen van een modal-window: het leidt de gebruiker niet van zijn proces-pad af en de ontwerper hoeft niet een compleet nieuwe pagina te ontwerpen voor één enkele vraag.

Om ervoor te zorgen dat het bewustzijn van het contextuele window goed is, moet een contextueel-window geanimeerd verschijnen. Een animatie zoals een schaaleffect vanuit de gebruikte knop is een prima methode. Met dit soort animaties ziet de gebruiker de pagina van een status naar een andere status gaan en trekt het contextuele window voldoende aandacht. De gebruiker is zich ervan bewust.

Geef de reden van een contextueel-window aan

Het probleem blijft dat een contextueel-window bepaalde inhoud op de pagina kan overlappen. Mogelijk de inhoud die de gebruiker nodig heeft om een keuze te maken of om te snappen waarom een extra window tevoorschijn komt. Zorg er dus voor dat een contextuele window de juiste reden beschrijft en dat het de informatie herhaalt die de gebruiker nodig heeft om z’n keuze te kunnen maken. Om een voorbeeld te geven: geef in een login window aan waarom de gebruiker moet inloggen.

Maak een contextueel-window makkelijk sluitbaar

Ook al is de kans kleiner bij een contextueel-window dat de gebruiker de terugknop van de webbrowser gebruikt, zorg er toch voor dat de terugknop de gebruiker een stap terugbrengt en de gebruiker niet zomaar data verliest. Data (i.e. de webpagina) behouden is belangrijker dan dat de gebruiker denkt dat hij een complete pagina terug moet gaan. De gebruiker hoeft daarvoor slechts een keer extra op de terugknop te drukken.

De terugknop moet goed werken en daarnaast moet ook een contextueel-window gemakkelijk te sluiten zijn vanuit zichzelf. Zet een duidelijke sluitknop rechtsboven in het window en toon die continue. Moffel het sluitknopje en het annuleerknopje niet weg omdat je iemand wilt overhalen iets te doen. Zorg er tevens voor dat zodra de gebruiker ergens anders op klikt, het contextueel-window automatisch sluit.

Gebruik alleen een modal-window als er absoluut geen weg terug is

Is de undo functie echt niet mogelijk en zorgt een verkeerde keuze voor het verlies van data? Oké dan mag je een modal-window gebruiken. Let wel op, gebruik nooit ‘Oké’ als knop.

Bart van de Biezen

Bart van de Biezen

Als cognitief ergonoom bij Aan Zee Communicatie, onderzoek, ontwerp, spreek en schrijf ik over user interfaces en usability. M'n achtergrond: Industrieel Ontwerpen en daarna Psychologie aan de Universiteit Twente, afgestudeerd bij Philips op midair pointing voor een nieuwe generatie TV's, Apple Design Award voor CSSEdit, usability onderzoeker bij MetrixLab en blogger.