WebForm.Guide - All Topics

Design

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).

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.

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.

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.

Sources

  • Web Content Accessibility Guidelines (WCAG) 2.0 - w3.org
  • How to not suck at design, a 5 minute guide for the non-designer. - medium.com
  • Design Tip: Never Use Black - ianstormtaylor.com
  • Icons vs Labels vs Both - edwardsanchez.me
  • Animating the Moments — Using Animation in UX (CSS Animations Series Part 3) - youtube.com - DevTips
  • Animations - developers.google.com
  • Additional Resources

  • Promises to Users. - donnieberg.github.io
  • The Equilateral Triangle of a Perfect Paragraph - css-tricks.com
  • Icons As Part Of A Great User Experience - smashingmagazine.com
  • Essential Color Tools for UX Designers - uxplanet.org
  • Color Contrast Checker - webaim.org
  • CSS Animations Series - youtube.com - DevTips
  • High performance web user interfaces - Google I/O 2016 - youtube.com - Google Chrome Developers
  • CSS Triggers - csstrigger.com, on performant animatable CSS properties