Feedback. Product page

Community resources Show & Tell
1

Please give feedback about the “single product” page.

https://warmth-48f65e.webflow.io/single-product-clock/classic-roselyn

2

Good job.

I like it very much. Keeping the data in sight and browsing a series of large images is just what I want in a product page.

Because your domain is about luxury, and because the brand shown here is Rolex, here are a few ideas to make it better:

  • I’d like to keep the navbar/top menu at sight at all time if possible. It’s essential to keep navigation at all time for a shop/product site, so that people can compare products easier.
  • it is very very important that you treat your images very well for a luxury product site. Two things here:
    – your base image is too compressed! For a Rolex image, you can’t have a compressed image with artifacts. You don’t care about the weight of the image for such a brand. Make it as big as necessary but make it the best you can. Those fine patterns don’t suffer any compression. get yourself a licence for Optimage and see how it goes treating previously uncompressed images with it.
    – your image MUST be displayed at 1:1 size, not slighlty zoomed like here. On top of having compression artifacts, it’s a bit blurry because of this. Rolex designs and make are outstanding in quality and taste, you need to mach that absolutely, even if you page weights 10s of Mo. Apple pages can weight 20, 30, 40 Mo, but the imagery is without any concession.
1 Like
3

And less about design more about actual usability - look at how this page behaves on laptops with smaller resolution (also relative, like on macbooks retinas); set the height to something like 630px (your clients may have it as small as 550 actually, taking into consideration all the toolbars etc). You need to make sure it works. Currently it is unusable for this use-case.

2 Likes
4

@vincent thank you, I fixed this problem. I’ll work on getting the navigation fixed.

Do you have any more tips for improvement?

5

@dram Thank you for pointing out the height problem. I forgot that the block is fixed. Please have a look again. I tried to solve the problem, but again, to the extent possible (desktop).

Tell me, are there any aesthetic problems or tips to improve use?

6

Start by taking @dram suggestion very seriously. He even gives the height values you need to account for.

To achieve this, make sure you understand and master mix-height and max-height, they help keeping things in control.

For example, there’s a nice breathing space above your primary menu. Maybe you can set this space in VH units, with a max-height and a min-height in pixels. So it will have an absolute min and max, and will vary in between depending on the height of the viewport. Same strategy could apply to the main area.

All in all you gotta make sure you define a minimum, a maximum and that your design is always playing nice for those values and in between them. It’s quite normal to have to spend a long time to craft such layouts. If you think you’ve messed up too much with the values, you can start over with a new structure and new class name. It’s always better when you rebuild knowing your exact strategy.

Other than that, test with real data: if your gallery shows 3 images then show 3 different images, and try to do it for 3 products.

Here in the discs
http://vincent.polenordstudio.fr/snap/454dd.jpg
adjust the padding for the number to be really centered, use a slightly bolder font or at least make the text a lighter color so it doesn’t look like the pure text of the page.

imho this
http://vincent.polenordstudio.fr/snap/t31gq.jpg
would look better with the second columns aligned to the left

2 Likes
7

Aesthetically the page looks quite nice. On larger screens :slight_smile:

On smaller ones we are facing this at the top, and this at the bottom. Also when description becomes longer you will need to account for this.

Try doing what @vincent said about sizes and your info columns, add hover states to the sizes selctors and related products.

But those are minor things compared to the whole small screen problem that arise when using fixed elements. You may want to set description and parameters block to have overflow: auto to allow for the scrolling of two parts of the page at the same time, but make sure to test it with a user group to see if it is clear for visitors that they can scroll both sides of the page.

1 Like
8

Great effort so far @Bogette!

I’m a big fan of minimalism.

My feedback;

  1. Less scrolling = better attention span. Organise the images into a grid with a big main image with 3 or 4 square thumbnails horizontal or vertical beside it.
  2. Product images have a border radius, so should the CTA button.
  3. Make the CTA button (add to cart) more prominent as it’s the main action in creating the sale. Use a pastel color if you’re keeping it minimalistic.
  4. Add a product overview video for better sales conversions.
  5. Add an image of a real hand or sketch wearing the watch so that the customer can get a feel for what it actually looks like
  6. I love when the shipping time/cost estimate calculator is on the product page as it avoids the customer from leaving the page or searching for it.
  7. The image height on ‘related products’ grid seems quite limited. Maybe add some more padding top and bottom.
  8. Make the ‘add to cart’ button 100% width in line with the product details/spec container.

Conclusion;

I would love it if there was ONE main image with a hover effect that displays an auto slideshow of more images or just one image showing the product on a real hand. On the side of the main image, it would be nice to have a video to click on (displays on the main image wrapper) to show an overview of the product, history, company ethics, future R&D, etc.

Instead of the product spec, it would be cool to have an actual image of a hand wearing the watch with tooltips demonstrating the thickness size, strap width, and how far it works in actual water (hand placed down in a swimming pool or something).

Hope this helps!

2 Likes
9

@nwdsha Thank you very much, this is absolutely the right advice.

I’ve decided to completely redesign the page structure and I’m going to use every single one of your advice. We will be in touch :slightly_smiling_face:

10

@vincent I tried, a lot of times. Unfortunately, I was not able to create a good design for small screens. I decided to abandon the idea of the fixed div and decided to redo the whole structure of the page.

Thank you, @dram for pointing out this nuance. Very opportunely.

I try to act according to your advice, thank you very much for your time

1 Like