Should form fields flow top to bottom or left to right/right to left?

Question

I'm currently designing a small form for a user create experience inside an app.

I'm wondering if it makes sense to have the last name field shown to the right of the first name OR down below the first name field.

Answer 1

Personally, I like to structure my form so that my fields are vertical. This leaves a clean area to the right to put validation messages, help icons, etc.

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

---

That said, you can have either way. No way is better than the other. As long as you have the Six Components of Web Forms, as defined in the "An Extensive Guide To Web Form Usability" article from Smashing Magazine, the your users should have no problems with your form.

The Six Components Of Web Forms

Web forms are a necessity and often a pain point for both designers and users. Over time, users have formed expectations of how a form should look and behave. They typically expect Web forms to have the following six components:

1. Labels
   These tell users what the corresponding input fields mean.

2. Input Fields
   Input fields enable users to provide feedback. They include text fields, password fields, check boxes, radio buttons, sliders and more.

3. Actions
   These are links or buttons that, when pressed by the user, perform an action, such as submitting the form.

4. Help
   This provides assistance on how to fill out the form.

5. Messages
   Messages give feedback to the user based on their input. They can be positive (such as indicating that the form was submitted successfully) or negative (“The user name you have selected is already taken”).

6. Validation
   These measures ensure that the data submitted by the user conforms to acceptable parameters.

---

The other thing you might think of is to group like fields into one area like Google does:

Answer 2

There's a Gestalt law of grouping saying that "elements close to each other are perceived as belonging together". See: http://en.wikipedia.org/wiki/Principles_of_grouping#Proximity.

I would even go as far and reckon that it was this perception that made you ask this question in the first place... ;-)

Thus in your example, "First Name" and "Username", and "Last name" and "Email" are grouped. I would thus recommend to switch the order to honor this. "First name" and "Last name" go together well, as do "Username" and "Email".

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

If that's against your intention, try to find way to group the horizontal elements closer or to follow one of the other Gestalt laws.