The client
Kathy Darling is a developer who has created many WordPress plugins. She specializes in WooCommerce plugins. She’s also a USA Women’s National Team Handball athlete who competes on an international level. Her website is called Kathyisawesome.com and we second that!
The problem
Kathy consulted the UXATT team to help improve the usability and accessibility of her Name Your Price plugin. She developed the plugin 9 years ago. This plugin lets customers pay what they want and can be used in different ways. Some possible use cases:
- Collect donations
- Alternative selling strategy
- Make a profit on products you’d otherwise give away
- Collect data on what price customers are willing to pay
The Name Your Price plugin depends heavily on the code as provided by WooCommerce, but Kathy wanted to make an effort for her part to create a plugin as accessible as possible.
Coding and styling challenges
One of the challenges was that the plugin had to interact with WooCommerce and also with other plugins built for WooCommerce. This meant the solution had to integrate text strings coming from other plugins, like eg. subscription information. We also had to keep different options within the plugin in mind. One of them is showing/hiding the minimum price and the suggested price in the frontend view.
We had to take into account that the clients of the plugin are usually shop owners. As expected, they have different goals from someone who uses the shop to buy a product or service.
In the end, we wanted to provide the end-user with the information they need to make a well-informed decision, regardless of their possible (temporary) impairment.
The solution
We first created a product flow to help us understand what variations the plugin beholds. Regardless of the product type, the plugin gives you 6 different options:
- No minimum price / no suggested price set
- Minimum price set but not shown in shop frontend / no suggested price set
- Minimum price set & shown / no suggested price set
- No minimum price / suggested price set
- Minimum price set but not shown in shop frontend / suggested price set
- Minimum price set & shown / suggested price set
Product flow for Name Your Price plugin variations
Different design patterns for different products
We analyzed the options and visual appearance of the plugin. So, we compared three different product types:
- Simple product
- Subscription product
- Variable product
The first step was to align the content and layout patterns for the different types of products. It’s easier for users to recognize information if it occurs in the same place in the same way.
Avoiding redundant information
Next, we looked at the text and the appearance of redundant information to reduce cognitive load. For example, when the plugin is used with a subscription, the subscription interval appeared on the page three times:
- at the suggested price
- at the minimum price
- as a label for the input field
We needed to develop an idea to show this information in a clear place even when the shop owner disables the minimum and suggested price.
We also toyed a bit with displaying the suggested price in the input field as a placeholder, since this isn’t essential information. But we abandoned the idea immediately for accessibility reasons.
Proximity of things: applying Gestalt
In the third iteration, we looked at the proximity of things, one of the Gestalt principles. Because of the extra information on the minimum price, the label seemed to be detached from the input field. We explored moving the suggested and minimum price to different locations while keeping the reading order for screen readers in mind.
Before we started user testing, we mocked up a final test version to start prototyping from.
Goal for prototype testing
Regardless of your budget, it’s still a good idea to test your product with real people. They give you insights that you probably wouldn’t have come up with yourself.
Our major test goal was, to see if users noticed the minimum price before entering something in the input field. They do get an error message when they put in an amount that’s too low. But guided by the 10 usability principles, it’s better to prevent errors.
Shop owners still have the option to disable the display of the minimum price in the front end, but it’s showing by default. We suggested giving the shop owner some context why they should not disable this option. And although we can and do not want to force them, education may help them make more user-friendly decisions.
Accessibility testing, consultancy and code suggestions
Besides user testing, as requested by the developer, we also tested the software for accessibility.
Keyboard testing
A simple test you can try yourself is checking if the software can be used with a keyboard. Whether you are an expert in the field or not. If you tab through, do you know where you are?
Also: if you tab through, is the tab sequence in the right order?
Screen reader testing
While we made sure the error message was noticed during our user testing, we also wanted to make sure that people that depend on screen reader software find out about the error message at the right moment.
With screen reader testing, using VoiceOver in Safari for Mac, we could make sure the error message was read out loud on making a mistake.
Code testing
In the beta version of the software, it was sometimes difficult to separate the code from WooCommerce and other plugins from Name Your Price. Therefore we isolated the code in a CodePen example to make sure everything worked as expected.
The result
After 9 years, Name Your Price meets the current web development standards again and complies with WCAG standards for web accessibility. With this work, we’ve made another step closer to a web that’s usable for all.