#3: Do you follow visual hierarchy on the homepage (especially on the top part)?
The right visual hierarchy makes page design simple and straightforward for shoppers. But the most important thing is that it allows directing users to where they need to.
If you want to get attention to certain elements (CTA-button, value proposition, offer, product, etc), make it big, use contrasting colors and white-space around it. Visual hierarchy is what matters here!
If you want to get attention to certain elements (CTA-button, value proposition, offer, product, etc), make it big, use contrasting colors and white-space around it. Visual hierarchy is what matters here!
Visual hierarchy is about how to control the attention of users, how to influence where they look when they come to your site. The correct visual hierarchy of elements is the basis of any design on every page, in every section of your website.
The homepage is a starting point for many users coming from your organic search, directly to your website, or through recommendations. Top part (usually it's called a hero section) is the key element of the homepage.
How well the design of this part of the page is done depends on what emotions the user will experience in the first seconds and how quickly he will switch to shopping mode.
Recommendations
The best way to explain what is good and what is bad is to look at the real examples of good and bad visual hierarchy.
The homepage is a starting point for many users coming from your organic search, directly to your website, or through recommendations. Top part (usually it's called a hero section) is the key element of the homepage.
How well the design of this part of the page is done depends on what emotions the user will experience in the first seconds and how quickly he will switch to shopping mode.
Recommendations
- If you want to get attention to a certain element, make it bigger compared with elements around it (i.e. big bold title will certainly take more attention than a small one, a big CTA-button will certainly take more attention than a text link or a subtle button)
- The more prominent element, the more attention it will get (i.e. an orange CTA-button will get much more attention on the white background compared with a grey CTA-button). Use contrasting colors for the elements that need to get users' attention. Must-have for CTA-buttons!
- The higher the elements on the page are, the more users will notice them. Place the most important things above the fold, closer to the top of the homepage, while less important elements further down the page
- Don't clutter space with many different and prominent elements, because they will compete with each other for users' attention. Use a lot of white-space near value propositions and CTA-buttons. Don't try to put everything on one screen, because it will just break the visual hierarchy. Standard structure of a well-crafted hero-section is image + title + subtitle (optional) + CTA-button (or a few CTA-buttons if it's relevant for your offer and business)
The best way to explain what is good and what is bad is to look at the real examples of good and bad visual hierarchy.
Bad example - Black Chicken Remedies
No visual hierarchy, a lot of elements on the same screen compete for the attention, the CTA-button "Show Me Newness" is not the most prominent, 2 sections are visible on the same screen, 2 notifications on the top are more prominent than sections with CTA-buttons.
No visual hierarchy, a lot of elements on the same screen compete for the attention, the CTA-button "Show Me Newness" is not the most prominent, 2 sections are visible on the same screen, 2 notifications on the top are more prominent than sections with CTA-buttons.
Another bad example from Sutra Supreme:
No prominent value proposition or offer on the first section, no CTA-buttons, "Our mission" title is the most prominent element on the first screen, but it's just a title of the 2nd section which is absolutely useless. Icons of free shipping and guarantees have almost the same size as product images, as a result they distract from other more important elements.
No prominent value proposition or offer on the first section, no CTA-buttons, "Our mission" title is the most prominent element on the first screen, but it's just a title of the 2nd section which is absolutely useless. Icons of free shipping and guarantees have almost the same size as product images, as a result they distract from other more important elements.
An example from American Eagle that can be improved
Here's the example that can be improved by making CTA-button more prominent and eye-catching by using bright background and big enough size for the button instead of just text link. All other things are designed quite well: eye-catching image, prominent offer in the title, but the button should be improved.
Here's the example that can be improved by making CTA-button more prominent and eye-catching by using bright background and big enough size for the button instead of just text link. All other things are designed quite well: eye-catching image, prominent offer in the title, but the button should be improved.
Now let's look at good examples with a very decluttered design and good visual hierarchy.
A good example from Allbird
Value propositions (title + subtitles) are eye-catching and clear, CTA-buttons are prominent and stand out among other elements, with a lot of white space between elements, as a result, it's very easy to direct users' attention where you need to.
Value propositions (title + subtitles) are eye-catching and clear, CTA-buttons are prominent and stand out among other elements, with a lot of white space between elements, as a result, it's very easy to direct users' attention where you need to.
