User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

We have an on-line form that gets over 40k in hits each month on our software, I am currently performing a content audit and making some initial design suggestions to improve the aesthetics of the pages. However cannot find any resource online stating best practice when it comes to elements with multiple alignments on a page, please see image:

To me it looks disjointed and breaks the flow of the form and aesthetically does not look pleasing, but cannot find any evidence to the support this. Should this be left aligned with the rest of the form? I especially think this is important for users who tab through the fields.

Help very much appreciated!

enter image description here

share|improve this question
are stage number and throw number user inputs or headings? It appears that the user cannot change them – smurf Jan 23 '14 at 20:54
up vote 1 down vote accepted

I would recommend that you keep to the original layout. You are absolutely right in saying breaking the alignment causes a break in the flow (sort of related).

So I would recommend something like the following: Note: This only works if column b (blue) isn't strictly related to A (red). If it is then you will need to keep all field in A; this was just a more efficient use of space enter image description here

share|improve this answer

This looks more like a graphics design question - however, I can assure you that symmetry is a very desirable phenomenon in UI design; in such as simple case like that, it actually breaks it apparently, especially that we have another dropdown just a field before.

share|improve this answer

Not only is similar alignment good, I would also suggest maintaining similar element widths. For example, I would increase the widths of the "HE Spacers" and "CE Spacers" dropdowns to match the width of the "Cylinder Action" dropdown.

share|improve this answer

Your Answer


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.