The vertical distribution of users' attention to a Web page is relatively simple: more information in the first half of people's field of vision is hidden than in the lower part. Now, let's take a look at the distribution of users' attention in the horizontal direction of the Web page. Using the database we collected before, it is easy to find that when users browse web pages, the weight of attention distribution from left to right is as follows:
In this chart, the abscissa of each article represents 100 pixels, and 100% of the ordinate represents the time from when the user starts browsing from the far left until he exits the page.
People spend more than twice as much time on the left side as on the right side, and they make the obvious choice:
The left half took 69% of the time; the right half took 30% of the time;
The remaining 1% of browsing time is spent in the first 1024 pixels that can be browsed. Some information can only be seen after horizontal scrolling. This information suggests that we should fix the horizontal bar to avoid horizontal scrolling.
The information we are talking about here in the "lower column" is actually the part beyond the screen on the right side of the screen, not literally "below". On the other hand, if you compare horizontal and vertical browsing, users in the vertical direction will skip about 20% of the information, while in the horizontal direction they will only ignore about 1% of the information. (I think I’ve actually said up to twenty times that the horizontal scroll wheel is terrible because it really annoys users and attracts less attention.)
Our study used a 1,024 × 768 monitor. With a larger display, we hope to see more content on the right with less scrolling, and the same is true in normal mode.
The leftmost section usually includes a navigation bar, so it’s no surprise that it grows in attention after 200 pixels, plus the 300-500 pixels where it gets the most attention. People tend to focus on the main content area in the first line from the beginning.
Language left-to-right reading direction
Usability research we conducted in areas with left-to-left reading habits found that people pay more attention to the beginning of a line. Obviously, in these languages, the text begins on the right. Even so, we may not necessarily find the corresponding Eyetracking implementation. For example, Arabic and Hebrew also have the above charts. (It roughly means that when the reading habit of a country or region is from right to left, then their attention time distribution graph will form a mirror image of the graph above, that is, the abscissa is written from right to left.)
The reason is that websites in right-to-left reading languages don't always have a left-to-right layout design. Here are the layouts from the websites of Dubai newspaper Emarat Al Youm and Israeli newspaper Haaretz:
Emarat Al Youm is a true right-aligned website. Unlike this, Haaretz is a site with right-aligned text but still has a left navigation bar. Therefore, this eye tracking (Eyetracking, let me translate it this way for now) research may be more complicated than our ordinary English website.
Prioritize regular layout
Returning to languages where we normally read from left to right - say Chinese, English, Russian, or even Japanese - what do our findings mean?
Simply put, stick to a traditional website layout because it fits perfectly with how people browse the web.
Keep the navigation consistent on the left, which is what people expect to find in a list;
Pay more attention to the arrangement of main content from left to right;
The most important content should occupy one-third or even half of the entire page width. This is where users focus most;
Keep secondary content on the right. It won’t get too much attention, but it’s enough – not every piece of content can get a top spot, and you need a place for less important content.
Interestingly, the layout of the website shown in this large image is very similar to the layout of mainstream intranets. But this is just a website.
Dominant browsing patterns and web page layouts clearly evolved into a relationship of subordination:
People are trained to pay attention to certain places because the most important information is usually distributed there;
Currently, when companies create website layouts, their information is arranged according to how people distribute their attention across the page.
If you deviate from the traditional layout, some users will change their attention habits when browsing your website. If you place important stuff on the right, it may happen that those (fewer) users in that area will spend more time discovering this information than the typical user domain.
It's not like if the user decided beforehand: "I'm going to spend only 2.5% of my time looking from left to right, looking at 1000 and 1100 pixels for this segment."
Regardless, the price you pay for deviating from traditional design is: when users initially browse your page, they will spend a lot of time looking for what they need.
If your web page layout meets the user's browsing needs, rather than being placed in a non-traditional location, they may find information easily and accomplish what they want without realizing it.
And, when your website is something users take for granted, your business will run more smoothly.