Form field design
- Abi James
Background
We need to present forms and input with a consistent design. Here are 3 design options from Semantic-UI all with good and bad points. All are accessible and responsive to screen size.
UI label has more options to visually differentiate between labels and inputs but:
- not possible to control the size of the label so you can not align the input fields vertically. This is visually jarring
- does not recognise semantic-ui's "required field" that automatically inserts red asterix on other options. However, for screen reader users they know the field is required through aria-required so we can manually add a visual clue
- may cause problems if we end up with long field names (e.g. if we have the UI in different languages)
Inline field is similar to UI label and can recognise "required field" but
the fields are a standard size so don't align horizontally or vertically. Doesn't look nice.
Standard form layout with the field labels on the row above the field means that all the input fields are aligned. There is also more flexibility in the length of the field labels and input fields but this will take up more room in UI.
From a design perspective I prefer the clean layout of the standard form.
Full width layout:
Responsive layout:
p.s. We should also decide on whether are going to use placeholder text. Usability recommendation is not to use placeholders - see https://www.nngroup.com/articles/form-design-placeholders/. SemanticUI's placeholder deals with a few of these issues and doesn't break the accessibility but doesn't overcome the main issue of more text to read and process when placeholders are used (we can't use only placeholders and no labels). If we don't have placeholder text there will be less to translate if we localise the interface and its just less for users to read (I am a less is more person...).
Decision
Following input from Ali Khalili it was decided that we would use the standard form layout for now. If later in the project we have time, we can attempt to address the sizing or location of the UI label or inline fields then we can change the layout. In addition, the structure form layout will allow us to place errors after the field labels.
Inline forms can be used when space is limited. Semantic UI required field attribute should be used.