Modals
A Modal delivers information by a pop-up that sits
on top of all the on-screen content. Usually, this component requires an
interaction or a set of interactions from the user, in order to continue
interacting on the previous screen.
Use Cases
- When the current flow of actions taken on-screen, requires indispensably a short-term task for the user to perform.
- When critical information is needed to be provided to the user and acknowledged immediately by him.
- When an immediate confirmation on a user action is needed.
HTML
Do's & Dont's
Keep the interactions limited
As a Modal is strictly used for focused, micro-tasks, it doesn't
allow many options. Is important for interactions to be narrowed
down to what the user is been asked to do and avoid complex decision
making, allowing him to quickly respond and continue with the main
flow of on-screen interactions.
Allow multiple dismissal methods
In the most simple scenarios, a modal will only allow two actions:
acknowledge and dismiss. However, is important that for every case,
the user is able to see various ways to dismiss the message as the
component is highly disruptive.
For example, a "Cancel" button and a closing icon ("x") on top of the modal.
For the cases in which the message should not be able to be dismissed, these elements must be shown on their disabled status.
For example, a "Cancel" button and a closing icon ("x") on top of the modal.
For the cases in which the message should not be able to be dismissed, these elements must be shown on their disabled status.
A Modal is disruptive, but responsive
It is highly important that the Modal keeps its size responsive
through all the devices, considering that it must not completely
cover the screen under any circumstances.
This component must always allow the user to see the content beneath it, as it belongs to a bigger task to which the user is expecting to be returned.
This component must always allow the user to see the content beneath it, as it belongs to a bigger task to which the user is expecting to be returned.
Alternative and Related components
