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

Click Here, Not There: Making Your Calls-To-Action More Effective

Calls-to-action are the most important part of landing pages. In this article, I will provide some recommendations on how to make your CTA’s work better.

A call-to-action, or a CTA, is probably one of the most important parts of a landing page. Usually designed in the form of a button, this short imperative phrase tells the user what action to take. In this article, I will provide some general recommendations on how to make your calls-to-action work better.

  • CTA text

    Avoid vague formulations, such as “Click here”, tell your visitors exactly what you want them to do:  “Sign up for the newsletter”, “Submit the registration form”.  If the phrase used for CTA seems to be very long, you can break it into two parts (e.g. Sign up now – and receive our weekly newsletter). Write the explanatory, second part either below the main CTA (in smaller letters) or put it outside the button – above or below. In the CTA text, you can either evoke the sense of urgency: “Sign up now”, “Limited offer” ; or mention the main benefit for the user: “Get free expert advice”.

  • Number of unique CTA’s

    An older rule prescribes only one unique call to action per landing page. Asking users to perform two or more actions on the same page can confuse them when navigating. However, sometimes there are two or even more options a user may have on the same landing page, depending on their stage in the buying process or their buyer type. An example would be offering to sign up for the trial or taking a feature tour first. In this case you would need two CTA buttons. They can be positioned next to each other or one on top of the other. Usually, the more important one of the two CTAs comes first and is highlighted graphically (e.g. with a brighter color).

  • CTA design

    In designing your CTA’s, you will need to balance two requirements: first, your CTA should look like an organic element of the landing page, and second, it should have enough contrast to the rest of the page to be noticed and clicked. Make your button 3-dimensional: use gradients and shadowing to get that “clickable” look. Also, an arrow within the button or outside it can have a positive influence on conversion.

  • CTA color

    It is believed that buttons with signal colors (red or orange) work better, however, do not sacrifice the look of your page in favor of a red button if does not match the overall design. You may also use some creativity and add texture or pattern to the design of your button, but only if this goes well with the look of the page and the product you are offering. Remember that in any case, the CTA text must remain clearly readable.

  • CTA positioning

    Placing the CTA button “above the fold” as the first element on the page seems like a good idea. However, visitors might not be ready to perform the desired action until they know more about what you have to offer. So I would recommend listing your main benefits first and then introducing the first CTA. A widely used strategy for longer landing pages is several CTA buttons (one above and one or two below the fold). In this case, make sure that your buttons look the same and contain the same text, otherwise it may look confusing.

  • CTA size

    Make sure that the CTA you make has large (but not disproportional) size, in order to be noticed by users “skimming” the page.  Regardless of the size, you need to leave enough white space around the CTA: this will make the button recognizable in the text flow.

The given recommendations can help you to improve the click-through rate of a CTA. However, to achieve maximum results on your particular landing page, A/B testing is recommended.

Examples of CTA buttons

Share this post