It Starts with a Z: Visual Hierarchy in Banner Design

Visual hierarchy defines the arrangement or presentation of elements on a screen by importance. More important elements are supposed to draw the attention of a website visitor first. UX designers use a variety of methods to assign visual hierarchy to design elements (also see my post on UX design principles). In this post, I will explain how UX design principle of visual hierarchy applies to designing website banners.

  • Color contrast
    • Light colors (less important elements) vs dark colors (more important elements)
    • Unsaturated colors (less important elements) to colors with high saturation (more important elements)
    • Use of complementary colors to highlight an important element (e.g. a red button on a blue background)
  • Shape (e.g. grouping important elements by placing them close to each other (proximity) or putting a boundary around them)
  • Size (more important elements are larger than less important ones)
  • Perspective (foreground vs background), also figure-ground relationship

For a banner, a common pattern for organizing content is called ‘Z-pattern’. It can be explained as follows: the eye movement starts in the upper left-hand corner, then the focus shifts to the right (where normally teaser text is placed), then moves to the left-hand side (e.g. with a visual) and then goes to the right-hand corner, mostly to a CTA.

Below we will look at how these principles are utilized in banners on websites of several skincare companies.

The first banner (LUSH) does not follow the Z-pattern, but arranges the information vertically and centered. This works for headlines, however, if the text was longer, aligning it to the left would achieve better readability. We also see that the color of the teaser text and the CTA are low contrast compared to the background, so they can barely be read. The navigation bar, however, achieves a high contrast compared to the banner. The text (especially the sub-headline and the CTA) is relatively small compared to the background elements, thus, there is no contrast by size.  Shape or perspective are also not used. When visiting the page, the user would notice the background and the navigation bar first.

banner lush

The next banner is by The Body Shop. We can see the Z-pattern being used in this banner, with the CTA placed in the bottom left corner. The teaser text has good contrast in color (white on a dark purple background) and in size. We can also see that the products’ visual and the text elements are arranged in groups that allows for better visual separation (proximity principle). However, the CTA has lower contrast in color and size than the headline, it is also not separated from the text by a boundary but only underlined (as with hyperlinks).

bodyshop banner

The next banner by Yves Rocher also incorporates the  Z-pattern. Red is used as complementary color to green to highlight more important elements on the screen. The visual hierarchy is supported by grouping the elements of the visual and the text against the background. The background is also less saturated than the visual and the text. Additionally, important parts are highlighted by a boundary (marketing claim: Limited Edition and the CTA)  by color contrast (CTA and price) and by size (price).  The text is also aligned to the left, which allows for better readability. However, the header is designed in pale yellow, the same as background elements, which makes it stand out less.

yvesrocher

The last banner I would like to have a look at is L’Occitaine, also with the Z-pattern. A good point in the design of this banner is that the text and the CTA are not only grouped together and surrounded by a boundary but are also put against a white background, different to that of the visual. CTA in yellow, however, has middle contrast to the background. The teaser text is rather long and is aligned to the center, which makes it more difficult to read. Although yellow is the main branding color of L’Occitaine, it is perceived by the brain as a signal color and its overuse in the design as well as in visuals causes the page to look a bit “busy”.

loccitaine banner

In this post, we have had a look at how visual hierarchy can be realized in banner design. We saw that not only corporate identity, design guidelines or aesthetics play a role, but also UX/UI factors, that is how users perceive the banner and get motivated to take a desired action.

Share this post

How to Create a Banner that Performs

Improving the look and the position of your banner may improve the overall performance and increase the profitability of your campaigns.

Display advertisement is often considered unprofitable due to high cost and low CTR (click-through-rate). However, improving the look and the position of your banner may improve the overall performance and increase the profitability of your campaigns.

1. Banner position.
The best position is close to the user’s eye path, that is to what a user is looking for on the page. E.g. an order confirmation, a product description, a sign-up form. Banners placed outside the main structural blocks of the page will probably not be noticed. In fact, users have learned to filter and ignore the parts of the web page typically occupied by banners (the top and the right-hand side of the page).

Banners placed on the side of the page vertically typically get half of the clicks that the banners placed horizontally do even if they are placed on the same level.

If a user has to scroll to view the banner, this reduces the CTR  drastically, so avoid placing the banner at the bottom of a longer page, unless the user normally has to scroll to the end of the page (e.g. when reading an article).

Surrounding banners, graphics and text also have a direct impact on your CTR. Experience shows that a user normally skims through blocks of content, thus grouping parts a web page together. If your banner is placed beneath or next to a bulky blinking ad, the user will often dismiss  both your banner and the ad as one content block that is of no interest to him/her.

2. Banner design.
Recent studies prove that a banner that matches the overall design of the page (i.e. uses similar colors, fonts, spacing, etc.) performs better than a banner that is a contrasting or exceptional element to the page design. My experience shows that the following elements have practically no positive impact on the CTR: moving or blinking elements, pictures of objects or people, logos, colorful backgrounds, flash animation, etc. However, consider the whole of the user journey on the website, if a graphical element, e.g. an icon, appears several times on different pages of a website, consider implementing it on your banner.

3. Banner text.
Here be specific about what your offer is. Provide the benefit the user will get from clicking on the banner in a wording that is suitable for the audience you are trying to reach. Banner title is the most important part of the banner text, often the only part of the text that actually gets read. Make sure that it captures the attention of the user, without exaggerating what you actually offer.

4. Call to action.
Make your call to action the most prominent element of the banner. Be very brief and precise about the action the user needs to take (“receive your free copy”, “register now”, “proceed to the checkout”). It is always good to make the CTR button three-dimensional and/or contrasting to the main palette.

5. A/B tests.
These recommendations are of general character and will not necessarily work on any page and for any product being advertised. Consider running some A/B or even multivariant tests in order to find out what actually performs best, both in terms of CTR and how profitable and qualified the incoming leads are.

banner example

Share this post