Modal

Title

Clear, simple text explaining the action of the modal

⭐️ Ensure your icon is recognisable in all possible sizes it's displayed at, and whether the detail needs to be simplified at a smaller size

Actionable item

A button or link to continue or close the event

⭐️ Users should always have an idea where they will be going to, or what event will happen before clicking a button

⭐️ If your button has generic copy such as 'Okay' or 'Cancel', include a label above it describing the event or purpose of the button

Close action

A way to exit the modal

⭐️ Let users click outside the modal to automatically close it

⭐️ Incorporate the close action into the action with negative intent e.g. the button to cancel also closes the modal when pressed

Responsiveness

Consider the size of the modal on different device sizes, and whether a modal is suitable on all

⭐️ On mobile, adapt the modal to full screen to gain more space

Background change behind modal

Darken, blur or lighten - change the background behind the modal to bring focus to it

Description

Incase they require more information to understand how to make their decision