This roundup article summarises form-related design patterns presented in this collection so far.
Text fields and text editing
Free alphanumeric text must be entered and edited in multiple lines.
Operators must be able to input free-text, e.g., when typing a short message.
Free-text input is not very efficient on on-screen keyboards and should be avoided, where possible.
Provide text fields that support the concept of focus and use a block cursor. Works for single- and multi-line text fields. Focussed text fields are highlighted; only one text field can be focussed at a time. The block cursor inverts the colour of the character it is on.
The state chart above shows a state chart for text editing. A text field can be in four basic states; in each state, certain operations are possible. For instance, if a text field is not empty the arrow keys can be used to navigate around the text. Pressing the backspace key for longer than one second clears the contents of the entire field.
The example above shows an example screen with a focussed input field and a full alphanumeric keyboard.
Errors can be prevented by using templates and other input aides, e.g., a dictionary supporting text entry.
Editing free text should be avoided, if possible, due to the high cognitive load induced.Show all articles