On the desktop, I prefer to have the label on on line and the corresponding field below it like this…
Is this okay for a mobile app or RWD?
My friend is placing labels in the background of fields which I find more confusing…
Thoughts?
Yeah, the first option is far better for accessibility on all platforms. The second kind of option is more used because people think it looks nicer. But it can be a real pain for users, which can be bad for business, so one should consider that.
2 Likes
The purpose of this is maybe to save space, using one line,rather than two. But you should consider if being accessible and easy to understand is more important.
The problem with relying on the “placeholder” attribute or labels inside the element is that once the user has typed into the input the user has no idea what that field originally stood for and if they have typed something into the wrong field they will never know by simply reviewing the form.
1 Like
Excellent!!
I landed on a web page the other day that consisted solely of a form to be filled in, and the labels were simply placeholder text like that. But: the moment you land on the page, the first field was in focus, meaning that the placeholder text was already hidden. So there was no way of knowing what that field was for without first moving to another field. As fails go, that’s got to be pretty epic. Beggars belief that anyone could do that, but there you go … 
4 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.