diff --git a/Oppia-UX-guidelines-&-rationales.md b/Oppia-UX-guidelines-&-rationales.md index ac418136..6e19ab0f 100644 --- a/Oppia-UX-guidelines-&-rationales.md +++ b/Oppia-UX-guidelines-&-rationales.md @@ -1,23 +1,59 @@ -### Oppia's Design Guide +## Oppia Design Guidelines -You can find all of Oppia's design guidelines [here](https://xd.adobe.com/view/e54eaf14-243c-4cf4-8b9e-d8ff8c6933cc-b01d/grid/). 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). +Oppia’s design guidelines are maintained by the UX team and can be found here: +[Oppia Design Guide](https://xd.adobe.com/view/e54eaf14-243c-4cf4-8b9e-d8ff8c6933cc-b01d/grid/). +This is a living document and may be updated over time as design patterns evolve. +Some sections may be incomplete or subject to change based on ongoing UX discussions. -### 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: - ![image](https://user-images.githubusercontent.com/16653571/52317691-164f7100-29e7-11e9-8da3-7a512e227183.png) +--- -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: +## Guidelines for Modals - ![image](https://user-images.githubusercontent.com/16653571/52317811-983f9a00-29e7-11e9-9422-bbc56d7aa4e6.png) +Across Oppia, modal dialogs follow consistent closing behaviors to ensure +clarity, accessibility, and a predictable user experience. There are three +main modal patterns: -3. Modals which don't have a close button. - - It should not get closed by users through any process. - - Example: +### 1. Modals with forms +These modals contain user input (for example, text fields or configuration +settings). - ![image](https://user-images.githubusercontent.com/16653571/52318097-dbe6d380-29e8-11e9-95d7-b2ebea58362a.png) \ No newline at end of file +- The modal **must only be closed** using: + - The dedicated close button, or + - The `ESC` key +- Clicking outside the modal **must not** close it, to avoid accidental data + loss. + +**Example:** + +![Form modal example](https://user-images.githubusercontent.com/16653571/52317691-164f7100-29e7-11e9-8da3-7a512e227183.png) + +--- + +### 2. Modals with warnings or suggestions +These modals present information, confirmations, or suggestions to the user. + +- The modal **may be closed** by: + - The dedicated close button + - Clicking outside the modal (background) + - Pressing the `ESC` key + +This provides flexibility while maintaining user control. + +**Example:** + +![Warning modal example](https://user-images.githubusercontent.com/16653571/52317811-983f9a00-29e7-11e9-9422-bbc56d7aa4e6.png) + +--- + +### 3. Blocking modals (no close button) +These modals require the user to complete an action before proceeding. + +- The modal **cannot be closed manually** +- No close button, background click, or `ESC` key dismissal is allowed + +These are used only when an explicit user action is required. + +**Example:** + +![Blocking modal example](https://user-images.githubusercontent.com/16653571/52318097-dbe6d380-29e8-11e9-95d7-b2ebea58362a.png)