4 UX Tips to Optimize Your Homepage for Desktop and Mobile
0 min read
Brett Burns
Your homepage gets the most traffic, introduces your brand, tells a story, builds trust, showcases your products, drives sales, and (hopefully) creates a great first impression amongst new customers. Does your homepage have a big job? You bet.
And, with consumers using an average of 2 devices on their path to purchase, chances are they’re going to come across your homepage on both mobile and desktop. So, you’ve got to make sure you’re creating a great UX for both.
Today we’ll hone in on four 2016 homepage best practices for your eCommerce website to help keep your customers engaged and guide them through to conversion.
Know Your Audience
Before embarking on a homepage creation or redesign journey you’ll need to create buyer personas, understand your traffic, and get to know your mobile customers.
Study your analytics, conduct interviews, ask the right questions, and ultimately, get to know what kind of design elements they want to see on your homepage.
Start with questions like these with your customers when building your personas:
How do you research products you want to purchase? Do you trust reviews? What is favorite social network? And how often do you use it? How much time do you spend online using your smartphone and tablet? What do you do for work and what are your career goals? What is your educational background? What blogs or news sources do you consume regularly? Can you name a few of your biggest challenges you face in life or at work? What are some of your favorite brands and products? What’s your prefered method of communication, email, phone, or in-person? Do you prefer learning through videos and webinars, or eBooks? How do you find information online?
Questions like those can help you attain a holistic view of your ideal customer and guide future design decisions. Now you can approach each of the following sections with your buyer personas in mind.
Let Navigation Easily Guide Your Customers
Your customers aren’t detectives and this isn’t an episode of CSI. Make your products easy to find and filter through.
You don’t need to reinvent the wheel. Online shoppers have come to expect certain conventions on the web and experimenting with overly creative navigation styles can potentially deter and confuse your customers.
Stick with the basics. Use a simple, across the top horizontal design, intuitive labeling, helpful cues, easily accessible shopping cart and checkout links, sticky navigation, and provide clear CTAs.
Make your customers buying experience more smooth and enjoyable. Aritzia’s navigation is simple and easy to navigate through both on desktop and mobile.
Desktop:
Mobile:
Filtering, especially on large sites with hundreds of products, makes it easy for customers to quickly get to their desired destination. H&M helps their customers get to where they're going fast with their filtered search function. Your customers don’t want to scroll through page after page of product or they will get fed up and bounce.
Desktop:
Mobile:
Choose The Right Imagery
The right imagery can provoke an instant emotional connection, which makes choosing the right imagery for your homepage crucial. Given the fact that it only takes a person about 50 milliseconds to decide whether or not they like your website, your hero image–the big bold image at the top of your homepage–has a more profound impact than you might think.
While there is no perfect hero image, there’s tools to help you select a better, more effective one. Looking at a popular model for judging hero images from Angie Schottmuller, let’s examine how to choose the right imagery for your homepage.
Keyword Relevance (does the image complement the targeted keywords?) Purpose Clarity (does the image help clarify the message of the site?) Design Support (does the image support and enhance seamless flow of page design leading to the CTA?) Authenticity (does the image represent your brand in a credible way?) Added Value (does the image add value? Improve relevance? Demonstrate benefits?) Desired Emotion (does the image portray desired emotions that trigger action?) Customer “Hero” (does the featured image depict the customer as the “hero” once equipped with this solution?)
Three eCommerce sites excelling with imagery are Free People, Frank Body, and Klei:
Desktop:
Mobile:
Desktop:
Mobile:
Desktop:
Mobile:
Content: K.I.S.S
A common mistake among eCommerce websites is trying to pack everything onto the homepage; a carousel, product categories, featured products, promotions, shipping policies, CTAs, social media links, customer reviews, and the list goes on.
This combined with an antiquated ‘above the fold’ mentality is leading to an overwhelming amount of content included on homepages that’s boosting bounce rates and deterring customers.
The majority of the 15 eCommerce experts interviewed by Optimizely stressed simplicity when it came to homepage design and content. Less is more. Stick to one featured product, avoid trying to sell everything at once, and have a succinct focus.
Leverage Site Search
In 2016, you need a great site search and for good reason; customers who use search are more likely to make a purchase. Did you know that conversion rates among customers who use site search are up to 50% higher than average? And with over 30% of website visitors regularly using search, if you don’t have a good one, you’re missing out.
Your search bar should be prominent and easy to find. It should enable filtering, use guided search, and display relevant results.
With 70% of sites requiring searches in the website’s own jargon and 34% not supporting searches by product name, site search is commonly lacking in effective UX. And that’s why it’s so important to get it right.
Look to giants Apple and Amazon for inspo:
Desktop:
Mobile:
Desktop:
Mobile:
For a detailed guide on optimizing your eCommerce site search for conversion click here.
Takeaway
Understanding your customer and putting in the research to build your buyer personas is the first step to building an optimized eCommerce homepage. Leave the detective work out of your site navigation, choose the right imagery, simplify your content, and utilize site search.
The days of cramming every bit of content you can on your homepage and stuffing everything above the fold are over. By keeping your homepage simple and focusing on usability, you’ll be offering up your customers the experience they desire.