Standards of the correct element placement on the site and definition of their actions

Positioning (elements placement in the coordinate system) is a key aspect of website creation. Proper placement of different elements makes the site user-friendly and more effective for the owner. Otherwise, user satisfaction with the site decreases inevitably, reducing the conversion at the same time.

Web designer, who designs mock-ups and sketches, is considered to be responsible for placing website elements. However, positioning knowledge is important for everyone involved in website development, whether it is the author of the idea, layout designer, developer or tester. Therefore let us look at the structure and the placement of the site components in more detail.

Type of information 

It is a well-known fact that every page on the Internet is filled with certain information with a specific purpose. Generally, most of this information can be divided into 4 types:

• informative;
• directional;
• sales oriented;
• communicative.

The site element's informative component serves as the most accurate and concise explanation of its goals and specifics. Elements of this kind give an understanding of what this recourse offers, its direction, type of services and opportunities. This type of information is read by the user, and that is why the probability and result of further visitors' actions depend on it in the first place. This type includes all kinds of descriptions on the site: slogans, information banners, specifics of the menu, etc.

Directional type information serves for convenient and fast navigation on the site. Its task is to lead the user to the point of interest (product, article, service, etc.) for the minimum number of clicks. Directional information often includes menus, guide banners, pop-up windows, breadcrumbs etc.

The sales-oriented type of information is key, especially for commercial resources. Elements of this group are created for successful completion of user actions and satisfaction of requests related to the website. It is a broadly encompassing type, which can partially include components of other types. In other words, sales information is a synergistic result of all other areas. Sales information includes not only the order form, product card or shopping cart but also the design of all elements, their conciseness, ergonomics and proper placement.

The communicative type of information is important both at the very beginning of the user's acquaintance with the product and in the process and after the key action. Elements of this category encourage the user to find out additional information, clarify points that are not clear, and share impressions and opinions about the resource. Communicative information includes all types and forms of feedback: chat, widgets for social networks, etc.

Essential requirements for key elements

Key elements of the site should perform the tasks of each type and all types as efficiently as possible. These elements are headline, header, navigation, unique selling proposition, conversion form, and footer.

The headline on the site can be called a short expression in the form of a slogan, question, or quote, which describes the specifics of the resource, attracts attention and serves as a trigger for further action. An effective headline should be concise (no more than one sentence), describe the purpose of the site as accurately as possible, cover the target audience (their views, feelings, emotions), and be creative and easy to remember at the same time. It is also worth remembering that the headline should be located at the eye level of the potential visitor - in the site's header or at the top of the main page.

The site header is a place of concentration of the most important functional and informational site elements. Being located at the top of the main page, the header serves as a tool for concisely informing users about the resource specificity and quick navigation. The header often contains the resource's logo, name/slogan, navigation menu, search field, contact details, shopping cart and authorization buttons.

Site navigation serves as a powerful tool to direct the visitor to the place of their interest and goals. Navigation includes a menu, which sometimes consists of a search bar and «breadcrumbs». The site menu includes links to the main groups of products or services. It is important to group products in a proper way, as incorrect or illogical grouping can lead to misinformation of the user and loss of their interest in the resource.

A unique selling proposition (USP) is a block of information that gives the visitor an understanding of why this resource is better than its analogues. In other words, «Why us?». The right USP is quite informative and versatile, but at the same time not overloaded and concise. It clearly explains the company's advantages, differentiating it from competitors. USP can also be accompanied by illustrations in addition to the text content.

Conversion forms are a tool for performing a targeted action on the site. It can be the purchase of goods, ordering a service, calling the office, subscribing to news or newsletter, or submitting an application. The effectiveness of conversion forms depends on their clarity, simplicity and convenience. Visually, they should be attractive and stand out, their study and filling should not take much time, and the process should be simple and accessible.

Footer, despite the apparent undervaluation, also plays an important role in the website's functioning. In this block, elements should be placed which are not included in the header but play an important informational role. For example, detailed company contacts, a map, essential resource information, links to social networks, or an expanded navigation menu.

When it comes to requirements for the elements, it is impossible to leave the visual aspect behind. Considering their variety, let us look at the most common and multifunctional option – a button.

Types of buttons

Types of buttons can be considered in two ways: classification by action and style. 

Action buttons are divided into:

1. Call-to-action button is a resource offer to perform a target or close to the target action like registering, applying, logging in, buying now, etc. It opens a conversion form or the previous page. As a rule, they are characterized by bright colors that attract attention.

2. The primary action button is usually responsible for a key action or its first step (create, start, next, complete, send). It is often the end or conclusion of one of the conversion action stages. Usually, such buttons are denoted by solid fill.

3. The secondary action button is an alternative way to the primary action. In other words, it gives the user the right to choose (back, cancel, change, edit). As a rule, these buttons are outline ones or even can be depicted as active links.

4. The tertiary action buttons are buttons of non-core functionality (for example share, add new, read more, further information, etc.)  These are much less visible elements characterized by an unnoticeable color and/or shape.

As for the styles, there are the following types of buttons:

1. Outline button – is a shape (rectangular in different variations, less often – circle or other shapes) with text inside without fill or with a transparent texture. Usually, these are buttons of secondary or tertiary action.

2. The solid button is when the outline button is filled with color, most often with an accent one. It is the most common type used on almost every website/screen/page.

3. The rounded button can be both outlined and solid but with the most rounded radius of the corners. Usually, it is used when there are no alternative actions.

4. The text button is the most simplified type of button. It is a word link without fill or frames. The activity of the link is displayed by color of the text, underlining, location or even the text link itself. Most often, these are tertiary action buttons, and less often are secondary ones.

5. The button with icon and text is characterized by the presence of a corresponding icon. For example – the cart, «Add friend», and «Send email» buttons.

6. The icon button differs from the previous type in the absence of text. It is compact and concise, which significantly saves space. Most often, it is used for social media buttons and multiple action ones (when buttons for adding, editing, deleting, and sending are present in one block.).

It is clear that button types and styles are much more, and their quantity is growing every day. However,  the basic rules and concepts are unchanged and fundamental for most website elements. Therefore, by using fundamental knowledge about the website elements, it is possible to create an effective resource for both the owner and the user.