- Source Code & Resources PRO
- Lesson 1: Introduction PUBLIC
- Lesson 2: The Difference Between UI and UX PUBLIC
- Lesson 3: General Concepts PUBLIC
- Lesson 4: A Brief Introduction to Accessibility PRO
- Lesson 5: Navigation Concepts PRO
- Lesson 6: Actual Performance & Perceived Performance PRO
- Lesson 7: Controlling the Layout PRO
- Lesson 8: Utilising CSS Grid & Flexbox PRO
- Lesson 9: Creating a Layout That Adapts to Desktop PRO
- Lesson 10: CSS Variables and Syntactically Awesome Style Sheets (SASS) PRO
- Lesson 11: Improving Form UX PRO
- Lesson 12: Animating with CSS PRO
- Lesson 13: Animating with Angular PRO
- Lesson 14: Animating with Ionic and the Web Animations API PRO
- Lesson 16: Scalable Vector Graphics (SVG) PRO
- Lesson 17: Conclusion PRO
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.
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: