Hi All,

Some good practices on form usability which needs to follow while designing the forms and make them more usable and accessible.

  • Visually group fields and their labels

Labels should be close to their respective fields. Make use of white space to clearly separate them, especially if the label is above the field.

Always place the label closer to the associated field than to other fields. This is because humans are wired in a way where they make connections through things that are closely grouped together  


  • Show your requirements clearly

Tell the users what is required out of them. Don’t wait until they completed the form and show them an error message — which is a form of negative reinforcement. The user won’t know what is expected out of them if there’s no clear indication of the validation rules. This is especially applicable to the “password” field as different products will have different requirements.


  • Avoid using the placeholder text as the field label

The role of the placeholder is normally used to give hints on what type of information is required for that particular input field. But some designers are using it to replace the field label to reduce clutter and a more minimalist look.

The problem with this is that the placeholder would disappear once the user interacts with the input field. This might be annoying if the user forgets the purpose of the field and has to click outside of it to see the placeholder again.


Placeholder text within a form field makes it difficult for people to remember what information belongs in a field, and to check for and fix errors. It also poses additional burdens for users with visual and cognitive impairments.


  • Use auto-focus

when forms auto-focus the first input field as I just have to type, tab, type, tab, and done. Although it only saves me one additional click, it does enhance the overall experience in a subtle way.

When you allow for auto-focus, do also highlight active fields to inform users that the first field is already selected and that they can proceed to fill it out.


  • Highlight active fields

This is normally done by changing the border color and size to give a stronger visual cue. Make sure the color of the selected field stands out from the rest of the form so that it subconsciously helps the user to focus on the active field. The same concept can be used for errors as well, normally the text field will be highlighted in red if there’s an error.


  • Inform user that caps lock is on

This is such a simple feature yet not many products implemented it. There were times when I didn’t realize that the caps lock was on, and was frustrated when I kept getting rejected. Worst still, the error message didn’t even tell me that my caps lock was on, it just kept saying that my password was wrong. This can be really annoying for users.


  • Don’t hide your error messages

Some designs use tool tips to relay error messages. This is done by having an alert icon next to the text field and when users hover on the icon, the error message will appear. This is really bad UX as it requires more effort from the user to correct their mistake. Some users might not even know that they are required to take an extra step (hover over the icon) to view the error message.


  • Mark option fields clearly

If you do ignore the first tip (keeping your forms short) and use optional fields, make sure that they are clearly marked as being optional. It would give a stronger visual cue to mark the fields with the text “optional” rather than just using asterisks. Some users might also not understand the meaning being the asterisk, as it is sometimes used to indicate a validation error.


  • Use images to increase engagement

When it makes sense, use images for selection to improve the user experience. This is good if you want to better explain each selection using text, icons, and/ or images.


  • Use Predictive Search Whenever Possible

This mainly works when users are asked to input information that has a lot of predefined option, such as their holiday destination. This would allow the user to only enter a few letters to find their destination city, rather than typing out the entire name — a task that can be quite irritating.

It also reduces the odds of a failed search as the user is less likely to misspell their search term.

Thanks

AD

Hi Ashi,

Great tips! #kudos

Hi Ashi,

yes, these are all great tips, although it's generic about forms, not specific for outsystems.

Also, please give credit to the original author.

Dorine

Thanks for this sharing guys. =)

great tips

Thank you for your knowledge sharing.