Tags: patterns and widgets
Luke recently posted an article about form widget layout. It talks about the placement of labels in relation to the form input elements. I think he’s basically nailed it, but didn’t take it to the next level. He is right by suggesting that left aligned labels are ideal for longer forms where the data isn’t familiar to the user, but that leaves the labels sometimes too far away from the widgets themselves. Making them right aligned, means there is a left jagged edge and in English that impedes legibility.
My question is, how can I get the best of both worlds? Well … here’s how:
By adding in the two types of background colors, and using rules and frames to separate the cells you get both horizontal relationships and you get vertical rows to hold your eye in.
[note added: 1/24/05]
Luke added a section critiquing my post. I’ll stand by my comment responding to his original critique below. That I believe that while possibly aestheticly he is correct, from a usability perspective there is a contradiction here.