First AML Form enhancements (2022)
In the past 6 months, I have been working on a few form improvements to increase accessibility and improve usability.
Change #1: Step Bar
Progress/step bars are visual indicators that inform users how long a particular activity will take. What’s the current status now? How close the user is to completing the task?
The changes implemented improved the experience by giving them more clarity about where they are in the process. They will also see a more legible and easy-to-read bar with better colour contrast and accessibility.
The changes implemented improved the experience by giving them more clarity about where they are in the process. They will also see a more legible and easy-to-read bar with better colour contrast and accessibility.
The problems:
-The current colour makes it hard to identify which step you are on
-The current colour makes it hard to identify which step you are on
-The current colour (green) doesn't meet contrast
-Text contrast and size don’t meet the WCAG AA minimum requirements (accessibility)
-Based on our analytics, we have seen dead clicks on the bar. End users are clicking across the other steps thinking that they’ll be able to see what’s coming up.
- Currently, there's no visual hierarchy of the steps and that creates confusion.
Changing the above and refreshing the bar using a neutral colour. It’d also future-proof this component when we have the grey labelling in place for bigger clients.
-Text contrast and size don’t meet the WCAG AA minimum requirements (accessibility)
-Based on our analytics, we have seen dead clicks on the bar. End users are clicking across the other steps thinking that they’ll be able to see what’s coming up.
- Currently, there's no visual hierarchy of the steps and that creates confusion.
Changing the above and refreshing the bar using a neutral colour. It’d also future-proof this component when we have the grey labelling in place for bigger clients.
Change #2: Visual Radio Buttons
Radio buttons make all options visible so that users can easily compare them. They are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. Clicking a non-selected radio button will deselect whatever other button was previously selected in the list.
The improvement would add clarity through graphics.
