Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

Form Field Example

share|improve this question

2 Answers 2

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.

mockup

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:

google form field example

share|improve this answer
    
Thank you for your response it was very helpful. Typically I like stacking labels on top of inputs but in this case I had to deal with limited space. Thanks for the link to sitepoint's 6 Components of Web Forms...I will be referring to that often now. –  Busycloud Mar 20 at 18:29
    
@Busycloud - Yea no problem. It's a great resource! –  Code Maverick Mar 20 at 18:30

There's a Gestalt law of grouping saying that elements close to each other are perceived as belonging together: 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".

mockup

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.

share|improve this answer
1  
They are "Gestalt PRINCIPLES", not laws. Two very different things with important distinctions. –  Evil Closet Monkey Mar 20 at 18:07
    
Thank you! I think your suggestion makes sense and I decided to go the route you suggested. –  Busycloud Mar 20 at 18:30
    
Great! I find it interesting to see the different perspectives in the answers given: my answer was very basic, coming more from the cognitive science side of things, while Code Mavericks very comprehensive reply was giving you a thorough overview over good form design. Make sure you upvote and mark-as-answer those replies that you've found useful. That helps us and also earns you more reputation points (i.e. marking as answer does, not upvoting). Thanks! –  Andreas Weder Mar 24 at 14:37

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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