Prettier Forms

Any tutorials (or useful resources) should go in here.
libeco
Posts: 104
Joined: Sat May 07, 2011 9:56 am

Re: Prettier Forms

Post 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!!!
Tino
Posts: 360
Joined: Thu May 05, 2011 8:55 pm
Location: The Netherlands

Re: Prettier Forms

Post 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?
Please check out my CodeCanyon items.
User avatar
jacek
Site Admin
Posts: 3262
Joined: Thu May 05, 2011 1:45 pm
Location: UK
Contact:

Re: Prettier Forms

Post by jacek »

133 pages on form design ! *yawn* !
Image
libeco
Posts: 104
Joined: Sat May 07, 2011 9:56 am

Re: Prettier Forms

Post 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...
User avatar
EcazS
Posts: 789
Joined: Fri May 06, 2011 5:29 pm

Re: Prettier Forms

Post 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.
libeco
Posts: 104
Joined: Sat May 07, 2011 9:56 am

Re: Prettier Forms

Post 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...
User avatar
EcazS
Posts: 789
Joined: Fri May 06, 2011 5:29 pm

Re: Prettier Forms

Post 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.
libeco
Posts: 104
Joined: Sat May 07, 2011 9:56 am

Re: Prettier Forms

Post 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.
User avatar
EcazS
Posts: 789
Joined: Fri May 06, 2011 5:29 pm

Re: Prettier Forms

Post 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.
libeco
Posts: 104
Joined: Sat May 07, 2011 9:56 am

Re: Prettier Forms

Post by libeco »

Now I"m confused, where did you get that text from? :lol:
User avatar
EcazS
Posts: 789
Joined: Fri May 06, 2011 5:29 pm

Re: Prettier Forms

Post 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: )
Post Reply