The user experience that is perceived in the page refactoring effort

Article Description: precipitated the experience of the user I learned in the page refactoring work. 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, in the beginning these things may not have the professional depth of today, but involved

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.

First, from available to ease of use of the details of 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 has become 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 only 10*10 button, but in the implementation, to consider whether the user to operate is not easy to get anchor points, rather than point to point to find
  
  
• Mouse action type of 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. Thus enhancing the interactive experience.
• The consistency of the button style, the current state of the button and the state of the Click, the unity of the button according to the function,
  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. 1) such as confirmation, cancellation, etc., can be called penetration-type
2. 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 will suggest that the designer to do a certain unity, sometimes is the style, sometimes the structure, and again is the size of the proportion
3. 3, such as blog posts, tweets and other 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. 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 admit I'm a bit picky)

2. Alt explanation information for the picture

Usually get the design needs, 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 of the rules in the creative process.

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

3. Title hints for text information not fully displayed due to design or typesetting

Products or users often complain that "behind the text can not see, what exactly is this content?" "The reason for this situation, 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. Website logo weight Set H1, the main title of the site, the weight of the logo set H2-h6, stong, em, B, etc. (for 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 that)

5. Website Word color consistency, link color, hint color, content word color, etc. (Reduce the learning cost, cultivate the user habit)

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. Suggestive text location without interfering with user operation, the interaction consistency is very important, such as fixed at a prompt position or not affect 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.

Second, from slowly waiting to the change of pleasure click

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 the rapid maintenance and development, fast offline local module, dynamic adjustment page Module load priority, no need to peel any code, facilitate the collaborative development of many people, reduce the collaborative development of many people, each other 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 elements, mainly refers to:

Reset Type

various types of text color

all kinds of link colors

Floating Layer Frame

Page Main frame

High-multiplexing patch type for this site

3. Reduction of the level of file invocation, where appropriate, reduction in filename

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. Balance of request quantity and background size

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.