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 am making the registration page for a website. How should the different components be laid out relative to each other? For example should the heading be on level or above the text input field?

Username:____________

or

Username:
____________

Also sometimes I need to explain things to the user, for example the minimal requirements for a password. Where and how should the information be presented? Should it be in a slightly smaller font just bellow the heading?

example of layout

I have some text beside the input field that is dynamically updated while the user types, for example to say the password is too short

dynamic text saying "Password too short"

share|improve this question
    
There are multiple questions in this one question. We cannot answer questions like font color or font size since that will depend on your overall design. Please break your question down into simpler parts –  Mervin Johnsingh Feb 27 '13 at 20:05
    
@Mervin what I'm asking is so interrelated I don't know how to break it into separate questions, what do you suggest? –  Celeritas Feb 27 '13 at 22:01

3 Answers 3

As with many UI issues, the best way for you depends on how your users will be using the form. In your case since the registration form is likely simple, I'd agree with the other answers here about field names above the input boxes.

For longer, more complicated forms, you need to evaluate if the form will be scanned first to decide if they need to fill it out, or if they are looking for a specific field to fill in. If that's the case then you might want to use labels to the left of the inputs to enable scanning. Here's more information on the importance of context from LukeW, in response to the uxmatters article posted by Samuel M.

A related topic to forms that gets overlooked is the placement and style of your action buttons. LukeW has an excellent study on those, too (short version: make the primary action a button and secondary actions links).

share|improve this answer

It's been commonly accepted that labels above inputs make for easier scanning of the form fields. To explain character limitations, you can add another label inside the input.

Example of input with multiple labels

share|improve this answer

I recommend you put the "heading" (label) on top of the inputs in your form, since it's faster to read and fill (see: uxmatters.com - label placement in forms), and you'll have more space for the validation notifications after the input-fields.

For the password fields, I would put the "password should be 8 characters long" text below the fields, not as noticeable as the form labels and fields themselves, but still to be visible and readable. (and of course the fields as password type)

And the validation output I would put after the input-fields they validate, since they are secondary information, and not necessarily visible. The colors I can't really say anything without knowing your overral color scheme, but if the form is light, usually red is the color for validation errors, if it's not used for any other texts.

Example (hopefully shows up how I try to make it look):

Username:

[_JoeSmi]        available

Password:

[xxx____]         too short

Confirm password:

[yyy___]           passwords don't match

Password should be 8 characters long.

[     Submit     ]

share|improve this answer

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.