How a form is designed can have a substantial impact on a user’s ability to complete the form. After considering the User Flows, Question Protocols, and general Layout, the visual design is the next obvious consideration for improving the usability of a form. A number of different aspect of the design of forms will be discussed here but ultimately the aim is to reduce distractions and clearly communicate the necessary information.
Typography
Ensuring that text is readable is not hard; browser defaults generally provide a good experience for most able users. However, it is important that any design is compatible with accessibility technologies (zooming, variable default browser font size, screen readers, etc).
- First and foremost, choosing a readable font-family is of great importance. A simplistic style, ideally sans-serif, is important, however there is still sufficient possible variation to reflect the tone of your service. As with all Web development, if it is possible to avoid downloading additional fonts then that would be a preferable choice to megabytes of custom fonts, simply for performance reasons.
- Avoid excessively thin text (a minimum font-weight 300 is a good rule) that will be hard to read for those with visual impairment, or simply users in poor lighting conditions.
- Don’t have excessively long lines. The length of these lines on desktop should be considered an absolute maximum as it makes it harder to read.
- Don’t have a tiny font size. This is really hard to read isn't it.
- Don't have a low line-height value
This is also hard to read. - But also don't have a huge line-height.
1.4 is about ideal for body text, which is what the line-height for the rest of the text on the page is.
Iconography
Icons can provide variation in the visual design - breaking up otherwise large amounts of text and empty fields. It also allows users to scan and identify fields more effectively, and are typically used in conjunction with component labels.
- Should be simple, intuitive, and bold. This makes it easy to scan the components of the form, especially for returning users who associate the icons with particular information points that they may just be looking for rather than completing every field.
- Not sufficient to unambiguously communicate information; for example it is not enough to communicate errors with only an icon, a textual explanation should also be used, as icons can be interpreted differently by different users and the textual label is also necessary for screen readers.
- As an addition when communicating state, for example where red error messages would not be obvious to a colour blind user the addition of a warning icon (perhaps an exclamation in a triangle) would make this more obvious.
Colour
A strategic use of colour can make a form easier to complete by guiding the user through the form and maximising the usability of all of the content.
First and foremost, it is a good practice to design the form (or any website in general) in greyscale and then add small amounts of colour where it is beneficial for the user experience. A single accent colour, with possibly a few shades, is ideal here which can then be applied to elements that should draw the user’s attention. These may be call-to-action elements, such as primary buttons, hyperlinks, or even just banners and borders that highlight key elements. The key, however, is to limit the user of colour to maximise the effect of where it is used. Excessive colour is distracting, so don’t do it.
Colour can also be used to communicate state. For this it is best to to use primary colours that are quite distinct from the branding colours of your website and are similar to the standard colours for the respective purpose. For example, it is standard practice to use red for errors; highlighting invalid data, for example. Amber may also be used for warnings, or green for success. However, it is not sufficient to use colours changes on their own to communicate information as it can be difficult if not impossible for some colour blind users to be able to perceive this change - for example, error warnings denoting invalid data entry should display both a colour change to red as well as both a useful icon and a textual explanation of what the field is expecting.
Whenever there is some content (could be text, icons, fields, images, anything) on some background it is important there is sufficient contrast in order to make it clearly visible for all users. Low contrast can cause eyestrain or simply not visible to users with a visual impairment, and as a result Web Content Accessibility Guidelines specify a contrast ratio of 4.5:1. There are some links below to tools that can help in selecting colours. Moreover, there is one additional caveat when selecting the font colours and background colours of text: true black (#000) can be difficult to read on as it looks unnatural and true white (#fff) can be too similar to staring straight into a beaming light. To mimic printed text it is generally best practice to use off-black text on an off-white background. Check the colour of this text, you’ll see it is a much softer shade.
Motion
Animation is an effective way to bring life to a user interface, however, should be used for specific and effective purposes. Some of those purposes, where the animation adds to the user experience, include the following.
- Orientation: for denoting progress - especially through pages of a form - through a series or sequence of steps. Animating content in or out is a good way to communicate this, such as a calendar component expanding or modals popping up.
- Functional Change: describe a change in the behaviour of interacting with a UI element, such as open-close toggles. This may involve animating between the design of two icons, or revealing and covering textual labels to explain what the new function of the element is.
- New Element: to draw focus to new content that has been added to the page. This should be used in conjunction with drawing screen reader focus to announce the change. Human eyes are good at noticing movement and so animating content in does this effectively.
- Highlight: to draw focus to existing content. This can be effective in guiding the user through the form to important components or information. Animating colour change or subtle movement of icons or labels will draw the user's attention to specific parts of the form, for example a very subtly pulsing submit button.
- Visual Feedback & System Status: communicate information to user that something is happening, or why something has happened. Spinners, progress bars, dismissing content, or even buttons that shake when the action cannot be completed, are all examples.
It is important that animations are performant so that the webpage continues to be rendered a 60 frames a second. To do this it is generally best to stick to the transform and opacity CSS properties. For more information, there are plenty of useful resources linked below.
Animation should, however, be kept to a minimum as it can be distracting especially for those with cognitive disabilities.