Oppia UX guidelines & rationales

Oppia's Design Guide

You can find all of Oppia's design guidelines here. Note that this is a living document, so it will be updated over time and some sections may be incomplete right now (as of 24 Mar 2022).

Guidelines for Modals

Throughout Oppia we follow three patterns for modal closing:

1. Modal with form(s) inside it.

   • It should only get closed if the user clicks the dedicated close button or by pressing the ESC key.
   • Example:

2. Modals with warnings or suggestions.

   • It should get closed through the dedicated close button or just by clicking outside the modal i.e, in the background or by pressing ESC key.

   • Example:

     

3. Modals which don't have a close button.

   • It should not get closed by users through any process.

   • Example: