Usability issues with error/notice/success messages

[apiuser]

Feature request from erikhansen, posted on GitHub Jan 07, 2016

This issue covers what I consider to be two major usability issues with messages:

1. Error message hides after 5 seconds

When error messages are displayed on the frontend, they disappear after 5 seconds (this is controlled by the onHiddenChange method in app/code/Magento/Ui/view/frontend/web/js/view/messages.js). If a user is not paying attention, if they are a slow reader, or if the error message is long, they message may disappear before they read the entire message. My recommendation would be to NOT hide the message but to leave it on the page until the user takes some other action that causes the message to be hidden.

Here is an example of an error message that will hide after 5 seconds:

@mttjohnson did some digging into what happens when there is an error with a payment method in the checkout process. It looks like the payment methods use the Magento_Ui/js/modal/alert component to display an alert-style modal that doesn't go away until the user closes it. The red error message I displayed above occurs when there is an exception thrown by Magento when progressing from Shipping > Billing, so it may not warrant an alert style popup, but it should at least persist on the page and not hide. This is what the alert-style popup looks like:

2. Error messages may display outside of current viewport

If a user is a on a small screen device, there are many situations where they will never see an error message. For example, if they're on the "Shipping" step of the checkout process and an error message is added, they may not see the error message get added to the top of the page. My suggestion would be to either smooth scroll the user up to the error message, display the error message next to the button they used to submit, or come up with a notification system that display notifications on top of all content.

[classyllama]

Email me when someone replies

[shaw_tech]

Hi,

I consider this to be incredibly important, could we get some feedback from Magento on an estimated release?

[garywholel]

Not to "Me Too!", but this is an enormous UX/UI oversight.  The combination of this notice disappearing mere seconds after appearing and immediately on-click illustrate the complete lack of understanding for the purposes these notices serve.  

• Alerts should provide actionable, contextual messages and may act like a "checklist"
• For the vast majority of use cases, form-submission alerts like these should never automatically close.  They should persist to allow the user to alter the form and correct the error based on the feedback provided in the message or present the user with the clear and explicit option of dismissing them.
• A user attempting to copy/paste error text (for example, if attempting to troubleshoot their issue with a customer service agent or in an effort to self-correct via Dr. Google), simply can't.  The alert disappears on-mouseclick.  A dismissal action like this must be triggered by a distinct visual element implying the action to be performed (for example, a red "X" glyph), not the bounding box of the message itself.
• Some error messages must be long by design, such as a specific decline scenario targeting a set of data in a specific field.  Presently, the user must catch, read, and interpret this message within 5 seconds of its appearance.  It's not safe to presume your users can read this quickly, or even do so correctly in one pass.
• In addition to affecting mobile as described, a notice generated off-screen in desktop view provides no hints to indicate that it has appeared.  Subsequently, it will disappear off-screen and leave no trace of a failure.  The user can scroll down far enough to hide this field on a high-end desktop computer with high screen resolution.  On lower grade equipment or on equipment running accessibility enhancements (ex. software magnifiers), this will almost certainly happen more frequently.
• Specifically addressing Credit Card declines, some banks set hard limits on charge attempts (transaction velocity) and may lock a customer's card for suspected fraudulent activity if too many charge attempts are made (even if none have captured).

Is there any estimate of this being scheduled for a revamp?

(ironically, writing this post was cold-stop interrupted by a "How did we do?" review modal from Magento that popped up dead-center and refused to close, needing to be disabled via the Chrome's debug inspector)

[Magento_Chuck]

We're tracking this item internally as ticket MAGETWO-54422 it's in our backlog but unclear when it'll hit the code base.  I've alerted the appropriate PM (Olena).

[erikpallha]

@Magento_Chuck Thanks for the update. Hopefully it's included in next release.

[mattf10]

This is an I agree.  There is no reason for this message to disappear automatically.  A simple close button would allow the user to dismiss the message if they want to.

Please ensure this is addressed in the next release.

[Shimon2]

This is a serious usablitliy problem.

Please address this issue.

[lingwooc]

Yeah, this is really bad. I guess I get to override that js to at least make the timeout longer.

[Erik Hansen]

For the record, I just shared a patch for how I worked around this usability issue: https://github.com/magento/magento2/issues/2916#issuecomment-345343749

[avstudnitz]

Two years later, nothing has happened. Any news?