The homepage is the front door to the many users who begin their browsing experience.
It’s critical that the homepage makes it clear to users. Both new as well as repeat. On how to pursue the three primary product finding paths:
- Category navigation,
- Search, and
- Curated paths (wizards, inspiration, new arrivals, etc.).
For new visitors unfamiliar with your site or brand. The homepage is an opportunity to shape the user’s perception. By answering vital questions such as: what type of site did I land on, what can I do here, and what should I expect to Find?
In practice, serving all these diverse user needs on a single page is a problem.
It requires a delicate balance between the different aspects on the homepage. So that search field and category navigation don’t fall second. To the often visually striking homepage content (e.g. featured products, campaigns, and promotions).
At the same time, the search field and category navigation shouldn’t be so attention-grabbing. To draw focus away from the primary content on other pages throughout the site.
You may encounter several roadblocks in your quest for a dream homepage. You better follow the below mentioned 13 useful guidelines. To give your users the best experience on your homepage.
1. Inferring type of site
* ROADBLOCKS: First-time users could misinterpret the kind of site and its product range. If a small selection of product types features on the homepage.
Images demand attention, users rely on homepage visuals to infer the site’s product catalog. While other types of visuals (graphics, button-like elements, fonts, etc.) are used to draw attention to the breadth of your product catalog. Images are typically the most dominant. It’s important that you display the product types you feature with an image or at least thumbnail.
GUIDELINE: Feature a sufficiently broad range of product types on your homepage. It helps first-time visitors infer the breadth of your product catalog in an accurate manner.
2. Ads are bad on the homepage
* ROADBLOCKS: Users tend to be negative toward sites with ads on the homepage. More so in particular, if the placement of ads are in prime content locations, pop-ups, or overlays.
Take extreme caution in how you design promotions and feature it on the homepage. Be particularly mindful of size, placement, aesthetics, and integration with the homepage layout. If you are not careful in executing and balancing, legitimate content will turn out to look like ads. It can have an adverse influence on the user’s initial impression of the site and brand.
GUIDELINE: Avoid placing ads (and ad-looking content) in prime content locations. It includes the homepage, pop-up banners or dialog overlays.
3. Time your Carousel and auto-rotation
* ROADBLOCKS: Users are unlikely to see all slides in a carousel. They may grow frustrated if almost on sudden slides auto-rotate too fast.
When implemented with care. Carousels are a powerful way to promote features, offers, and wizards. Just be sure they aren’t the only way to access them. Users get enticed by the typical large images. Auto-rotation helps expose a variety of content without cluttering up the entire homepage. Carousels are okay as long as you take care in implementation and content. You can achieve many effects using static images in combination with featured categories. It’s worth noting that this stands in sharp contrast to mobile commerce sites. Carousels use stands rare, due to screen size and the lack of a hover state.
GUIDELINE: Carousel slides should auto-rotate, but not too fast (especially if they include text). Auto-rotation should be temporary paused while hovered and stay permanent after any user interaction.
4. Assist to select a well-defined scope
* ROADBLOCKS: With sheer force, users plow through a site’s category taxonomy. To reach a clearly defined scope when the homepage doesn’t assist in such selections. This way users often end up on long detours in the process.
As bad as it is for business and usability when users end up in the wrong or a too-broad scope. Given how good it is when users find a relevant and well-defined scope. That assist users in a quick and seamless way. Finding a well-defined scope from the homepage is paramount. In practice, this means getting popular categories (and sub-categories). In front of users right on the homepage.
Promoting popular sub-categories (besides popular categories) right on the homepage. It helps users bypass the generic higher-level scopes. Allowing to go straight to more relevant and well-defined parts of the site’s taxonomy.
In particular industries such as toys and gifts (where customer often buy for someone else). As well as for compatibility-dependent product catalogs. Wizards can be a powerful scope to integrate on the homepage too
GUIDELINE: Assist users in selecting a well-defined scope right from the homepage. By listing favorite categories and sub-categories and otherwise promoting meaningful range selections (e.g., wizards).
5. You can’t afford users to ignore the homepage content
* ROADBLOCKS: Some users ignore the homepage content. Instead, they want to go right to the main navigation or search Field.
It does mandate that we design for this behavior of bypassing homepage content. For either interacting with the main navigation or entering a query into the search field.
In more practical terms, it means that the search field and main navigation (and associated mega-menus, drop-downs, or other related elements) must load instantly. Another important detail is to make sure all images on the homepage have defined “width” and “height” attributes so there are no sudden jumps in the page layout as images load since these jumps may push search field and navigation links around.
Finally, users look for thematic categories in the homepage content. Make sure you have these on your homepage. Seasonal categories, “what’s new”, and “good deals” are what the users seek and expect, so be sure to consider these when curating your homepage.
GUIDELINE: Make sure the search field and main navigation (and their related features). To be the first things to load on the homepage and are available to users at that instant.
6. Invest in bespoke imagery and design
* ROADBLOCKS: First-time users make a snap decision about the site and brand. They tend to stick to that initial impression throughout the entire shopping session. With a positive impact translating to increased patience with site hiccups and fewer abandonments.
Setting a good first impression is desirable in any vertical. An aesthetic pleasing layout with large, high-quality images goes a long way. In setting a positive tone for the shopping session regardless of industry. When product aesthetics plays a significant factor in the purchasing decision. Great photography will matter even more.
Use homepage and general site-wide design. To convey brand values and provide a rich online experience, but it doesn’t come free. Make significant investments in design and content production (copywriting, graphic design, and especially photography). Curate the work on an ongoing basis. Concerning homepage photography, users respond well to large images. Of products in a use context, much more so than to a single product on a white background.
GUIDELINE: Use bespoke homepage imagery and design. To set a positive first impression of the site and convey its brand values. Investing in great product photography is of particular importance in visual-driven industries.
7. Display the main navigation categories as part of the homepage
ROADBLOCKS: In some sectors, category browsing performs better than other product finding strategies. Users often aren’t encouraged enough to adopt the approach on the homepage.
Because category browsing happens most via the main navigation. Users are only encouraged to pick this product finding strategy. To the extent the principal navigation demands their attention. Having an eye-catching main navigation bar isn’t desirable either. Because it repeats on almost all pages throughout the site. On many of these pages, the main navigation should fall into the background. With other elements on the page taking center stage. There is tension between the need to promote an individual product finding strategy. Without distracting users on all pages throughout the site with a vibrant navigation. Luckily there is a simple solution to avert some of the dilemma. Display the main navigation categories as part of the homepage content.
It is not just main navigation categories that you can represent on the homepage. Instead, you can embed a selection of relevant sub-categories. It is particularly the case for seasonal or otherwise time-sensitive scopes. That is particularly pertinent during certain periods of time. It may thus be suitable to encourage. Not just a category-browsing strategy on the homepage. But also a particular scope during those periods.
GUIDELINE: Consider representing the main navigation (or relevant sub-categories) as part of homepage content. If category browsing is a particularly desirable product finding the strategy in your industry.
8. Make it clear while personalizing homepage contents
ROADBLOCKS: Personalized homepages can be confusing to users if the personalization is opaque. Or when you personalize elements other than featured products (such as navigation options).
It’s recommended not to go overboard with personalization. Keep the customization to featured products. Retaining a couple of homepage sections and features for recognizability. It’s critical to keep core site feature personalized, particularly the navigation options. As they function as anchors for the user to interpret and navigate the site in a reliable manner.
GUIDELINE: Consider personalizing homepage contents. But make sure the changes are moderate and (in most cases) proper labelled. Never customize core site features.
9. See to it to have at least one inspirational navigation path
ROADBLOCKS: Users need “inspirational” ways when they want to explore. They won’t have a clear idea of what they are looking for.
An inspirational navigation path in essential. Leads the user to a page or wizard with content that inspires and guides them. For example, this can be a curated page with a selection of featured products. If possible even some guides or other content resources.
Wizards can also function as an inspirational path if they help the user set the right type of criteria. Often this means putting in values of the audience. The wizard returning products matching those criteria. In effect returning a list of relevant products that can inspire the user in decision making.
GUIDELINE: Have at least one “inspirational” path on the homepage.
10. Exercise caution on using default site scopes
ROADBLOCKS: Users don’t expect a default scope selection. Encourage those needing to switch scopes to make a too-broad scope selection.
Default site scopes increase the relevance of the homepage content for the targeted audience. So if that audience represents the vast majority of visitors, outweighing all other audiences. A default site scope can be a good idea. An alternative, less aggressive strategy. What that still caters to a majority audience is to bias the homepage contents. The ordering of primary navigation options toward this segment while still keeping some diversity.
GUIDELINE: The benefits of default site scopes only outweigh the drawbacks. When there is a significant overweight of a particular target audience. Even then you need to warrant caution.
11. Search field obviously has to be on the homepage
ROADBLOCKS: The search field often drowns. In the sea of eye-catching graphics on the homepage.
Take the existing search field design. Then adjust its appearance on the homepage to make it more dominant. These alterations can be anything from bolder borders, more contrasting background color. Bigger field and font size increase the prominence of the “Go” button. Or even giving the field keyboard focus by default. Use whatever will make the search field stand out on its own. Without fundamental changes to its position or visual style. The field should remain recognizable on the late.
The better your search engine. The more search makes sense as a product finding strategy in your industry. Highlight the search field on the homepage. It will increase chances of visibility thereby encouraging its use.
GUIDELINE: The search field must be immediately visible to the user on the homepage. Which requires increasing its visual dominance on the homepage. Later subduing a bit on other pages.
12. Promote and embed wizards right on the homepage
ROADBLOCKS: Wizards can be more helpful. But users often have difficulties finding them. They tend to overlook promoted wizards rather than embedded ones.
Given the increased visibility of embedded wizards. Reduce chance of them being mistaken for ads. We thus recommend that you not only promote wizards on the homepage. But also, embed them (or at least parts of them). If you have many wizards, you may choose only to embed the most popular one(s). Get the rest of them embedded on other pages where they are more relevant.
GUIDELINE: Promote and embed wizards right on the homepage.
13. Country and language selection need be seamless
ROADBLOCKS: Country and language selection is often cumbersome to use. They are likely to be mistaken for surveys or newsletter subscriptions. If placed in an overlay dialog.
Do not present shipping, country, and language selections in an overlay dialog. Either force the user to make a selection (or confirm one) with a dedicated splash page. Or make the process unobtrusive by auto-selecting a value for the user. In case of the latter, you may bring the user’s attention to the auto-selection. By highlighting it on the landing page yet keeping it unobtrusive.
Regardless of the initial country selection approach. The conventional way of informing the user about the currently selected country scope. Is to have it displayed in the upper right corner throughout the site with a flag icon. And link text stating the name of the country. You can include the currency too. This also provides the user with an easy way to change these preferences. At a later point during their shopping session.
GUIDELINE: Ensure country and language selection is as seamless as possible. Only use splash pages if you have significant regional customizations and restrictions. But never display it in an overlay dialog.
In short: the homepage is a balancing act. The challenge is to resolve the inherent tension. Between core site-wide elements (search field and main navigation). And the homepage content (featured products, campaigns, etc.) and functions (brand value, user stimulation, portraying product range, etc.)
With these conditions met, the homepage should inspire users. To explore, convey the site’s brand values and product line. To promote scope selection and product finders. All without causing visual overload, which tends to lead to banner blindness.