JavaScript and usability

JavaScript can actually enhance the overall usability of a web document through a series of best practices and patterns. Unlike accessibility, usability is a field where JavaScript can play an important role. The goal of this post is to provide a simple guide to the various aspects of this topic.

AJAX

AJAX, if properly used, can reduce significantly the stress caused by the overused click-wait-reload model. In its essence, AJAX should be used to provide the instant feeling of immediate responsiveness. A user clicks and something immediately happens without page reload. However, there are some best practices to follow:

1. Always provide a fallback mechanism in the case that an AJAX request doesn't work.
2. Provide descriptive and user-friendly messages.
3. Make all page actions self-evident through a proper labeling and styling.

Forms

Forms is a key area when dealing with user interactions. If poorly developed, this kind of interactions can cause frustration in the user. JavaScript can enhance form usability in the following ways:

1. Instant validation.
2. Instant user messages.
3. Progressive display of fields.
4. Handling of the submit event.
5. Inline suggestions during typing.

All these features should be carefully developed following these best practices:

1. Provide descriptive error messages.
2. Provide descriptive info messages.
3. Handle keyboard navigation through a proper use of events.
4. Don't use return false; on form submission, but always use the preventDefault() method of the event object.
5. Hide only the fields that a user won't fill out.
6. Use AJAX to provide suggestions during typing. This is especially useful on search forms.