What are some good practices when it comes to presenting a product on a listing / search result page when they contain a lot of information? Currently the product block for our website looks like this:

Product block

As you can see, there's a lot information to display, and unfortunately as much as I would love to start blank I can't. Surprisingly enough, our users tend to look up all the product information whilst still on listing / search and not on the product page itself.

I welcome any suggestions on how to change the product block that would provide better usability and not have a negative impact on the customer experience.

  • What evidence is there that this information isn't right? Is too much? Have you canvassed your users for their opinions? Have they said that some information is missing or that the information is an overload? Jul 8 '14 at 13:26
  • Most of them complained about information overload. They don't use Compare functionality at all, instead put a lot of effort into reading one product attributes, then moving back and forth between products. They complain that pictures are too small (magnifying glass appears on hover). They get really confused about product availibility. I could go on, but those 3 were mentioned by most.
    – Matt
    Jul 8 '14 at 13:33
  • 5
    You note that your users "tend to look up all the product information while still on listing and not on the product page" but I wonder if that's purely because the current design forces so much information into the listing rather than because that's what users want?
    – Matt Obee
    Jul 8 '14 at 13:39
  • I wonder whether it is a case that the compare is too small and lost in the product information in the bottom left? Is there the opportunity to create 4-5 re-designs of this page and get feedback on it? That would be worth 10x more than what we could suggest here. Jul 8 '14 at 13:41
  • By feedback for redesign, do you mean doing the redesigns and pasting them here or within the company? Currently I'm browsing through similar websites looking for benchmarks that could have something eye-opening for me. And yes, compare is way too small and not does not have any interaction effect, users ignore it.
    – Matt
    Jul 8 '14 at 13:51

There is the possibility that your compare function is too small and tucked away so that the user's eye, now tired from scanning all that info, simply misses it completely. Perhaps moving it to the focus region around the price/cta buttons might encourage more interaction that way?


It's possibility to add UI controlers, which changing the view of displaying product: enter image description here

In the case of single product page - it's not a clear and universal solution. It depends on a lot of variables (like industry, customer type, amount of information needed)

Suggestions and ideas:

  • highlight and raise a section with warehouse information / availability
  • limit the number of attributes (or present them in the form of icons with a tooltip)
  • change the location of the coupon and present the benefit in a clearer form
  • distinguish main cta as primary button and the second as secondary
  • integrate the comparison action with the actions on the right (so that they are all close together)(?)
  • Promotion 1 and promotion 2 are unclear and in non-standard places

Naturalistically, the next step will be refining the UI (spaces, fonts, etc.)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.