Discussion on how to create the atmosphere of website

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

The internet in the process from the push of information to interactive and user-generated from the era of progress, we pay attention to the new profit model, focus on refined user marketing, focus on user experience research, focus on better information architecture and page display, at the same time, we often ask, Whether our website gives the user a kind of atmosphere that embodies the demand of the brand.

In the project, often with the product manager discussion, how to create a safe or lively or serious or relaxed atmosphere of the website, to create a relatively clear product characteristics, conveyed to the user, in order to look forward to a good reputation. Which latitude should be grasped, product function? Information architecture? How to operate or visual effects?

Let me give you a few examples to see how the atmosphere of the website affects our experience:

Case 1. Sports Live

Before the revision of sports live, have done user experience assessment, in fact, there are not many usability problems, the key tasks (positioning live content, watch live content, participate in interaction) can also be accurately completed, but many users complained that there is no desire to click, did not feel that they are in a live channel, there is no warm and tense atmosphere.

Figure 1 Pre-Revised sports Live page

Analysis of the page before the revision:

1 interface performance is flat, the visual area divides into two big blocks, the left tree browsing view, by the time dimension and live broadcast two kinds of arrangement way to realize the transformation of the different races, the typical Windows Explorer experience, does not have the time and the match combination the presentation way, lacks to the upcoming competition's prominent demonstration;

2 The right is divided into four modules, "illustrated" static display of hot events, the recommended content in the module and the current live content of low relevance

3 Live chat room and comments in the garbage content is more, no corresponding content screening mechanism, reduce the site's sense of trust

4 Media Media only text and pictures, and the proportion of the picture is less, no dynamic display effect

After the revision,

1 text and picture content operation has been optimized, for the current popular events related to the topic of the subject concerned

2) live access to the rich, according to live content, live channels and information division of the event

3 Excellent relationship between the modules, some of the live content added audio and video multimedia display

Fig. 2 The revised Sports Live page

As a result, the competition of the urgency, the rich information of the game, all kinds of tidbits of the entertainment of the mixed sense of the present, perhaps not the best, but the relatively ordinary before the facelift has made great progress.

Case 2 Public Service website

A natural disaster affecting hundreds of millions of Chinese people, so that the public Service site for a time to appear in front of people, together to see the major portal sites of the public good sites:

Tencent: Standard modular arrangement, the first screen from top to bottom is the banner display map, personal account information, news information and online donations. The proportion of hot news, characters and topic focus is not distinguished. On-page public information display and interactive donations are reflected.

Figure 3 Tencent Public Welfare Network (http://gongyi.qq.com)

Sohu: Pure News Information class layout, a large number of text typesetting, content more for the website editorial News, emphasis on the theme, no participation in the interactive category of columns.

Figure 4 Sohu Public Welfare Network

Sina: The public welfare content for meticulous editing, and the use of a variety of media forms, such as blogs, electronic magazines. The addition of a real-time refresh donation module, the overall participation of the site is higher.

Figure 5 Sina Public Welfare net

The three major portal sites, the same in the public service, but because different display form and focus, convey to the user completely different experience: Tencent emphasizes personal account information, content interaction grasping, Sohu Walk traditional media line, talk about news policy; Sina Content Editor Fine, convey one-stop experience, corporate public welfare, grassroots love, welfare lottery, Music magazines are covered. Personally, and do not say that the contribution of the public good, the use of rich media media, to the grass-roots tilt of the choreography, at least let the people concerned about the public have a sense of respect, while the information transparent and open practices to generate trust.

Case 3 Mood ranking and list display

The atmosphere of the website is not only embodied in the "macro" page layout and content placement. Mood rankings and lists that show this detail can also bring different feelings.

Figure 6 Mood ranking 1

In the above picture, the user's attention point is naturally attracted in different mood types, have different mood to choose, also can see the preference degree, the graphical performance reduced the cognitive discriminant burden.

And when the data is released, the specific data has played a disturbing role. These figures, too big no real meaning, too little, users will feel that they are not come to a very bad site, just so little traffic, boring.

Figure 7 Mood Ranking 2

Look at the following table shows, the type of the Mini blog, the picture plus horn box, a bit of the performance of Q, look forward to conveying lazy loose, talking to himself, nagging, Twitter feeling.

Figure 8 Nagging display list

and hot post referral list, more emphasis on the overall consistency of the sense of clarity, while supporting information (categories, clicks) easy to find without harassment.

Figure 8 Hot Post Referral list (from Youku)

To sum up, this is a kind of detail evasion, will be important, want to convey the focus of the product side in a beneficial way to show out, even the same components, but also according to the transmission of the product characteristics of a focused design.

Case 4 Wealth through the donation page

or a page during the earthquake: Tenpay donate money. Do you have the urge to donate when you see this page?

Figure 8 Fortune Pass (https://www.tenpay.com)

This page highlights two points:

1 Real-time Refresh display total, create a sense of urgency

2 in order to most of the user's emotional point of the text to convert expression, such as living expenses, stationery, desks.

Seeing this, I believe that everyone has the impulse to contribute their little power. The same is to donate money, compared to the number of simple donations, through wording simple changes, can immediately enhance the sense of urgency, sublimation of the meaning of donations.

Case 5 Kaixin

Happy recently very hot, in the net play, time is always like a fleeting, and do not talk about its plug-in application how to fit the user's emotional point, just for me and other lazy people, comfortable nest in the chair, only the mouse keyboard, you can wander around the site, indulge in this kind of not serious, even some small boring lazy atmosphere, It is a happy thing to play often.

1 Fine filter friends, no need to manually enter filter criteria

Figure 9 Pictures from Happy net

2 According to the use of the scene adaptive content, eliminating the keyboard typing operation

Figure 10 Pictures from Happy net

3 all places that may require keyboard input are given a click recommendation

Figure 11 Pictures from Happy net

Case 6 Atmosphere Inheritance

The atmosphere of the website, and part of it is the inheritance of the offline life.

1) Gossip

In real life, when we talk about gossip, all of us are in a hot, endless burst of other events related to the topic to testify, similarly, users see a certain gossip news, timely to the same type of events in the same period to push him, for him, will produce a "enough gossip, I like" feeling, also happy to stroll around to see.

Figure 12 pictures from Yahoo

2 The typesetting of paper-based media

Online information is overwhelming, a mixed bag, and magazine, newspaper topics as has been two processing information, rigorous and more depth. Taking a similar form on a Web page can send a message to the user that we are carefully picking out the information you deserve.

Figure 13 Photo from Qzone Community (qzone.qq.com)

3) Reading

Long afternoon, a bouquet of fragrant tea accompanied or midnight night reading, tireless. Reading is a big event, watching the court time also look at the mood. When it comes to the use of this atmosphere, although a little, but it is sweet enough.

Figure 14 Image from Dangdang

To sum up, want to create a Web site atmosphere can try from the following points to grasp:

1, the module content priority

2, whether the use of multimedia media

3, graphic how to match, the length of the text, the size of the picture

4, page blank ratio

5, static display content and interactive content arrangement

6, mouse, keyboard operation frequency and alternating

7. Need to refresh in real time

8, pay attention to the user group sense of belonging, be respected and other psychological needs

9. Allow Customization

10. Strength and quantity of dynamic effect

11, wording to avoid weaknesses

12. Refine the life experience under the inheritance line

These are some ideas to talk about, welcome more discussion to add. Thank you!