Womens: Shop All (Category Page)

Disclaimer: This report is for demonstration purposes only. I have not been hired by Matalan to produce this report and this report is purely to demonstrate my analysis, reporting and collaborating platform.

Main

View Recommendations
ID Issue Severity Issue Recommendation Reasons Recommendation Strength
R4745 Minor Delivery message header can visually be confused with cookie consent notification

Selectively make parts of each phrase bold:
FREE 3 DAY CLICK & COLLECT*
FREE HOME DELIVERY ON ORDERS OVER £50
NEXT DAY DELIVERY £4.95

  • This may be instantly misinterpreted as a Cookie Consent header that EU users have now come to expect to see at this location, and of this size and style. Making the text partly bold may create just enough contrast to subtly draw some attention to it without disturbing the existing visual balance.

Suggestion

A/B Test:
Recommended
View details
R4746 Minor Search box doesn't stand out

Change the colour of the search button (e.g. darker #343a3f or whatever brand guidelines allow) so that it contrasts with the delivery message header above it which is of the same background colour.

Alternative:

Lighten the background colour of the delivery header (e.g. #E4E6E7|#343a3f)

  • 'Search' may be the most effective bridge to a product page from any single other page (specially Google Shopping driven traffic landing on product pages, which are buried deep inside the website). The search box therefore needs to clearly stand out and be among the most inviting elements on the page.

Suggestion

A/B Test:
Recommended
View details
R4754 Minor Search placeholder text can be improved

1: Use lower case letters in the search placeholder text: "Enter keyword or product code..." OR
2: Change to "Search products or brands"

  • Capitalisation is not expected or required here and adds unnecessary emphasis. If anything, the search box as a whole needs to be emphasised.

  • 'Brands' is more suggestive than 'Keywords' and more likely to trigger an effective search.

  • Product codes are not visible anywhere on product pages. Unless users are retrieving product codes from catalogs and searching online, the 'product code' placeholder text might not be of any value at all.

  • The Search box seems to only index product titles and brands. It does not seem to index text under 'Product Information', i.e. actual keywords users are likely to use, e.g. "100% cotton black polo shirt". Therefore, 'Keywords' is not an effective placeholder text either.

Suggestion

A/B Test:
Recommended
View details
R4755 Minor VIEW YOUR BAG link in header

Change VIEW YOUR BAG to Your Bag. Remove the underline. Convert to lowercase (also applies to adjacent Checkout link). Precede label with a shopping bag icon.

  • A shopping bag icon is instantly recognisable and will guide the user to the header mini cart as effectively as any other optimised website. This allows the 'View your bag' label to be simplified and clutter reduced in the Minicart/Search region.

Suggestion

A/B Test:
Recommended
View details
R4756 Minor Checkout button in minicart interferes with other calls to action throughout the site

Convert checkout button minicart to a simple link.

Alternative:

Add a light background colour (e.g. #f0f0f0) or bold the text when a product is added to bag (bag has item).

  • SHOPPING BAG IS EMPTY:
    Despite having such visual prominence, the red checkout button does little for users who don't have a product in their bag yet. It does not necessarily motivate browsing or trigger any action - specially to visitors landing on a product page as the point of entry. It is very similar to the 'Add to bag' button and unnecessarily competes with it for attention.

    A user who intends to shop and has added products in their shopping bag is likely to be committed enough to visually scan the page for a shopping cart icon, cart or checkout link when they are ready.

    SHOPPING BAG HAS PRODUCT:
    After a user adds a product to cart, triggering or facilitating the checkout process may be desirable (depending on whether the goal is conversions or increasing basket size). Whatever the implementation, it may help to draw some attention to the checkout button. We suggest a light background or bold text.

    A/B Testing is recommended to detect changes and correlations and establish causality between the checkout button clickthrough rate and % Visitors who started checkout and Average number of products in cart or Average order value.

Suggestion

A/B Test:
Recommended
View details
R4757 Minor 'Home' instead of 'Matalan' in Breadcrumbs

Use Home instead of Matalan as the homepage link in the breadcrumbs.

  • Home (or a home icon) is the universally understood label for the homepage. This breadcrumbs trails suggests there is a specific page called 'Matalan' in the hierarchy.

Suggestion

A/B Test:
Recommended
View details
R4758 Moderate Featured sub-categories look like Breadcrumbs trail

Remove the greater than sign ('>') next to sub-category labels.

Add borders to enclose each sub-category and turn it into a clickable box/button.

  • The greater than sign ('>') is usually perceived as a hierarchy when used as a separator. The featured sub-categories may be perceived as Breadcrumbs trails and decrease curiosity and likelihood of users exploring those links.

Standard Recommendation

A/B Test:
Not Necessary
View details
R4759 Severe 'Rating' filter cannot be reset

Display checkboxes instead of radio buttons (Allow the user to check and uncheck ratings).

Do not provide unstarred (all grey stars) as a facet.

Alternative:

Additionally, append with 'and above'. (Implying 4 stars and above - as apposed to 4 stars exclusively, which can be the current assumption)

  • As with the colour swatches issue - the visitor is unable to 'undo' and therefore unable to view the previous product listings without backtracking and revisiting the page.

  • It is of no benefit to allow the visitor to filter products without ratings/reviews.

Strong Recommendation

A/B Test:
Not Necessary
View details
R4760 Moderate Excessive number of colour swatches makes it difficult to choose

Categorise into broader colour groups. E.g. Rinsewash, Darkwash, Navy & Denim are unrecognisable and hardly distinguishable as colour swatches. Instead they can all be placed into a major 'parent' colour group Blue - only wherever it is suitable.

  • Too many colours - difficult to distinguish.

Strong Recommendation

A/B Test:
Recommended
View details
R4761 Critical 'Price range' cannot be readjusted or reset

Display checkboxes instead of sliders to show price ranges and allow the user to select one more more price ranges. Use price intervals of £10 so that there are about 4-5 price ranges visible.

Alternative:

If the range sliders have to remain, do not change the initial minimum and maximum values once the slider is activated, Instead, allow the full range to remain visible and accessible so that the user can reset the prices.

  • Once the user applies the filter they cannot 'undo' their action, i.e. they cannot decrease the minimum price or increase the max price. E.g when range is £20 - £25, it cannot be decreased to £15 or increased to £30. The only way to reset the price is to backtrack (visit another page) and revisit the page.

  • Estimated loss from this usability issue (using conservative estimates):
    Estimated daily traffic: 50,000
    Estimated percentage of visitors who use the price range filter: 2% = 1000 visitors
    Estimated percentage of visitors who fail to find the desired product or abandon task and don't purchase: 2% = 20 visitors
    Estimated average order value: £10
    Estimated daily loss of potential gain: £10 x 20 visitors = £200
    Estimated yearly loss of potential gain: £200 x 365 days = £73000

    I am absolutely certain that this usability issue alone is causing a minimum yearly loss of £73000 (Actual figure is likely to be significantly higher).

Strong Recommendation

A/B Test:
Not Necessary
View details
R4763 Not an issue WOMENS and MENS labels are unnecessarily ambiguous

Use WOMEN and MEN instead of WOMENS and MENS.

  • WOMENS and MENS are ambuiguous in all caps and could require reinterpretation by some: Women's, Womens' or Womens?

Suggestion

A/B Test:
Not Necessary
View details
R4764 Not an issue Change to 'FILTER BY' and use the red colour consistently.

Reduce the text - without losing any meaning to 'Filter By'.

Also, there are at least 6 variations of the colour red in links, headers, buttons, etc (#cd0001, #e70202, #e31818, #d4021d, #eb0000, #d3031b). Use the red colour consistently or use clearly contrasting saturation/lightness levels of the same colour instead of slightly different and conflicting 'hues'.

  • Reduces clutter and adds extra white space in that area. 'Filter' or 'Refine' are words and functions which are instantly recognisable and can stand on their own.

Suggestion

A/B Test:
Not Necessary
View details
R4765 Not an issue Down Arrow icon contrasts with every other element of the website which are all characteristically thin

Use a 'thin' icon instead (select list and filter headers)

  • When everything is 'thin', whatever is 'thick' is likely to draw attention to itself. There is no reason for the Arrow Down to have this purpose.

Suggestion

A/B Test:
Not Necessary
View details
R4766 Minor Emphasize number of products in current category/filtered results

Display the number of products in current category or filtered results in bold.
E.g. Showing 1-36 of 57 products

  • The number of products found is among the first cues that helps the user judge the relevance or quality of the listings. Specially useful to provide feedback when filters are applied. That number will also help decide whether a second filter needs to be applied.

Suggestion

A/B Test:
Not Necessary
View details
R4767 Minor Pager buttons not large and comfortable enough for clicking

Increase the size of pager buttons

  • Pager buttons need to be noticeable and inviting enough to encourage clicks. If too small, users may not notice the existence of multiple pages of listings, and/or the pager buttons may not be very comfortable to use.

Standard Recommendation

A/B Test:
Not Necessary
View details
R4768 Moderate Applied filters easier to manage when all grouped together.

Group and display all applied filters at the top of the Filters section (or above product listings). Allow the user to remove an active filter by clicking on a close (x) button. Also add a 'clear all' link if possible.

Alternative:

Add a 'clear' link above each individual block of filters.

  • For the engaged user, it is easy for an active filter (chosen facet) to go unnoticed - specially if the list of available filters for a particular category page is very long and multiple filters are active and separated vertically in space such that they are not all visible in the same screen (i.e. some above and some below the fold).

    Also, it requires more [cognitive] effort to 'uncheck' multiple boxes in different places on the screen - compared to when they are all neatly grouped together.

Standard Recommendation

A/B Test:
Recommended
View details
R4769 Minor Highlighted applied filter too similar to error messages

Remove the light red background colour.

Alternative:

Add a light grey background colour or display the active facet in bold.

  • While it is very important to let the user know which filters are currently active, a slight or moderate emphasis may be enough. The light red background looks very similar to the way error messages are styled on the average website and is maybe much more than what is sufficient. With the recommended 'All applied filters' (R4768) at the top, this emphasis might not even be necessary.

Standard Recommendation

A/B Test:
Recommended
View details
R4770 Minor Colour swatch has a 'jagged' border which gives it an unpolished appearance

Remove the border to allow a more refined and clear appearance.

Alternative:

Since the only usefulness of the border is for white and very light colours over the white page background, add a subtle shadow.

  • The aim is to remove anything that can be perceived as 'negative' without a reason for it to exist (Its absence doesn't hurt but its presence doesn't help).

Suggestion

A/B Test:
Not Necessary
View details
R4771 Moderate Adding the colour in the product title helps colour blind users

Include the colour of the product in the title (In the beggining, mid-phrase or end). E.g. Red V Neck Jumper or V Neck Jumper, Red or V Neck Red Jumper.

  • Users with colour blindness (about 4% of the population) will have difficulty differentiating some colours and identifying a product of the desired colour. Using the colour in the title, e.g. tan, olive green, or navy, instantly helps the user visualise the product (whether color blind or with normal vision). The image below demonstrates how a user with one form of colour blindness will see the page.

  • For e.g. in a scenario where a colour blind person wants to buy a pair of tan leather shoes as a gift, they might like designs of some shoes but unable to figure out the real colour of the shoes. Including the colour in the title solves that problem (at least at search/browsing/filtering level). E.g. "Taylor & Wright Real Black Leather Formal Shoe", "Taylor & Wright Real Tan Leather Formal Shoe."

  • View simulated colour blind version

Standard Recommendation

A/B Test:
Recommended
View details
R4772 Minor View button is redundant and adds clutter

Remove the View button.

  • The 'view' button's function is already fulfilled by the image and title (which users expect to lead to the product page), overcrowds the page and does not help enhance the user experience.

Standard Recommendation

A/B Test:
Recommended
View details
R4773 Moderate Unstarred products highlight lack of customer activity and low product popularity

Show stars for only products that received a rating (yellow stars) and hide the empty [grey] stars.

  • Only four and five star ratings effectively help influence sales.

    Comparison with Very.co.uk :

    Matalan
    Page: Women > All
    Products: 2083
    Four or Five stars: 89 (only 4%)
    Five stars: 66 (only 3%)

    Competitor: Very.co.uk
    Page: http://www.very.co.uk/women/tops-t-shirts/e/b/1776.end
    Products: 583
    Four or Five stars: 238 (40%)
    Five stars: 137 (23%)

    Everything else being equal, users are more likely to judge a product positively on Very.co.uk than on Matalan.co.uk.

    Ratings have a positive influence for only 4% of products. For 96% of products, low ratings and a lack of ratings are probably discouraging some visitors to purchase, or at best not having any positive impact at all. Therefore, it's better not to bring attention to the overall lack of ratings on the website and only show ratings for starred products (yellow stars).

  • The lack of ratings also signals to customers that the products are not popular enough or the website doesn't have a large audience.

Standard Recommendation

A/B Test:
Recommended
View details
R4774 Moderate The colour swatch is very different from the colour shown in the picture in some cases - this creates confusion

Ensure the colours used in swatches accurately represent the actual product colour.

  • When the colour in the product image is visibly different from the colour swatch, the user is given the unnecessary responsibility of determining the actual colour by reading product descriptions and examining images more closely.

Standard Recommendation

A/B Test:
Not Necessary
View details
R4775 Moderate Newsletter signup form: There is not enough contrast between the placeholder text and the background

Darken the placeholder text colour of the newsletter signup form in the website footer to make it more legible. Use the following tool to determine a suitable level of contrast: http://webaim.org/resources/contrastchecker

Alternative:

Increase the size of the input field and the submit button.

  • There is not enough contrast between the placeholder text and the background - which makes it difficult to read and not very noticeable.

  • Signing up for the newsletter is likely to be a primary goal for email marketing and new customer acquisition - and the form could be displayed more prominently and have a stronger call to action (e.g. Sign up instead of > button) to encourage signups.

Standard Recommendation

A/B Test:
Not Necessary
View details
R4776 Severe 'Colour' filter cannot be reset

Use checkboxes instead of radio buttons (Allow the user to check and uncheck colours). Display the name of the colour next to the colour swatch.

Alternative:

If checkboxes cannot be used instead of radio buttons, ensure there is a clear or close button to reset the filter.

  • Once a colour swatch is clicked, the website does not allow the user to undo this action or filter by a different colour. This is likely to lead to task failure, i.e. users don't find the products they are after and even abandon their product search.

  • Lack of a readable colour name makes it very difficult for colour blind users (about 4% of the population) to identify the desired colour.

Strong Recommendation

A/B Test:
Not Necessary
View details