Lesson Outline

Improving Form UX

Forms are often a pain point for user experience. We need information from the user and providing that information is going to require work on the users behalf. In order to ensure a good user experience, we want our forms to be as easy to understand and use as possible.

We have discussed previously the impact that cognitive load and dissonance can have on user experience. In that context, it is useful to consider these 14 cognitive dimensions of notations.

Two of these dimensions are particularly relevant when considering the user experience of a form:

• Error-Proneness which refers to the symbols, buttons, labels, and language that we use to communicate instructions to users. An application that provides unclear instructions and feedback will be more error prone.
• Secondary Notation which refers to elements on the interface that are not strictly required, but help to add clarification to a task the user may be performing.

We want it to be clear to the user what the intent of the input field is and what is required of them, and we want to make it easy for them to fill out the form correctly with no errors.

Throughout this lesson, we are going to discuss different strategies for helping a user to understand forms in our applications, and helping them complete forms quickly and without errors.

Input Masking

One method you might use is to try using the placeholder attribute as a secondary notation to provide the user with an example to help address these issues. However, this is generally considered to not be a good practice. There are two main issues with this approach: