Website Design revision story: Design inspiration + with research strength

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

Preface: Immersed in the work at the beginning of the key items, almost forget to write articles, ashamed. Sharing is learning, there is no opportunity to learn without sharing, 2013 should continue to write more. At the same time also summed up 2012 years of writing, found that many times I am interested in various articles, phenomena, writing design notes and thinking. Sometimes thinking all kinds of things, and not summed up very down-to-earth. Later will improve, more to take inspiration text + actual text writing rhythm. Today, is a practical article. It is a story about the designer's inspiration, discovering problems, thinking problems, facing challenges, and using research to work closely together to solve problems and achieve goals. is a complete and rigorous design revision of the story. Here we go.2012 is responsible for Tencent open Platform Application Center products, the first time to seriously look at this product, always feel that what is wrong:

The above page, I saw a main content page, there are banner area, navigation on the left, the middle is app content, the right there is a leaderboard. Keep looking down:

Pull down the page, see the above picture, began a little confused. Because the trend of this page down, did not give me an understanding. The layout of information and content is a bit messy. Navigation and content area of the alignment, so I read less efficient.

Then pull down the page, the above figure. This time the reading disorder began to increase, I saw a variety of information piled up on the page. When the left navigation is over, the content starts piling up, and it appears in a position where I have absolutely no expectations. The app content pattern in the middle is consistent with no focus. The advertisement again let the pattern again disorderly a bit. Here, I have been very difficult to read content effectively. Many designers know that users read Web pages without word for word. They scan, quickly find the point, and then read according to their interests and choices. The focus can be a bold text, a picture, a cleverly formatted paragraph of text, and so on. This page doesn't give me a scan for logic and fun. So my reading doesn't feel comfortable. My reading order for this page is as follows:

As pictured above, I began by reading 1, personal information, and then reading down to 2, navigation, to 3, the content area, because the display of the app is very consistent, without focus, I quickly skipped 3, quickly swept the next 4, not interested, jump to 5, read the list, and soon finished reading. The purpose of this web page is very simple, is to want users to explore, click App, and install and then play. But now the layout does not let me have the impulse to operate this way. There must be a problem. Of course, I'm just a user, a reading case. After the use of research, we invited users to the eye movement tester, will see more reading mode. So here, the designer's inspiration brings some important questions:

The above is only part of the problem, but simple and clear, need to modify the design. To explain the mark in my upper right corner, I think this page has a problem with the content (here is a methodology that mainly elaborates my idea that all product designs are designed to create, consume, and spread the content). The lower right corner is what I think the Web page should be modified in design: User scenarios, information architecture, interactive design, visual design, design details, user sentiment. Designers ' observations, inspirations, and conclusions come out, then what? as a platform product for service Tens users, inspiration alone is unconvincing. In the above Application Center page, all layout, content arrangement, have very rigorous business strategy and data pressure. Any blind modification will have great risks. How to prove your own inspiration? This product revision, has two times with the research point is very important. The first time is the eye Movement instrument test and the analysis. We ask users of the Application Center to perform eye movement testing, to understand the user's reading patterns and to verify our previous judgments.

As shown above, we decompose the entire Application Center page into modules and then help us to observe the user's reading mode through the eye-moving instrument.

As shown above, you can see that each user is reading in a different order. But through the analysis, we find that although the reading order is different, but the result is consistent. Users like I read before, fast reading, can not find the focus, ignoring the app content this key block, the entire layout of the page does not have a clear understanding. To see the conclusion:

Part of the conclusion is as above: In addition to the first screen other page exposure is less, indicating that users are not interested in the content behind the first screen, the user's rough browsing, random click, so that the Application Center clicks Low, installation conversion rate is low. Here's a little bit more. Application Center Product Background: 1, the Application Center such products require high clicks and high installation conversion rate. 2, high clicks need to arouse the interest of the user, let them be willing to explore. 3, high installation conversion rate requires users to pay attention to the content of their interest, so as to ensure that users click on the app will be installed. With research conclusions, there is confidence. Each partner based on our judgment and the conclusion of the research, agreed to start the revision. Our interaction is very much out of an interactive revision:

Interactive changes are simple, directly to the use of research conclusions in the question, and try to solve. Top navigation makes the information architecture clearer. Each content module is also starting to be more structured. In the process of communicating with the product colleagues, we also put the two blocks of film and reading which were completely submerged in the previous page into the key optimization plan (the following visual manuscript can be seen in detail). This time, before refining the design, we did a second time with the research to confirm the inspiration of the designer again. The way is to ask the user to test our demo, the conclusion is coming out soon:

As shown in the above two diagrams, user feedback is very consistent, the page after the revision of the module, information architecture and other points of concern, there are very positive feedback. Next, our vision begins to visually design this new architecture, striving for content first, showing clarity and enhancing user awareness of the Application Center. The design drafts are as follows:

The first screen gives a simple and straightforward structure to the entire page. Users see the first screen can be clearly known, the top navigation is the global navigation, down is banner and the main push information display area, and down, the page began to divide about two pieces, the left is the main content area, the main display app content, the right is the list. The user sees this architecture, can have the anticipation, this page is actually in the duplicate app content area and the list of the left and right structure. Cognition is very simple. In addition, for the app content area, we zoomed in on the main app and added social elements and more detailed explanations. This design arrangement greatly enhances the user's knowledge and interest in the app. (The goal is to increase the click rate and Installation conversions)

To the second screen, first look to the right, the user or as expected to see a variety of rankings, the left content area, or a module to show the content of the module. Especially in the middle module, we also for users to read not tired, using the vertical arrangement, so that the reading experience more interesting.

The focus of the third screen is to give film and reading a special display. Home here, we can not put the film and television to do too heavy, because these two special content block or the whole page part, can not have a distracting gorgeous. But we gave these two blocks a slightly different sense of design, which made it easier for users to recognize the difference between the two blocks. The result of this revision? First of all, sensory latitude, do you think clearer and prettier? Second, look at the data:

As shown in the above figure data: 1, the increase of the overall conversion rate, with a more reasonable overall structure, more reasonable local arrangement related. 2, film and reading growth, on the one hand, because the global architecture is clearer, users will go down, on the one hand because the slightly adjusted design of the two content blocks have been differentiated, attracting users attention. 3, horizontal navigation of the category page click Growth, in line with my previous judgment: Vertical navigation rate is generally descending from the top down gradually, and the horizontal navigation effect will be better, if the appropriate design details to adjust, the user's attention can be led to navigate anywhere. The data speaks for itself, the revision succeeds. Looking back at the entire revision process, in fact, the following figure in the red part of the participation and contribution of the research is very prominent:

My summary of this design case is:

As above, the focus is: 1, the global page changes, change local time, far-reaching, need to design the overall view. 2, adhere to the principles and methodology of designers, confidence, not afraid of pressure. 3, design and user research close agile coordination. 4, the positive results of the design output, can enhance the trust of all designers. Thank you for reading here. Then I will write design articles from the formal revision, local innovation, small design process, design thinking and more latitude. :) Stay tuned.