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

  • are stage number and throw number user inputs or headings? It appears that the user cannot change them
    – smurf
    Commented Jan 23, 2014 at 20:54

3 Answers 3


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


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.


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.

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.