Ontwerpregels bij een Modal window

Hoe ontwerp je een goede Modal?

Modals zijn vensters die we over het hoofdscherm leggen om de aandacht van de gebruiker te trekken op de interactie die nodig is in het bovenliggende venster. Dit doen we door het hoofdscherm donker te maken zodat het bovenliggende venster; de modal, de volledige aandacht heeft.

Wanneer gebruiken we deze Modals?

Modals gebruiken we in websites om een aantal specifieke redenen namelijk;

Gebruikers input voor serieuze consequenties

Stelt u zich het volgende voor; een gebruiker heeft zojuist gevraagd om een offerte voor een product, hiervoor heeft u de gegevens van de gebruiker nodig, dit zal moeten worden ingevuld door de gebruiker. Hier is het de bedoeling dat de gebruiker geen afleiding ervaart, dus is het een goed idee om de volledige focus te pakken door een modal in te laden.

Een actie die niet meer is om te draaien

Denk bijvoorbeeld aan het verwijderen van een product, je wilt er zeker van zijn dat dit de gebruiker zijn intentie is.

Speciale aankondigingen

Hier kun je denken aan aankondigingen van nieuwe mogelijkheden in een systeem. Zijn er bepaalde dingen makkelijker gemaakt of kunnen gebruikers nu ook meer content wijzigen dan voorheen, door dit aan te kondigen in een modal zodra de gebruiker het programma opstart pak je heel even een moment van aandacht.

Modals zijn geschikt als de aandacht van de gebruiker de focus nodig heeft voor belangrijke informatie.

 

Wat is belangrijk bij het ontwerpen van een modal?

Erg belangrijk bij het ontwerpen van een modal is om het simpel te houden, hoe je dat kan doen is door tijdens het ontwerpen je aan de volgende regels te houden.

Titel: De titel moet in één oogopslag vertellen aan de gebruiker wat er moet gebeuren. Dit kan een vraag zijn waar de gebruiker meteen actie op kan ondernemen, of een algemene korte titel die duidelijk maakt waarom de modal is geopend.

Body: Maak hier duidelijk wat de gebruiker zojuist voor interactie heeft uitgevoerd of maak duidelijk waarom de modal is geopend. Ontwerptechnisch maak je de body hiërarchisch gezien als rang onder de titel, dit kun je doen door lettergrootte, letterdikte, kleur en ruimte vanaf de titel.

Footer: In de footer is het de beurt aan de gebruiker hier maak je duidelijk wat de gebruiker kan doen met dit venster. Denk hierbij aan een call-to-action knop om de gebruiker de interactie te bevestigen. Wanneer er twee opties zijn maak dan visueel onderscheid tussen de opties, bekend voorbeeld hiervan is het ‘bevestigen’ of ‘annuleren’ maak dan de bevestigingsbutton primair door de Call-to-action kleur van de website te gebruiken, dit is de keus die je de gebruiker het liefst wilt laten doen.

Daarnaast is het belangrijk om de gebruiker de mogelijkheid te geven de modal in alle tijden te kunnen weg klikken, het kan zijn dat dit toch niet de intentie van de gebruiker was en zal willen terugkeren naar het hoofdscherm. Denk hierbij aan een kruisje rechtsboven in de modal of door het klikken naast de modal om terug te keren naar het hoofdscherm.

Zie hieronder een voorbeeld van een modal die aan bovenstaande regels voldoet.