Where do people click

Users don't click randomly, but rather where something attracts their attention: an offer, a promotional campaign, a menu with product categories, and so on. However, it's important not to clutter all elements together or scatter them randomly. We have studied the peculiarities of perception and interface design to explain where website visitors are accustomed to clicking on desktops.

In 2006, Jakob Nielsen conducted an experiment studying how website visitors view a webpage. He recorded the eye movements of respondents through eye-tracking research and identified areas that attract the most attention. As a result, two heat maps were generated, known as the F-pattern and Z-pattern, because the users' gaze on the page forms shapes resembling these respective letters.

The red zones represent areas that website visitors pay closer attention to. According to Jakob Nielsen's logic, it is advisable to place the most important information in these areas to gather more clicks. Where people look the most, they tend to click the most. However, after 5 years, researchers concluded that it is incorrect to draw conclusions about the number of clicks based solely on heat maps.

Today, relying on the F-pattern and Z-pattern for content placement is not a great idea. Nielsen's study was conducted 16 years ago when all websites looked similar to the image below. Additionally, it doesn't take into account mobile users, who were not prevalent at that time, nor does it consider the changes in website design. However, if you have a news showcase or content presented in a monotonic grid, the F-pattern and Z-pattern can still provide some assistance.

The Gutenberg Diagram not only describes user behavior on a website but also helps understand where to place specific information based on the goal of the click.

The Gutenberg Diagram is based on the "Reading Gravity" effect. Its essence lies in the fact that when users explore a website, they automatically scan information from left to right and top to bottom. This is because we are accustomed to reading and writing in that manner. Please note that if you are targeting countries where writing is from right to left, the Gutenberg Diagram should be mirrored accordingly.

• The top-left zone (1) always captures attention. It is recommended to place the logo here, which, when clicked, provides more information about the company or product.
• The top-right zone (2) is where the user's gaze moves after viewing the first zone. Attention becomes less focused in this area, so it is ideal for clickable contacts, feedback forms, and addresses.
• The bottom-left zone (3) is the blind area. Users rarely click here as their gaze automatically shifts to the right. Hence, this area can be used for placing images.
• The bottom-right zone (4) is the most important. This is where users make decisions regarding purchases, subscriptions, etc. It is recommended to place offers with a call-to-action button (CTA) in this area.

The more buttons, cards, and other interactive elements on a webpage, the higher the likelihood that the user will leave the site without clicking or attempting to find the desired information. This is the essence of Hick's Law. Its author, British psychologist William Hick, did not formulate the law specifically for web design and likely did not anticipate its application in that field.

When creating your website, choose a prominent position for your call-to-action (CTA) and design the page in a way that avoids distracting the user with other clickable elements. This increases the likelihood that the visitor will perform the specific action you desire because the entire interface is focused on it. The optimal number of objects is 7 ± 2.

Actually, Yandex knew how to do it right when they had ya.ru, but then they forgot.

Users transfer their expectations from an existing product to a new one if the application areas are similar. This is how Jacob's Law operates. Web designers have already formed habits for website visitors' browsing behavior. Interface templates are what help users orient themselves on a new resource and eliminate the question of "Where to click." For example, in online stores, the user profile and shopping cart are typically located in the top right corner.

If your website is also designed as an online store, place similar icons in the familiar location for the user.

Analyze the templates of competitors in your niche and avoid experimenting with the interface. The user already knows where to click, and your task is to confirm their knowledge.

The more convenient it is for the user to click a button, the higher the likelihood that they will do so. This is how Fitts's Law works. Based on this law, we can derive some key principles regarding where website visitors are likely to click.

• On buttons of a comfortable size. In the WCAG guidelines for web developers, it is recommended that the optimal size is at least 44x44 CSS pixels on desktop, with text links being an exception.

• On elements near the button. Users don't want to "aim" precisely to click in the right spot. Increase the clickable area so that they can click not only directly on the button or checkbox but also around them.

• On elements within the same scenario. A simple example is a clothing catalog, where a dropdown list of categories appears in the "Men" section.

The rule refers to contrast, color, and depth. These accents should not be used simultaneously; it's better to choose one to avoid overwhelming the user. For example, make your call-to-action (CTA) stand out by ensuring that the button contrasts with other elements on the website.

Keep in mind that color is also information that helps users make decisions quickly and then click (or not click) on a button.

The technique works when there is a contrast between "Bad - Good." For instance, in the image below, the red price is considered "bad," while the green price is "good," and the "View" button is also highlighted in a "good green" color.

The depth effect also directs the user's attention to the area where their click is needed. This technique works because humans have binocular vision, and we are naturally more drawn to what is visually closer to us. This is often exploited by proponents of pop-up windows.

Users don't know where to click. Web designers, who have already formed habits among website visitors by utilizing psychology, know. There is no secret spot where users will click on any information or buttons. It all depends on how harmoniously the elements are arranged on the page and how well they meet user expectations.