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.

[apiuser]

Comment from MomotenkoNatalia, posted on GitHub Jan 11, 2016

Hi @erikhansen
We have created task for our Design team to refine a pattern of messages from your proposals - Internal ticket MAGETWO-47763

Thanks for sharing your ideas!

[apiuser]

Comment from tkacheva, posted on GitHub Jun 15, 2016

Implementation task MAGETWO-54422

[apiuser]

Comment from ErvinLlojku, posted on GitHub Jul 29, 2016

Hello,

Please kindfully consider updating the error messages for the swatch elements. It is the same usability issue as described above. Should be reconsidered the way the styles are applyied to the swatch inputs.

Thank you!

[apiuser]

Comment from tkacheva, posted on GitHub Aug 17, 2016

@ervinllojku could you provide more details about swatch error messages please. I suggest to open separate ticket for this

[apiuser]

Comment from blizam, posted on GitHub Aug 19, 2016

This is huge I think... especially on credit card processing errors... if a card is declined in any of the PayPal checkout options there's a good chance the error is outside of the users' window (above) and because the error clears so quickly (it hides immediately if you put your mouse on it; or after 5 seconds) the user will quite often miss it (I know I did in testing) and therefore have no idea if their payment went through or what they should do next.

The error messages should persist on checkout and not auto-hide

[apiuser]

Comment from erikhansen, posted on GitHub Aug 19, 2016

@blizam Yes, I consider this a serious usability issue and I hope Magento addresses it in the next release.

[apiuser]

Comment from adragus-inviqa, posted on GitHub Aug 19, 2016

Hijacking this thread to express my facepalming: I don't know whose idea was to hide the messages after 5 seconds, but it's a darn bad decision.

[baldwin_pieter]

Email me when someone replies

[classyllama]

MomotenkoNatalia - Has any progress been made in addressing this issue? I consider this to be a huge usability issue that should be addressed in the next release.