0

I have this basic email subscribe input, and I'm wondering a general pattern for not having the error "notification" move the input down the page when it appears.... There can be 2 states: success and failure messages, and they can be an unknown height.

How can you design this so it works well across devices? I was thinking of moving it below the form, but then you have to possibly scroll to see the message (or autoscroll it in view, which is also annoying). On mobile you might not have a lot of screen real estate to put it below either, so putting it above makes sense.

Maybe doing a "growl" style notification absolutely positioned off to the side works? Putting a center modal view which the user has to click to hide seems like overkill, but in terms of layout that doesn't jolt the layout.

These are just a few of the options I've thought about so far, but really wondering what the state of UI/UX is in regards to this sort of pattern/dynamics. What is best-practice? What is recommended vs. what isn't?

enter image description here

3
  • 1
    I'd just use the accepted pattern (error message below the field) and that's it, no need to reinvent the wheel. But if you don't like that, just use a toast or snackbar m1.material.io/components/snackbars-toasts.html#
    – Devin
    Nov 1 at 22:49
  • Ooh I like that snackbar idea, I'll do that, thanks.
    – Lance
    Nov 2 at 0:49
  • You're missing a label. If you would reserve space for a label, there is also space for an error message. Unlike toasts or snackbars, it will be adjacent to the input field where it is best noticed and where the relation with the input field is clear (also from accessibility point of view), and it won't disappear or be dismissed, making it a more robust experience. Toasts and snackbars might indeed look nicer or more modern. It depends on what has priority here.
    – jazZRo
    Nov 2 at 11:13

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Browse other questions tagged or ask your own question.