"User Experience" in the eyes of a page refactoring engineer

The word "user experience" is often seen in people's eyes when the industrial design is integrated into people's life. With the advent of the internet web2.0 era, large and small web site design also began to pay attention to the user experience, what is the user experience (Baidu four words, than I write any explanation is good) do not do detailed details, I believe that we know more rich than I do.

User experience from the product design phase began to intervene, such as the prototype design interactive mode design, functional implementation of the design has been integrated into the design of the user's care, heard the words: "A good user experience of the product, not only depends on a rich experience in interactive design product designers, Also with the production process of each link whether there is a good sense of user experience has a certain relationship.
Today I want to start with a page refactoring engineer's perspective, from two aspects to talk about the user experience I understand in my work, and what I did with the user experience.

one, from usable to easy-to-use details processing 1. button, link, navigation menu mouse trigger state, mouse hand type, etc.

With the development of visual design, the performance of buttons, links, or navigation menus becomes extremely rich, for example:

These images enrich the visual expressiveness of the form of mouse clicks. Based on the availability of the premise, gradually through visual rendering to beautify the effect, with a beautiful design, you need the page reconfiguration engineers to cut, in the process of code, usually to do the following considerations:

clickable area size, for example (below) although the style seems to be the button only 10*10, but in the implementation, consider the user is not easy to manipulate the anchor point, rather than point to point to find the

mouse action type prompts, mouse input prompts, hand tips, text area prompts, not clickable prompts, although the entire page's visual guidance is more important, but the user in the operation, the human eye has been following the mouse or keyboard operation and conversion, if accompanied by the correct mouse operation prompts, more can enhance the guiding role. To enhance the interactive experience. Button style consistency, button current state and click state of Unity, button according to the function of the unification,


The designer's imaginative imagination has endowed them with creativity, and we should not only retain their creativity but also abstract some common features, in my opinion, there are 3 types of buttons, if it can be effectively differentiated, the overall style of the site to build and strengthen the interactive feeling will have a certain consistency, At the same time in the page building process will be drawn from the public information, very easy to manage and maintain. 1) such as confirmation, cancellation, etc., can be called penetration Type 2, such as login, add concern, can be called the focus type, this type in the actual work usually from the visual is slightly stronger than the penetration type, so it will suggest that the designer to do a certain unity, sometimes the style, sometimes the structure, and again is the size of the proportion of 3, such as Bowen, Hair Weibo, such as buttons, can be called enhanced type, usually this type will not limit the designer to do according to the standard type, even if it is a special-shaped, we should understand. 4 finally is regardless of which type, all should pay attention to whether has the mouse clicks the hover state, even if the designer does not have the design, also must make the hover interaction effect, at least is the reservation, as far as I am concerned is usually adjusts the color depth based on the original button color as the hover state, Most of the buttons I will consider to make interactive, of course, there are exceptions, such as the active topic of the click Area, usually will not increase the excessive click after the effect, if you want to make a little effect, the most is to adjust the text itself. (I confess I am somewhat fastidious) 2. Alt explanation information for picture

Usually get the design requirements, I will ask the designer to help comb the icon, generally will be divided into two categories, functional, annotation type. At the same time, the two types of images are required to maintain a consistent pixel interval, so that the designer in the process will realize that some text does not need to annotate the picture, some features and annotation types of size, style may not be consistent, carding process designers will go to adjust, It also permeates some rules in the creative process.

Line first to second is an annotation type and the third line is a functional

3. Title hint for text information not fully displayed because of design or typesetting

Products or users often complain "behind the text can not see, what exactly is this content?" "The reason for this is that mainly do not take into account the location of text information and the importance of these words, if it is a picture waterfall flow, the role of the text information is only the index, if it is the article List page or video list page, and even the final page of the text page, the title name is to be all displayed. So in order to avoid torturing users, be sure to show incomplete information to add title, in the presence of defects can also give users a little comfort, otherwise you will too hurt the user's heart.

4. Site logo weight set H1, the main title of the site, the weight of the logo set H2-h6, stong, em, B, etc. (search engine friendly readability)

Consider the user experience at all levels, is to allow users to feel the full range of web browsing without Borders, in the visual and interactive fully play the role behind, the choice of code labels, but also from a certain level to determine whether the user can be better use, the current number of search engines, such as Google, Baidu and so on, In the process of filtering web information, a set of mechanisms to find the main content of your Web page, those of the search engine more friendly tags will be more conducive to page information crawling, in the user search process, put aside the strategic cooperation between enterprises do not talk about, will also show relative position in front of the comparison (of course, if the search engine advertising benefits very good time, perhaps the first screen or not with you, this ... You know)

5. Website Word color consistency, link color, hint color, content character color, etc. (reduce learning cost, cultivate user habits)

Design a set of interactive products (blogs, videos, mailboxes) or user-functional products (consumer products, information products, etc.) also face a problem, user habits, people in fact to the law will be more likely to create a sense of security and more easily increase comfort. So in the process of Web page design, the unified visual feeling not only lets the user feel comfortable to browse the picture text music multimedia and so on, but also can cultivate the user cognition.
So in front of the creative creativity of designers, I always stand in front of them the norms and logic of the Guardian fighter. I don't dare to disturb them when designers are wild, but if someone tells me the style is OK, I will step out and ask the designer to give a set of design specifications, for example:
• Link Color Division main link color and auxiliary link color, not more than 2 recommended, add Class functional area except
• Text color is also the primary and secondary must have, also not more than two kinds of (in fact, how many species can be, but you have to consider how long users spend to adapt to your various)
* Prompt information is divided into ordinary prompts, correct prompts, error prompts, empty status prompts, etc.
• What type of icon is divided into functional icon and annotation icon

6. The various content reads the module which spends a long time, when the content has not already loaded successfully, first displays the Picture Picture List page, or the Video Screenshot list page, displays the initial picture when the picture has not loaded, and the fixed position, prevents the full screen to run the chart

7. Prompt text location without interfering with user action, the interaction consistency is important, such as fixing at a prompt or not affecting the operation of color tips, etc.

In the process of processing the form, will consider the location of the hint information, including the default prompts, error prompts, correct prompts, etc., if the hint style is not uniform, will interrupt the user behavior, the page form fill in the process of fluency is very important, why will mention this, because in the actual work, if there is no interactive design experience, Both the product and the designer often omit all the information about the form-related cues, however, this affects the structure of the HTML in the page build process, so if the previous discovery of product documentation, or the design of the manuscript does not show the relevant content, it is advisable to remind them to consider and add good, reduce the late adjustment of the page structure redundant workload.

Many people will say that these are not page categories, what is the scope of the page, these knowledge has the product category, has the design category, has the user research scope, has the interaction scope, in my view will these biggest benefit is reduces your workload, I thought these are the very basic knowledge, is not must grasp, but best understands, The benefits of understanding are very obvious, that is, in the face of not necessarily reliable needs, can be targeted to give some advice, so as to reduce some rework, or the increase of the experience of fragmentation.

two, from the slowly waiting to the pleasant click of the Change 1. Page module on-demand loading

As the development of Internet products tends to scale and regularization, in the early years, the era of using the whole station to load only one common style has passed, instead of a more performance-optimized modular on-demand load pattern, as shown in the illustration above, the obvious benefit of modularity is the relatively low code redundancy and the small amount of code. In addition to the modular benefits include: clear structure, easy to start, frequent changes in product requirements of rapid maintenance and development, fast offline local module, dynamic adjustment page Module load priority, no need to peel any code; , suitable for the development of large products and many other advantages. Both for the user, or for maintenance development is very advantageous.

2. Page common element reuse the so-called common element, mainly refers to: Reset type various types of text color all kinds of link color floating frame page main frame for the site of the high multiplexing patch type 3. The level of file invocation is reduced as appropriate, and the filename is shortened as appropriate

For example, image/index/module1/limoumou/icon/fabiaopinglun.jpg optimize the directory hierarchy as appropriate
such as, Fabiaopinglun_default.jpg,. commentlistcontent_linedot{} optimize filename length as appropriate

4. Request quantity and background size equalization processing

Picture request several aspect, sometimes you want to consider the CSS Sprite flatten picture to reduce the background number, but also must notice the flattening Picture K number not to be too big, as well as the flattening picture attention aspect ratio, proposed the collage vertical diagram (did experiment, the same content, the horizontal chart volume is bigger than the vertical chart
When the background image needs to be tiled, consider the background picture size as appropriate, such as the 1px high dashed line, please do not cut a 1*2, such as 1*10,1*50, the main consideration is the 1*2 of the tile number of small graphs.
There are many factors affecting page performance, such as the use of hack, the use of position, the use of table and so on. The key is to keep the technology fresh and enrich your knowledge.

The above article just precipitated the past I in the page refactoring work to understand the user experience. Slightly superficial, may be questioned, why write the page also want to add their own icon state or modify the local effect, to know in the early days of the Internet in the Division of labor does not now such a fine specialization of the Division of labor, at most, the reception, backstage, products. Of course, at the outset these things do not necessarily have the professional depth of today, but the dabbling is indeed more wide than today. So a few years ago began to engage in web-making friends, will not be the design of the definition of so obvious, in the image processing is also a certain cognitive and operational capabilities. Not to show off anything, just feel the depth and breadth of knowledge is equally important.

Source: http://ued.sina.com/?p=868