Banner Advertising picture design: Enhance the user experience and happiness

Source: Internet
Author: User
Tags contains

Article Description: in the design, to make the user to promote the banner contains information clear and profound understanding, you need to pay attention to the following two points: the right amount of stimulus, coding smooth.

First of all, review the advertising process of cognitive psychology: Advertising psychology contains the following processes: unintentional attention → attention → enhance the effect of persuasion (memory and reproduction, imagery and association) → Emotion and decision-making.

In the previous article: When designing and popularizing banner, how to make the information hold the user's eyeball in the first stage of the cognitive process--unintentional attention. Next, enter the second phase of the cognitive process--intentional attention: When people have a desire to promote banner, there is a need for further understanding, and will actively focus on information and further processing. This article through the intentional Attention theory analysis, makes the promotion banner not only can attract the user, but also can make it in the processing information smoother and comfortable, enhances the user experience and reads down confidence and the joyful feeling.

Intentional attention means that there is a predetermined goal, if necessary, will also need to pay attention to the effort; in psychology sometimes intentional attention is also called positive attention or will attention, because it requires personal initiative and will effort. Intentional attention to the active obedience to the purpose of the task, it is consciously regulated by people's consciousness and control. The clearer and deeper the person's understanding of the purpose of the activity, the more profound it is, all the things related to the activity are more likely to attract intentional attention.

In the design, to make the user to promote the banner contains information clear and profound understanding, you need to pay attention to the following two points: the right amount of stimulus, coding smooth .

Right amount of stimulus

(1) The number of blocks in the banner is not more than 5: On the one hand, too many blocks will distract the user's visual focus, create a messy sense, on the other hand, banner appropriate to stay white, to prevent overcrowding.

There were 4 banner blocks before the modification, although there were no more than 5, but by contrast, the modified banner had 3 blocks, but the integrity was greatly enhanced.

Banner is divided into 4 blocks before modification

Modified banner to 3 blocks


(2 ) color remains in 3-5 to prevent visual fatigue in between

Modified before the banner color as many as 8, although very beautiful, but banner the main text information is not very well highlighted, after the modification of the banner color control in 5 kinds of, not only banner good-looking, but also the contents of a more clear, at a glance.

Before modification

Revised two-piece

(3 ) Information Unit ≤7 ±2 a group block

1956 American Miller published a famous paper "Mysterious seven plus minus two", short-term memory (also known as working memory, refers to the information once presented, keep within a minute of memory) breadth is 7±2 block, memory span refers to the material presented once after the test can remember the most of the The size of the short time memory span does not determine its number of items, but determines the size of its block, which refers to the combination of several smaller units into a familiar, larger unit, which can be 7 letters, 7 familiar words, or 7 common phrases.

The more chunks that are presented in the banner design, the more cognitive resources are required to process information, and the more laborious and time-consuming it takes. And the user is the "minimum effort" principle of browsing the Web page, if the group too much, users to avoid laborious processing will give up to continue browsing, so the number of blocks should be appropriate, preferably not about 7 pieces.

Modified before, banner the elements are arranged separately, each element is divided into groups of 5 blocks, no doubt increase the cognitive burden; After the modification banner will put together the content of the nature, the composition of names, addresses, contact information three blocks, reduce information processing units, reduce the cognitive burden more conducive to processing.

Modified before modification

(4) in the display of advertising, to avoid multiple elements of dynamic display (GIF format)

The change of several elements at the same time dynamic display will make the user can not grasp the focus, resulting in visual fatigue, modified only to focus on dynamic processing, primary and secondary trenchant.

Before modification

After modification

2 , coding fluency:

(1 Text style is the same or similar, to prevent the font style contrast too much to maintain cognitive fluency easy information fast processing.

Modified before modification

(2) When the size of the font in the banner up and down, the use of small print can be appropriate to exaggerate the word spacing, Chinese characters are appropriate to reduce word spacing: Visually make the two harmonious, reduce the span of sight and avoid forgetting

(3 content coherence does not jump, text or pictures continuous uninterrupted

When a user browses a Web page, the brain will perceive things that function in the senses as a whole, that is, by interpreting the information and organizing it to explain it, to know its meaning and to form a complete impression. In the perception of information as a whole, according to the Gestalt Psychology School of study, the brain follows close, similar and continuous organizational principles:

Gestalt psychology, also known as Gestalt or Gestalt psychology, was founded by Whitheimer, Kaufholz and three German psychologists in 1912, and is a psychological theoretical system that pays attention to the whole organization. They believe that the aggregation of elements is not a bunch of unrelated, fragment units and chaotic aggregation, but rather the principle of similarity, proximity, continuity and so on to become a meaningful whole.

So when we watch banner, according to the principle of similarity and the principle of proximity, components that are similar in physical properties or that are more closely related to space or time are easily organized together to form the whole, so that the combination of elements of the same type can save users two of times and save the allocation of cognitive resources. And good classification can make banner conform to the Chinese reading habits, from left to right from top to bottom of the typesetting, to help users save time and effort to facilitate the processing of information.

Before the modification of the banner with the text information of the small content is not put together, causing users to browse the visual jump, after the modification will be the same type of elements to integrate, not only to facilitate the user processing information, but also in line with reading habits, can be said to kill birds with one stone.

Before modification

After modification

Finally, thank the Egg East classmate tireless design ~!



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.