UX Analysis for Fashion E-Commercial sites
-
Upload
xiaoye-lain-lin -
Category
Design
-
view
286 -
download
1
description
Transcript of UX Analysis for Fashion E-Commercial sites
Moda Operandi Product Detail Page UX Redesign
07-2013
By Xiaoye Lin
These are not working well
Heavy Texts
Confusing: Am I now on Argentinean store?
Better to have country names writtenin their own language
Duplicated InfoNavigation is unclear
Zoom In responds slowlyor even does not respond
Clickable areas makes user move too much
Generally, small types are more legibility innon-Sans-serif, especiallyon HD screens
Information may be out of window by extending vertically
Related info arenot together
Error report asks user to do additional operations.It does not tell the users where to find out “size”.
Back to Top button might be missing in this case
The information occupies too much spaces and is little helpful
- Highlight the most relevant product details clearly and prominently
-Best present the product photography in a way that is enticing and relevant
-Allow user to explore.
-Contextualize the product.
Close to industry standards and leverage designs produced by other sites that customers would be accustomed to.
A:
A: Product Detail PagePlease open the files : Overall_A.png
View_Detail_A.png
Helps user to discovery
Indicates the user is currently in US store
From “Home” makes the user understand where he comes and is.
Keeps information in a certain range
Frequently clicked areas’d better to be close to each other and in the middle of the page for catching eyes.
perspectives views
Helpful information
This info is more cared by those users who are adding it into bag
Related info is together
Visual info is likelyto drive userto share
Compared with “Shopping bag”icon expresses more efficiently
Regard to a small cluster, image is better than texts.
Speaks the customer’s language They probably do want to know the name of the collection
Keep that in middle with semi-transparent background
Avoid of unnecessary info, “more” is enough.
When the photography is being hovered, its details will show up and updates based on mouse’s position in real time.
Showing the cursor’s position, which allows the user to navigate easily.
- Highlight the most relevant product details clearly and prominently
-Best present the product photography in a way that is enticing and relevant
-Allow user to explore.
-Contextualize the product.
A: New and innovative approach to the Product Detail Pages
B:
Competitive Audit
Interactive full screen image
Zoom in by sliding
Product displayLV US store
See it in action
Zoom in
Show theactual colors
Product displayShopbop
ProductContextualizationGUCCI official store
Related-item list
Indicating the opportunity of exploration
Recommendationsgo first
Flattened infofor easily comparison
Product displayApple US store
Help user
ProductContextualizationMC official store
Suggestions from the user’s perspective
Suggestions from the seller’s perspective
B: Product Detail PagePlease open the original file : Overall_B.png
View_Detail_B.png
Global Navigation extendswhen being hovered
Visual consistency withAdd to Bag button
Video onall perspectives
A slowly moving up-down image in full width.Content is based on current item.
Trunkshow Name
More in this trunkshow
Next one inthis trunkshowwill slide into the white area quickly from leftto right
Items the user would like to have along with the dress.
Play video when the image isclicked or the play button is clicked
Customer help just goes after item
Moves with cursor when cursor is on the navigation area, and then the corresponding content show up. NO click is required.
View Detail when mouse is hovering on the dress
Overall:Try to have important information on first screen. Most elements are dynamic, title bar image moves and changes based on current content. Item will slide in smoothly by clicking the arrow. Product/detail/shipping/fit respond to the cursor’s position when cursor is on them.
Thumbnail with purchase info is disabled because for such expensive item, customer may prefer to take a close look on a detail page and then add it to bag.
Decreasing clicking is one of the good ways to provide more info and drive new users to explore.
Information hierarchy is being layered out by different colors:Item: (Deep color)Item video, title, price, purchase and shopping bag
Contextualizition and exploration: (Light colors)Purchase-related tips, help, recommendations, navigation