Modal Design
Background
Modals are pop ups informing the user of information or a forced call to action preventing the user from continuing to the underlying content. Often modals can be intrusive and inconvenient at times because the information is presented with urgency. The challenge is learning how modals can be informative without being intrusive to the user. Modals play an important role as they are used to acknowledge information or to prompt an action. So in this case study, we will focus on alert modals and how we can improve them.
Discovery
Looking at KP mobile applications, many modals are centered and can create a blocking feeling. With the modal being in the center, there is often a call to action at the bottom of the modal or the top right to dismiss the modal. This requires the user to stretch their thumb or to shift their focus to the [X] top right of the modal.
App Store
McDonald’s
Yelp
While the modals vary across the applications and operating systems, many applications are starting to use bottom modals. A bottom modal is less intrusive and is more ergonomic, considering that most users use their mobile device one handed and may need to reach to dismiss modals.
There are three types of modals: confirming actions, dismissive actions, and acknowledgement actions. Confirming actions require a confirmation from the user, dismissive actions require the user to dismiss the modal before interacting with the content behind, and acknowledgment actions require the user to acknowledge an action. Confirming and Dismissive modals should have two actions (two buttons) while the acknowledgment modal should have one action (button).
User Testing
We surveyed 8 individuals on alert modals popping up in the center. One was an iOS default modal and the other had reversed “Agree” and “Cancel” buttons and an image. Five participants did not have a preference in modal because the users found the modals very similar. However, all participants did pause a little longer for the modified iOS modal and could not recall what the modals were asking them to do regardless of the modal type.
Recommendations
Considering our research and testing, the default iOS modal and modified modal were not preferred over the other. There are benefits to both the default iOS modal and the modified iOS modal: the default modal is less costly and the modified modal does make the user pause longer before taking an action. However, we should also consider the limitations of Android and the costs to customize modals. Based on our user research, we recommend using default modals over customized modals since the information the user took away were the same.
Want to learn more? Check out these case studies below:
 |
Actionable Colors Background Exploration for actionable colors for buttons and colors. |
 |
Actionable Colors Recommendation Actionable color recommendations for buttons and colors. |
 |
Mobile Fonts – System and Custom Considerations to take when using system or custom fonts. |
 |
Actionable Item Controls Best practices for implementing segmented controls and tab bars. Investigating the UI for an item in a “disabled” state. |