Redirecting to default login... Modal Design – Mobility Center of Excellence Team Website

Modal Design


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.


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.

iOS Modal – My KP Meds

My Kp Meds iOS Modal

The iOS modal is centered and can be dismissed if the user clicks “I UNDERSTAND.”
Android Modal – My Doctor Online

My Doctor Online Android Modal

The Android modal is centered and can be dismissed if the user clicks the “OK” button or [X].

App Store

iOS App Store Modal


McDonald's Modal


Yelp Modal

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

Default Modal

An iOS default modal for Terms and Conditions but renamed to

A Terms and Conditions Modal that pops up in KP Mobile renamed “Notice.”
Modified Modal

Modified Terms and Conditions modal renamed to

A modified Terms and Conditions Modal that pops up in KP Mobile renamed “Notice” and reversed “Agree” and “Cancel” buttons with an image.

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.


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.

Back to top

Want to learn more? Check out these case studies below:

Actionable Colors Background Actionable Colors Background
Exploration for actionable colors for buttons and colors.
Actionable Colors Recommendation Actionable Colors Recommendation
Actionable color recommendations for buttons and colors.
Mobile Fonts – System and Custom Mobile Fonts – System and Custom
Considerations to take when using system or custom fonts.
Actionable item controls Actionable Item Controls
Best practices for implementing segmented controls and tab bars. Investigating the UI for an item in a “disabled” state.