Hide and reveal Alert Notification

[Porlin]

Hello there, up until now Conversations Flex Agent UI has only supported attaching one file at a time. We are now allowing for Multiple attachments.

Background: Currently, in Flex we only show 1 error for multiple attachments. And the error we show is the first that fails in the following order.

file type -> file size -> duplicates -> file count -> overall file size

We want to be able to show multiple errors when attempting to attach multiple files. However, keep 1 error maximum per file.

Instead of showing multiple errors at one time as the Paste advice is to not use more that 2 alerts per page - We wanted one error message that would allow the user to see the multiple file attachments that are causing the error. In the mockup here we have a 'Hide and reveal' function, where if the user clicks on 'View file errors' the Alert would expand to show that information.

Is this treatment allowed for Alert Errors, if not do you have any other UI recommendations to surface this kind of error?

Stage of design: High-fidelity
Research: tbc
Links to mockups or prototype: Figma prototypes

Many thanks

[loreina]

Hi @Porlin, I've brought this back to the team to discuss and we'll get back to you soon!

[Porlin]

Thanks @loreina please let me know updates once the team has discussed.

[Madlibs1991]

Hey Porlin! After reviewing the UI kit again, I'm wondering if we go back to some of our previous design solutions where the error is in the attachement box itself, since the error is getting kicked back when the user is trying to attach and not when it's actually sent. This is a tricky one. Happy to set up a working session if we haven't nailed it yet!

[Madlibs1991]

Just following up what came out of our working session! Porlin and I decided it was okay to move forward with the design of an alert style component for this use case because Flex's patterns currently do not show any type error attachments, and they currently only show successful attachments.

We started exploring having the error message displayed in the text area, however, the error gets grouped with the successful attachments and a successful message for the user. Having an error in this area feels less important.

I'm still going to explore some other options, but for now the alert style is the most successful treatment.

[Porlin]

Thank you for this update @Madlibs1991

[Madlibs1991]

Hey @Porlin, I know we spoke about this in the Figma but just wanted to give the update in here as well!

Today, the UX infra designers revved on this alert approach and agree it may be the best one for this use case.

We did think it would be helpful to create some sort of threshold for how many errors messages to show within the alert container. For example, if it's three or fewer errors, they would be within the alert banner. However, if it's more than 3 (this threshold number is your preference) in the alert banner, a link would be available for a modal where the user can see all the errors listed.
I think this would be helpful if a user happened to have a ton of error attachments and/or the alert banner had a max height.