In my years of designing interfaces for various applications, I learned by my own experiences and by checking the researches of various colleagues and agencies , I learnd that several considerations applicable when deciding how to layout form labels on the web and for tools and apps.
As so often in the world and live there is no golden rule or holy grail. Or one fits all answer.
As the question of top, right, or left aligned form labels comes up often for designers, here’s a short overview of the pros and cons of each method.
Placed on top
Top-aligned labels lean towards to reduce completion times – meaning how long it takes to complete a form – and that is most often true for completing a form or questionnaire for familiar data.
User studies showed this because they only require a single eye fixation to take in both input label & field.
Top-aligned labels also work well for forms that might be challenging regarding placing UI elements and form elements or long labels as there is plenty of horizontal real estate to expand the label ( or even help text) without negatively impacting the overall page layout.
But top-aligned labels take up a lot of vertical real estate.
Left from the form field(s)
In general we know from studies that if people are unfamiliar or very seldom using a form or feel uncertain about what the have to fill out or have to use other resources to fill out a form users feel more guided by labelings which or aside of the input field / form field.
Right Aligned
If you set the labeling aside and right aligned aside – the usage and scanability are a bit slower to complete but require less vertical screen space.
They do, however, have flexibility issues when the labels change widths. When localizing applications, it is important to note that languages like Spanish, French or German can be twice as long as English.
Right-aligned labels also don't work well when people need to scan a set of labels to see what is required as a left aligned text impedes readability.
Left Aligned
Left-aligned forms are the slowest of the three to complete because of the number of eye fixations they require to parse - but it is more guiding and and allows the user to stay focused.
That means, for instance for forms with lots of optional fields or unfamiliar data, like applications forms or forms which are only used once a while, or once per year, 'left-alignment' allow users to effectively scan labels. In fact, if you want give the users a better feeling of control or consider each input in a form more carefully, left-aligned labels are a good way to go.
Eye fixations
Conclusion
You saw there is no holy grail - when you design a form - it might sounds so easy but it isn't. Keep your user and their context in focus and design your form user and context centered.
Placed on top - Top Aligned
+ Reduced Completions time
+ Easiest for users to 'process'
+ Best for multi-language support
- Requires the most vertical space - often doubles the vertical space
- not good for long forms
- bad visual guidance ( 1 - 2 - 3 - 4 meaning 1=Label 2=Small Whitespace 3=Input 4=Wider Whitespace )
Left from the form field(s)
Right Aligned
+ Best and closest visual connections between labels and form elements
+ Good completion rates on short familiar forms
+ Most user freindly for unfamiliar inputs and
+ Requires less vertical space
+ Good visual guidance by a clearer visual rythm ( 1 - 2 - 1 - 2 meaning 1=Label+Form field 2=Whitespace )
- Hardest to read and scan
- poor multi-language support (grid vs longest labeling length - less control about ragged the left side might look like)
Left Aligned
+ Requires less vertical space
+ Requires more attention from the user
+ Most familiar look and feel from the offline world
+ Higher visual guidance by a clearer visual rythm ( 1 - 2 - 1 - 2 meaning 1=Label+Form field 2=Whitespace )
- Slowest completion rates
- poor multi-language support (grid vs shortest labeling length vs longest labels - the white space between short labels and input might be wide)
In this context - I like to point you to two older articles about form design:
Comments
Post a Comment