How to create a website atmosphere

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 kind of 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. One of the hot news, people and the topic focus is not the priority of the proportion of distinctions. 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 and so on. 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 all 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 to most of the user's emotional point of the text to carry out the conversion 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 the filter criteria

　　

Figure 9 Pictures from Happy net