Page 2 of 2

Re: Prettier Forms

Posted: Sat May 14, 2011 1:22 pm
by libeco
And for educational purposes: http://www.lukew.com/resources/articles ... _LukeW.pdf

Why? Because it's absolutely horrible to have labels on the right side of your input field... stupid designers!!!

Re: Prettier Forms

Posted: Sat May 14, 2011 1:40 pm
by Tino
Personally I actually like putting labels on the right side. I understand people read left first, but I tend to have some trouble with readability when displaying labels on the right side.

Is it seriously such a bad design practice?

Re: Prettier Forms

Posted: Sat May 14, 2011 2:09 pm
by jacek
133 pages on form design ! *yawn* !

Re: Prettier Forms

Posted: Sat May 14, 2011 2:17 pm
by libeco
This seems like the powerpoint presentation, but the actual book contains roughly 200 pages. It might seem boring, but it can help tremendously in actually making a usable form...

Re: Prettier Forms

Posted: Sun May 15, 2011 9:46 am
by EcazS
libeco wrote: it's absolutely horrible to have labels on the right side of your input field
That made me go :lol:

There is no book of law when it comes to designing. I know, typography and all that crap you really don't need to school me on that.
Sometimes it looks a hell of a lot better to have it on the right side, depending on the overall design. Maybe not in this example but when you see it you'll understand.

Re: Prettier Forms

Posted: Sun May 15, 2011 4:40 pm
by libeco
And that's exactly what I mean with "stupid designers". They tend to think "it looks a hell of a lot better" is a good reason to just create stuff.

Why do you think both eBay and Yahoo used this guys services and changed their forms accordingly? Perhaps because he knows what he is talking about? If you're not convinced, just look at some eye-tracking tests on forms and see how much trouble people have to fill it out correctly...

Re: Prettier Forms

Posted: Sun May 15, 2011 4:47 pm
by EcazS
libeco wrote:And that's exactly what I mean with "stupid designers". They tend to think "it looks a hell of a lot better" is a good reason to just create stuff.
Right side = Breaking the flow (not in a bad way, more in a "it's on the wrong side" kind of a way)
Left side = Mindlessly filling in the form.

Honest to god, you could take a billion of those test and it would all come down to the person itself. I find it more interesting and I actually read the labels if they're on the right side because it's a different thing. If it's on the left side I just skim through and don't give a crap about it. It's also easier to read on the right side because it's going to be pretty much in front of your eyes unless you're not sitting in front of your monitor or if the fields are way to long.
Both Yahoo and Hotmail have right-aligned labels, whilst Google Mail’s labels are left aligned. The eye-tracking study we carried out did not produce a conclusive answer as to whether left or right aligned labels are preferable by participants. However, labels with left aligned labels are anecdotally clearer.

Re: Prettier Forms

Posted: Sun May 15, 2011 6:37 pm
by libeco
There's a difference between right aligning labels and actually placing them on the right of the input field. I just opened Hotmail (and found a few thousand spam messages). The login form has the labels above the input fields (as advised By the author of the pdf) and the create new e-mail has the labels on the left of the input field (right aligned), so I don't know what you mean with your text.

Re: Prettier Forms

Posted: Sun May 15, 2011 6:45 pm
by EcazS
I guess they changed since that was written quite a while ago.

And the "author" ( :lol: ) meant on the RIGHT SIDE judging by the example pictures. Unless I have the ability to visually move stuff.

Re: Prettier Forms

Posted: Sun May 15, 2011 7:18 pm
by libeco
Now I"m confused, where did you get that text from? :lol:

Re: Prettier Forms

Posted: Sun May 15, 2011 8:34 pm
by EcazS
libeco wrote:Now I"m confused, where did you get that text from? :lol:
I have a book called "General Web Design" and it has a small segment about form designing. (I rewrote the text with my own words, don't worry :lol: )