Daily Struggles
Forms are used on a daily base, almost everywhere.
Below are some I have come across that I feel their user experience could be improved.
Swiss air booking confirmation
The form below is part of the process of confirming your flight booking with Swiss Air.
Residence address and Destination address tabs look like a button, similar to the Confirm button at the bottom of the screen
It is not clear which addresses are required at first because both forms load auto-filled with the same address
“Add another email address” and “Add another phone number” buttons look deactivated and non-functional
The white font on the red background in both the Confirm button and Residence address tab fails in the accessibility test of WebAIM with a contrast ratio of 4.8: 1; WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
Problem
What did I do?
I redesigned the form by:
Creating two distinct sections for both types of addresses.
Adding a checkbox in case the Destination address is the same as the Residence Address
Changing the look of “Add another email address” and “ Add another phone number” buttons to include an icon and placing those next to the fields, respectively
Changed the text weight to bold and increased the font size to improve the contrast ratio from an accessibility perspective in the Confirm button
Driver Test Ontario Payment Details
Problem
The mobile version of booking a road test in Ontario, Canada has these minor UX issues
Submit and Cancel buttons have the same visual hierarchy, thereby creating confusion
Province and Country fields: the user must be residing in Ontario to take a test. Having those 2 fields for province and country, creates redundancy in entering data, especially since the form is not filled automatically when the postal code and city are entered
What did I do?
Added visual hierarchy to the buttons by changing the background color of the Cancel button
Make the Province and Country fields automatically filled to complete the address format and avoid cognitive load on the user
Children’s fitness tracker- Alarm edit
My child’s fitness tracker app has an alarm feature that he loves to set as part of his morning wake-up routine.
Problem
The Call to Actions are either Save or Delete the alarm. The “Delete alarm” button is in blue at the bottom of the screen, while the Save action is a check icon at the top right corner
By default my son tapped on the blue Delete Alarm button when he changed his alarm and wanted to save the changes
What did I do?
I added 2 buttons: Save and Delete
Added hierarchy to the buttons to emphasize their functions
School Cash online app
This app is used by parents to pay for all activities related to the school.
Problem
The login error message appeared as a red button, I tapped on it without reading the message thinking it was the sign-in button
I was confused for a while because nothing happened
From an accessibility perspective, the red colour that indicates an error, may not be seen by color-blind users
What did I do?
I removed the red ‘button’
I highlighted the incorrect fields in red and added the error message under the input fields
Added another cue to indicate the error state, which is not color reliant