The first impression counts: this must be in the header!
by Gaurav Gupta
Before you can convince your users with your good content, they will evaluate your website within milliseconds. A particularly important criterion is the design of the header. That’s why I’m going to devote this very day to a blog post – with a lot of animal examples!
Within two tenths of a second we get a first impression of a website. The next 2.6 seconds we scan them and unconsciously form an opinion. Only then – and only if the page convinces us so far – do we focus the content. At least speak the evaluations of a study by the Missouri University of Science and Technology for this thesis.
What is the header and why is it so important?
According to the wiki by Selfhtml.org the header contains “the visible header area of a web page or a portion of a page.” When we speak of the header, we therefore mean the top of the page to the main menu.
The header is not the tag !
Not to be confused is the header with the head elementof an html document. This is at the beginning of a html document, may only occur once and is not visible in contrast to the header, but contains the header data of an html document: This means that the contents of the following tag can be displayed correctly – such as the header, which only appears outside the tag.
What do we see first?
If we go to a page, follow our eyes usually the so-called “F “: We start at the top left, wander to the right, return to the starting point, look further down and turn our attention then to the right again, back and Finally down. If one were to follow our eye movements, an “F” would arise. The upper “cross brace” of the “F” corresponds in most cases to the header. Conversely, this means that the header is the first area we perceive and with which you can already convince your website visitor!
The red color shows the typical look. Futalis exploit the view optimally by keeping in the header area – this is the upper line of the “F” usability conformities and thus creates trust; The lower crossbar uses Futalis for its unique features and thus gains further sympathy. Clever!
A clear header generates sympathy and trust!
In the past, webmasters tried to pack as much information as certain links, important content, and navigation in the top area of the website. If possible, the above should be seen “above the fold”.
This is no longer the case today. Of course, especially important elements should still appear above the fold, but now there are so many good content on the web that users are really pampered. You would like to find the following information as soon as possible: “Is this site reputable and does it have the potential to answer my question?”.
Our subconscious mind will make this decision in milliseconds before you have the chance to capture the attention with your content and score with expertise. A clear and clearly designed header with the observance of certain standards is the keyword here!
What is included in the header?
Logo and slogan
The logo should be visible on each page of your website, always in the same place: Top left. Even if the user navigates through subpages, the logo gives him the certainty that he is still on the same website. By the way, a click on the logo must always lead back to the start page! You should also find your slogan underneath or next to the logo, if you already have one.
According to Steve Krug, Utilities are “links to the most important elements of the site, which are not part of the content hierarchy.” That sounds quite good, but what does it mean? Utilities are “useful” links for the user, which either help him navigate or tell him more about the company. Examples of utilities in e-commerce are:
- Shopping cart
- about us
- Check out
- Register / Login
- Your account
- start page
Important: Do not overdo it with the utilities in the header! Uses only the four to five most frequently used links. Also they should not be too big – in any case, they must not distract from the main navigation. You usually place the utilities in the right header area.
Zooplus, Major Dog and Alsa Dog World have all listed in the right section of their Utilities, and Zooplus in addition to the upper left. All three have limited themselves to a few and do not steal the main navigation. It should be emphasized that both Alsa dog world as a major dog indicate whether the shopping cart is filled and how big its value is so far.
A little question between: Did you know in the second example, what is the logo of Major Dog? No? Then you went exactly like me. The explanation is simple: the logo is not the top point on the left and therefore not to be recognized as such.
Special case shopping cart
The shopping cart is one of the utilities, but it still has a special status. If you have an online shop, you must (!) Have a link to the shopping cart in the upper right corner. Usually he shows live, how many products are in it and what
The search field
Users can be divided into two broad categories: those who get to a page, browse through the categories, and those who immediately go to the search box. The latter disappoints you enormously when you have installed the search field in the wrong place, it can not be recognized as a search or does not offer any.
According to Jakob Nielsen, users expect the search box top right of the header . According to a study of 2014 of usability blogs the expectation converts but to the extent that more and more users look for a central search box out. Jan Schultze believes that large online shops such as Amazon or Ebay offer a centrally placed search function.
The visitors search for a “search”, not for “find”, “browse” or other terms! So use really “search” and no other formulations. The use of a magnifying glass is also legitimate according to Steve Krug.
A good search function sticks to the following points
- Placement top right or top center
- A sufficiently large field in which users can type their search
- A button with the term “search” or a magnifying glass to start the search function
Platinum and Wolfsblut rely on a search field at the top right, while Pets Premium has chosen a central placement. Both possibilities are practicable.
In Wolfsblut, however, the button for starting the search function is missing.
USPs – Unique Selling Points
If you want to know what USPs are and how your they defined for your company, I make you this blog post by Steffi very fond. In it, she explains in detail everything about the unique features.
With today’s focus is only on the placement of the USPs in the header – that is where they belong. But here again caution: Do not pack too many unique features in the header, but restricts you to the main two to four . The others you can on the homepage accommodate or individual landing pages.
Using pre-set graphics, you can easily separate the USPs and make your USPs easier for your users. Particularly well implemented are the dog farming and feed medication, but also hundeshop.de calls its unique features in the header.
Many users expect a contact in the header. You usually have to enter your phone number or at least an e-mail address. The minimum is a link to a contact form. By the way, you should also always deposit your phone number with a link to the contact page! Your users expect this and are disappointed if it does not work. If you want to know how to best build a contact page, Steffi read post it.
Optional: quality seal and social icons
Does your shop have a seal of quality or distinction? If so, choose the best two to three of them and pack them in your headers! You strengthen the trust of your website visitors in your shop. Before your header appears too packed, however, it will lead you into your footer.
If you use social networks, you can also put the icons in the header.
Vetconcept only links the contact page, while city4dogs displays a servicehotline directly in the header. In addition, the example of city4dogs shows the use of quality labels.
There are many design possibilities for the header. However, a clear design and adherence to the above-mentioned usability standards have proven to be a good thing for online shops. Finally, I have a short checklist for you, what should appear in your header:
- Logo and slogan
- search field
- Contact information
- Clear design
- seal of approval
- Social icons
Are there any elements in my list that you think are still part of the header? I look forward to your comments!