Best practices for designing website headers
Best practices for designing website headers
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.
What's the header?
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.
What is included in the header?
Headers contain different types of layout elements i.e
- Brand Identity,logo, brand name,company statement,etc
- Links to categories of website content
- connect to the most important social network
- Basic contact information
- In case of multilingual interface switcher of languages
- service presented
- search field
- Membership field
This does not mean that all the mentioned elements should be included in a web page header: In this case, the risk is high that the header section will be overloaded with the information. More objects attract the attention of the user, focusing on the important people with hard work, designers, sometimes with marketing experts, decide on strategically important options and choose from the list, based on design tasks Are or add others.
Why is the header important?
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:
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.
Design practices
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.
Hamburger menu
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.
Double menu
In the header, double menus can present two layers of navigation.
Comments
Post a Comment