How to design effective, usable and accessible forms
On a library website, consider the following form for searching a book written by Richard Joiner:
Image Example of search form
If you thought of writing Richard Joiner on the text box, the search might not work. If you notice, the example shown right under “Search book by author name:”, the instruction says the user have to type “Joiner, R” to retrieve the books written by all authors named R. Joiner. Don’t worry, it’s not only you who made this mistake. On a survey of 20 people on a classroom, only 2 read the instruction!
So, how you can design effective,usable and accessible forms? Here are 3 simple steps you need to keep in mind if you want to design an effective form:
- If the user needs to read any instruction in order to fill an input box, always give the label on top of the input box. This will help users read the instruction before filling the form.
- If the user needs to think hard before they give an answer (e.g. date of birth), research shows, in this case, giving labels on the left with right alignment is more successful than on top. However, you might ask about the design issues. One solution to this could be separating the different types of labels/questions into different sections.
- Always use ‘Label’ tag (e.g. “<label for=’name’>Name</label>”) to make sure that the form is accessible and usable for screen readers.
Follow these three steps and you can design effective forms for your users. Try searching a book by William Shakespeare using the following form. Can you see the result?
Revised form
Tags: Form design, usable form design
