1. EBOOK ON UX
25 Ecommerce UX Secrets Revealed
Elizabeth White
Elizabethwhite @idevelopersquare.com
Abstract
Ecommerce is fast-changing and competitive arena. UX is the game-
changing phenomenon that can make or break online business. This
ebook reveals the ecommerce UX secrets; if implemented, lift user
experience of the website to higher level with a positive impact on the
conversion rate.
2. 1
Table of Content
Section Page No
1. Introduction 2
2. Checkout Fields
2.1. Auto –detect Zip code and auto-fill city and state fields …………………….. 3 - 4
2.2. Do not ask for the same information twice………………………………………….. 5
2.3. Show both required and optional fields………………………………………………. 6 - 8
2.4. Approve form fields inline…………………………………………………………………… 9-10
2.5 Display proper format alongside each field………………………………………… 11-12
2.6 Provide visual clues in the payment field…………………………………………..... 13-14
2.7 Auto-detect and select credit card type…………………………………………….... 15-16
3. Product Listing
3.1. No option to adjust products per page……………………………………………… 17 - 18
3.2. Hover based secondary thumbnails for more visual information……….. 19 - 22
3.3. Dynamic Load more and endless scrolling for categories………………….. 23 - 26
3.4. Speed up product page load time……………………………………………………… 27 - 28
3.5. Show total numbers of products in the current displayed tool………….. 29 - 30
3.6. Highlight products added to cart in the product list………………………….. 31 - 33
4. Home page and Category
4.1. Avoid Ads on the homepage…………………………………………………………… 34 - 35
4.2. Avoid redundant and overlapping product lists………………………………… 37 - 39
4.3. Compatibility-based product list pages……………………………………………. 40 - 43
4.4. Use appropriate filters and categories……………………………………………… 44 - 45
5. Search
5.1. Subjective search………………………………………………………………………………... 46 - 50
5.2. Contextual search snippets on all product pages……………………………….. 51 - 53
5.3. Breadcrumbs on all product pages…………………………………………………….. 54 - 56
5.4. Modify “No results” page with 7 elements……………………………………… 57 - 60
5.5. Provide sorting options………………………………………………………………………. 61 - 64
6. Conclusion 64
3. 2
Introduction
What is User experience?
User experience (UX) is the reaction of the customer or user to a product, service, object or an
environment. And that includes the apps, websites, shopping carts.
User experience design (UED) is the process of improving the customer satisfaction by providing rich
interaction, easy-to-use feeling and pleasant experience. In short the purpose of UED is to improve
UX.
Don Norman, a cognitive scientist and co-founder of the Nielsen Norman Group Design Consultancy
coined the term. He said “User experience encompasses all aspects of the end-user's interaction with
the company, its services, and its products”.
That is the true, big picture of UX.
The aim of this EBook is discuss role of UX is terms of e-commerce. How it affects the shopping cart,
an e-commerce portal or e-store.
Ecommerce is fiercely competitive. UX now plays a crucial role. Excellent UX means more conversions
and ROI. Bad UX means high bounce rate and cart abandonment. As simple as that.
So what are the critical areas of the shopping cart in UX perspective and what concrete step should be
taken?
They are:
1) Checkout
2) Product Listing
3) Home page and Category
4) Search
4. 3
Checkout
Conversion Secret #1 - Checkout Fields - Even Hayneedle got it wrong!
10% adhered. 90% violated
TOP COMPANIES THAT GET IT WRONG: Hayneedle and Apple
Conversion secret - Auto detect the Zip code and auto-fill the city and state.
Why This Helps?
Customers usually are in the hurry when filling up the form. They often misspell, city, state or country
name. As a result, they checkout with an incorrect shipping address. Since zip code, it tied down with
city and state. Using this feature auto fills the right city and state name.
The benefit is that it reduces name errors in cities and states. Speeds up form filling and enhances the
user experience.
5. 4
A user enters the postal code 3000 (for Melbourne) in the field. But the state and city fields do
not auto-fill. The state/city auto-fill feature is missing in the Hayneedle website. User manually
enters them.
Customers do not like completing form fields. They rush through them. Doing so, they misspell or
mistype the name of city, state or country. The result - checkout failure or wrong shipment address.
Over half of buyers commit that mistake.
Since zip code relates to city and state. Provide auto-detect zip code feature and improve checkout
user experience in following ways:
Entered zip code auto fills the name of city and state
Reduces checkout time
Reduces the claims arising due to misspelled locations within orders
Eliminates the possibility of shipment to wrong shipping address resulting from incorrect
names
Gives smooth buying experience
Use auto zip code feature and give your buyers an easy shopping experience.
While applying auto-recognition, ensure that:
When zip code changes, permit client to change the town/city and state
If the same zip code applies to many locations, provide the town name
You do not omit town or state. Pre-all those using the proper information once client enters zip
code.
Once user enter zip code. No need ask for it again to put in shipping calculator for billing.
6. 5
Conversion Secret #2 - Checkout Fields - Even Walmart and Zappos got it wrong!
50% adhered • 5% neutral • 45% violated
TOP COMPANIES THAT GET IT WRONG: Walmart, Apple, and Zappos
Conversion Secret – Do not ask customers to fill-up the same information twice. They hate to re-
enter the same information again, anywhere on the website, including checkout.
Why This Helps?
Eliminates errors in checkout fields. Speeds up the checkout process and makes it a breeze
Clients do like to give away same information again. For two big reasons. The first one, they are in the
hurry and it slows down their checkout. The second one, they do not have the patience and time for
dull, repetitive action.
So in the first place do not ask for the same information twice or more. If needed, make sure to pre-all
all the areas that request the same information.
This fastens checkout process and improves the user experience. Reduces the cart abandonment
events and improves conversion rate.
_____________________________________________________________________________________________________________
50% of the top 100 US e-commerce websites ask for customers to repeat the information. It is in some
or other form through their checkout process. The repeated information can be like this:
Same email address on two different pages
Zip code in the shipping calculator and the shipping address page.
Billing and shipping address if they are same (usually they are same)
Filling the same information twice looks tedious to customers. Increases the friction in the buying
process. Because it:
Saps customers' time and effort
Tests buyers' patience and annoys them
Make form filling a breeze. Speed up the checkout process.
7. 6
Conversion Secret #3 - Checkout Fields – Even Walmart does it wrong!
9% adhered • 5% neutral • 86% violated
TOP COMPANIES THAT GET IT WRONG: Walmart and Disney Store
Conversion Secret – Show both required and optional fields.
Why this helps?
Customers may provide less information than what's needed. Leading to error messages that cause
checkout delay/failure and cart abandonment. Pointing out required and optional fields helps in error-
free form filling.
_____________________________________________________________________________________________________________
On the Walmart checkout page there is no guidance like ‘*’ or ‘optional’.
Customers are wary of sharing valuable personal information like a phone number. Provide asterisk
‘*' cue against a particular field form. Mark it as must-to-fill information. A required field. For the
word "optional", the user has liberty to provide the information or not.
Most customers:
Are eager to finish the checkout in a go. They do not want to do it by learning from mistakes.
8. 7
Are afraid to part with important personal detail until told to do so.
Do not want to give away more information than required
Hence show ‘asterisk (*)' and ‘optional', wherever needed. So customers always provide the
required information for a smooth, error-free checkout.
On Nordstrom’s checkout page all the field boxes that require user information are marked by
asterisk “*”. Users know what essential information to fill in.
The other easy way is point out the “required” and the “optional” fields. Like what FTD has done
on its checkout page. See below the screenshot.
10. 9
Conversion Secret #4 - Checkout Fields – Even Overstock does it wrong!
70% violated • 8% adhered • 22 N/A
TOP COMPANIES THAT GET IT WRONG: Overstock and FTD
Conversion secret – Approve form fields inline
Why This Helps?
Inline validation or approval is important from the customer viewpoint. Because the customers get
feedback whether they have entered correct or incorrect information. The instant approval or
disapproval points out the right or wrong track taken through the checkout process.
Many customers want instant validation of the data they enter in the form fields. A kind of assurance
they want to see during the entire checkout process.
Because of JavaScript/Ajax, immediate approval does not need the page to reload. A good practice
from the UX viewpoint.
11. 10
Inline form validation is missing in the checkout page of Overstock. User enters wrong name,
email ID, address, postal code and phone number with no error message or warning against the
field boxes.
The inline form validation is essential, especially for single checkout sites. Because a customer has to
publish everything to be able to verify if you’re single field is appropriate.
Inline validation exhibits:
Problems
Wrong and right areas
Natural checkmarks and indicates the progress on the right track
Inline validation must occur immediately after the user fills up any particular form field. Form approval
as customers fill in the data produces more errors. The reason is that the clients have not yet provided
the complete information. Like an email address or username.
12. 11
Conversion Secret #5 - Checkout Fields – Even Sears fails at it!
22% adhered • 7% neutral • 70% violated • 1% N/A
TOP COMPANIES THAT GET IT WRONG: Sears and Lowe's
Conversion secret - Display a typical example of proper format alongside each type field
Why This Helps?
A proper format shows how to enter data/feedback/information in the right way. Eliminates form-
filling errors and improves the checkout experience.
__________________________________________________________________________________________________
Customers find it difficult to format their data/ feedback. Or have no idea of the correct way to format
it. Because there is no clue, about it, inside or beside the form field. Unlike in the figure, below.
If you see the telephone field; you notice the initial three digits are in parenthesis. That is the specified
format for filling the phone number.
So display the proper format alongside each type of field.
Make it easy for the customers to fill the information the way you want. Prevent error messages and
speed up checkout.
Displaying the format alongside the field (or inside it):
Eliminates chances of error messages due to entry of data in the wrong format
Makes form filling easy and fast
Enables user to understand what information and how to provide it
Eliminates or reduces checkout errors
Improves the checkout experience
13. 12
For example the 16-digit credit card. There is a space after every 4th digit. That format should reflect
in the credit card form field in the checkout. True. But still, that example should show up beside the
credit card field. Some of the users might fill up the dash (-) in place of space.
Hence, information format kills any confusion. Makes users feel safer especially when divulging an
important detail like the credit card.
Sears website fails to guide the user with prefilled data format.
14. 13
Conversion Secret #6 - Checkout Fields – Eddie Bauer missed it too!
89% violated. 11% adhered.
TOP COMPANIES THAT GET IT WRONG: Oakley and Eddie Bauer
Conversion secret – Provide visual clues in the payment fields right through checkout. Keep
customer well informed about trusted options to give away sensitive payment information.
Why This Helps?
Trusted payment badges and security seals win the trust of buyers. They neither hesitate to fill in the
sensitive payment detail or backtrack. Rather move ahead with confidence and checkout.
___________________________________________________________________________________________________________
Customers get wary if they do not see any trusted seals, badges or icons during checkout. They
hesitate to share bank card detail.
Though the actual technical security of your website is robust, still, there a mismatch. Because your
customer's mental picture of your checkout field security depends on the badges. If they are missing,
then the trust factor is less. So is the confidence to proceed ahead with quick checkout.
In the nutshell, trusted payment gateways, security badges, and icons:
reinforce customers' trust in the website
give the confidence to take next step to checkout
speed up checkout
Reduce cart abandonment
The visual signs encompass field payment design, color, background, and transaction safety symbols.
Not just mere presence of payment gateways. The lumpsum effect of all the visual elements.
The collective appearance presents a safe image that fits well into your customers' mindset.
Encourages them to take further action. Complete the checkout without any doubt or dilemma.
15. 14
At the first sight Eddie Bauer’s payment page fails to evince trust because the security badge is
missing. The trusted payment gateways appear greyed instead of being highlighted and in their
true colors.
16. 15
Conversion Secret #7 - Checkout Fields – Even REI got it wrong!
71% violated it. 29% adhered to it
TOP COMPANIES THAT GET IT WRONG: REI
Conversion secret - Auto- detect and select the customer's credit card type.
Why This Helps?
Do not ask your customer to fill in his or her card type (service provider name). Instead, provide the
card type auto-detection feature. It saves customers time, simplifies checkout and enhances user
experience.
___________________________________________________________________________________________________________
You can auto-detect your customer's card type on the basis of the first numbers of the credit card.
See below the card detected is credit- type and belongs to service provider VISA.
The charge card has the Issuer Identification Number (IIN). The first six digits of credit card number.
Different credit card types have their own different identification numbers. For example:
MasterCard: 51-55
American Express: 34, 37
VISA: 4
JCB: 35
Diners International: 36
China Union Pay: 6200-6250
17. 16
In the above figure; the field, auto-detects card type as Visa based on the first number – 4. Highlights
the discovered bank card type and grays the rest. The Visa card is visible while the rest are appear
indistinguisable.
The IIN detection feature nullifies the need to provide a seperate card type name.
User enters credit card number. Based on the intial two digits (55), card type detected is
Mastercard.
Auto-detection reduces checkout clutter. Saves space, time and effort.
Simplifies checkout; makes it quick, easy and error free.
18. 17
Product Listing
Conversion Secret #1 – Product Listing – Wayfair does that wrong!
62% adhered • 36% violated. 2% neutral
TOP COMPANIES THAT GET IT WRONG: Hayneedle and Wayfair
Conversion secret – Do not give users the option to adjust items per page. Though ‘View all' is
acceptable. Prefer dynamic loading techniques like "Load More" button and endless scrolling.
Why This Helps?
The option to adjust ‘items per page' adds complexity to product search. Makes it confusing. Rather
use ‘View All' feature with dynamic loading techniques. Like endless scrolling and "Load More"
button. Displays the entire product list on the screen. That is what users want.
_____________________________________________________________________________________________________________
Visitors/buyers want all the products displayed on the page. So defaulting the lowest option (the
lowest numbers of products per page) makes no sense. Visitors are comfortable with 100 products or
even more in categories. They want greatest numbers of products possible per page.
Users confuse the ‘items per page' links with pagination links. And they think it as the only way load
more products on the screen. Further, many visitors do not understand the purpose of the link. And
they always choose the option that displays greatest numbers of products. Like the 'View All' option.
Hence do not provide the option to select 'items per page.' Like what Wayfair does.
19. 18
User can select the display of how many products per page in Wayfair. They can choose from three
options (24,48 or 96) per page.
The ‘View All' option displays the complete product list. Regardless of how many products it shows
up on the screen. Users can also explore all product options in their relevant category. By using
dynamic loading techniques like 'Load More' button or endless scrolling. Or use the combination of
them as needed.
Endless scrolling, pagination links, and ‘Load More' button. Offer options to showcase as many
products possible in the product list. Hence, providing users the feature, wherein they can select how
many items to load per page is of no use. Neither is the technique of displaying a few products by
default.
Rather display appropriate numbers of items all the times. Fetched in instant because of dynamic
loading techniques.
20. 19
Conversion Secret #2 – Product Listing Page - Even Disney got it wrong!
82% violated it. 18% adhered
TOP COMPANIES THAT GET IT WRONG: Disney
Conversion secret - Provide secondary hover-based thumbnail to give users sufficient visual
information.
Why This Helps?
A hover-based thumbnail gives extra information about the product. Without creating the clutter on
the product listing or product page. A cutout image and a "context in use" image can be used in the
secondary hover thumbnail. Depending upon how to present the visual information of the product.
Product images and video encourage users to take positive action. They influence a positive buying
decision.
Users ignore the product listing pages and product pages that lack extra visual information. Like
thumbnails of products - cutout and "contextual use" images. Not to forget the close-up shots from
different angles. In different available colors and design.
21. 20
Hovering on the any of the games on the Disney website does not display extra visual or
contextual information.
Having plenty of visual information to feed the curiosity of the users is a must. Both on the product
page and product listing page. Cannot ignore product listing page because it leads visitors to the
product page. So provide visual contextual information without going into the information overload
mode.
Thumbnails take their own space. And they can cause clutter on the product as well as the listing
page. Provide the secondary thumbnail on hover along with the list of other information. This will
prevent the clutter and at the same time give the information needed. Based on the moment your
customer's cursor. A kind of on-demand feature that balances page aesthetics with extra visual
information
1. "Use of Context" Thumbnails
Your customers are most concerned with how your product fits into their "context of use". How they
can use in their lives. Hence, they need more visual information that gives them a real close view of
the product. And isolated cutout image. The image of actual product sold. Shot against the white
background.
Enables users to see "what they are actually buying". And at the same time see the product in an
inspirational context of use. Like a close-up of a skirt (cutout image) and a model wearing the skirt
(contextual image). Hovering on the cutout image of the skirt shows the image of the model wearing
the skirt.
Balancing the visual information without overloading it for the sake of an excellent UX.
2. Compatibility Thumbnails
Compatibility thumbnails show the dependency between two related products or a product and
accessory. For example, camera bag thumbnail shows the closed outside view of the bag. A cutout
image of the actual product sold.
22. 21
On the Amazon website hovering on the thumbnail (in the red box) give visual information on
how the camera looks inside the case.
Along with an image in which the bag is open with the camera inside. The hover thumbnail has the
contextual image that shows how the camera fits in the bag. An image of the compatible product or
related accessory.
3. Thumbnails for Vital features
You can put the secondary hover thumbnail to highlight key product feature. For example, the user
will be interested to know how "sleeper sofa" works as a bed when it unfolds. Hover the cursor on the
cutout image sofa. And the image of unfolded sofa as a bed pops up. Good enough to give complete
visual information the user wants.
23. 22
The vital feature may change depending on the user's context. From product to product. Hence,
"Living room sofa" thumbnail is different from that of the "sleeping sofa".
4. Thumbnails for Product Variations
Many products have variations. Like a jacket in different colors or a cushion in the different pattern. A
secondary hover thumbnail is good here too.
Hovering on different color shade boxes, changes the color of the shoes. User can see shoes in
different color shades.
If there are variations of a product, like different colors. Then display different colored dots in a serial.
Enough to give a clue to users that product is available in various colors.
For a product in different designs. Like a cushion in various patterns; combine all the images of
cushion (product). And display the grid as a secondary thumbnail.
24. 23
Conversion Secret #3 – Product Listing – Even JC Penney does it wrong!
92% violated. 8% adhered
TOP COMPANIES THAT GET IT WRONG: JC Penney, Crate& Barrel and Williams-Sonoma
Conversion secret - Use a combination of ‘Load more' and endless scrolling for categories. Rely
only on ‘Load more' for search and mobile sites.
Why This Helps?
Categories are broad and vast. A combination of "Load more" button and endless scrolling is the best
option. Speeds up user's interaction with the product list. Lifts user experience. For mobile and
search, "Load more" button is the best choice. It overcomes the display size limitation of the mobile
devices for easier and faster interaction.
JC Penney uses the pagination links. User has to click on the links (in serial numbers) to go to that
respective product page. The website does not use the mix of “Load more” and “Endless
scrolling” to display all the products on one page.
25. 24
For loading more products in the product list, there are three primary navigation methods. They are:
1. Pagination Links
2. Load more button
3. Endless scrolling
A brief of each of the methods:
1. Pagination Links – A set of product page links located at the top and bottom of the product list.
The product list has different numbers of product pages. With each page having its pagination link.
Clicking on the link replaces the current page with products from the selected link.
Pagination links give customers more control on what to click and what not to. But they are more
likely to follow the "next" or "previous" page in the sequence. Not explore the entire links.
2. "Load more" button - The button is at the end of the product list. Or at the bottom of the product
page. Clicking on it produces the next set of results. Unlike pagination links the button asks the user
to click it. To get more product results. Straightforward and easy to use. No clutter like the pagination
links.
3. Endless Scrolling – A more complex form of product search in the form of scrolling. Whenever the
user nears the bottom of the page, a new set of result takes the place of the current result. Endless
scrolling helps when the product list is large. More products are displayed. Especially, for users who
want to scan the product list in the fly. But the attention span per product is less.
Pros and Cons of Pagination Links
Users view pagination links slow and cumbersome. And explore only a few of the given links. They do
not browse the entire product list. The majority of the users tend to spend more time on the first page
of results. And also resort to filtering to get relevant results.
In short, pagination does not catalyze explorative browsing in the users. Hence not suited for websites
with extensive product range. Rather more suited for the sites with a small product line.
Pros and Cons of the Endless Scrolling
Endless scrolling gives users, the feeling of instant upload of the entire product list. If implemented
well, continuous scrolling makes product search super-fast and smooth. Lifts the user experience. As
soon as the user nears the bottom of the current product page, the new one loads. There is no
interruption, giving user a seamless experience.
26. 25
But there is the downside too. Users tend to scan more and focus less on the individual products.
Endless scrolling makes footer invisible. Because as soon as the current page is about to bottom out,
the new one pops on the page. And it pushes the footer out of the view of the user.
And you know how important footer is. It has the links to the Help page, Shipping, Customer support,
Returns and more.
Endless scrolling is well suited for large product lists. But if there is no natural stop, at regular interval,
the benefit of it will turn into a big issue.
Pros and cons of the "Load More" button
"Load more" button excels where endless scrolling fails. Provides a temporary stop or break to user's
flight down to the bottom of the huge product list. Continuous scrolling makes users scanners. The
"load more" button does the exact opposite. Breaks up scanning. Gives time to think before they
move on with the next set of results.
But none of the three methods discussed above are ideal for any given product page. Because the
context of the product listing changes from the user to user. It is better to explore the best
combination of navigation methods. And come up with an ideal one that excels at giving the right
user experience to a vast range of users.
Explore three ideal combinations.
1. For Categories - A combination of a "Load more" button with lazy-loading.
Since product categories tend to be huge. The best pagination is a combination of the "Load more"
button with endless scrolling. Display 10-30 products on the initial page load and another 10-30 with
Lazy-loading. Next, the "load more" button. Clicking on it repeats the earlier cycle. And this sequence
goes on until the bottom of the product list shows up. Place the buttons at appropriate intervals to
give users a break from scrolling. And time to decide to scroll further or not or even apply filters.
2. For Search – Use "Load more" button for results returned based on relevancy scores.
On any big e-commerce website it common to see that a query return thousands of results. Listed by
their relevance to the search query. The most relevant on top and the least at the bottom.
Hence, there is less of a need to scroll down to the bottom to get the desired result. Scrolling down
leads to lesser and lesser relevant results. So there is no point in using the endless scrolling for search.
It won't serve the purpose.
27. 26
Instead, provide the "Load more" button. It provides the natural break to users. A kind of intermittent
stop that indicates less relevant result down below.
3. For Mobile – Use "Load more" button, with a lower number of products loaded by default.
Small screen size is the biggest shortcoming of the mobile from UX viewpoint. Though endless
scrolling is right to explore a long product list on the device. But it can make footer inaccessible. So
would be the links like sitemap, FAQ, shipping, and other links.
Pagination links are not for mobile too. Difficult to hit. Because of proximity to each other on a small
display screen.
The best solution - a large "load more" button placed at the end of the product list. The recent results
add up to the existing list, without reloading the page. Further, the button provides a large hit area. A
good user interface experience compared to the pagination links.
The number of products should be lower by default.
Display the number of search results or category items the list contains. Visitors use it to judge the
quality of a search query. Or determine if they need to filter the list. Hence display the number of
items at the top of the list, along with search box and filter.
28. 27
Conversion Secret #4 – Product Listing – 1-800 flowers gets it wrong
TOP COMPANIES THAT GET IT WRONG – 1-800Flowers, Nike.
Conversion Secret – Speed up the perceived loading time. Do not make visitors wait for the
pages to load.
Why This Helps?
Reduced perceived loading time retains user's interest in the page. Pre-fetch items and present them
in an instant before the entire page reloads. Keeps customers on the page. Intermittent spinner
graphics or loading indicator enhance user experience and reduce the bounce rate.
_____________________________________________________________________________________________________________
Visitors exit fast from the page with low load speed. Because they are in hurry. They scan or skip -
whatever they feel appropriate. To get to the desired product page. Slow page reload is a big obstacle
they do not want to jump over and waste time. So speed up if you want to prevent visitors flying off
from your shopping cart.
1-800 flowers.com loads slow. Full page display does not happen in an instant like it should be to
give user fast page loading.
Since the whole page has to reload the pagination tends to appear longer. In the process, the page
appears blank. And that is the tipping point when visitors start to abandon the site. Endless scrolling
and "Load more" button are a good solution to this problem.
29. 28
The page is stable and remains that way until new items show up on the page. Pre-fetch 6-10
products before the visitor either clicks on the "Load more” button. Or scrolls down. And present
them as soon as users request it as the rest of the list reloads. This quick intermittent engagement
keeps users on the page. They have something useful and relevant to view at that moment.
The strategy that Amazon follows. And you know how good its UX is.
If not possible to pre-fetch the items. Or the user has already scanned the pre-fetched items before
list loads. Then use spinner graphic or load indicator.
Either of them reduces the "wait time". Indicates that some relevant action user expects, is about to
take place. Keeps them on the screen until the page reloads.
Spinner graphics or load indicators are more beneficial for mobile websites. Because interfaces are
less responsive and the internet connection less stable.
In the Oakley’s website user can see a loader as the page loads. A kind of assurance that
something soon is about to happen. The user stays there.
How the information is put on the page, plays a significant role in the loading time. It is a balancing
act. Just enough information without information overload. Because any content overload, especially
images, slows down the page reload. Present the needed information in the right manner. Make your
page fast and easy to load, without compromising the content relevancy to the query.
30. 29
Conversion Secret #5 – Product Listing Page – Even Apple does not follow it!
68% adhered • 26% violated. 6% neutral
Companies that Get it Wrong – Apple and Ralph Lauren
Conversion secret - Show total number of Items in the currently displayed product list
Why This Helps?
Product numbers give the firsthand information about product range in the list. Helping users take
the informed decision. Like how to search the list (big, medium or small) for the desired product.
Saves time and effort. Improves user experience.
_____________________________________________________________________________________________________________
Product list number provides snap-information about the product range (small, medium or large).
Gives a clue how to search the desired product on the website. The user saves time and does not get
entangled in the complexities of product list navigation.
On the Disney store, there 250 items displayed under the product category – Bags and Totes.
A vast product inventory has many categories. The numbers give users the idea of the product range.
Based on the figures they make a snap evaluation to what type of product search they should take.
31. 30
Necessary from the user experience viewpoint because:
It gives correct idea about the product range
Helps make decision which way to proceed to find the desired product or item
Saves time (and time is money for online shoppers)
How's that?
The numbers of products in the list empower users to make the initial judgment about products.
Guides them to take any of the three below mentioned search paths:
1. The product list is reasonable – Users begin to browse the list in normal mode
2. The product list number is less – Users navigate through product hierarchy
3. The product lists is large – Users find sub-categories or apply product filters
The number points out the size of the list. How big or small it is. Users know what to do next to go to
their product page. They narrow down their search; avoid the complexities of product navigation. Save
time.
Always display the total numbers of product in the list. Make visible in the plain sight to every visitor.
Place it where everybody can see it. Just on the top the Product listing, close enough to the listing
heading or label. Put the numbers at the bottom. That would be better. Because anybody who misses
the numbers on the top of the list, can see it at the bottom of the page.
The best practice is to integrate the number in the product list, like "showing 58 products". Or place it
alongside the list.
32. 31
Conversion Secret #6 – Product Listing - Even B& H got it wrong!
96 % violated. Only 4% adhered
TOP COMPANIES THAT GET IT WRONG: B&H
Conversion secret – Highlight any list items currently in the user's cart. Include information on
extra features too.
Why This Helps?
Highlighted items (already in the cart) standout in the product lists. Hence they are easy to detect.
Quick to correlate with other related goods and accessories. Saves customers the time and effort.
They do not lose their way and end up confused.
Customers often buy more than one product or item. They keep on adding products to the cart while
they shop. Also, search for related goods or accessories. As a result, customers backtrack to earlier
navigated product lists.
33. 32
In Northern Tool & Equipment website the product “added to cart” is shown as “item in cart”
in the product list.
But this is where the problem starts. Re-finding the added product in product list is like finding a
needle in the haystack. Because the product looks same like all other items in the list.
When the product is already in the user's cart. It is good practice to highlight that product in the
product list that users are searching. To do that, do the following:
Change the color of the product's background in the product list
Provide distinctive border around the listed product
Add label (that says product already added to the cart)
In the B&H website the product added to the cart is neither highlighted nor labelled, as “added
to cart” in the product list. Makes difficult for the user to know which items from the product
list have been added to the cart.
Top it up with extra information about the additional features. Include a link to related goods or
accessories.
Allow user to change the product quantity from the list itself. Without having go back to the cart to
do that.
34. 33
For individual deals or shopping events, allow users to 'reserve' products/items in the cart. Though
temporary. For some time. The reserved items/products show as 'unavailable' or 'sold out' during live
inventory update. Based on the added products in all the shopping carts at that moment.
The information like; the product is in the users' shopping cart. And how long it will remain "reserved"
there helps users take an easy buying decision.
Highlighting and rendering product (added to the cart) visible on the product listing page enhances
user experience. Eases product navigation, selection and sale in a flow.
35. 34
Homepage and Category
Conversion Secret #1 – Homepage and Category - Even Drugstore fails!
44% adhered · 16% neutral · 40% violated
TOP COMPANIES THAT GET IT WRONG: Blue Nile and Drugstore
Conversion secret – Avoid ads or ad like content in the prime locations on the homepage.
Why This Helps?
Users are negative towards ads on the home spot. Ad-free homepage creates a good impression and
does not distract users’ attention. They engage longer with the website and brand.
_____________________________________________________________________________________________________________
“I hate to see ads here. They distract me” is the common reaction of many visitors. When they see
an ad pop-up on their screen, the moment they hit the home page. There is the marked distaste for
advertisements, especially on the homepage.
36. 35
A big pop-up on the homepage of drugstore.com. You have to click the close button to get rid of it. A
big distraction that should not be where it is.
Do not commit the mistake of placing an ad where your prime content should be. Like in the middle
column or the upper part of the page. Users dislike ad pop-ups and banners because they distract.
It is like forcing them, see something that they do not want to see. Sets a negative tone about the
entire shopping cart or website.
Users tend to perceive promotions from site’s own products as ads too. They make no distinction
between internal site and external site promos.
A big ad banner on the top-center of the homepage is viewed with the same suspicion as the pop-up
is. And Drugstore commits the same mistake.
A homepage is the nerve-center of any website. Links ups to all the important, converting pages. The
purpose of it is to send the users in the right direction. Putting in a content (like an ad) annoys users.
Defeats the purpose of the homepage - drive more traffic to converting pages.
37. 36
But it does mean is that homepage is a strict no-advertisement-zone. The homepage is a tempting
place and there is the desire to carve out a place for an internal ad or ad campaign.
There is no harm in doing so if that does not offend the visitors. But that is the difficult proposition.
Because visitors do not make out a technical difference between your ads or an external ad. Put into a
mindset from their visits to countless websites. So it is not surprising if your own ads on your
homepage get a scorn.
So exercise great caution when placing the ad on your homepage. Design your promos well. Put them
in the boxed area that is not in a prominent area. Not highlighted and does not pop-up. Does not
overshadow the prime content but rather blends into homepage aesthetics. Balanced with perfect
content that encourages the users to click rather than scorn it.
In the nutshell. Do not place an ad on your homepage in the first place. But if you want to place it
then do the perfect way.
38. 37
Conversion Secret #2 – Homepage and Category – Drugstore fails at it!
22% adhered • 68% Avoided • 10% Neutral
TOP COMPANIES THAT GET IT WRONG: J.C. Penny, Walgreens
Conversion Secret – Avoid redundant and overlapping categories. Especially combined categories
and imported third-party categorization.
Why It Helps?
Category overlapping causes usability issues. Like wrong navigation path, incorrect product search
and loss of time. They all translate into a bad user experience. Preventing category overlapping gets
rid of usability issues. Enhances user experience. Leads to more conversions.
Redundant and overlapping categories cast poor impression about the website. They mislead visitors
on the wrong path; waste time and give a bad user experience.
In the above screenshot, you can see the perfect example of the overlapping category. If somebody is
looking for "cars" in this category listing. There are three categories to explore:
Cars and trucks (6)
Cars and truck (4)
Cars, trucks, diggers (4)
39. 38
They are the three navigation paths. The user may try every path. Which is a misleading and time
wasting. The user will end up frustrated. "What the heck is this? So confusing, I am unable to find what
I am looking for".
The user will quit; maybe never come back again.
Overlapping and ill- defined categories usually occur because of the following three reasons:
The first one; it is machine-generated.
The second one; failure to merge and rename manufacturer's categorization across vendors.
The third one; combining many categories into a single one.
The website owners are responsible for such issues. Failure to spot and correct them will cause
usability issues. The users will get entangled in them. Lose confidence in the site and deem it
unprofessional.
Divide categories and sub-categories into easy-to-manage chunks of information. Based on the
manufacturers categorization data only.
Curate categories as and when required. Support them with right product filters. Streamline the entire
category taxonomy to avoid category redundancy and overlapping.
40. 39
On Drugstore website two different sub-categories “cough drops” and “sore throat” are
shown as one category.
Mixing two or more related sub-categories into a category causes category overlapping. Like "cough
drops and sore throat" is an overlapping category. Made up of two categories though related to each
other.
Cough drops (a solution)
Sore throat (a symptom)
The category "cough drops and sore throat" consist of a solution and general symptom. Lumping
both together would only confuse users. They fall as subcategories under a category like "Adult Cold
Medicine". Not to be overlapped like in "cough drops and sore throat".
41. 40
Conversion Secret # 3 – Homepage and Category – Even Pixmania does it wrong!
26% adhered · 2% neutral · 44% violated · 28% N/A
TOP COMPANIES THAT GET IT WRONG: Tesco and Pixmania
Conversion secret – Have compatibility-based product list pages for all compatibility-dependent
products in your catalog.
Why This Helps?
Users always search for accessories related to the product. Compatibility-based product list pages link
to the product page. Provide a clear navigation path to the accessories or additional products that
users want. Improves user experience and cross-selling.
____________________________________________________________________________________________________________
Compatibility issues occur when the search for the accessories returns with conflicting results.
Many of the users search for the accessories or parts of branded products. They know what exactly
they want. And if they fail to find them, it kills the purpose of their visit. How can you then expect
them to convert into buyers?
In one study, only 35% of the visitors were able to find their compatible products. The rest 65% either
quit or even worse, ended up buying a mismatch.
42. 41
Pixmania commits the same mistake. There are no links of compatible accessories of Toshiba
Camileo X-sports – Action camera on the main product page.
Finding compatible products can be difficult if following three features are missing:
suggestions like related accessories/parts/subparts on the main product page
suggestions of similar products
A list of recently viewed items
If your site sells a broad range of industry/Tech products, you should provide the feature.
But, doing same to clothing store would mean doing excess. Because there is only one compatibility
criteria and that is "taste".
So provide product compatibility list where needed.
A compatibility-based product list page is a unique page. It links to each compatible product in your
catalog.
This is how Amazon does it right.
User selects Oppo F1 camera. The page links to compatible accessory products pages like glass screen
case and lenses. Use can see all the accessories without leaving the product page. See below:
43. 42
The main product OPPO camera is displayed with list of compatible accessories like tempered
glass screen, jelly back case cover and flip cover case.
Though product compatibility listing requires a high level of automation. The upsides of having such
compatibility relations are manifold. Such compatibility-based based product list pages should be
cross-linked to the product page itself.
The page has product type filter. The user can see the list of the compatible "back covers or cases" for
the OPPO camera phone. Makes easy the vertical navigation of the product catalog. It builds
confidence in the product and influences a positive buying outcome.
From SEO angle product- compatibility pages adds value in the eyes of the search engines. The
unique landing pages for each of your compatible product.
Product-compatibility pages provide rich data needed for compatibility filters. Based on the data-
driven product filters you can completely avoid suggesting incompatible products.
44. 43
You can have compatibility-based product list. Even if there is no compatible product on your site.
Like an electronics store, that does not sell Cannon digital cameras. But hosts a compatible- product
list pages for the Cannon digital camera. Users can search compatible accessories that your site sells.
45. 44
Conversion Secret #4 – Homepage and Category – GO Outdoors
36% adhered • 64% violated
TOP COMPANIES THAT GET IT WRONG: Office Depot, Staples, Go Outdoors
Conversion secret – Use appropriate filters and categories wherever needed. Do not mix them
up.
Why This Helps?
Mixing up categories with product filters (style and type) confuses visitors. Using filters and groups in
appropriate places gives desired results, easy and fast. Improves user experience with the brand and
website
Categories and product filters are two essential elements of product search and navigation. If done
right they make product search, quick and easy. If done wrong they are detrimental to the user's
product finding capabilities.
Categories are part of the product catalog hierarchy. One category placed over the other and
mutually exclusive. Each of them having links to related goods and product lists. Categories have sub-
categories and supported by filtering options that are unique to a group.
Filters are tools that narrow down the search within the category. By specifying one or more product
attributes. Unlike categories, filters are not mutually exclusive. Users combine many filters to filter out
a particular product or item.
For example, use the filter "study table teak wood 26" tall, wood color" to search the study table.
That is fine if you keep filters as filters and categories as categories. The problem starts when you mix
them up. Do not pass on product attributes as categories.
So if you put "study table teak wood 26 inches tall" as a category then what about the other tables.
How will users search for a center table, dining table or other types of tables?
Some of the sites make the mistake of implementing the product attributes as categories. When the
product features should have been product filters. In other words putting "product type" and "product
style" as categories.
This mix-up limits the options to the user to mix and match different criteria.
46. 45
Many users have no idea about product features and type. For example, the camera features like –
ISO, built-in AF motor, sensor size, etc.). The camera types like – compact, bridge, mirrorless, DSLR.
Those who have no idea of technical specs find it difficult to navigate. Particularly on the sites that list
product types and features as categories. In place of filters. Because filters are optional and, users do
not use them if they do not understand the technical terms.
If you have a popular product (star-seller), then you can use it as category header. It would have been
product type filter, in an ideal situation. But popularity allows you to change that filter into a category.
Like "Nike Running Shoes". That should never exist as a category but as a filter of "Running Shoes".
But it does.
The sole reason it is in high demand amongst the Nike customers.
Since huge numbers of users use that product filter, it is a category.
Vice versa
The category with few products (10-30 items) qualifies as product type filter.
47. 46
Search
Conversion Secret #1 – Search – Wayfair does it wrong!
16% adhered · 84% violated
TOP COMPANIES THAT GET IT WRONG: Wayfair, Ann Taylor
Conversion secret - Support "Subjective" searches through intelligent-mix of interpretive
attribute mix, single-attribute degree, and taste-based qualifiers.
Why This Helps?
Users infuse emotion, taste or adjective as product qualifier. A mix of subjective searches gives the
closest result to the customer's preferences.
Prospective buyers use adjectives like "High-quality", "Ultra-thin", "Cheap", "Nice-looking" and more.
They do it to define the product they search on the website.
But what exactly makes up a high-quality product or a cheap product?
It is a subjective matter. Because different users have different perceptions. Like for one user, "best-
quality" may be "high-quality" for another.
The product attribute shows exactly what the user wants when he or she is searching the product on
your e-store.
Subjective search has three categories:
1. Interpretive attribute Mix
An interpretive attribute mix search has product qualifier that has many qualities combined. To get a
result close to what the searcher has in mind.
The attributes like High-quality (What is quality level desired), ultra-thin (how thin?), etc., to define the
search.
The site result for such queries may be a mix of high scores across the categories.
But any mismatch between site algorithm and users' perception gives a wrong result.
Whenever a user enters attribute like "high-quality" the site should:
48. 47
analyze the what level of quality the user wants
decide what all "high-quality" products show up on the display
In Wayfair’s website the search query “high-quality kettle” displays kettles with good star
ratings. But still confuses users because the site algorithm understands it as “high-back kettle”.
Another good example of complete mismatch between site algorithm and query can be seen in Ann
Taylor website. The two screenshots tell that.
50. 49
User’s query “women shoes” returns with result – “High healed women shoe”
2. Single-attribute degree
A single attribute qualifies the search. Like "lightweight" and "Cheap". The best way to start a
personal search because the results are less complex. Like the weight attribute is the qualifier in the
search query "lightweight laptop". The site’s algorithm program returns the top 5% to 15% top
matches.
3. Taste-based
The taste-based subjective search uses a non-quantifiable attribute that defines the emotion or
experience. Such as "delicious" or "relaxing". If a user searches for "beautiful" tables on the website
that sells furniture. Then that won't be easy for the search engine to fetch the result based on the
query.
Rather take the help of the thematic filters. Ask the user to select from different style options available
on the site. Filter to narrow the search for more fair results.
51. 50
Options like - Glass table, antique table and modern design tables. The user can select to filter his or
her "beautiful table".
To understand user's taste-based queries, map the given taste. And the best way to do that is to
deconstruct it. Like "delicious snacks". The attribute "delicious" has to do with flavor. And flavor can be
salty, sweet, savory, spicy, etc. If the user is looking for some spicy snack then "spicy snacks" gives the
different set of results. More relevant to what user wants.
All the three types of subjective searches do not offer a perfect solution. But a fair result close to
user's liking.
Hence, base the algorithm proxies on the rich collection of used attributes by searchers.
Larger the database of attributes more accurate the approximations are. Closer the approximations to
customer preferences, the more precise search results are. Hence, mix all the three subjective searches
and back them will relevant thematic filters.
52. 51
Conversion Secret #2 – Search – Office Depot got it wrong!
2% adhered • 96% violated• 2% neutral
TOP COMPANIES THAT GET IT WRONG: CDW, Office Depot, Office Max
Conversion secret - Include contextual search snippets in the search result list. Helping users
understand why and how each result relates to their query.
Why This Helps?
Contextual search snippets are the trust seals on the search results. Because customers use them to
relate their query with the product. Snippets assure buyers that they are on right track. Not wasting
time on irrelevant items/products. Helping users take informed decision and influence a positive
outcome.
In one test more than half of the test subjects doubted the search results of their queries.
They had apprehensions about the search results. Because none of the listed data was even in the
remote manner related to their query.
Because the results did not show any text, except thumbnails. The results failed to correlate with the
query.
53. 52
The contextual search snippet cannot be seen with the listed products in the Office Depot
website.
Hence, display contextual search snippets with the excerpts of the matched data. So that users see
how the result relates to their search query. Greater the correlation more trust they have on the search
results.
It makes good sense to display product attributes. Like the title, price, key specifications, and
thumbnails. In structured-manner across the categories. Points out to the customer that the site has a
streamlined product catalog. But this strategy does not work in the search. Because there should be
strong relevancy between the search query and the search result.
And the search query can be different from one user to other. This is where search snippets come
into the picture.
If there are no relevant search snippets, then how can user believe the listed products are for them?
True. They do not trust the results.
If search snippets are absent users resort to "Pogo-sticking”. Going back and forth from the search
results and the product page. Scanning to figure out how the product relates to their query. Users tire
up doing this tedious hopping exercise. Feel frustrated and they quit. The consequences:
Lost sales
Brand damage
Bad word-of-mouth
Search engine giants like Google and Yahoo have search snippets on the result page. So do the e-
commerce giants like Amazon and Walmart.
54. 53
All the listed Samsung mobile phones have contextual search snippets. They have specifications
relevant to user query. A user can know how relevant the listed product is to the search query.
Search snippets provide users quick information about the product. Tell them how and why each
given search result relates to query. Saves them from aimless search and spending time on irrelevant
items.
Contextual search snippets ease the choice between search results. Because users can relate with
contextual information in the snippets.
The snippets have information like product specifications, title, and description. The data in structure
form, semantic-categorized and has product specifications to match user's query. In short the snippets
can be optimized for search engine.
55. 54
Conversion Secret #3 – Search – Even Kohl's got it wrong!
8% adhered • 92% violated
TOP COMPANIES THAT GET IT WRONG: Kohl's and Costco
Conversion secret – Have both hierarchy-based breadcrumbs and history-based breadcrumbs on
all product pages.
Why This Helps?
An ideal combination that gives the user the freedom to switch navigation as and when needed. To
browse the product categories and find the desired product/item on the e-commerce store.
Breadcrumbs show the easy navigation path to users. If there are none on the product page, then
users find it difficult to browse a collection of goods. They do not know which way to go a step
further in the hierarchy to the product category.
And return to search page results.
Without any breadcrumbs user cannot move backward or forward if the product does not appear
relevant on closer inspection. This what happens to a user on the KOHL’s website.
56. 55
In one test study done on the top 50 e-commerce websites. 72% had one type of breadcrumb while
20 % had no breadcrumbs at all. The study also pointed that electronic commerce websites need two
kinds of breadcrumb links:
Hierarchy-based
History- based
Hierarchy-based breadcrumbs help the user to find product relevant to the search query. He or she
can then use breadcrumbs to navigate the site hierarchy and go to the related category. A linear
navigation that allows the user to view other products within the same category. In short a cross-
navigational link to the related products.
Hierarchy based breadcrumbs lead to the relevant generic product category for an open-ended
search. Especially when a particular product does not appear to be relevant to the search result
The test study also pointed out that most of the users wanted to go back to search result page from
the product page. For that, history-based breadcrumbs are well suited. Because it has the user's
history (the links visited). Users can backtrack to the results page. That is the part of user behavior on
the websites.
Provide "back to results" link alongside the standard hierarchy-based breadcrumbs. Allows users to go
back to the search results whenever they want.
57. 56
The user can click on “Back to results” link and move back to the results page because of
history-based breadcrumb in Nordstorm website.
Thus combination of hierarchy-based and history-based breadcrumbs is ideal for giving excellent UX.
It gives the user the freedom to switch the navigation mode whenever needed to find the product.
Makes product search easy and smooth.
Macys is good example how combination of history-based breadcrumb and category-based
breadcrumb is put to use for excellent user experience.
58. 57
Conversion Secret #4 – Search - Even Gilt does it wrong!
48% adhered · 2% neutral · 50% violated
TOP COMPANIES THAT GET IT WRONG: Urban outfitters, Gilt and J.Crew
Conversion secret – Leverage the "no results" page with a combination of the 7 recommended
page elements.
Why This Helps?
Encourages users to take a U-turn from the dead-end on the website and explore other popular
options. Engages them with the purpose to keep them longer on the site, instead of bouncing off.
No e-commerce site always shows products for any search queries. So when there are no products to
show, the users see a "no results" page. That is true. Because:
Sometimes the store does not have what user is looking for
The query is so obscure that search engine does not understand it
The search engine lacks the support for different query types
In that scenario, the "no results" page is what a user sees. The page is the dead end of the website.
Leads user nowhere. Gives bad UX. Only makes user quit the site. See below in the screenshot
User’s query on Gilt website for “water-proof winter jacket” returns with a poor ‘no result’
page
So what you should do to prevent users flying off the "no results" page on your e-commerce website?
59. 58
Provide helpful guidance in the "no results" page. Offer useful content there that guides the user to an
engaging page and revs up his or interest in the website. In the nutshell prevent the user leaving the
website.
How do your leverage your "no result page" and guide your user into conversion funnel of the
website?
Here seven options that you should do to make your "no results" page yield better results for you.
1. Suggest search query tips
Give advice on how to improve search query. Like checking typos and trying different words. How to
broaden the search. The suggestions might not impact the user in a positive manner. But still, it will
make them think of starting a new search.
See below in the screenshot.
2. Suggest categories
The proposed categories should relate to the user's query. If the user searches for "bamboo chair", but
the site does not have it. Then it displays other related product. Here it is “chair”. See below in the
screenshot.
60. 59
A user’s query for “Bamboo chair” show no result for the query. But shows different chairs.
3. Display external contextual Ads
The search engine is powerful and supports most or all query types. Then the "no results" page means
that the site is not carrying the product(s) that user wants. In that event display external contextual
ads.
4. Personalized recommendations
The product you recommend on the "no results" page may not help the user find what he or she
wants. But still, it points out to some interesting content, worth exploring.
Recommend something based user's search history. Like the "Recently Viewed products" section.
5. Provide phone of sales support
Some users want human guidance. Include the phone number, if you have sales representative call
center. Users can ring up and know take help to know about the product they cannot see on your
website.
6. Link to the sitemap
61. 60
Provide a direct link the site's sitemap. A user can go through the product categories and check if
anything matches his or her search.
7. Show popular products and categories
Provide the links to the popular goods and categories on the site. They might not relate to the user
query or search history. But offer some exciting, popular products. Encourage users to take time out
of their intended search. And look in other direction for a while.
Though ideas mentioned above may not help the users in their search. But still provide decent options
that can be good enough to nudge the user in the different direction.
And that is a better option than driving them off the website with a poor" No Results" page.
62. 61
Conversion Secret #5 – Search – Even Rakuten does it wrong!
24% adhered • 76% violated
TOP COMPANIES THAT GET IT WRONG: Staples, Rakuten
Conversion secret – Provide sorting options -price, quality vintage and category-specific sort
types - wherever applicable.
Why This Helps?
Sorting by above parameter refines the search to desired product. Improves user experience and plays
a significant role in conversion
Search results by default, list according to their relevance to the query. But different users have
different search priorities. Some may be searching by price; some by quality and others by category-
specifics.
In the Staples website “Quality” and “Vintage” sort types are missing.
63. 62
According to one study on top 50 grossing US e-commerce sites. 44% lacked one while 32 % lacked
two or more of four key sort types:
1) Price
2) Quality
3) Vintage
4) Category – specific attributes
1. Price
Price is one of the key product characteristics while determining product's relevance. But users do not
apply the price sorting in ascending order to buy the cheapest product. They want to know the largest
incremental value addition. They want to know what they get if they are ready to spend more on a
product or service. Or the sweet spot where they get the most value for their money for the desired
quality. Either way – in ascending or descending price.
2. Quality
Applying sort class type is more challenging compared to pricing. Because the perception of quality
differs from one user to the other. There is no easy way to categorize quality as "high" or "low".
Rather a more preferred way to categorize as – "Best-selling" and "Best Rated".
It is easy to sort the best seller across the product categories based on the data from the sales history.
Like the bestseller in "running shoes" or bestseller in "Women leather purses". But the "Best Rated" is
more of an ambiguous term if there are no benchmarks attached to it.
Like "best rated" based on customer reviews. Or "best rated" based on ratings from an external
credible agency or certification company.
3. Vintage
Some of the products have the historical component. They are vintage products. Like antiques and
artwork. Or products that age over the time. And how "old" are they is the sorting filter. Like wine,
how mature (old) it is.
64. 63
There is no “Vintage” filter. User cannot filter out the wine on the basis – how old (mature) it is.
The date or year of release is as the sorting criteria. Especially, for books, movies, and software that
have many versions or releases. Here sort filters are release dates or versions.
Vintage sorting also is unique to the category within a search scope. For example, a "premiere date" is
sort type when the users are within a "movies" search scope.
4. Category- specific attributes
Most categories have product-specific attributes that are important for users, performance wise. For
hard drives, the type-specific attribute is storage capacity. For television, it would be the screen size.
65. 64
User can filter out TV based on the TV screen size on the Staples website.
Conclusion
The e-commerce ecosphere is witnessing stiff competition. UX the game-changing element of e-
commerce. If implemented well, lifts user's experience of the website. Improves customer- website
interaction with a positive impact on the conversion rate.
The e-book guides you how to improve UX of the key areas of your website. The sensitive customer
touch points - checkout, product listing, homepage, and search. With an ultimate aim to improve the
user experience of your website.
The End
