Homepage & Category

Question 1

What is a homepage?

Answer 1

It is the “front door” to the many users who still begin their browsing experience. It also acts as an anchor and a place to refer back to throughout the shopping session.

Question 2

What are the three primary product-finding paths on a homepage?

Answer 2

1. Category Navigation
2. Search
3. Curated paths (wizards, inspiration, new arrivals, etc.)

Question 3

What does the homepage offer to newcomers who have little knowledge about your website or brand?

Answer 3

It’s an opportunity to shape the user’s perception and answer vital questions such as: what type of site did I land on, what can I do here, and what should I expect to find?

Question 4

Visually feature at least ___% of the main product catalog.

Answer 4

40%.

The homepage should indicate the site’s full product diversity.
- More important categories can claim more significant portions of the home page screen real estate.
- Give them quick access to different categories of interest without having to rely on the main navigation or search. - Give them a convenient shortcut to important product categories.

Question 5

Mobile users are much more reliant on the homepage content compared to desktop with upwards of 70% of users scrolling up and down the entire home page to establish that initial overview.

Question 6

Many first-time users rely on the homepage content to interpret the type of site they’ve landed on and the diversity of products available. Misinterpretations during this first assessment can lead to abandonment.

What should you do to solve this?

Answer 6

Feature a sufficiently broad range of product types on your homepage - aim for at least 40% of product types. On mobile homepages, text links can be used in place or in addition to images and thumbnails.

Question 7

What do first-time users determine when they land on a homepage?

Answer 7

They determine which type of site they’ve landed on and how broad or narrow a product range it offers.

Question 8

To help first-time users interpret the type of site they’ve landed on, it is important to:

Answer 8

Showcase at least 40% of product types

Question 9

When displaying product types on a homepage, it is important to:

Answer 9

1. Aim to convey product diversity with a glance over the homepage
2. Ensure product categories are shown on the desktop with images or thumbnails
3. Use text links in place of or in addition to images on mobile sites/apps

Question 10

Ads on the homepage are generally perceived negatively, often set a poor first impression, and on mobile sites, in particular, can cause overview, distraction, and interaction issues.

How can you solve this?

Answer 10

Avoid placing ads and any ad-looking content in prime content locations on the homepage and avoid pop-up banners or dialog overlays. On mobile homepages, ads shouldn’t be overly prominent or visually distracting.

Question 11

When arriving on a homepage, users must take in an abundance of information — the main navigation, homepage information, branding and imagery, and more — in order to determine if the site will have anything of interest to them. While promotions and discounts can be valuable information that users will want to know about, ads that dominate the homepage or distract from this vital information-gathering can often do more harm than good, derailing users’ ability to learn about the site and how to navigate it.

Question 12

mobile users are constantly physically interacting with the interface through scrolling with their fingers there’s an increased risk of tapping something inadvertently if hit areas for visual elements aren’t clear.

Question 13

On mobile, in the absence of hover effects, the solution is simply to avoid any ambiguity regarding hit areas. Thus it’s typically best to avoid complicated visual elements that contain multiple hit areas. Instead, a better-performing design is to encapsulate each item separately and make it a single hit area. In addition, whenever hit areas could be misinterpreted, help users by making it clear what elements are links; for example, by using background shading or another form of encapsulation, and ensuring the size of the hit area matches the size of the visual element.

Question 14

What are some visual design elements that help users understand what is clickable/tappable?

Answer 14

1. Using synchronized hover effects on desktop
2. Using link styling (i.e., buttons and underlined text)
3. Having only a single, simple hit area for mobile links

Question 15

Consider using IP geotargeting to automatically set country and language

Question 16

On desktop, provide a method to change country and language settings at the top of the page, while on mobile place the method at the top of the page, in the main navigation menu, or in the footer (or in multiple locations).

Question 17

During testing, 2 ways to implement country and language choices were observed:

Autodetecting country and language using geotargeting
Showing a dedicated splash page or overlay dialog before the homepage loads

Question 18

For sites with multiple countries and languages, what is the best way to communicate these options to the user?

Answer 18

Sites should use either IP geotargeting or show a splash page when users first enter the site