Shopping cart, minus and plus buttons, and the event.preventDefault() bug
An interesting fact about + and – buttons in shopping carts: putting the minus button on the left and the plus button on the right is not a requirement. When it comes to user interaction, it’s more important to be consistent throughout the site than to stick to what “we think” is the standard. Since some languages are read right-to-left instead of left-to-right, you may find the plus button on the left and the minus button on the right. If the buttons are positioned vertically on a website, you will find the plus button at the top and the minus button at the bottom. How important is it for a user to be able to change the quantity of items using the minus button in their cart?
This post is part of a series on the test IO blog about real bugs that our testers have found during test cycles. In each post, we explore the details of the issue, explain its impact, and discuss what software teams can do to avoid similar problems.
In online shopping carts, minus (-) and plus (+) buttons are an additional interface element that can be used to increment or decrement item quantity, not as arithmetic symbols for calculations. When it comes to the quantity of products in a shopping cart, the numeric value is what is used to calculate the total price or other cart-related calculations. In user design, minus and plus buttons add a certain elegance and user-friendliness to the website. For example, without a minus or plus button a user may have to type the quantity in the text field and then use another button to update.
For our bug of the week, we’re taking a look at a bug on an ecommerce site that is preventing users from decreasing the quantity using the minus button.
While testing an ecommerce site, one of our testers found a bug during usability testing by attempting to decrease the quantity of an item in the shopping cart using the minus button. First, the tester added the items. In a separate step, the tester tried to remove those items by clicking the minus button. The tester then tried to increase the quantity with the plus button. The tester was able to increase the quantity with the plus button, but was not able to decrease the quantity with the minus button.
The bug was initially discovered on Mac OS 10.10, Safari. However, it ended up being reproducible on multiple devices and versions of iOS.
In this case, the minus button may not have worked because the event.preventDefault() ignored that there was a value in the quantity field, which could have been the result of an issue with (OnClick).