Form label alignment for fields that are not completed in a logical order

Question

I'm defining a project based around inputting telephone enquiries into a form. The enquiries are conversation-based rather than in a question-answer format, so the responses could come in in any order.

I'll use a car purchase enquiry as an example - someone phones up enquiring about a car purchase - they chat to the person on the phone about the sort of car they are wanting, how many people will be using it, what colour they like, what fuel requirements there are, what the mileage is going to be like... The person on the end of the phone would also participate "oh yes, I like a red one myself, I drove to Berlin in a convertable before and they all look better in red...". All the while during this conversation the person taking down the enquiry is filling in the form based on the info they pick up during their chat.

It's basically a brain-dump from the person making the enquiry onto the person taking down the details. Each call that comes in will be about the same thing (a car purchase) and all the same information will eventually come out of the call, but each call is different and the information provided comes upin a different order.

So, I'm trying to decide the best way to lay out the form to allow for quick entry of information when it comes up. The person taking down the details needs to quickly find the relevant field on the form (it's going to be quite a long form overall) while still listening to the conversation.

At first I was thinking that this is possibly the only good situation for left-aligning the form fields - because it is the labels that are the important part here and having them all positioned in a straight vertical line should (in theory) make the labels faster to locate:

^{download bmml source – Wireframes created with Balsamiq Mockups}

However I have been doing some reading up about label positioning (such as this article on UX Matters) that claim:

Alignment of labels—In most cases, when placing labels to the left of input fields, using left-aligned labels imposes a heavy cognitive workload on users. 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.

In every other form I have defined I would look to align the labels either above the field or right-aligned, but my particular use-case still makes me think that left-aligning them is preferable.

Should I stick with left-aligning the labels, or move them to the right?

Another consideration is that the person taking down the details will be doing this as their main job, so it's likely that they'll get to know the layout of the form pretty well - but I don't want to put off new users because if they find it hard to use initially then they may not actually stick around long enough to become experienced.

Answer 1

As your form filling process is arbitrary, there is no smooth flow from top to down. In your case more important to provide fields' findability. Left-aligning seems good for this purpose. So the labels' role not only informative, but also bookmark-like. And in physical world bookmarks always popped out for quick access.

Quick control focusing could be provided by clicking anywhere within label area (actually it is standard behavior, but you could expand responsive area).

Fast editing is possible by transforming comboboxes to radio buttons.

Some parameters could be setted rather rough. So mileage, for example, could have interval values.

Setted items could be slightly faded so a consultant could see them and ask a client for non setted values.

And some interesting moments could occur when client prefer non single color or gives high priority to some parameter or set of parameters over others.

Answer 2

I think the current alignment is on point. Left aligned labels with corresponding input control to the right fortifies the scanability of the form since all labels begin in the same vertical line. This allows the user to quickly read out the initial characters of the label to distinguish the one that they're looking for. This compared to top aligned or right aligned labels which allows for better mapping to corresponding input control and thereby enabling easier label/input coupling, however at the suffer of form scanability since labels are either "skipping around" or share vertical space with irrelevant (input) controls making it crowded. One idea could also be to apply the "tick checkbox by clicking its label" pattern, meaning that you could implement it so that the user can focus an input field by clicking its label. This could be a good approach since I've seen users scanning lists using the pointer as a "rabbit".

I take it that this software you're designing does not allow for icons to be used (seeing that the car scenario was an example)? If it was possible however, using illustrative representations in addition to the labels would have been preferable in a scenario such as this where a user has to scan the list to quickly find the appropriate input. Once the user learns to recognize the icons for the input then the pace can be greatly improved since humans identify shapes faster than they do words.