Ontwerpregels bij een Modal window header image

Ontwerpregels bij een Modal window

dinsdag 2 april 2019 ·Leestijd: 3 minuten
contacteer auteur:

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.

 

 


Andere blogartikelen

B2B E-commerce… Wakker worden!
Geschreven door
op dinsdag 28 juni 2022
Veel B2B-bedrijven in blijven hangen in; nauwelijks vindbare, verouderde B2B e-commerce websites met minimale conversiemogelijkheden en een betreurenswaardige gebruikerservaring. Zonde!
B2B Leadgeneratie: Alles wat je altijd al wilde weten!
Geschreven door
op maandag 27 juni 2022
B2B online leadgeneratie is het proces van het identificeren van de ideale klanten voor uw product of dienst, en hen vervolgens overhalen tot aankoop. Het is een essentiële activiteit voor B2B sales- en marketingteams.
Wat maakt een B2B webshop succesvol?
Geschreven door
op zondag 26 juni 2022
De opmars van de B2B webshop neemt toe. Regelmatig krijgen wij de vraag of er een groot verschil is tussen een consumentgerichte webshop en een puur B2B gedreven webshop. In deze blog leggen wij u uit hoe een B2B webshop succesvol kan zijn en worden.
Open Nieuwsbrief Inschrijving Footer

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book â€º