Best practice for input fields on mobile

Question

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

Layout 1 - Input fields stretched to fit the screen size and button(s) center-aligned

Layout 2 - This is a direct web-to-mobile translation where fields are of same size but are left-aligned with the button(s) right-aligned

Layout 3 - The fields aren't stretched to fit the screen and the whole form is center-aligned (card-like layout)

Layout 4 - Variable field sizes depending upon requirement with the longest (or biggest) field fitting the screen and the button(s) are right-aligned

I know that all the layouts I have mentioned below are usable and this might feel like an opinion-based question but I don't want to know which one is preferable.

My question is that which one would the best in terms of usability and ease-of-use?

Answer 1

For me, option 4.

I use shorter input fields for fields that can only have a few characters worth of input. For anything else, I use full width fields. Reason being is that you can manage expectations better if the length of the input field matches its content. You don't want people to think they are doing something wrong because they're given much more space than they need. Think about test forms in school that give you a ton of space when your answer only needed one sentence to be coherent and insightful. You start to doubt yourself. We want users to be confident and assured while filling out a form.

Baymard institute usability study found that if a field is too long or too short, users start to wonder if they correctly understood the label. This was especially true for fields with uncommon data or a technical label like CVV (card verification code).

Answer 2

Go with the first, where the fields are stretched out over the whole width. For a mobile phone this makes sense:

• The screen is smaller so field widths won't be out of proportion.
• Left and right handed people can more easily reach the fields with the thumb.
• All left aligned fields start at the same position from the left, while all right aligned fields (numbers) start at the same position on the right.

The symmetrical layout can also be more aesthetically appealing or easier on the eye.

While it's a good idea to hint about the requested input giving just enough space, it's better to focus on descriptive labels and instructions.

Answer 3

which one would the best in terms of usability and ease-of-use?

The first one since it makes it really easy for the user to tap in those fields.

I would make the button cover the whole width too, to increase tap area and make it visually more appealing with the form fields.