QQ Navigation revision Design experience

Product background

Web site Navigation site prototype was created by Li Xingping in 1999, "Web site Navigation"-www.hao123.com from the inception of the original has become the Chinese billion users of the first stop on the internet, hao123 design has become one of the standards of the industry. Initial Li xingping as an internet café Administrator, found that the Internet café users a common: "Many people do not know how to surf the Internet, and do not know where to find the content." "Where does this simple basic need go on the internet?" Supporting the rapid growth of hao123, as of June 2012, navigation site users of the Sell-off coverage of the total number of netizens 40% (220 million!) For such a fast-growing market, Tencent naturally needs evolving products to compete.

April 2011-April 2012 daily coverage of major navigation sites (million people) and market-leading products

Example one: Home page layout

Before the design of a product, the most important thing is to recognize the needs of users. "Where to go online?" Is this demand still the main requirement of our target users after many years? Will the growth of the user and the changes in the Internet environment lead to changes in demand? By comparing the market leader hao123 and the 360 navigation we found that they used a list of URLs in the home page (we'll divide this module into "name Station navigation" and "Cool Station recommended") on the page on the right side of the position, and left to the news, film, games and other content modules. This reflects the need for their main users to grow up from the past "where to go online?" There are lots of places to go online, but what do you see? changing trends. Reflected on the page is from the Pure URL collection and recommendation to the content of aggregation and recommendation.

The following is the layout of the 123 and 360 navigation home pages, because user habits and their gradual transformation into content navigation and portal site reasons, in line with the ' F ' rule of the page golden position is not the name station navigation and cool station recommended:

All right 123 home

360 Navigation Home

More than half a 123 of the user time in 2-3 years and above, and QQ navigation of the user composition formed a sharp contrast. 360 in the design has been followed by a good 123 of the pace, through the security guard and browser bundle, the user composition close to a good 123 is only a matter of time. However, the use of more than 2-3 years and more users have greatly exceeded the QQ navigation.

QQ Navigation User Structure

360 User structure

Good 123 user Structure

Therefore, in the home page structure, because the target user's main demand is different, the new structure and the main competition product formed the sharp contrast.

QQ Navigation V1.0 version Homepage basic structure

In the early research and interviews, we summed up the user to the new version of the navigation requirements of the key words: refreshing, fast, authoritative, intelligent and personality. And in the "My Navigation" to place 10 users of the following Web sites accounted for more than half, up to 53%, the use of 10-20 Web site users accounted for about 20%, 30 more than 6% of the accounting ratio. Up to 75% users browse 10 of the following websites each day. Also some users complained that "the actual URL we often use is nothing more than ten or twenty, such as Baidu, Google, Yahoo, NetEase, Alipay ... such as Cool station, their position is fixed, and now the navigation site content is too much, many are not. "This means that we can confidently start to subtract and move toward a" refreshing "," simple "road?-many times, users don't necessarily say what they want. Without careful attention to the next set of data, it is likely that the design will fall into this user-set ' trap '. In the "Can you navigate the QQ to find your own frequently visited sites?" The answer to this question is that 40% of users are still only partially found. In view of our potential target user loyalty is not high, if the situation is not found, it is likely to become a lost user.

Therefore, the new version of the QQ navigation of the name of the site does not drastically cut the number of URLs, the number of URLs in each row in the same situation will be recommended to reduce the number of Web site a row. The most common and personal information on the top is more visually prominent. The global navigation bar for level two content pages is added below the search bar. In subsequent versions of 1.1, the number of URLs per row will be reduced to 5, and the number of rows you prefer is reduced from 4 lines to 2 lines. and allows users to edit the name of the site navigation area.

Old version QQ navigation home layout

New QQ Navigation Home layout

The next version of the name station navigation will be further streamlined, while satisfying the user on the refreshing, fast, authoritative, intelligent and personalized needs.

By segmenting the target users and adjusting the design for their needs, the homepage of the QQ navigation V1.0 has been affirmed and praised by the users after the on-line. The number speak for themselves (data for proof):

Example two: Edit and add of the name station navigation

Do not deliberately want to make a difference and different effects of the home page has been the user's consistent high praise, can not help us in the design of the name station navigation editing and custom function when the dark determination, we must make a unique design here! But because I want to be different, The editing method of famous station navigation has become one of the most controversial projects from design manuscript to final realization.

Good 123 Add, edit URLs when the interface pops up

360 navigation Add, edit URL when the pop-up interface

At the beginning of the revision, we divided the interactive process of adding URLs and editing URLs. Users generally have a more specific purpose when adding URLs, interactive processes are expected to take a short time, while editing URLs is more fragmented, and many behaviors are generated during editing (for example, discovering new classifications or collations when sorting certain URLs in order or sort), and the interaction process is expected to take longer. Well 123 and 360 both edit or add URLs pop-up guess you like the practice of different, when users click Add URL, we only pop-up non-State add window. This is expected to take a very short time the process is more lightweight and streamlined, in style and competing products in sharp contrast.

But before the final implementation of this program because it may cause the ' guess you like ' the Web site on the user exposure drops and let the product can not be determined to try, we can not determine the current mainstream interaction will not let users dislike (the reason is to add a separate URL and edit the URL of the scene apart, Also take into account that users may be added every time you add, edit the URL pop-up guess you like to feel disgusted with it. For our target users, there may even be the possibility of not knowing where to go on the internet because there is no such a pop-up recommendation URL to feel dazed.

In the absence of resources for testing and the inability to determine the user's response, the final scenario has to be compromised and implemented in a mainstream interactive manner:

Looking back at the original design, the design is indeed based on the user may add the scene and process and subdivide, according to different expectations to give different interactive feedback. With the product review is also confident, that not only meet the different scenarios of users

Need, but also avoids redundant information interference. More importantly, as a designer, the program is different from the main competitor. However, because of the desire to make a difference in the mood is too urgent, but it led us to underestimate the operation of the design, the product in this function needs and focus.

Although 360 navigation and a good 123 of the way each time will be forcibly pushed to the user recommended URL or even advertising, but we have no evidence that users feel uncomfortable with this way;

For the operation and the product, add the URL of the path of lightweight can lead to a significant drop in the recommended web site exposure rate;

For those who have the need to add a lot of URLs, the added way of lightweight is to increase their operating cost.

To be better, not to be different

When deciding on home page layout, we did not emphasize the need to be different, after a comprehensive analysis of the user market and requirements, the design and product parties can easily be in the new version of the agreement. In the design of the name station navigation interaction, although the design is also from the users of the user scenario, but in a competition with the difference between the project, ignoring the final results of the measurement of the quality of other factors and latitude (operational requirements, site exposure and product considerations). The final scenario, although not different in form, has been visually optimized to ensure a better use of the user experience than the previous version.

Here again "It" s very easy to be different, but very difficult to be better "take out the question." Because also on various occasions have heard someone say this sentence is also able to set up, that is, "it's very easy to is better, but very difficult to is different" to do better is easier, but it is very difficult to do something different. For the designers of the pursuit of excellence, many times often better is not enough, but this will bring them into a misunderstanding, is to different. We should only follow the "better" principle in our product design, especially the commercial product design.

Japanese Design Master of the original institute has held a macaroni design contest, but by contrast found in cooking difficult, production costs and appearance of the comprehensive considerations, the victory is the traditional macaroni.

The existing things are not as inspiring as the ' different ' products, but they are often tested by the user and the market to survive. I think good designers will automatically filter this phrase to "hope for a better design" when they hear "a design that wants to be simpler, better and more distinctive." Just the pursuit of better design, no side of the heart of the careful analysis of the products, functions, markets and other factors, nature will allow you to design a suitable for different user groups and needs of products, and because of the diversity of users, in making better design at the same time, "different" often has become a natural.