2

I'm redisigning my product page. It is for an apparel store. I did 2 different layout. I know that the best way is multi-testing but for now any advice or insights based on your experience would be helpful.

Are the informations well placed (SIZE-COLOR-PRICE-ADD TO CART BUTTON - PRODUCT DESCRIPTION) ?

I did lot of research on the subject so it should probably not contain a lot of mistakes. I'm really focusing on details that's why i'm asking for expert opinions.

I came with these 2 different layout. The big differences: Add to cart button, price and description's place.

12

Improve this question
3
  • 1
    What's the differences between two descriptions in the first wireframe ?
    – Alex
    Commented Feb 24, 2014 at 14:15
  • 1
    I like option 2 better. Reasons: Add to Cart is in line with Sizing and Colors. When I go to purchase, those are the things I'm clicking, so I want them to be adjacent/in a row. I also prefer the aesthetics of the description box in option 2, although I'm not sure there's any usability gain.
    – thunderblaster
    Commented Feb 24, 2014 at 18:33
  • I agree with thunderblaster. Version 2 follows a better flow in my opinion. I can quickly scan the most important info about the product (description & price), and then move onto the next step (color, sizing and cart). The sizing selector and add-to-cart buttons are more logically places in v2 as well.
    – Brett DeWoody
    Commented Feb 24, 2014 at 20:51

1 Answer 1

Reset to default
8

enter image description here

Your current designs are very close! Here are some small enhancements to make the visual hierarchy better.

Hero Content (Title, Cost, Description)

Currently, the product title lacks visual importance. Use typographic sizing to your advantage. Increase the size of the product title to add some visual weight to top of the listing. Emphasize the actual cost of the product as well to provide quick reference.

Options Panel (color/size/quantity/add to cart)

This area is cleaned up by reducing verticality the previous designs had by stacking the UI elements horizontally. By executing them in this way, the size and relative height is predictable; bringing that ever important ADD TO CART button to the top. Note that the color or size options are also clearly labelled on the UI for quicker user confirmation. This also reduces unnecessary white space to the right of the product listing, creating visual balance. I also included a quantity option to this area, as most vendors need to accommodate this.

Detailed Information (Delivery Info, Social Media, Wishlist)

By moving the additional delivery and social media options to the detailed information area, the user can progressively disclose the info they need, but may not be necessary to their purchasing process. By clicking one of these options, a number of interactions are possible (i.e. Take user to delivery information page, show a small popover summary, etc.)

I hope this helps!

Reference Material:

NNG: Product Pages, Vol. 3

Better Product Pages: Turn Visitors Into Customers

Improve this answer
5
  • 1
    I like your enhanced design. But one thing to watch out for is the product description above the "Add to Cart" button. Considering global header and the length of the product description, this main action button of the page might get pushed down below the fold. I would have placed the product description lower on the page.
    – Chairman Meow
    Commented Feb 24, 2014 at 23:41
  • Median content length for products would definitely be something that a designer would want to verify, and could weigh heavily into the execution of the design solution. Assuming dynamic content spans considerable amount of space, make a decision to bump it below the "Options Panel" area.
    – Courtny
    Commented Feb 25, 2014 at 2:18
  • What is the point to include a quantity option for an apparel store? To my mind displaying the delivery informations next to the add to cart button is important in the buying process (if you have free delivery or 24h delivery). In terms of construction, it is only of a matter of space to not display the panel information vertically? With your panel options'design, user have to follow a "Z path" before clicking in the add to cart button ; Is this more convenient than displaying informations vertically Last point,if I well understood, displaying product information depends on its size? Thanks
    – Jybz
    Commented Feb 25, 2014 at 9:37
  • The purpose of including quantity here was to showcase how it could be implemented for other users who may have that requirement.
    – Courtny
    Commented Feb 25, 2014 at 13:49
  • Delivery information is important, but if this is a primary feature of this website's products I would argue emphasizing "Free Shipping" prominently in a different place would be more appropriate. With regards to the "Z path" ~ that would be a great opportunity to A/B test that section to find a definitive answer. And yes, product descriptions that are extremely long may have to be moved down "below the fold" to allow the Options Panel to remain in sight.
    – Courtny
    Commented Feb 25, 2014 at 13:58

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