March 19, 2021 Read 9 Min

UI/UX Audit: Nike vs Adidas Website Comparison

From top to bottom, we compare the websites of the biggest international sportswear giants (Nike and Adidas) in terms of user experience design.

Snappymob UIUX design audit and comparison on Nike and Adidas websites
From top to bottom, we compare the websites of the biggest international sportswear giants (Nike and Adidas) in terms of user experience design.

When we put two of the biggest sportswear brands’ websites side by side, who trumps the other at user experience? With the help of our design team, we carried out a UI/UX audit to find out.

What this is about: User experience is all about usability, which the ISO 9241-11 standard defines as “the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use”. This definition is the center of focus in this audit. What this means is that in every aspect of inspection, we seek to answer the question — How usable, effective, efficient and satisfying is this?

How we’re doing it: For each of the 13 selected web design categories, if not tied, one winner is allocated — Nike or Adidas. At the end of the analysis, the brand with the most points wins. 

Let’s see how they do.

Top Menu

(Image: Nike Top Menu)

Due to a tighter layout, Nike has a more scannable top menu. Separating categories from sub-categories with the help of a higher color contrast, information is also presented with a clearer hierarchy.

(Image: Adidas Top Menu)

Adidas’s top menu may not be as scannable, but the larger spaces between columns help distinguish the categories from one another. Adidas appears to do better in this area.

The vertical line and added space between the Featured menu and the product categories give their Featured menu a more prominent distinction compared to Nike’s. Aside from that, the bolded typefaces used for the main categories also work great at setting apart the three main categories (Men, Women, and Kids) from the other minor ones (Sports, Brands, Release Dates).

Winner — Tie

Hero Images

(Image: Adidas Hero Image)

Both Nike and Adidas display single, large and impactful images of a specific and selected product, using both models and product-only shots. 

(Image: Nike Hero Image)

The only notable difference is that Adidas’s homepage hero images take up the full width of the screen, while Nike leaves some white space around their hero images. 

There isn’t a right and wrong here, because both creative choices create different effects — images that flood the screen tend to be more impactful, while white space soothes and gives users space to breathe. 

On both sites, the hero images are accompanied by a button that leads to the specific product on the hero image. This is extremely effective for targeting a specific audience and encouraging conversion. 

Winner — Tie

Content Width

When it comes to content width, we observe consistency with Nike and a lot of variation with Adidas.

(Image: Nike Content Width)

While varying widths can help in distinguishing sections from one another, it can also be a distraction if done excessively. With the addition of multiple moving images on each page, Adidas’s inconsistent layout could come off as disorienting especially for neurodivergent users.

(Image: Adidas Content Width)

Winner — Nike

Additional CTAs

Another difference that sticks out between the two websites is Adidas’s additional pop-ups, including promotional banners, a feedback button on the right edge of the page, and a live chat button on the bottom right corner.

(Image: Adidas Additional CTAs)

While these pop-ups may bring customer service to the forefront by making it more accessible to users, they can also obstruct content during browsing sessions.

Winner — Nike

With a simple click on the search bar, Nike reveals a number of popular search terms that showcase the brand’s current top-sellers. This improves the overall shopping experience by targeting users who are casually browsing on the site without a specific product in mind. 

(Image: Nike Search Bar)

Another great thing about Nike’s search function is that aside from just displaying top suggestions in text as the user types in the search bar, the site lays out five relevant products along with their product images. This can be really helpful for users who need to rely on visuals in their search for their product of choice.

(Image: Nike Search Bar)

Though Nike sets the bar pretty high in this aspect, Adidas’s search function doesn’t fall far behind. Despite recommendations only appearing after the user begins typing into the search bar, Adidas provides the total number of products available under each suggested item.

(Image: Adidas Search Bar)

Winner — Nike

Card Carousels

Nike’s card carousel displays 3 images and a hint for overflow, with a single-line indicator beneath it. Users can either click on the Next arrow button or hold and drag to view more products.

(Image: Nike Card Carousel)

Their Next and Previous arrow buttons are pretty small in size, and may blend in with the product images due to the similar shades and lack of a hover state or outline to distinguish the buttons from the images. However, the choices to hold-and-drag or scroll to view more make up for this.

(Image: Adidas Card Carousel)

Adidas, on the other hand, displays 4 and a half cards in a row, squeezing more products in their carousels. This gives users a preview with more variety, but at the cost of images and texts being smaller and less legible.

There is no hold-and-drag function with Adidas’s carousels, but the Next and Previous buttons being larger, outlined, and having a contrasting hover state makes up for the interaction and clicking experience.

Winner — Tie

Product Listing Filters

Nike’s filters are economical with space and action. All product filters are listed out vertically on a sidebar, and the best part is — users have the option to hide or show the filters.

(Image: Nike Product Listing Filters)

The great thing about all filters being lined up in a single sidebar is that it doesn’t require many clicks to get to them. All it takes is a couple scrolls to view all the filters.

On the contrary, Adidas’s product filters are lined up horizontally on the top of the page. Though they don’t take up a lot of space either, users need to click on each one of the filters to view their variables. This is much more time-consuming than scrolling and may lead to quicker browsing fatigue.

(Image: Adidas Product Listing Filters)

Winner — Nike

Product Listing Visuals

Both Nike and Adidas implement hover effects on their product listing pages, albeit done differently. While Nike subtly reveals thumbnails of a product’s variations under the main product image, Adidas displays a sharp transition between product images upon hovering. 

(Image: Nike Product Listing Visuals)

Nike’s hover effect keeps their design simple and minimal by hiding unnecessary details to make way for the thumbnails of the product’s variations. To prevent clutter, the product series and titles are hidden when hovered over.

(Image: Adidas Product Listing Visuals)

Adidas does the opposite with space. When a user hovers over a product image, they are immediately shown a different image of the product and an expanded card of the product details and variations. 

On the plus side for Adidas, it’s much easier to favorite items on Adidas due to the little heart-shaped button on the top right corner of each product image. On Nike’s site, users have to click through to a product before they can add it to favorites.

Winner — Tie

Scrolling and Pagination

Nike enables infinite scrolling for their product listing pages. While this function is great for keeping users on a continuous browsing streak, it can also make backtracking harder, especially if the total number of products under a particular category goes up to the hundreds.

(Image: Adidas Pagination)

With pagination, Adidas spreads their product listings into chunks of content, making it easier for users to backtrack if needed. Though endless scrolling makes the browsing experience much more effortless, users get more control in navigating with pagination buttons.

Winner — Adidas

Individual Product Pages

Nike showcases individual products with tiled galleries. Their layout is extremely helpful for quick glancing or scanning, but there are a few areas that certainly have room for improvement. 

(Image: Nike Individual Product Page)

Nike’s product details, reviews, as well as the Favorite and Add to Bag buttons aren’t sticky, and this makes it more of a hassle to scroll all the way back to the top when a user is done viewing product images. With this layout, a Back to Top button would help improve the experience.

The stock availability indicator lacks specificity with the message “Just a few left. Order soon.” being much too vague for users to make an informed decision. Aside from that, their size guide link opens in a new tab, which may be disruptive to the browsing session. 

Despite all that, Nike’s collapsible accordions for Size & Fit, Free Delivery and Returns, and Reviews work great for their minimal, spacious and clean design. Their buttons are also well-sized and made to stand out and encourage conversion.

(Image: Adidas Individual Product Page)

Adidas gets the sticky part right — their product info and section bars stick to the screen to make navigating easy for users no matter where they are on the page. 

The product image viewing experience on Adidas is also great with a click-to-zoom function and a button for full-screen viewing. Their stock availability indicator is also more effective with a specific stock count and a contrasting text color (Not to mention: red is a great color for creating a sense of urgency).

Another win for Adidas is their pop-up size guide, restock subscription, as well as delivery and return information. Without being forced to open new tabs, staying on the site and in the session is made easier.

Winner — Adidas

‘Added to Bag’ Pop-up

Nike’s subtle Added to Bag pop-up on the top right corner is much less disruptive compared to Adidas’s centered pop-up box that needs to be manually closed. 

Aside from it being small in size, what’s great about Nike’s pop-up is that it auto-closes after a few seconds, creating minimal movement and minimal distraction.

Winner — Nike

Shopping Bag 

Nike’s shopping bag layout has very well accentuated CTAs, which is one of the most crucial features in a good shopping cart experience. At a single glance, it’s clear what the next course of action is — either Guest Checkout or Member Checkout. Other low-importance buttons like Move to Favorites and Remove are muted and smaller in size.

(Image: Nike Shopping Bag)

In Adidas’s shopping bag, hierarchy is a little confusing. Multiple elements like PayPal Checkout, Promo Code and the Accepted Payment Methods are highlighted to similar extents, making it difficult to distinguish high-importance from low importance information. The Checkout and PayPal Checkout buttons are also duplicated, which could confuse first-time users.

(Image: Adidas Shopping Bag)

Winner — Nike

Payment and Checkout

Adidas displays a clear and numbered progress indicator that shows users where they are in the checkout process, from delivery to order confirmation. Users can also login simultaneously as they are placing their order, without having to leave the page and login before they checkout. 

(Image: Adidas Checkout)

On Adidas’s shipping information form, inline labels are used for easy reference during form-filling. These labels subtly transition into floating labels once the field is clicked on, which is a great and unobstructive way of guiding users through the process of filling up the form.

On the contrary, Nike uses left-aligned labels which might lead to slower completion times due to the visual distance between the labels and input fields.

(Image: Nike Checkout)

Another smart little thing that Adidas does is pre-select the consent checkboxes to make the checkout process quicker. However, this may be helpful in terms of usability but questionable in terms of ethics. It may not be good UX practice for Privacy Policy checkboxes to be pre-checked simply because the purpose of it is to have the user make the choice for themselves.

Winner — Adidas

Who Takes the Crown?

Based on the points we’ve tallied in our analysis, Nike wins with 10 points and Adidas comes close with a 7.

However, it’s worth noting that although there are best practices in user experience design, UX design is still to some extent, subjective. How design is perceived largely comes down to personal preferences, and with that being said, some may prefer Nike’s web design while others may prefer Adidas’s.

After all, their approaches are different. Nike’s design has a generally cleaner and more minimal feel with little movement and distraction, while Adidas maximizes on pop-up advertising, moving elements and dynamic design. 

Which is better? Share your thoughts with us.

If you liked this, you may also like: