7

After reading http://www.lukew.com/ff/entry.asp?1502 and http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php Placing labels above input fields is preferable, but if you choose to place them to the left of input fields, at least make them right aligned.

I have to design a form for a user to create customers records; I mean, a lot of fields and the user has to do this operation several times a day on his day a day.

First I use horizontal labels, centering the form on the screen enter image description here

Then I decide to use the maximum horizontal size of the screen so I went with this enter image description here

And after reading the articles I tested this enter image description here

After all, I think the 1 is the best and the 3 is the worst, what do you think? Please could you give me any advice about the layout of a form with a lot of controls and will be used by a user-worker several hours everyday.

5
  • 1
    They are all suffering from lack of thoughtful use of white space and consistent margins. That might be throwing things off a bit.
    – DA01
    Oct 31, 2012 at 3:30
  • I agree with @DA01 but I'd also note on the 3rd sample the labels should not be bolded. IMHO the emphasis should be on the content data not the labels which are just the "hints" for the user.
    – scunliffe
    Oct 31, 2012 at 14:37
  • Have you tried versions of the top-aligned labels with the same font-weight as with your other designs? Nov 1, 2012 at 0:07
  • Will the form be edited? Will the form be long? Will several items in the form be optional? Will users likely need to consult and check against the labels as they input their answers? Will fields commonly sit horizontally (which should only be done if they have a strong, logical relation and themselves constitute smaller parts of a larger single answer)? Are there forms on the same service that have different characteristics (so we can't make assumptions and put constraints on the designs of other forms), and if not, how confident is that assumption? Nov 1, 2012 at 0:11
  • Try using the form like an end-user (with same data, same time constraints etc) and you might get an idea how it can made better. Imho usually less is more and users would get fed up of submitting a form multiple times
    – powerd
    Aug 26, 2019 at 11:30

5 Answers 5

2

You should break up your form into sections that make sense. A long form is incredibly tiring on a user, and poses problems of filled in wrong information and then having to fill in the entire form again.

If you provide a storied step by step form, with a clue of what lies ahead, and maybe easy access to what the user has edited in the past, you'll make filling in the form less of a drag, and more goal oriented. By making the form smaller, the user will feel like they're accomplishing more, even if they're filling in the same information. Don't split up your form too much though, you're also increasing the time it takes to fill in the form.

I know I've referenced this book before but it's a really great read, and everyone should read it. I think I'm going to read it again soon actually. 100 Things Every Designer Needs To Know About People

If you're set on using a one page form, this is the neatest option:

enter image description here

EDIT:

The other two options are cluttered (especially 3), and it looks like in your process to follow the guidelines, you've made the form appear as a grid. Maybe try an option where everything is still in one line down the page, but with the labels above?

2
  • Thanks for tou reply; in fact the form is broken up into sections, 9 tabs. The image only show one of this tab. So, you think for this purpose is recommended using right aligned labels against placing labels above, despite that explained in the article?
    – fjrr
    Oct 30, 2012 at 22:44
  • Obviously, not know what you have in the other sections and how it's organized, I can't comment on re-organization, but I would try that as well. 9 sections, each that long is a bit intense. Other than that, I've edited my answer.
    – NotSimon
    Oct 30, 2012 at 23:48
1

As pointed out in your comments to the post, User Experience Stack Exchange (http://ux.stackexchange.com) is likely a better location for this.

However, to give a few snippets here...

The purpose of right-aligning labels (which none of your examples do) is to reduce the horizontal white space between label and input field. This reduces the scan time and improves the ability of the user to better identify the proper label to the associate input field.

What right-aligning also does, as well as putting labels above the input field, is it aligns the left side of all the input fields to the same horizontal position. The user can scan straight down the page and the left-most line of every input field is at the same position for each line. This improves the visual scan pattern of the page.

Also, fields should generally be of the same size. Moving down from one line to the next should not yield an input field that is longer/shorter then the others.

Another point to make is putting input fields on both the vertical and horizontal plains. The user now has to scan both up-and-down, as well as left-to-right. This is not ideal. A single visual scan field is preferred.

Of course, there are always exceptions to the rules. You'll find UX people who disagree with others. As a UX person, I generally agree with the articles you posted in the question.

2
  • So, yo think its better to go with right align agains put placing labels above?
    – fjrr
    Oct 30, 2012 at 22:50
  • I think it depends on the situation. Just looking at you screenshots, I would go for the right-aligned labels over a top-align. But I don't know anything about the app beyond those shots. Is this a web app? That would slightly alter me overall opinion, but I'd still say that right-align would serve you perfectly fine. Oct 31, 2012 at 0:49
1

If all those fields have to be on the same page, then use fieldset controls to make groups, for instance, considering your first screenshot, you have 4 o 5 clearly differentiable areas tha can be on their own fieldset, plus, you should add some white space between them.

If you can provide also a title for each section, you are contributing a lot to the usability of the form.

Another thing, you shouldn't have form fields below the action button "el cliente es promotor" should be before the button, if it's not related to any of the areas before, then you can create a section just for that, but don't leave it after.

To create the sections, you can use the border property of the fieldset, but you can also use some light color, enough to create a visual area.

In the section related to location, you should move the second column a bit to the right, leave some free space between.

Another thing that helps readability, is to have all the input fields and drop downs of the same length, that gives uniformity or consistency to the layout.

1

In situations where the user is generally familiar with the form (and she will be after filling out it 10 times) the above-the-field placement is generally discouraged.

Right alignent would still make sense per se.

A big question is, wether these forms are mostly read or written.

Assuming it's written a lot, a really important key factor is keyboard handling: it's just much more convenient to TAB/downarrow your way through huge amount of data all day than to click on things.

While it's not true on webforms, here it is: people are willing to learn things, like keyboard handling as it makes their life easier, whereas with websites, people usually see them once on their lifetime.

In case a label doesn't fit, you can shorten it and provide a tooltip instead of breaking the layout as users will be familiar with the abbrevation at most their second workday, but their eye movement would break every time.

It's important to generally maintain a single vertical alignment line for each piece of information: that is, the users should be able to vertically scan the form for the fields they need, without looking left or right.

Of course, not everything fits into a single line, but in general, if there's an information which is somehow special, and likely won't be looked up the same way as the other pieces of information (like, a complete address), it can have its own column.

Generally, you have to order the information into columns, both the labels and the fields, and maintain a consistent width, gutter (gap) and baseline (vertical distance, row height) for each: all fields should have the same width, all labels should have the same width as the fields, the distance between label and field (in case of right alignment) should be consistent. These are called "grids" in visual design.

Use these columns and baseline as kind of units: you can leave out a whole column or row in case you want to separate two form sections, you can have double column width, or double baseline height fields if needed, but always think in these units and align to their boundaries.

You don't have to maintain a hyper-strict order of field rows (as users will scan all rows anyway), albeit it's recommended to have most frequently looked up fields first, as they'll stop scanning once they've found what they were looking for, but you are required to have absolutely, trivially logical reasons to put some information into a different column: "I didn't have space left" just doesn't cut it.

But the most important is: ask your users. Show them your design ideas, watch them as they try to use it, record these for further evaluation (both screen and face), and if within budget (hacking a webcam into a tool costs about 200$ or equivalent) use eyetracking, so you know what they're looking at.

1

I'd do the same and break it into columns. Ensure your columns are clearly marked out by either using background colours or borders. It will stop the eye from prematurely flowing into the next column.

There is also a really PDF out there called Web Forms: Filling in the Blanks

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.