1

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
  • 2
    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
    Commented Nov 1, 2023 at 22:49
  • Ooh I like that snackbar idea, I'll do that, thanks.
    – Lance
    Commented Nov 2, 2023 at 0:49
  • 1
    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
    Commented Nov 2, 2023 at 11:13

1 Answer 1

0

MailChimp are probably one of the best known examples of applications that handle email newsletters, so you can reference their example of the email subscription design pattern.

enter image description here

And what happens when you put in an invalid email address, the error message appears below the input field (which is standard in many form based applications).

enter image description here

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.