4

I have designed these two forms and would like to know which would be more effective at conversion i.e form filling up.

Here's the first one which I feel is more effective reason being the separate rectangle containers break the eye motion and when the eye focuses on the next element it will read from left to right, which would help users just fill up a form one step by step.

enter image description here

Here's another form that was made. The form fields differ but this is what is used by Android. enter image description here

Which would perform better? Type of user: 20-30's, mid level income, constantly in touch with farmers, has a vehicle for commute given by the company, uses phone mostly for calling and texting people. Smart phone can be in the price range of $100 to $150. Make Samsung, OPPO, Motorola.

My consensus is to user would read the text in the first image and see the text in grey realise that needs to be filled and fills it up. This goes against the top down approach of how mobile users read forms. But it really helps the user focus on the one field they're filling and that I think is worth the trade offs of material designed form field.

4
  • Here's an image on how I want the users to read the form, or rather how I feel I've optimised the form. i.stack.imgur.com/jexxF.jpg (Due to my newbie status I'm unable to post three images)
    – AmpleUX
    Feb 17, 2017 at 12:11
  • The line in the second case makes the separation between elements very clear while acting as the place to type.
    – Alvaro
    Feb 17, 2017 at 14:38
  • Here's the perfect opportunity to do some usability tests. Let us know what you find out! Feb 17, 2017 at 18:05
  • 2
    @KenMohnkern Ran this with five people, they felt the left aligned was easier to fill.
    – AmpleUX
    Feb 20, 2017 at 9:44

1 Answer 1

7

There are many articles which recommend TOP ALIGNED over LEFT ALIGNED.

It’s clear that top aligned and infield labels aren’t the quickest and easiest to scan, but what’s a better approach? The better approach is infield top aligned labels.

http://uxmovement.com/forms/why-infield-top-aligned-form-labels-are-quickest-to-scan/

The following article shows eye tracking patterns and comes to the same conclusion that TOP ALIGNED labels are more scannable:

Label position—Placing a label above an input field works better in most cases, because users aren’t forced to look separately at the label and the input field.

http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

Label on top of the field

Advantages

  • On small screens, when focus is in-field, label can still be seen (despite zoom).
  • User may be able to see the label and the field within one glance.
  • Label length can be longer than field length.
  • Allows for different label lengths when form is translated into other languages.
  • Form is narrower compared to having labels beside fields. Longer labels that wrap are easier to read, as there is a consistent left edge for the eye to return to.
  • Labels are in close proximity to their corresponding fields, so it is easy to see which goes with which.
  • Label is visible even as its corresponding field is being filled out, so the user doesn’t have to remember what the label was, and can cope with interruptions.
  • At any time, users can compare their answers to the labels.
  • Easy to implement well.
  • In HTML, does not require the use of the placeholder attribute as a proxy for label, helping maintain accessibility.
  • It’s easy for users to see where they have to enter information.
  • Works regardless of field type (e.g. text box, radio buttons, check boxes or drop downs).
  • Works with touch interfaces.

Disadvantages

  • Form is twice as long compared to forms with labels beside fields.
  • Labels are harder to scan, as they are separated by fields.

https://www.sitepoint.com/definitive-guide-form-label-positioning/

2
  • While I showed this to about five people they felt that the left aligned was easier to fill. They said it felt like they were lesser steps involved in filling it up, I also have a feeling that if there are fewer fields then left aligned would be better.
    – AmpleUX
    Feb 20, 2017 at 9:47
  • 1
    User testing trumps everything. There are a lot of studies out there that are excellent as a point of reference.
    – Mayo
    Feb 20, 2017 at 13:52

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.