Watching a customer with low vision use our checkout changed my priorities
Last week we did usability sessions for the new checkout, and one participant, a retired teacher, uses her phone with the text size at maximum and display zoom on. I almost didn't include her because "she is not our typical user". I am very happy I did.
In 20 minutes she couldn't finish the purchase. Things we saw:
- Our sticky "Pay now" bar at the bottom grew with the big text until it covered almost half of the screen. The field she needed was behind it.
- We used placeholder text as labels in the address step. When she started typing the placeholder disappeared and she forgot what the field was. She typed her neighbourhood in the street field twice.
- Error messages were small red text only, under the field. She did not see them at all, she just saw the button not working.
None of this showed in our analytics, because people like her simply leave. And she is not an exception, my own parents use big text. Older people buy a lot of home goods. They are not "edge case", they are customers with money.
What we changed already: real labels above every input, error messages with an icon and text that says what to do, and the sticky bar becomes a normal button at the end of the page when the text size is large. Now we test with the system text size at max in every review, it takes 2 minutes.
If you never did a session with someone using accessibility settings, please do one. It is humbling and a very fast way to find real problems.
Written by
Mariana Costa
Product designer in São Paulo, working on e-commerce checkout. I like design systems, accessibility and talk with real users. Figma all day, but I still write some CSS when nobody is watching.
Get the best of #figma_fatigue weekly
One email each Monday with the most useful posts. No spam; unsubscribe in one click.
Comments
Sign in to join the conversation.
Sign in to comment