What Not to Do on the Homepage: UX Advice for Fashion Retail
The homepage is often a key webpage for direct and organic search channels for players in the retail fashion industry. In addition to being a crucial step in the browsing process for users, it’s also an opportunity for businesses to introduce and showcase their brand identity through editorials and fashion trends.
However, according to the data we collected in Q1 of 2019, fashion retail homepage bounce rates were as high as 40% across all devices. Users also still spend an average session time of 7min on desktop and 3min 41s on mobile. (Remember, Contentsquare measures bounce rate as having only seen the single page and leaving the site).
It can be difficult to know what kinds of design iterations will help prevent users from exiting without having viewed at least a few product pages. It’s also impossible to create the perfect homepage, but we have some great tips to follow if you’re looking to improve the design of your fashion eCommerce homepage.
Don’t place text on cluttered areas of images
Although images and photography are crucial for communicating brand identity and editorial content, make sure you choose images that are text-friendly. Place text over emptier areas of the image, change the image, or place text on an overlay. Always use white text unless brand guidelines say otherwise. Users tend to skip over text that is too long, too small, or just difficult to read. Keep in mind: any information must be easy to digest at a fast pace, especially for mobile users.
Don’t make the hero image the full length of the page
If you’re showcasing your Fall/Winter looks, consider using a static banner —a prominent, single banner on the page that does not have rotating content, one that allows other content to be seen above the fold. We often find the exposure rate — how far down the page visitors scroll — drops drastically below the fold line.
A hero image that spans the full length of the page could mislead users into thinking there is no other content. Because the average length of mobile pages is around 3,400px, we need to encourage users as much as possible to scroll past the fold line.
Don’t automate carousels
If you’re showcasing new collections or promoting sitewide discounts, avoid automatically rotating slides within the carousel. Instead, use static carousels that do not include more than three slides to allow users an opportunity to digest both the image and information in each slide. Users should be able to use arrows to easily move from one slide to another.
Although there is a big debate in the design world over whether carousels are effective, we see much less exposure and engagement on the second and third slides. Automating carousels can rob users of control over the experience and as a result, they are more likely to ignore it if the slide moves too quickly for them to read.
Don’t hide primary CTAs or category links below the fold
Instead, make sure they are clearly above the fold line; try placing them on an uncluttered area of the image. You want to encourage users to immediately begin browsing, whether it leads them to a category page or list page for product catalogs that are currently being prioritized.
Try placing a horizontal category slider at the top of the page and evaluate whether that improves your users’ browsing process.
Showcase editorial content that is space-conscious and easy to interact with
Make sure that any editorial images on the homepage lead the users to specific categories, seasonal collections, or product pages. Giving them a purpose beyond aesthetics encourages users to explore beyond just the homepage and can help increase session time.
Here is a great example from Ralph Lauren:
The above image on the left showcases the bag as both aesthetic and functional, enticing users with beautiful photography, while leading them to the product page. The text is succinct, easy-to-read, and placed on an uncluttered area of the image.
The carousel placed on the right provides even more options for the user to view additional products for the upcoming season. Both the image and carousel do not extend past the screen, making it easy to view. Part of the content of the next section is viewable, avoiding the false bottom and encouraging users to scroll further.
Making design iterations to your site never ends. As user behaviors continue to evolve faster than ever, it’s important to continuously evaluate and reassess the performance of individual elements on your pages. It’s important to make design changes based on the needs of your user base, not the general users of the industry.
Don’t forget to regularly check on other players in your industry for inspiration, as there is much to learn from the digital experiences and websites you enjoy. But remember, just because a competitor does it, doesn’t mean they are improving the experience of their users. So be inspired, yes, but consult your own customer data before implementing changes.
Hero Image Via: Rawpixel.com, Adobe Stock