Website Design Analysis: Activities page design experience two or three

Another year, the smoke of the main section of the Big electric Dealer website Connectivity Size Portal platform has experienced a round of overwhelming sales and various types of related operations and promotional activities.

Read a number of colorful activities page, combined with recent reading related articles and their own participation in the Application Center activity page Design has accumulated some of the immature experience, summed up about the activity page design some small experience, this holiday season (Ang =_=?), hope to throw some bricks and together with you to find the existence of jade ^ ^.

Activity page Brief Analysis

The Activity topic page, as the name implies is carries each kind of festival promotion, the promotion, the marketing product release and so on Activity's page, the form and the content also various. Typical static activity pages usually use the header banner+ title and the display form of the active entrance, mainly to the background, banner and title font visual processing to foil the overall atmosphere; now more and more active pages will join the game and other interesting and strong interactive way, using flash form to show, This year's Tmall is an excellent example of a red envelope.

In fact, no matter what kind of activity page, when we analyze it, we will find that the information to be displayed in the page can not escape the following seven kinds of ①

1. Title of activity

2. Activity Entrance 3. Event Prizes/Merchandise display

4. Number of participants in the event

5. Effective time

6. Award-winning information

7. How the rules of the activity are properly laid out, and the above information is presented in the best way in the page, is the key to the active page design.

I. Make full use of the first screen and display the core information

The author's suggestion is that the first screen will be the core content of the activity to the user, 2011 Jakob Neilsen Research results show that users will spend more than 80% of the attention on the first screen content, especially the Call-to-action button on the first screen or the second screen, the conversion rate varies enormously. ② the most important core content for the active page is four:

1. What activities?—— the theme of the event

2. When?—— activity time

3. What are the prizes (benefits/benefits)-incentives, discounts, prizes show

4. How to participate in the event?—— participation entrance

· This is the first screen of the active page should be fully contained content (of course, considering the size of a screen, most of the prize merchandise can only show a part).

Figure 2-The first screen contains the title of the page, prizes/offers, participation in the entrance

· Proper control of content components, especially in the first screen, limit the number of words to reduce user pressure.

· Slightly less important information such as award-winning list (most of the action in the active page to foil the role of the atmosphere), activity rules and other content can be considered to the inverted triangular structure presented ③.

Two. The main title and subtitle clarify the value of the activity

What we're going to do is to let users know in a few words from the main title and subtitle that all of the core values that our brands and activities bring to them, yes, all. (Kiss the mud, wake up!) there will never be a user going to see those long-winded rules of activity! TOT)

Title If you can do ingenuity, novelty and chic natural good, but if the time limit can not be sophisticated ideas, there are some principles to ensure that at least accurately convey information do not travel pool:

· Pithy short--user browsing titles tend to sweep through, text will improve the user's understanding of the cost

· Using a user-familiar language-throwing unfamiliar concepts in the headlines is often not a good idea, and users may not be able to read the page directly

· Main Title or subtitle one to directly inform the user of the point of interest and value, simple familiar with such as "free" "Gift Bag" "Li-minus" and other words can play a good effect

· A slightly more brutal conservative but often useful method, verb + noun summarizes the activities of the core operation or process, such as "Play application, Get gift Bag" "Daily check-in draw" and so on.

Figure 3-QQ Net Shopping bag activities (local)

Figure 4-Tencent Game activity page (local)

Three. Participation entrance--the eye participation entrance of the activity page is the key to the active page conversion rate.

As for its design, WAD's article creative call to action buttons for inspiration, and we can summarize the key points:

· The size of a button that is eye-catching but doesn't seem abrupt.

· Located in the first screen, in the Visual center area

· Visual performance--the button uses the contrast color, the gradient, the projection and so on special texture, uses specially designed font, but needs to pay special attention to the font readability.

Figure 5-naver Burger King promotional activity page, the interface is crisp and concise, the Call-to-action button visual effect is outstanding;

Figure 6-Alipay Payment Activities page, lovely light hand-painted wind, the button selected with the background and the main page contrast Orange, and in the center of the first screen;

Figure 7-Jingdong Mall Double 11 book Activity page (first screen), big title, best-selling bibliography outstanding display are good, the defect is the entry of the activity is not eye-catching;

Figure 8-Samsung NX series buy a camera to send the ticket activity page, the page handles the literature and art fresh, but the purchase button and the visual Subject detachment, position slightly embarrassed;

According to the author's personal experience, most of the domestic users tend to the simple and straight point of design, the size of the button to accept the degree of looser than foreign. Therefore, in the design of the audience for the domestic users of the page when we tend to the button for more exaggerated processing (plainly, it can be bigger and more eye-catching).

Four. What do I do with special circumstances?

Not all activities are inherently attractive to the user, in fact, we design the activity page often encounter a variety of limitations-lack of material, prizes are not rich, the activity flow cumbersome, high learning costs and so on, which requires designers to play ingenuity to ensure that the page layout clear, focused, enough to attract users.

· Carry the multi-step operation of the active page, in the first screen to provide a simple signal, so that users scan a glance can understand the activity flow;

The daily draw page of the Application Center lists three steps in the middle of the page, while the three magnified numbers on the page also play a good guide.

Figure 9-Application Center Offset coupon page (local)

· Boldly highlight the core operations in the page (e.g., on the first screen, enlarge the display area or use special visual processing, etc.) to attract users

Under limited material conditions, some designers will try to put the most attractive users of the operation in the first screen, such as lottery, collect gift bag, etc., although sometimes they are not the first step;

Application Center Women's Day activity page, the activity rule is each play one application to obtain a lottery opportunity, but if in accordance with conventional ideas to arrange the page, gift bag display and lottery button will inevitably be squeezed to the second screen, the first screen only tile application list, insipid boring,; so we adjusted the page, will receive the gift package to the first screen, When the user did not draw the opportunity to click on the receipt package, and then give users to play the corresponding guidance of the application.

Figure 10-Application Center Girls ' Day Activity page (local)

Such an approach can be limited under the current conditions to enhance the impact and attractiveness of the page, but at the same time there is a certain risk, will allow users to operate the process and the page correct operation process, increase user error probability.

There is a need to make up for it by other means of interaction, such as the provision of the process diagram mentioned above, or the friendly guidance after making a mistake, and so on. I personally or more understand this design approach, look for the core of the page task and core operations, boldly to the Non-core function to subtract and discard, although the final output may not be the best results, many times this is a necessary and feasible design ideas.

Five. Focus on follow-up-assessment of the effectiveness of activities

Active page after the successful online designer's work has not ended, every activity page after the end of the launch, we can from various aspects, especially data feedback to get a lot of experience and lessons.

A few days ago read Fat Hu Fei's article "Talk about conversion rate", which mentioned a simple and easy to evaluate the way, here to share with you:

The activity is decomposed according to transformation path, and the effect of activity is evaluated by comparing the conversion rate of each transformation path node, which provides a reference for further improving the conversion rate.

We can follow this split idea, split the whole process of the activity--Take the Application Center of the ritual package to extract the activity page as an example, the main process of the whole activity and related pages are as follows:

Entrance (advertising position) → activity page → application list (active page) → gift bag → gift bag Exchange Center → use of gift bag Application page

Figure 11-Ceremony package activity flow and related page splitting

To extract the conversion rate data of each step to control, lock the conversion rate of the most serious node, focus on the solution and improve the way.

To sum up, in fact, for the design of the activity page, I would like to share with you the following words: Pay attention to information expression, make full use of the first screen layout core information (title, participation in the entrance, prizes show); Find the core tasks of the page and highlight the core operations, give a friendly and concise process guidance and hints, focus on activity data, and refer to the data to find the relevant improvement points of the active page. The above are the experience of some of the summary, is still very immature, if you can bring a little thought and inspiration, the author is very satisfied.

Reference:

① Instant winning-active topic page Information expression Law http://isux.tencent.com/sjzs.html

②scrolling and attention http://www.useit.com/alertbox/scrolling-attention.html

③ Instant winning-active topic page Information expression Law http://isux.tencent.com/sjzs.html

Resources

[1] Andy Johns http://www.quora.com/What-are-some-top-strategies-for-conversion-optimization

[2] Isux Official blog "Situational-let the activity page hit the user" Http://isux.tencent.com/%E6%83%85%E5%A2%83%E5%8C%96-%E8%ae%a9%e6%b4%bb%e5%8a%a8%e9% A1%b5%e9%9d%a2%e5%87%bb%e4%b8%ad%e7%94%a8%e6%88%b7.html

[3] Fat Hu Fei "talk about conversion rate" http://www.panghufei.com/?p=10869

[4] yueyi "with the Promotion topic page about de those things" http://www.aliued.cn/2010/09/26/tips-about-promotion-page-design-i.html http:// Www.aliued.cn/2010/09/28/tips-about-promotion-page-design-ii.html

[5] WAD <35 Creative call-to-action button for inspiration> http://www.webanddesigners.com/35- Creative-call-to-action-buttons-for-inspiration

[6] Anon (from alibuybuy), "Advertising effect analysis of the 3 key points" http://www.alibuybuy.com/posts/75687.html

(This article originates from Tencent CDC Blog, please indicate the source when reprint)