Checklist Design
📃 Pages🧱 Elements🌊 Flows💡 Topics🖌️ Brand
👋 Check-Ins
Checklist Design
🏠 Home📃 Pages🧱 Elements🌊 Flows💡 Topics🖌️ Brand🛎 Check-Ins
🎉

Modal

Element

Checklist

0 out of 6

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

Optional

Description

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

Articles
Modal & nonmodal dialogs: when (& when not) to use them
Nielsen Norman Group
Best practices for modals, overlays & dialog windows
UX Planet
5 best practices for getting modal windows right
Just In Mind
Related
pages
View all
Orange arrow indicating card for pages content is a link

👋

Sign up

☎️

Contact us

🗞️

Blog post

🏢

Careers

🤝

Team

Other
elements
View all
Green arrow indicating card for element content is a link

🖲️

Button

🃏

Card

🌠

Icon

⌨️

Text field

⏳

Loading

Checklist Design
Created by George Hatzis
PagesElementsFlows
TopicsBrandApp
Check-InsAboutPrivacy
This website was made with Webflow (affiliate link).