Does Your Website Header Pass The Test? 2 Things You Can Improve On Today

Does Your Website Header Pass The Test? 2 Things You Can Improve On Today by Growthfluence

Does your website header pass the test? Wondering what test? The 5-second test.

The first opportunity anyone has to make an impression is above the fold of the website. These three remain to be a constant and loud truth – fierce competition, diversity of human needs and a lower attention span of people. One of the most important aspects that are so often given so little focus is the header of the website. This article gives you 4 best practices for website headers that you can apply with ease to reap big benefits.

What is a Header?

On a website, the header is the top part of the webpage. It features in the top fold of the website (top fold would mean what people see before they scroll down). It’s strategic because it is what people see when they first visit the website. It serves as an invitation, introduction, and information to all other sections. A good header usually provides the right amount of information that’s compelling and makes the visitor take action – either scroll down, or click the button, or click the menu navigation or fill in a form. So a header has to be sticky, short and incredibly valuable.

Does your website header pass the test by Growthfluence

The presented website shows the home page for an app that helps in filtering. The top horizontal area aka header presents a logo lettering showing the name of the website and the core navigation – links to how it works, the consumer manifesto, about and a download button.

What elements can a header have?

Headers can have a variety of purposeful layout elements, for example:

  • Brand identity: logo, brand name lettering, slogan or company statement
  • The theme of the website in a sentence
  • The value proposition of the product/service
  • Links to other web pages
  • Social media links
  • Contact information such as email address or telephone number
  • Multi-lingual language switcher
  • Search elements
  • Subscription form
  • Links to the demo, trial version and app downloads

The most important aspect is to ensure that the header fulfills the purpose of the website, it could be sales, inquiry, booking an appointment, downloads or any other clear goal that you have set. We recommend that the header is kept very clean and from a user experience point of view offers a clear pathway for the visitor to take the next step. Having many elements just makes it all the more challenging for the visitors to make a choice and the conversion goals are going to take longer. Thus its also good to choose elements that lead to the goal. This is also a straightforward answer to “Does Your Website Header Pass The Test?”

Let’s have a look at one more example to see which of the mentioned elements designers placed in the header

 

Does your website header pass the test by Growthfluence

 

This is the website of an app that helps people focus. The composition is built around the center featuring the logo and brand name. The left and right side are balanced around it with two links each allowing users to scan quickly and move to the information blocks they are interested in.

Does your website header pass the Test?

Delve into the secrets used and proposed by the top UX eperts. Here’s what you should do:

Optimize for the Z and the F patterns:

There are several issues why the header is a vital element of many websites and here’s how you can answer the big question – Does Your Header Pass The Test? The secrets lie in the User Experience and interaction:

The Z Pattern

Nielsen Norman Group’s research and eye scanning model gives us an understanding of user behavior and interactions. In simple terms, when people visit the website, especially the first time, they do not explore everything on the page carefully and in detail: they scan it to anything interesting that would catch their attention and convince them to further spend time on the website. Different experiments collecting data on user eye-tracking have shown that there are several typical models along which visitors usually scan the website. Among the following common models, you’ll find Z-Pattern, Zig-Zag pattern and F-Pattern.

Zig Zag Planet
Source: UX Planet

 

Z-Pattern is quite typical for the web pages with the uniform presentation of information and weak visual hierarchy. As it can be seen from the scheme, it marks out four active zones – and two of them go across the typical header area.

 

The F Pattern

 

Another model is the F-pattern presented in the explorations by Nielsen Norman Group shows that users often demonstrate the following flow of interaction:

  • Users first read in a horizontal movement, usually across the upper part of the content area. This initial element forms the F’s top bar.
  • Next, users move down the page a bit and then read across in a second horizontal movement that typically covers a shorter area than the previous movement. This additional element forms the F’s lower bar.
  • Finally, users scan the content’s left side in a vertical movement. Sometimes this is a fairly slow and systematic scan that appears to be a solid stripe on an eye-tracking heatmap. Other times users move faster, creating a spottier heatmap. This last element forms the F’s stem.

Designing around these principles is sure to help you see higher conversions.

The bottom line is simple here: a header is a strategically important conversion element for any website. Each particular case requires its own approach which will be informative and usable for the specific target audience. User research can provide a good basis for the design solutions which can follow quite traditional forms of header organization or require a totally new perspective.

Recommended reading

Here are a bunch of links to the articles and design collections which could provide further interesting explorations of the topic and give you practical answers to the question – Does your website header pass the test:

Leave a Reply

Your email address will not be published. Required fields are marked *