Improve web design with eye tracking

Source: Internet
Author: User
Keywords Face web design attention
Tags advanced aircraft application application cases button content design example


You're looking at the machine, and the machine is looking at you. Recently, eye tracking technology has been born a lot of application cases. For example, Intel develops 3D notebook cameras that track eye-reading emotions, and Shanghai's pure software eye tracking can support the use of eyes to play aircraft games. Now Eyequant uses advanced neural technology to study the movement of the user's eye when looking at the Web page, thus generating the design elements and the hotspot map of the page area (that is, the area where the user's attention is focused), and then studying how to improve the Web design. Here's what they found.

What should web design pay attention to

The first finding of eye tracking technology is that the F and e-shaped layout design of the Web (using the features most people like to view the left screen most often) is not necessarily right. As long as the content attracts eyeballs, it is not as much a concern as in the F or e-shaped area. For example, high Contrast, center layout and neatly arranged content. In fact, web design should be more focused on 3 W: What the Web page is saying (What), why users should focus on (Why) and where to go next.

Some web design best practices are challenged

Some of the best practices in web design are challenged by eye-tracking technology. For example, the traditional view is that people always pay attention to the face. Eyequant, who studied thousands of different websites with eye tracking technology, found that the face and attention do exist, but people do not always pay attention to the face. Another web Design view is that to make text stand out, you have to enlarge the font. But the study found that even though some of the pages had large fonts, they were ignored by users.

On the selection and use of gallery

To be compelling, the most important thing is to have a high contrast-not only in the picture itself, but also in a strong contrast to the other content of the page. This is not only the contrast of color, but also the contrast in brightness. The picture needs to be placed in the upper half of the page, in the middle or on the seat. And do not put too messy, you should leave a blank space for the page.

How effective are the heavy image elements such as rotating banners and slides?

Exercise can indeed attract attention at the outset. In other words, it can also cause interference, and these elements tend to be related only to a subset of the users browsing the web, so these elements have a negative impact on the conversion rate for commercial websites.

Is the growing popularity of the Big hero area like Apple effective?

The so-called great hero Zone (Big Hero area) refers to the large image with a small number of text layout, Apple is particularly good at using. If the image is relevant, the Big Hero area is extremely effective, otherwise it will cause interference. If you use a picture of the gallery, you must select a picture that supports the message you want to convey, and don't distract yourself from the other key elements of the page.

Does a long scrolling page still keep important elements in the upper half?

Some of the long format scrolling pages are really successful, and users seem to be getting used to it. But the data show that average users still spend most of their time in the upper half of the page.

How should link buttons be designed?

People are contrasting creatures, so there must be a sharp contrast between a button and a background color, a button text and a button.

Where do users look?

As a designer, you should have the ability to influence what users see and not be slaves to a layout or pattern. The placement of elements on the page is only one of the factors that affect the user's attention. As long as you understand the constructive elements of attention, you want them to see where they will look. What are the factors that affect attention? These four: contrast, position, size and blank area.

[This article compiles from: thenextweb.com]




Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.