Should the "X" stay put or move to the purple square, which is lined up with the Sign Up Form. Does it matter?
2 Answers
I'd agree that the best solution is to place the error nearer the form fields. Here's another alternative though - put the close button straight after the error text so at least the user doesn't have to hunt for that, too.
-
After doing a bit of testing, your solution makes the most sense... Apr 15, 2016 at 3:35
The error banner is sized to the overall dimensions of the content boundaries. So the 'x' is in a perfectly fine place based on the static alignments within the page.
The real answer to the issue is: The error message is in the wrong place.
For multiple reasons, one being the Gestalt Law of Proximity, the error message should be a part of the "Join for Free" div
itself. Details should also be directly associated with the fields in error.
-
Great answer. Is the Gestalt Law of Proximity dying or do companies like Swagbucks and Tree House choose to ignore it? I've seen many companies do this same thing for error messages with login or sign up... Apr 14, 2016 at 21:30
-
I don't think it is dying, people are just ignoring it or not aware of it. I think, at least in some cases, groups use frameworks which have defined it to work this way and thus the issue is proliferated. Another guess as to why they'd do it this way is the "mobile first" mentality - it could be that the page is responsive and when in a mobile environment this banner is at the top and the problems are immediately visible to the user. Apr 14, 2016 at 22:18