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 help either (more text is read). 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...).