.svg)
Make sure to get the page architecture in shape
See the checklist below, and try not to miss the critical aspects of a great user experience. Testing and going down to industry specifics, helps to improve it even more!
Make sure all images are of high quality, and clean, not cluttered
The first impression matters a lot, keep the attention of users by offering them appealing, high-quality visuals, and clear messaging.
Present precise delivery times and pricing, without the user needing to scroll
Do you ship to my country? How much does it cost? When do I get my package? Example: Free EU shipping within 3 days, Free EU delivery from 59€.
Have the following sections covered
The site-wide pre-header
A great place where to introduce information about delivery, returns, and unique selling points! Make sure the Return policy is clear, visible, and friendly.
The site header with branding, auto-suggest search, support contacts, and main navigation
Take a look at the examples by Wunderfront. For mobile, it is essential to keep the search input open, navigation, and cart quickly accessible, and branding concise. Try also bottom navigation on mobile! Be thumb-friendly and boost conversions!
The breadcrumbs
Show the hierarchy-based breadcrumbs in category product lists at the very top
The minified hero campaign banner(s) below the header, if the promotions are relevant for the category
If the campaign is relevant to the category, meaning applies to the category itself or some items inside it, feature the banner on the category page to draw more attention to your promotion.
The clear and informative category title and description
An absolute must, show the category title, description, media (optional), and total count of products in the category.
The sort-by and filters section
The category page and filters are like bread and butter. Be sure to read and acknowledge the very details of sorting and filters described in their own guide.
The product listing (grid, or list)
The key here is to make sure your product "card/container" contains the following: product media (on desktop, show the secondary image on hover), product name, price (and discounted price if any, show savings too!), category belonging (if presented off the category page), size, color options, tags, price per unit if applicable, reviews rating and the count of reviews. Ideally, have add to wishlist, and add the item to cart too - if applicable (example: food, hygiene, cosmetics, repeatably purchased items, etc). Always provide comparison features for spec-driven products, such as electronics. Also, consider having a Quick View function for visually driven products!
The top brands (if you sell many of them)
Help people to dive right into their favorite brands and reach desired products faster. Remember, people might be brand advocates.
The pagination and load more
Present a simple pagination, showing the start of pages and the end of the pages, and enable users to choose a specific page to navigate to. As a more than good alternative, present a "Load More" option, and show the current scope, how many items are shown, and how many are loaded more. Also, show user's progress and always lead them back to their progress, while navigating back from the product page. Load more works best on mobile devices. If the user has already added an item to their cart, also show it on the product "card" on category pages, and elsewhere.
The recently viewed products
Help the returning visitors become visitors much faster, and also consider moving this section below the Hero campaign banners for returning users (on homepage)! This an amazing opportunity to take the user to the checkout!
The pre-footer: The bottom benefits
Visually and textually remind site-wide why shop with you. Keep it super short and have 3-5 benefits visualized and communicated.
The pre-footer: The payment options
Showcase different options people can use to pay, and bet big on buy now and pay later options. Make people trust you more, and help them get products faster and more conveniently.
The site footer with bottom navigation and trust marks
The site footer is like the air you breathe in, it has to exist. Showcase trust badges/marks, top navigation items, key categories, contact pages, FAQ, About us pages, social links - and all the terms and privacy pages. And do not forget the delivery information and return handling pages! You can also use the area to acquire leads and make people subscribe to your newsletter, but there are better ways.
The bonus checklist
Show additional product info on hover for the desktop experience
For example, on desktop devices, if a user hovers over the product card, showcase up to 3 key benefits of the products, as well as a supporting product image.
Help people to quickly identify brands by showing them on top of product titles or prominently in filters if the brand is highly valuable for the users
Consumers want comfort, happiness, and satisfaction in their lives, and they get it partly through the products they buy. Very often, banded clothes are marketed as better quality and more value for the dollar spent, with an added sense of prestige. And this is precisely what you need to show to the users in brand-driven cases.
Have an intermediary category page if you have a more complex category structure or a high volume of products
An intermediary category page is, in short, summing up the best-selling items in this category and also featuring subcategories and even brands. As an example, imagine you click on Women's Fashion. Now what should follow is that you see a page not with all the products but instead with a simple representation of all the categories in Women's Fashion and featured products and brands. You can extend the idea by allowing users to show by price or season.
Showcase/inject a "Why choose us" section after displaying 10-12 products on your category pages for new visitors, and continue the product listing after the section injection
This helps people who land straight on the category pages quickly get why your brand and shop are just so amazing for them.
The “please avoid” checklist
Avoid auto-rotating banners
It is a proven conversion killer and causes banner blindness. Please, avoid it.
Avoid too many ads and banners
Help people stay focused and lead their attention. Do not add banners for everything and for everybody. It is proven to work against sales.
Avoid poor page speed
One two three four five six .... Bye-bye. Speed equals money in your pocket. Remember that, keep your Google page speed index above 90 on desktop and above 70 on mobile.
Avoid poor design, bad use of colors, and low contrast
It has been proven with research, that every 1 USD you invest in design and user experience improvements brings back 100 USD on average (https://tinyurl.com/wunderfront). Do not underestimate design, first impressions, and color psychology. Keep navigation and call to action of high contrast.
Avoid overpaying - use tools, themes, and plugins to make it happen! Go no-code or low-code!
There is the easy way and there is the hard way. Work smarter, not harder, unleash the power of software, and just buy affordable plugins, themes, or tools, to make it happen.
Avoid reinventing the wheel
Instead, use plugins, and ready-made software to cover these core guidelines.
Showing products only inside their packaging
In short, it can discourage people to enter your product page as they might not get what the product is.
Avoid infinite scroll and endless scrolling
An absolute show-stopper and a heavy-weight champion in poor usability and experience. Avoid it!
Avoid showing ultra-tall product images on mobile devices
They should not exceed half of the viewport, or screen, never in portrait mode. Keep this in mind for better usability.
Avoid subdivided product lists, do not separate them
A product listing should indicate products on a singular level, so don't create visually separated blocks on the category listing page.
Avoid alphabetical sorting
Ask yourself if an alphabetically sorted category page represents a personalized shopping experience, and who can it actually help?
Avoid showing more than 4-5 items in a row on desktop
The more products people need to horizontally view, the less focused they will be. Do not try to use all the space there is, better help users focus and keep it maximum of 4-5 items in a row.
Avoid multiple paths to the product, and Quick view function in some cases
The user should be able to access the product, just by tapping on the "product card", do not create many ways to enter the product, keep it simple!
Avoid showing out of stock and better show when it is back in stock
When the item is out of stock, show when you expect to have it back in stock. And do not fool users by showing the item is in stock on the category page and then showing it is actually not on the product page.
.webp){kind=logo}
.png){kind=logo}
