FAQs Warning Box

[Biuwa]

Overview

To prevent admins from mistakenly deleting FAQs categories and questions, we need a warning dialog box that asks them to be sure before deleting

Action Items

• create mockups for the warning box that quotes the text of the question/answer that the admin is deleting, and also includes a leaving the page warning box
• Get stakeholders' approval

Resources/Instructions

[Biuwa]

@entrotech:
For the question deletion warning dialog, it could be designed like the one for deleting projects:

Or, if you have an improved design, we should probably update the project deletion warning dialog to match.

[Biuwa]

@IMHieuVo :
I have updated mockups of the Warning Box per our 11/2 meeting (Jon noted that there is an existing Warning Box we could match).

Mockup A - Match. Match the existing warning box and the background fade as closely as possible while retaining the new language.

Mockup B - Dark Fade. Match the warning box but have the background be a darker fade.

Mockup C - New Style. Match elements of the warning boxes but have the look and feel of the newer style.

Mockup A - Match

Mockup B - Dark Fade

Mockup C - New Style

[Biuwa]

@SMR9220:
Team has selected Mockup C as the preferred style. @IMHieuVo

Per mtg 11/9, iterations needed:
-Add quoted text of question/answer that the user is deleting in the warning box
-To avoid accidental deletion, move focus to/highlight the "cancel" option

[Biuwa]

@IMHieuVo:
@Biuwa @SMR9220

Per the 11/9 meeting, the team has chosen Mockup C (Centered Text warning box with dark fade background). The latest iteration includes:

Quoting the text of the question/answer that the user is deleting in the warning box.
To avoid accidental deletion, move focus to/highlight the "cancel" option
Includes a Leaving-the-page warning box
Link: https://www.figma.com/file/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=7299%3A25362&t=0ztwOC3PNJ8aFPGN-1

Question Warning Box

Leaving warning box:

[Biuwa]

@IMHieuVo
Below is the update of the warning boxes per accessibility considerations. The red text on the white background does not seem to pass the color contrast checker for accessibility so I opted to make the text black.

Option A) Uses the main red color as an outline
Option B) Uses bold white text on a dark red background.

https://www.figma.com/file/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=7419%3A25419&t=79Ho5XdabKSIQwbM-1

FAQ Question Warning Box, Option 1A - red outline

FAQ Question Warning Box, Option 1B - Red background

FAQ Leaving Warning Box, Option 2A - Red outline

FAQ Leaving Warning Box, Option 2B - Red background

[Biuwa]

@ExperimentsInHonesty:
@IMHieuVo In the above post, you have several different warning messages, but two different color reds. Please explain why two different reds (the orange red and the more brown red).

[Biuwa]

@IMHieuVo:
@ExperimentsInHonesty
Short answer: Accessibility.
Long answer: The orange-red color is one of the 'core' colors of the site but it is a terrible color to use with white/gray in terms of accessibility. It fails both versions: white text on orange-red background and orange-red text on white background. In option A, we can still use the orange-red color because it is not directly interacting with the text. In option B, I had to go with a darker red color to pass the accessibility contrast.

[Biuwa]

@IMHieuVo is it possible to have these design options in the different colors you used? For example, the red outline option will be in the 3 different shades of red you used?

Stakeholders having to choose between different designs in 3 different shades of red might be difficult. They might like a particular design, but may not like the color used, or may like a color and not the design.

[IMHieuVo]

@Biuwa
Below is the preview of the expanded options per your request. Option A and Option D are the original. With only subtle differences, isn't this a bit much for the shareholders?

[ExperimentsInHonesty]

Notes from 2023-01-10 meeting with stakeholder

• Approved by stakeholders, ready for dev (check warning box audit for color)

[Biuwa]

@IMHieuVo Stakeholders approved option 1b, however, some corrections would need to be made:

• To make the warning box consistent with others, it should have a dropdown shadow
• Please check the warning box audit for the correct color to use or confirm with @Noushie that #E46247 is the right color to use (per yesterday's meeting)

[IMHieuVo]

@Biuwa It is weird that the stakeholder chose Option 1B but wants the colors of Option 1A. The two options are identical except for the color red. It would make more sense to choose Option 1A from the start. Regardless, I've updated the warning box.

• Update the red color to #E46247.
• Add drop shadows (In my review of the warning box by @Noushie for issue 1289, there is both a drop shadow for the warning box and buttons. I matched it since the mockup was chosen)

Figma Link: https://www.figma.com/file/nD9QK56Mzq7xNSaSUoeGx0/TDM-Calculator?node-id=7755%3A25886&t=gWyyDb2KkYR2Xj6W-1

[Biuwa]

@IMHieuVo yeah, we picked 1b in our team meeting, and 1b was added to the deck; 1b was what the stakeholders saw, and my comment was concerning what they saw.

[ExperimentsInHonesty]

• This issue got made which will implement the designs from this issue Implement a Warning Box when User Deletes FAQ #1304