{"id":304,"date":"2022-12-03T15:54:22","date_gmt":"2022-12-03T15:54:22","guid":{"rendered":"https:\/\/uxvibes.in\/blog\/?p=304"},"modified":"2025-02-01T13:07:32","modified_gmt":"2025-02-01T13:07:32","slug":"accessibility-iii-forms","status":"publish","type":"post","link":"https:\/\/uxvibes.in\/blog\/accessibility-iii-forms\/","title":{"rendered":"Accessibility III – Forms"},"content":{"rendered":"\n

Recap:<\/strong><\/p>\n\n\n\n

Accessibility is a practice of making the website or application useful for the people with different abilities and different methods of handling the technology, in order to serve our product or technology to the largest and most diverse group of audience.\u00a0<\/p>\n\n\n\n

Those may include physically disabled, illiterates or semi literates, belonging to different regions or languages, with different infrastructure challenges, and novice in using the technologies. There are certain defined guidelines and best practices recommended to be followed by UXs, VDs and developers to be inclusive with such a diverse category of users. In this accessibility series of articles, we\u2019ll predominantly be focusing on visual design best practices. <\/p>\n\n\n\n

In our last article, we learnt about accessible typography. We\u2019ll now learn about designing the form elements to make it best accessible.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Forms<\/strong><\/h3>\n\n\n\n

Form is one of the most important components in conversion metrics and an opportunity to convert the users into customers. Usually, people are not very open to sharing their personal details with anyone, and when it comes to the monetary transactions, they are especially extra cautious and hesitant to fill up the financial details. In that case, even a small error in the form can make them cancel their decision. Here are some of the best visual design practices to follow.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Adjust the spacings within the fields to maintain the optical grouping.<\/strong> It helps users to reduce their conscious memory-load to understand the form easily.<\/p>\n\n\n\n

\"Adjust
Adjust the spacings within the fields to maintain the optical grouping.<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Break down the longer forms into smaller chunks by logically grouping them together<\/strong> like personal information – contact info etc., this will be much easier for the users to digest and will also reduce the cognitive load.<\/p>\n\n\n\n

\"Break
Break down the longer forms into smaller chunks by logically grouping them together.<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

You can also use progressive steppers if the form goes too lengthy.  When using multi-step forms, always display a progress bar.<\/strong> Progress bars encourage completion and reduce your user\u2019s anxiety by clearly communicating how far they are from finishing it.<\/p>\n\n\n\n

\"Progress
Progress bar encourages completion<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Provide more guidance to the users about the field\u2019s exact requirement by adding the helper text or by giving examples.<\/strong> This would be helpful to understand what value needs to be put in a given field and how. When asking a question that users may not understand, provide clear explanations to guide them to the correct answer.<\/p>\n\n\n\n

\"Help
Help users to understand what value needs to be put in a given field<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Real-time form validation is the best recommended approach<\/strong> wherever possible instead of letting users know about the error at the end after clicking on the CTAs.<\/p>\n\n\n\n

\"Real-time
Real-time form validation<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Colors should not be the only visual means of conveying the information.<\/strong> Do not differentiate the valid or invalid inputs by using colors only. Make use of effective icons followed by a proper explanatory helper text to display the error message. Help users to understand what was actually required to the field and what went wrong.<\/p>\n\n\n\n

\"Colors
Colors should not be the only visual means of conveying the information.<\/figcaption><\/figure>\n\n\n\n

Same with the currently selected (focused) field, try some other effect to highlight the selected field instead of just showing it by changing the color like you can try thick borders, double borders, shadows etc. In accessibility studies, it is mandatory that your form or website should be completely accessible by using the keyboard without a mouse. This is helpful for the users with mobility impairments or who are handicapped by some or the other way.<\/p>\n\n\n\n

\"Try
Try some other effect to highlight the selected field instead of just showing it by changing the color<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Label positions and alignments:<\/strong> Left-aligned labels placed at the left of the input fields impose heavy cognitive workload on users (Fig A). Right-aligned labels placed at left of the input fields are still ok (Fig B), however the top-aligned labels are considered as the most safest approach from the usability perspective (Fig D). (A study by Matteo Penzo: UX matters<\/a>)<\/p>\n\n\n\n

\"Label
Label positions<\/figcaption><\/figure>\n\n\n\n

Making the use of disappearing (inline) label styling (Fig C above) is ok for the smaller forms, but the forms that require a lot of information to be collected from users- it would be good to go with all time visible labels. They are helpful for the users with short term memory issues or cognitive disorders, to verify which value they have put against which label. The all time visible labels would also help blind or partially blind users who are trying to access the form by using some screen readers.<\/p>\n\n\n\n

In an attempt to shorten the length of a form or reduce visual noise, designers use placeholder text as an input label. This practice places a burden on short-term memory. The label disappears as soon as the user clicks and starts typing. And you will have to delete the entry to expose the label again. Hence, it is better to include an input label directly above the input field. The blank input field will also act as an affordance. It will help users to quickly recognize the fields that yet need to be filled with the data.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Checkboxes and radios:<\/strong> It has also been observed that vertically-stacking radio buttons and checkboxes makes users faster to process as compared to a horizontal layout.<\/p>\n\n\n\n

\"Vertically-stacking
Vertically-stacking radio buttons and checkboxes makes users faster to process<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Floating labels vs in-field top aligned labels:<\/strong> There was a trend in the market in-between period of using floating animated labels. As Google had also adopted the same for their material design system, it had kinda received an official authentication \ud83d\ude42 But later, many researchers discovered the other side of the coin. Google has also now updated their animated label style to static one.
As per the research by UX movement<\/a>, the animated effects can compound and trigger unpleasant reactions on motion-sensitive users. UX Movement recommends using IFTA (Infield Top-Aligned Labels) as an alternative for floating labels. Read the complete article here<\/a>.<\/p>\n\n\n\n

\"Floating
Floating labels vs Infield Top-Aligned Labels<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

The field size should reflect the amount of text that is expected to be entered<\/strong> i.e pin number field should be shorter than the address line field.<\/p>\n\n\n\n

\"The
The field size should reflect the amount of text that is expected to be entered.<\/figcaption><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Do not use generic labels for the action buttons like Save \/ Submit. Let yours know what actions they are taking like \u2018Subscribe now\u2019, \u2018Register for free\u2019, \u2018Create account now\u2019 etc. <\/strong>These small improvements can make a big difference. After submission of the form, acknowledge the user properly. Make it clear what the user can expect to happen next.<\/p>\n\n\n\n

\"Let
Let yours know what actions they are taking.<\/figcaption><\/figure>\n\n\n\n

Unbounce study<\/a> shows how keywords make an outstanding impact on conversion rates. Bettingexpert.com which is a free betting community where tipsters from all over the world can share betting tips, tools, data, and much more – they just made a few tweaks in their sign-up-form-keywords and received 31.54% more signups. What did they do? In 2013, they just changed the form title from \u2018Join BettingExpert\u2019 to \u2018Get FREE Betting Tips\u2019. They also changed the CTA label from only \u2018Signup\u2019 to \u2018Sign up and get the best daily tips\u2019. These are the only edits that were caused for 31.54% more RoI! So be specific with button labels.<\/p>\n\n\n\n

One more study by \u2018Unbounce\u2019<\/a> only showed that writing the labels in users\u2019 language can help to connect with them emotionally.They just changed the CTA label in the pricing table from \u2018Start your<\/strong> free 30 day trial\u2019 to \u2018Start my<\/strong> 30 day trial\u2019 and this treatment increased their Click-through rate by 90%.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Apart from the above, here are a few things that a designer should be aware of while designing the forms.<\/p>\n\n\n\n

    \n
  • Try to combine the fields wherever possible for eg. for asking dates don\u2019t use separate fields for DD-MM-YYYY,  you can also use the calendar control.<\/li>\n\n\n\n
  • It has been observed that assuring users that \u2018their data is safe with us\u2019 and displaying social proof like \u2018This much number of people have registered till now\u2019 can make a big difference to win users’ trust. <\/li>\n\n\n\n
  • Keep in mind the contrast thing which we discussed earlier. <\/li>\n\n\n\n
  • Minimum tappable area for mobile devices should be 48 px.<\/li>\n\n\n\n
  • Make the form page free from any other distractions like animations, heavy graphical elements etc.<\/li>\n<\/ul>\n\n\n\n

    These small improvements can definitely make your user\u2019s journey easy and eventually result in increasing the conversion rate.<\/p>\n\n\n\n

    <\/div>\n","protected":false},"excerpt":{"rendered":"

    Form is one of the most important opportunity to convert the users into customers. Here is how you can create best accessible form designs.<\/p>\n","protected":false},"author":1,"featured_media":332,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[11,3,4],"tags":[],"class_list":{"0":"post-304","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","6":"hentry","7":"category-accessibility","8":"category-ux-design","9":"category-visual-design","10":"","12":"fallback-thumbnail"},"jetpack_featured_media_url":"https:\/\/uxvibes.in\/blog\/wp-content\/uploads\/2022\/12\/Accessibility-in-forms.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/posts\/304","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/comments?post=304"}],"version-history":[{"count":20,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/posts\/304\/revisions"}],"predecessor-version":[{"id":385,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/posts\/304\/revisions\/385"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/media\/332"}],"wp:attachment":[{"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/media?parent=304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/categories?post=304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/uxvibes.in\/blog\/wp-json\/wp\/v2\/tags?post=304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}