User attention is a valuable resource for a product. No matter how good a product or function is, only when it is first seen and discovered by users can it play its original value and become an added component of the product to bring better user experience.
So how do we get people’s attention to a particular place, and make sure they see what they want to see, or what we want them to see?
Today’s small copy to share with you this article, can guide you to better interactive thinking oh ~
The following article is from VMIC UED, by Joyce
preface
The essence of business competition is competition for users’ attention.
Only the product that wins the user’s attention can survive in the brutal market competition.
In the second half of the Internet, the demographic dividend disappears. How to serve the existing users well, seize their attention and improve product functions has become the core of all major products.
As designers, we are in charge of the presentation layer of the product, determining the user’s first impression and desire to explore the product. Whether based on intrinsic interest or external stimulation, when users open our products and see our design interface, it has become an increasingly important mission for designers to be able to quickly convey the core information through interface design and seize the attention of users instantly.
Therefore, every designer must understand and master the design skills to attract the user’s attention, and build a bridge between the product and the user.
Today, we’re going to talk about the 4 secrets designers use to get attention.
A, sports
Exercise is arguably the most effective way to attract users’ attention.
Biologically speaking, there are two types of cells in the retina: cones and rods. The fovea (about 1 percent) is filled with about 3.5 million cones, which are responsible for high-resolution resolution of focused objects. Ninety-nine percent of the area around the fova is filled with about 125 million rods.
Rods have a very important function, which is to detect motion.
The rods, like scouts, are constantly on the lookout for changes in the surrounding environment, reporting and guiding the cones to look at the slightest hint of trouble.
From the perspective of evolution, focusing on the elements of movement is the most important skill our ancestors relied on to survive. After all, in harsh living conditions, any animal that moves either eats us or is eaten by us, and missing either is not good for our survival.
In this environment, our unconscious mind learns to manipulate our eyes to look at moving objects 60 to 110 milliseconds faster than our conscious mind, which is a life-time difference that helps us survive the competition.
Because attention to a moving object is an involuntary, unconscious process supported by ample rods, movement is the most effective and overused way to direct attention.
Application scenario:
In the interface design, adding appropriate action effects to the elements that most want users to pay attention to and operate can effectively improve the click conversion rate of this element.
Take this example:
In this case, the popup window is modal, exclusive, and will focus the user’s attention on it, and when the popup button is combined with zooming and gesture guidance, almost no user will miss or reject it.
Figure 1. The package effect of Himalaya
Scaling involves changing from small to large, and our rods are particularly sensitive to this type of motion, because when an object is small to large, it is more threatening than other forms. (In nature, it means that things come closer to us and pose the greatest threat to us.)
Gestural guidance stimulates our mirror neurons, causing us to unconsciously imitate the behavior, thereby facilitating the transformation of behavior.
In addition to this additional movement factor, we can also explore the movement attribute of the element itself and show it, which will be more suitable for the scene.
For example, for many video products, preview GIFs will be provided when the cover is provided for users to choose, so that users can better pay attention to and understand the content, thus promoting the transformation of the content itself.
Figure 2 Vivo I video GIFs
This use of the element’s own motion attributes is relatively easier for the user to accept (rather than view as interference) than additional motion effects.
So the challenge for designers to add movement is to make the movement look as natural and interesting as possible by combining the elements themselves and the nature of the scene.
Second, the human face
Faces are also a proven effective way to direct the user’s attention.
The fusiform gyrus is a visual area of the brain that is specialized for face recognition. This brain region allows faces to be noticed and recognized quickly, bypassing the usual visual parsing channels.
Humans are social animals, and with the exception of people with autism, it’s human nature to look at faces. Experiments have shown that even newborns less than an hour old prefer to look at objects with obvious facial features.
Social beings are almost defenseless when faced with a human face, especially one looking directly at a user.
Application scenario:
In some situations showing pictures of people, showing people’s faces as much as possible, especially if you can see the eyes, can significantly improve the visual appeal of the picture.
▲ Figure 3 Visual attraction of human face and eyes to the audience
Whether you’re designing a cartoon character or choosing a material, using a picture of a human face with eyes is a great way to increase the visual attention of the image.
For example, the cat-raising activity on Tmall’s Double 11 last year made good use of the visual attraction of faces and eyes to users.
▲ Figure 4 Taobao cat raising activities
For another example, in terms of the specifications of anchor cover materials, we will encourage anchors to upload pictures with clear facial Outlines and eye contact with users, so as to improve the attractiveness of anchor cover to users.
▲ Figure 5 Anchor cover suggestion
Three, contrast
Contrast is the most common design technique to highlight the main information on the interface.
A phenomenon known as the bounce effect is how easy it is to find a red flower on a green leaf or an orange button on a black surface.
▲ Figure 6 Jump out effect
In a sequential search (above), the user has to search through all the letters in order to find the target letter T. In a pop-up search (below), the target letter T pops up like a champagne cork.
According to Tressman and Grader, the pop out effect is due to the presence of a system in the visual cortex that detects simple physical features such as color and shape, allowing our senses to quickly locate all objects that match that feature. But the bounce effect doesn’t show up in every search, because it’s impossible for every search object to have its own probe.
The visual system has neurons that recognize several visual categories that go beyond color and simple shapes in ways that previously existed.
So when we design the visual detector, the simpler the design is, the more recognizable it is.
For example, the most intuitive color, shape, size (thickness), virtual and real, projection, mood, etc. In these simple dimensions, make a strong contrast effect, can be very attractive to the user’s visual detector.
3.1 the color
Color is the first language of interface design. Bright and prominent colors will always catch the user’s attention in the first place.
▲ Figure 7 Pictures from the Internet
Especially when the page color is relatively single, the more significant the color is, the more likely it is to produce the jump out effect (such as the left picture relative to the right picture, the jump out effect of the left picture is more obvious).
In addition to the special color of the element itself, the design often adopts the method of adding element color to enhance the visual attention of the element in a short term. For example, the common red dot and operation label are decorated with additional element color to enhance the visual eye-catching of the original information.
▲ Figure 8 Screenshot of wechat and Vivo video
3.2 the shape
Because the visual cortex has a system for detecting simple physical features (such as color and shape), it can quickly produce a bounce effect for simple, differentiated images.
At the same time, according to gestalt principle, human vision naturally prefers simple shapes, and the simpler the shape is, the more it can attract users’ attention.
▲ Figure 9 Jump out effect and simple principle
So, a circle in a pile of squares, it creates a pop out effect, bringing people into focus.
Compared with multiple complex graphics, the smoother and simpler the edges of the graphics are, the better the focusing effect will be. Circle is the best focusing shape among all shapes, so many logo designs and posters like to use circle to attract users’ attention.
▲ Figure 10 Pictures from the Internet
3.3 size
The visual attraction of size is related to relative position.
When two elements are juxtaposed (separated), generally speaking, the larger the element, the greater the visual weight, and the easier it is to attract the user’s attention.
However, when two elements overlap, because of the principle of body and background, the large figure will be regarded as the background, and the small figure will be regarded as the main body, and the small figure is easier to attract the user’s attention.
▲ Figure 11 Body and background
So when we design, for juxtaposed elements, we can use different sizes to reinforce the large main body.
▲ Figure 12 Screenshot of QQ music
It is also possible to focus a smaller subject with a larger background through the use of subject and background.
▲ Figure 13 Muji Poster (photo from the Internet)
3.4 the actual situation
Virtual-real simulates the relationship between near and far in the everyday visual world, with close objects clear and distant objects blurred. The clearer the object, the more likely it is to attract the user’s attention.
The ground-glass effect commonly used on mobile phones is to let the user focus on the current subject through the effect of virtual and real.
▲ Figure 14 ios phone screenshot
3.5 the projection
In Material Design, the concept of the z-axis is also introduced on top of the plane formed by the X and Y axes of the screen. The Z-axis represents the height relationship between layer elements on the plane. This height relationship is mainly reflected by projection. The larger the drop shadow, the higher the layer position on the Z axis.
▲ Figure 15 Position relationship between projection and z-axis
In Material Design, the elevation of all components is clearly defined to avoid high conflict between elements of different layers when laying out.
▲ Figure 16 Definition of component altitude in Meteria Design
The higher the altitude, the heavier the projection, the higher the visual hierarchy, and the easier it is to attract the user’s attention.
▲ Figure 17 Elevation and projection case demonstration
Take vivo video as an example:
Figure 18 Relationship between visual hierarchy and projection in Vivo I video
Head operation position, the highest altitude, the heaviest projection, hoping to strengthen the user’s visual focus; The second is you are chasing, user demand is the highest, projection is the second; Finally, the recommended floor of the long tail, no projection.
3.6 the mood
Human beings are social animals and are very sensitive to the emotional changes of others. The stronger the emotions are, the easier it is to arouse the attention of users. If you want to enhance the expressive force of characters, you can attract users with fuller emotions.
▲ Figure 19 Full emotions are more visually appealing
Four, instinct
Humans have three brains: the old brain, the midbrain and the new brain, which have evolved gradually.
The old brain evolved first, and its job was to constantly look at the environment and ask the question: Is he going to kill me? Can eat? Can I have sex? These elements of survival are all the things the old brain cares about (danger, food, sex).
The midbrain is the part of the brain that processes emotions, so it’s more sensitive to emotions.
The new brain is the conscious, rational, logical brain that we think is the most capable and powerful brain.
But in real life, about 95 percent of our decisions come from the unconscious, and only 5 percent of our decisions are conscious.
Because the old brain and midbrain are working all the time, while the new brain is just slacking off most of the time.
That’s why we can’t ignore danger, food, and sex, because our old and midbrains are constantly looking for clues in our environment.
For example, on a road that has had an accident, traffic is often jammed not because the road is blocked, but because drivers’ curiosity and attention to the dangerous scene cause the traffic to slow down and cause the traffic to jam.
No matter how much you control yourself, you can’t resist attention to danger, food, and sex because that’s what the old brain does.
▲ Figure 20 Pictures from the Internet
Instincts are actually the most attractive, and they are put last because they can’t be directly used by designers in interface design, but they can be used in games and business activities.
If you can use pictures of attractive people or dangerous situations in your scene, select some of these as they are really magnets for the user’s attention.
summary
There are four key tricks designers use to get their users’ attention:
▲ Figure 21 Summary of secrets to attract users’ attention
1. Movement (including its own movement + additional movement elements)
2. Faces (especially those with eyes that interact with the user)
3. Contrast (including color, shape, size, imaginary and real, projection, emotion, etc.)
4. Instincts (including danger, food, sex)
In daily design, we can first consider the feasibility of using these four large dimensions, and then consider the specific attraction points under the dimensions. It is worth mentioning that these four dimensions can be combined to maximize visual attention.
reference
① Book: Attention: The Science and Training of Attention
② Specification: Material Design
Finally, we still want to say that good design results must be matched with a good enough cloud delivery platform to ensure the delivery quality of our results! Replicas is an All in One one-stop cloud platform, which can not only provide the product development team with high fidelity design, design draft delivery, whole-process collaboration and design specification management, but also ensure that the team of 100 people can use it for free! Go and try it