Placement of notifications on support plans page

[tonge495]

I am working on a mockup in a scenario where a user is on the Support Plans page while their Twilio account is suspended. Because the user has a suspended account, we wanted to make a notification to indicate that they can't change their support plan. This notification only pertains to the Support Plan page.

Does Paste have any recommendations on if the notification should sit right below the system notification (Your account is currently suspended) or if it should be below the 'Support plans' header? See screenshot for both options.

Any help would be much appreciated, thank you!

[nkrantz]

Hi @tonge495! It's not ideal to have 2 Alerts on a page, as you can see both options are a bit overwhelming. Our guidance around doubling up on Alerts is as follows:

Use only 1 alert per page. Use 2 alerts only if absolutely necessary and if the alerts are placed in different containers.

I think we might be able to come to a workaround to avoid having both of these messages be Alerts. First, could you give us a bit more information about the system notification (Your Twilio account is currently suspended)? It would be helpful to know whether that's a global alert that appears on every page and whether you have any control over the copy.

Also, could you share more information about the Support plans page? What are the actions that the user can take on the page when their account isn't suspended? I don't see where the user would make changes to their support plan.

[tonge495]

@nkrantz The 'Your Twilio account is currently suspended' notification is a global alert that appears on every page. We do not have control over the copy of this notification, otherwise, it would have been better to include the additional notification around being unable to change support plans as part of the copy.

This is the screenshot of the normal state, where a user is able to change to change to a different support plan.

[nkrantz]

Thanks for sharing! It looks like all of the "Select" Buttons (any possible actions) on the page disappear when the user's account is suspended. Because of that, and because of the visual overload of the 2 Alerts, I don't think it's absolutely necessary to display both Alerts on the page.

Have you considered using an Alert Dialog or a Modal? In that scenario, on page load, the user would see an overlay with the information from your Alert ("You cannot make changes to your current plan while your Twilio account is suspended") and they would have to close it before seeing the page content. If you think users might close the overlay before reading the message, you could also add another component where the "Select" buttons typically appear, reminding the user that their account is suspended and that's why they can't make changes. Either Warning Help Text or a Warning Callout would be a good option here.

Let me know what you think about this route!

[tonge495]

Thanks for the response! I discussed with the team and we actually had decided to deprioritize the work for now, as there is higher priority work within this workstream that the developers are focused on. Thank you for the feedback though, this is good to know for next time we have a similar decision to make.

I am fine with closing this discussion for now.

[loreina]

@tonge495 Thanks for getting back to us. Marking this as answered.