Harmonise the quick "add to cart button" with other icon buttons

[ElodieOS]

Hi everyone!

The quick "add to cart" button needs to be harmonized with other icon buttons. Can we keep a rounded design to the consistency?

[Hlavtox]

@ElodieOS The button is harmonized - it's a normal button as in all other places in the theme.

It's the wishlist button that is out of style.

See the storybook - https://build.prestashop-project.org/hummingbird/?path=/story/ui-buttons--basics

[ElodieOS]

Wishlist and Quick view buttons.

I liked having a particular design for the icon buttons. The rounded style works well when we have just an icon, we have less emptiness. So I keep my recommendation :)

[Hlavtox]

Yes, but that button is next to rectangle input group and it looks weird if it would be rounded. Let's see the opinion of rest of the product council.

[SharakPL]

I agree with @Hlavtox. Styles in the same place should match. The image is slightly different place and can have separate styling. Preferably the one limiting image covering eg. buttons there could be dimmed by default.

Many custom themes group all buttons in the same place and imo that would be the best approach: view, add to wishlist and add to cart buttons on the same line below the quantity input group.

[prestascott]

I understand that it can be confusing to have a different shape for a button icon next to a rectangle input group and in UX, this is called the 'Law of Similarity'.

"Color, shape, and size, orientation and movement can signal that elements belong to the same group and likely share a common meaning or functionality.”

In fact, it is the same group but not really the same functionality. The input group aims to change the quantity of the product and the button allows the customer to add the x product to his shopping cart.

I think it's important to distinguish both of these actions and try to be consistent with another button icon such as the Wishlist button which is similar to the action of adding the product to the shopping cart, but instead adding it to the wishlist.

I stick with the recommendation of @ElodieOS which is to have a rounded Add to cart button 😊

We can think of a general rule:

• Rectangle button when there is a text label
• Rounded button when there is only the icon

[SharakPL]

In fact, it is the same group but not really the same functionality. The input group aims to change the quantity of the product and the button allows the customer to add the x product to his shopping cart.

IMO it needs to be considered as a whole. It is the same functionality cause one is useless without the other. Add to cart has definitely more in common with quantity than with wishlist button (which is basically a checkbox and has nothing to do with the cart) or view button which isn't even necessary because product item already includes many links to the product itself and also doesn't impact the cart.

Also Add to cart button is the most important here so it needs to be bigger. Suggested version looks smaller than -/+.

[Hlavtox]

I agree with @SharakPL, that button is just a standard button and all buttons in our theme are rectangular.

The round button is coming from wishlist module that has not been styled at all, we don't even know if it should be rounded.

Don't you just see that it's so ugly to have a rounded button next to a rectangular input? :D

[SharakPL]

Since the wishlist button is over the image then it's better rounded, because it covers the image less.

[ElodieOS]

Yes, it's a good point @SharakPL. It's true that the add to cart button looks smaller so less impacting. We can keep the squared design. You've convinced me :)