Published on <a href="http://ift.tt/2oQOs33">| Prototyping: From UX to Front End &mdash; Medium</a> Shani Prathibha <img alt="" src="http://ift.tt/2nSShH6">
Imagine the last time you visited a web page from the results of a google search and you immediately chose another web page from the search result because the former was complex enough to be understood? Was it because you were too busy in trying to find where you want to click? May be. The truth is that everyone wants to get things done quickly. It is a designer’s responsibility to ensure that you are directed to the correct path quickly without a hassle.
When we visit a web page our only intention is to find answers for “What is this? Why should I care and How do I use it?” When a page fails to answer these questions quickly visitors perceive it as complex and tend to leave the page.
According to Jakob Nielsen, the first 10–20 seconds of a page visit is critical for users’ decision to stay or leave a website. A good web page should be able to communicate with visitors in this time span quickly. This is where the importance of the attention comes to play.
There are two points to consider when designing your landing page to manage users attention in this 20 seconds to achieve your business goals.
<h3>#1 Keep the attention ratio low</h3>
<blockquote>Attention ratio is the ratio of interactive elements (or links) on a page to the number of conversion goals of the website.</blockquote>
Each and every web page has one specific goal to achieve, so the number of conversion goals in a web page is always 1. For example, Airbnb’s goal is to get more bookings from visitors. A page should be able to draw visitors’ attention on the tasks that are most important to achieve the business goal of the page. By having a lower attention ratio we can easily emphasize the most important actions so that the user is directed to the next step quickly.
Having many interactive elements than needed makes the visitor confused, which is exactly the main reason they leave a website within seconds. Keeping the attention ratio 1:1 and 1:2 are considered as the most optimized values for the attention ratio. A low attention ratio is always the best option even if it is not possible to keep the attention ratio in these values. The ultimate goal should be maintaining users’ attention on most important tasks without dissipating it.
<img alt="" src="http://ift.tt/2oQWfhn">Netflix has managed to have the attention ratio at 1:2. Both interactive elements leads the user to achieve the main business goal.
<h3>#2 Create a visual organization</h3>
<blockquote>Creating a visual organization is communicating the priority of each element by managing the visual weight and relationships each element has.</blockquote>
Visual weight is the ability of an element to attract attention to itself with it’s appearance. Elements with higher visual weights are perceived as more important. Visual weight can be managed by changing the size, contrast, colors or using irregular shapes.
<img alt="" src="http://ift.tt/2nSMYHU">The red square draws the attention more than other five circles because its’ visual weight is higher than other elements.
Relationships between elements can be defined by Gestalt Principle. According to Gestalt our brains are trained to identify similarities and differences between things. When we understand that some things are similar and other things are different, we group those things according to the differences and give meaning to them. Then we use these relationships to create a story.
<img alt="" src="http://ift.tt/2oR5Og8">The bottom row of circles will be perceived as connected and as a different group even though the circles are not actually connected.
Visitors tend to scan the page at the very first glance at a web page. By creating a visual organization we can decide the order in which the visitor reads the content and thus create a logical mental model inside the visitor’s mind while scanning. In this way, the visitor will walk through the content in a more meaningful way without any hassle starting from the moment he visits the page.
Closing note: Attention is a valuable resource. Managing it is crucial for the success of a web page.
<iframe src="http://ift.tt/2kZ4o5P" width="800" height="400" frameborder="0"><a href="http://ift.tt/2lIYHWK">http://ift.tt/2lIYHWK</a></iframe><img src="http://ift.tt/2nSUa6M" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="http://ift.tt/2oQLKdF">Two Tips to Manage Attention for the Success of a Web Page</a> was originally published in <a href="http://ift.tt/2cAqCpx">Prototyping: From UX to Front End</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Two Tips to Manage Attention for the Success of a Web Page

Top Stories