Everyone knows: There is no second chance to make the first impression. In the field of digital products, this eternal truth works in the context of high competition and incredible diversity. There is no doubt that some pages of the webpage or mobile screen are particularly important and are effective in this aspect. Today we are going to discuss one of them in deep meditation: website header
On the issue of dedicated UI / UX dictionary for web design terms, we have already provided a header. Today we come a little closer to this topic and discuss what works for a header and recommendations for its design. In addition, we will show a bunch of web design concepts that implement different methods for header design.
In the web page layout, the header is the top (top) part of the web page. This is definitely a strategic part of the page, which is from the area that people see before scrolling the page in seconds before introducing the website. Due to some kind of invitation sign, the header should provide the main information about the digital product so that users can scan it in split seconds. In the design perspective, there is also the header area which is creating a wide area for creative design solutions that should be attractive, concise and useful. The header is often referred to as the “site menu” and posted in the website layout as the main element of navigation.
The top horizontal area of the home page shown in this picture is called header.
The first thing to consider is eye scanning models that show how users interact with a webpage in the first seconds. This important domain of user research is widely supported by Nielsen Norman Group and offers designers and applicability expert with a better understanding of user behavior and interaction.
In essence, when people come to the website, especially for the first time, they do not search everything carefully and elaborately on the page: they scan to find the hook that will attract their attention and some time on the website To spend them will convince them. Various experiments in collecting user eye tracking data have shown that there are many specific models, with which the visitors have scanned the website. Steven Bradley in the design layout of the article, the author cites the following common models: Gutenberg figure, Z-pattern, and the pattern F Let’s see what the plan was for them to study.
Gutenberg is quite specific for web pages with pattern similar to pattern information and poor visual hierarchy. As we can be seen from the scheme found in the research of Steven Bradley, it shows four active areas – and two of them go to the typical headers area.
In another plan, it is specific to pages with z-pattern and presented zig-zag version of the content block divided by the version. Then, the reader’s eyes are moved from the upper left corner to the right from the beginning to the right and all the pages run in the upper right corner, which scan in contact with this initial area.
Another model presented in the exploration by Nilsson Norman Group is F-Pattern and showing that users often demonstrate the flow of the following interaction:
- Users first read in horizontal movement, usually in the upper part of the content area. This initial element creates the top of F’s top bar.
- After this, users take the page slightly down and then read in a second horizontal movement, which covers a smaller area than the previous movement. This extra element creates the bottom of the F’s lower bar.
- In the end, users scanned the left side of the content in a vertical movement. Sometimes it is a very slow and systematic scan that appears on the eye-tracking heatmap as a solid bar. For the second time users move faster, create spatial heatmaps. This final element forms the stem of F’s stem.
All the models mentioned show that any of these users follow a particular type, the scanning process will start in the top horizontal area of the webpage. This is a strategy for both parties to show basic information and branding: readers quickly scan important data, while the website gets a chance to present them properly. This is the basic reason that header design is a mandatory issue for UI / UX designers as well as content and promotional experts.
One of the articles dedicated to practices of Header Design, Bogdan Sandhu mentions an important point that should be kept in mind: «People judge the quality of a website in a few seconds and the second impression is absent on the Internet. is . Finally, a website should be kept elsewhere, it will be nothing more than a big failure ».
Another thing to consider is that the header can be very helpful in presenting the data to the user quickly and providing a positive user experience through clear navigation. However, this does not mean that every website requires a header. There are several creative solutions that provide designs that implement typical header functionality in other areas of the layout. Every case of website design requires the target audience to analyze and research product or service.
Readability and visual hierarchy
The choice of typefaces for header and background color ought to be found in extremely rigorous analysis and testing as a result of the readability side within the header plays a very important role. The user ought to be able to scan and perceive this basic data with none effort. Otherwise, you’re taking the chance of providing a non-user-friendly interface.
The concept of design for a news website presented above provides headlines with website title, a central element of composition, two active links of basic categories of publications, links to live with a vibrant icon and search field.
Here’s another website whose layout is made on a broken grid, so the header corresponds to this approach blinding the left part of the header and it contains four elements: the logo and the links to the three data blocks, while the right part is small And there are only two layout elements: Search and call-to-action buttons size and color for the market high level contrast
Another thing to remember is that in the process of scrolling the page there are different ways to change a header. Some websites use fixed headers, which are always visible and active in contact with the website; There are also websites that do not hide the headers completely but instead shrink it in size in the scrolling process, which means they hide secondary information, and only layout during all the interaction process is hiding headers in the scrolling process. The main elements of the active and available leave.
Another point of view of the effectiveness of the design solution which is quite popular hamburger header buttons are hidden behind the data rate of the link. It consists of the typical bread, so as to form a horizontal line looks like bread-meat-bread hamburger.
This button is usually placed in the header and now a days it is a specific element of interaction. Most users who visit and use websites on a regular basis know that this button hides the main categories of data, so this explanation does not require additional explanations and signals. The Hamburger menu preserves the space for other important layout elements as well as making the interface interface more incomprehensible and airy. This design strategy responsive and adaptive design provides additional benefits to hide navigation elements and interfaces of the device looks harmonious.
Although the hamburger menu is still related to the issues of modern web and app design, there are many debate issues, but they are still widely used as the header elements. The logic against the hamburger menu is predicated on the very fact that this style component will be confused for people who don’t use websites frequently and may mislead by sign, that contain a high level of intangible component. when the definition of the user’s analysis and capabilities and wishes of the audience, it ought to be set to put the hamburger button.
Sticky Fixed header
Another trend that is capable of promoting sticky header usability is effectively applied. Indeed, it enables users to make available at any point in the navigation area, which can be helpful in reference to long-scroll content-heavy pages.
The concept of a given design of a website is a fixed header, which does not hide the page while scrolling, however, it follows the principles of minimalism, featuring the brand name record as the center of the structure, the link to the navigation areas Magnifier icon marking hidden search functionality and hamburger button.
In the header, double menus can present two layers of navigation.