Would users appreciate a mobile hover alternative on a product list?

Question

Edit: Not necessarily only credible sources needed, different opinions from the user's perspective are also welcome.

---

The mobile first approach nowadays often (or sometimes at least) leads to less usage of the hover functionality on websites, as they are build with mobile in focus, where hover is not available.

For example many of the solutions given here are majorly to make the functionality available instantly:
Re-thinking "hover" functionality with touchscreens in mind

On one hand, I know that it is a good way to filter it down to the most important information and leave everything else out. But on the other hand, e-commerce product info (especially in the fashion area) is often already minimized to the smallest bits on the product listing page.

The hover state can be a great progressive enhancement feature at that point, that offers users on PC a benefit. It is also recommended by Baymard after one of their large studies regarding product lists: Product Lists: Display Extra Product Info and Images on Hover (70% of Sites Don’t).

On mobile this information is simply left out, as it is not crucial. But wouldn't it be helpful nevertheless?
Currently you have to open each product detail page and check out the sizes and colors, then notice that it's not available and have to hop back to the listing page. If you could instead have extra info appear in the list context, you could be filtering information a lot quicker.

That's also where this thought comes from:
When & How to Implement Interactive Swatches on Mobile Product Listing Pages

Devices are getting bigger, so it is not unreasonable to include some interactive element on the listing page.

---

Now to my actual question:

Would it not be useful for the user to have some sort of extra possibility to see more info about a product he or she is interested in? Testers in the Baymard study above seem to have found it a positive experience to be able to preview info straight from the list.

What are possible downsides if it were to be implemented as illustrated below?
Or put differently, what effect could this have on the conversion rate or other KPIs in e-commerce?

I think the worst part about this is that the button takes up a lot of space. But it does need some form of affordance to indicate availability of secondary information.

I found an interesting example of this idea as a swiping mechanic:

This eliminates the big button problem, but do users recognize that they can swipe here?

Answer 1

I think @Davbog has already provided a fairly comprehensive answer here, and I think the emphasis is really on the exact details you want to show. Based on the example shown here, I don't think it is actually necessary to show the details as additional information when it can be included in a filter option, since details like size applies to all the items and you can simply only display items in the size range that the user wants instead of having them check the sizing options for each item that they want to view.

That way, what you are really left with are features or details that are specific to each item, and if the user wants to see more details because they are interested in the purchase then it probably shouldn't really affect the conversion rate or other KPIs.

On mobile it is often about efficiency and a smooth experience, but you also need to take into consideration what this change will have on the rest of the website experience (i.e. it should be consistent), so if this is not a change that can be applied to all similar user flows and transactions then you probably need to consider another option.

Answer 2

Would it not be useful for the user to have some sort of extra possibility to see more info about a product he or she is interested in?

This really depends on what you are selling and what the user expects to know before going into the product details to purchase it. So for example, this would be useful to see available colors. Clothes/shoe sizes for example should really be filtered at the top of the page so as to not show unavailable products to a user, eg. A medium-shirt wearing user wouldn't need to see shirts that only have a size large available.

So you'll have to ask yourself from the customers point-of-view, what would they like to know before qualifying a product as a potential purchase. Additionally (and most importantly) why not show that key information right away?

What are possible downsides if it were to be implemented as illustrated below?

The downside is that the details are now blocking the neighboring product below it. If the user taps details, views said details and decides to continue, they now have to tap details again in order to fully see the product below. With this implementation, it should really shift the products down so as to not block the view.

Or put differently, what effect could this have on the conversion rate or other KPIs in e-commerce?

In this example, they would still have to click into the product to actually select the color/size and then add to cart. Generally speaking you want the least amount of clicks for the user to add the product to the cart, so I'd imagine this wouldn't help especially because they'd have to tap and then tap again to close the details for each product they were half interested in.

Regardless, the only way to know is to actually test. This may vary depending on user demographics (age, culture) and product market.

This eliminates the big button problem, but do users recognize that they can swipe here?

The dots at the bottom are common for most users to understand the swipe gesture. Just be sure that they are visible enough (size + contrast). They are generally used for additional images so do not expect the user to figure this out at a glance. If they swipe and see this on the second slide, and you use this site wide, they will come to understand this behavior on your site. The downside is this would take some education.

There are additional ways to solve the big button problem:

• Overlap the image with a details button that looks like a tag (similar to the red "Sale" tag in the image below. This tag could just have "[+]" or "+" to keep it smaller.

• Add a tap hold gesture (may require javascript) although you'll have to educate your site visitors that this is a feature.

The biggest takeaways are reduce the number of taps it takes to complete a purchase from first site visit to checkout, only show eligible products for sale (show out of stock at the end of the list, filter products by size) and show the most important information to your user right off the bat.