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?




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"

  • 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
    Feb 27, 2013 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, 2013 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).


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


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):


[_JoeSmi]        available


[xxx____]         too short

Confirm password:

[yyy___]           passwords don't match

Password should be 8 characters long.

[     Submit     ]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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