Product card quick view.

Summary

A small experiment of how a “quick view” feature in an online store could look like and what to consider when designing one.

The final designs for the fictional shop

Disclaimer: Some of the content for the designs (images and texts) was taken from edited.de.

Introduction

Over the last couple of months, more and more online shops are introducing some sort of “quick view” feature for products on category pages. The basic idea behind this is simple: Instead of redirecting customers to a dedicated page for that specific product, show the product details directly on the current page. That would require customers to visit one page less in order to put the product into the shopping cart and buy it.

When I noticed these quick view features popping up in the online shops I’m visiting regularly, I quickly realised that I was not really using them. Most of the time, they were implemented as a modal dialog. You click on a product, the dialog shows up and the rest of the screen is hidden behind a semi-transparent black overlay. The dialog was usually looking pretty much like a smaller, more condensed version of the regular product detail page, only that some information from the page was missing in the dialog.

While realising that I was not using the existing quick view features, I thought about how it is supposed to add value for the user and what makes a good quick view.

  • The quick view will not work equally well for all kinds of products. Some products simply require more information than others.
  • In order to be valuable, the quick view needs to provide all the essential product information necessary to make an informed purchase.
  • It should always be possible to access the full product detail page.
  • The quick view should work equally well on mobile devices (which most modal dialogs do not).
  • The quick view is an enhancement and should not get in the way of the main user-flow.

With that in mind, I startet to scribble possible improvements, focussing on the most popular types of product information in today’s online shops.

As you can see, I had some trouble ranking all the different types of information. The main problem here is of course that for different types of products, different types of information exist and have a different impact on the buying decision. Furthermore, customers are different in what they are looking for when making a buying decision. This is why I believe the quick view should be treated as an enhancement and not a replacement for the regular product detail page. A quick view probably works best for products where customers do not need a lot of information before making a decision to buy. This could be products ordered regularly in which case you already know the product and do not need to be convinced again.

As for the actual layout approach, I thought about grouping the product information into three groups: Information that needs to be visible immediately (name, price), information that needs to be visible in the quick view and information that at least some customers may not need to see before buying the product. The quick view would take care of the information in the second group allowing users who do not need the information from the third group to purchase the product without having to access the full product detail page.

Instead of a modal dialog, I decided to try a card-based approach. In most of the online shops I looked at, the action to access the quick view was shown when hovering over the product. If the goal of the quick view is to reduce shopping times, why not show the quick view on hover directly?

The prototype

The different states of the product card

Here’s the idea: By default, the product card shows the main image, the name and the price. Besides that, there’s space below name and price for 1-2 lines of additional information depending on the type of products the shop is selling. In my example (fashion products), the brand name is displayed there. On hover (or tap, in case of touch input), the hidden information on the front of the card slides in over the main image. Again, what exactly is shown would be different for other kinds of products. In my example, availability, shipping information and variation attributes are shown. Finally, there are three actions presented to the user: View additional images using the back of the card, navigate to the product detail page and put the product in the cart.

In order to better showcase the idea and play around with different animations and configurations, I created a working prototype using HTML, CSS and JavaScript. You can check it out here (works best in Chrome on desktop due to my not-so-perfect JavaScript skills).

Final thoughts

The experiment proved to work surprisingly well on mobile and touch devices, which I did not expect to be the case initially. Apart from that, the whole thing is an entirely optional enhancement. Users who do not wish to use it can still navigate to the product detail page. However, it’s difficult to say if their journey would become more difficult because of this or not. As always, testing and iterating would be needed for a live implementation (not to speak about the code itself, which is probably not ideal for a production environment).

All in all, I think that the quick view can be a valuable enhancement for users and provides a good opportunity to add some fun and engaging animations and interactions to the site. I’m pretty sure we will see more of that in the near future.

Bonus: Design of the fictional shop’s home page. I created that first as a design foundation for the category page and product cards.

Want to know more about me and my past work experience?

Read my resume