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.
Answer
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:
Better Product Pages: Turn Visitors Into Customers
No comments:
Post a Comment