Full Guide To Build Better Modals

FULL GUIDE TO BUILD BETTER MODALS

INTRO
A modal is a dialog which displays important information to a user and requires immediate attention.
The modal should have a clear call to action with a single primary focus that must be completed before being dismissed.

BREAKDOWN

• Title
• Description
• Tap to close
• Secondary Action
• Primary Action

BREAKDOWN ANALYSIS I
The modal Title should be simple and utilize keywords. The actions should also reflect the modal title.
A modal should contain a maximum of 2 action buttons: The Primary Action and the Secondary Action.

BREAKDOWN ANALYSIS II
Use the Description to elaborate on the consequences of each action. The result should be 100% clear.
The user should have multiple ways of dismissing the modal. A Tap to close icon is the most effective method. Other methods include using the Secondary Action or tapping the overlay background.

BEST PRACTICES
The modal must be initiated by the user. If it surprises the user, they might quickly dismiss it. When the modal becomes active, prevent scrolling and bring into focus.
Modal usage should be minimized, especially during high-stake processes such as during checkout flows.

NEVER DISRUPT THE USER JOURNEY
Remember to only use modals when necessary and the users' attention needs to be directed.
Modals force users away from the tasks they were working on and each interruption = lost time and effort.
Always remind yourself Of the user journey. Once they return to their original tasks, users will have to spend time recovering context which leads to a bad UX.

Take Action. What do you want to learn about modals in part 2?
THANK YOU!
Drop your questions & comments below