"User Experience" in the eyes of a page reconstruction Engineer"

　　

 

Nowadays, with the integration of industrial design into people's lives, the word user experience often appears in the eyes of people. With the advent of the internet web era, website design, large and small, has also begun to focus on the user experience. I will not elaborate on what is the user experience (Baidu is better than what I have written, I believe everyone knows more about it than I do.

The user experience comes in from the product design stage. For example, in the prototype design, the interaction mode design and function implementation mode design all integrate the designer's care for the user. I have heard such a sentence: "products with good user experience depend not only on a product designer with rich interactive design experience, it also has a certain relationship with whether there is a good user experience awareness in every stage of the product production process ".

Today, I want to talk about the user experience I understand in my work from the perspective of a page reconstruction engineer, and what I did related to the user experience.

1. process details from availability to ease of use

1. Buttons, links, mouse trigger status of the navigation menu, and mouse-type

With the development of visual design, the presentation of buttons, links, or navigation menus becomes exceptionally rich, such:

　　

 

These images enrich the visual expressiveness of mouse clicks. On the premise of functional availability, visual rendering is gradually achieved to beautify the effect, with a beautiful design drawing, it is necessary for the page reconstruction engineers to cut, in the process of code, the following considerations are generally taken:

You can click the area size. For example, although the style button seems to be only 10*10, you must consider whether it is easy for users to obtain the anchor, instead of not finding the anchor.

　　

 

Mouse operation type prompts, mouse input prompts, hand prompts, text area prompts, do not click prompts, although the visual guidance of the entire page is more important, but when you operate, the human eye is always switched with the mouse or keyboard operation. If the correct mouse operation prompt is displayed, the guiding effect can be enhanced. This improves the interaction experience.

The consistency of the button style, the unity of the current status and click status of the button, the unity of the button according to the function,

The imagination of designers gives them creativity, and we need to keep their creativity and abstract some shared features. In my opinion, there are three button types. If they can be effectively differentiated, there will be consistency between the establishment of the overall style of the website and the enhancement of interaction feelings. At the same time, the public information will be extracted during the page building process, which is very convenient for management and maintenance.

1) such as confirmation and cancellation, it can be called a penetration model.

2) such as login and attention, it can be called the eye-catching model. In actual work, this type is usually slightly better than the eye-catching model in terms of vision. Therefore, designers are recommended to be consistent, sometimes in style, sometimes in structure, or even in size ratio

3) buttons such as blog posts and Weibo posts can be referred to as "enhanced". Generally, this type does not limit designers to follow the standard type. Even if it is a special shape, we should still understand it.

4) In the end, you should pay attention to the hover status of mouse clicks regardless of the type. Even if the designer has not designed the hover, you should make the Interaction Effect of the hover, at least reserved, in my opinion, the color depth is usually adjusted based on the color of the original button as the hover state. I will consider interaction effects for most buttons, and of course there are exceptions, such as the click area in the activity topic, it usually does not increase the excessive obvious effect after clicking. If you have to make a little effect, you can adjust the brightness of the text at most. (I admit that I am a little picky)

　2. alt interpretation information of the image

　　

 

Usually, I will ask the designer to help sort out the icons in two categories: functional and annotation. At the same time, the pixel ranges of the two types of images must be consistent, so that the designer will realize that some texts do not need to be annotated, some of the functions may be different from the size and style of the annotation type. In the process of combing, the designer will adjust it and also penetrate some rules in the creative process.

　　

 

The first and second rows are the annotation type, and the third row is the function type.

　3. title tips for text information not fully displayed due to design or layout

　　

 

　　

 

Products or users often complain that "what is this content ?" The reason for this is that the location of the text information and the importance of the text at that time are not taken into account. If it is an image waterfall stream, the text information serves only as an index, for an ultimate page, such as an article list page, video list page, or even body page, the title name must be displayed in full. Therefore, in order to avoid suffering users, we must add titles to incomplete information. In the case of defects, we can also comfort users, otherwise, you will be hurt too much.

　　4. The weight of the Website logo H1, the main title of the website, the weight of the logo set H2-H6, stong, em, B and so on (friendly to the search engine readability)

Considering the user experience at all levels, the goal is to make users feel as full as possible the endless web page browsing. Behind the full play of vision and interaction, the selection of code labels, it also determines whether users can better use them. Some current search engines, such as Google and Baidu, Are filtering webpage information, there is a set of mechanisms to find the main content on your web page. tags that are more friendly to search engines will be more conducive to page information capturing. In the process of user search, aside from the strategic cooperation between enterprises, it will also be relatively displayed in the front position (of course, if the search engine's advertising efficiency is very good, maybe the first screen is still not with you, this ...... You know)

　　5. Consistent website color, link color, prompt color, and content color (reducing learning costs and cultivating user habits)

Designing a set of interactive products (such as blogs, videos, and email addresses) or user function products (such as consumer products and information products) also faces a problem and users' habits, in fact, people are more likely to have a sense of security and more comfortable with the law. Therefore, in the web design process, a unified visual experience not only allows users to conveniently browse pictures, texts, music, multimedia, and other information, but also cultivate user cognition.

Therefore, in the face of the creative power of designers, I always lie in front of them, the standard and logic guard. I wouldn't have dared to interfere with the designers when they were busy, but if anyone told me that the style was correct, I would have stood up and asked the designers to provide a complete set of design specifications, for example:

• The link color is divided into the main link color and secondary link color. We recommend that you do not set the link color to more than two types, except for the feature area added to the category.

• The text color must also be used as the primary and secondary nodes. Similarly, there should be no more than two types of text colors (in fact, there are many options, but you need to consider how long the user will take to adapt to your varied needs)

• The prompt information is classified into common prompts, correct prompts, error prompts, and empty status prompts.

• What icons are categorized into functional icons and annotated icons?

　　6. for modules that take a long time to read various content, when the content has not been loaded successfully, the image list page or video list page is displayed first. When the image has not been loaded, the initial image is displayed, fixed positions to prevent full screen running

　　

 

　　

 

　　7. Interaction consistency is very important when the prompt text location does not interfere with user operations, such as a color prompt that is fixed at a certain prompt location or does not affect operations.

When processing the form, the location of the prompt information will be considered, including the default prompt, error prompt, and correct prompt. If the style of the prompt is inconsistent, the user behavior will be interrupted, the smoothness during page form filling is very important. Why do we mention this? Because in actual work, if there is no experience in interactive design, no matter whether the product or the designer often misses various prompts related to the form, but this will affect the HTML structure during the page building process. Therefore, if the product document is found in the early stage, or the design draft does not show the relevant content, you may wish to remind them to consider and add it to reduce the redundant workload for later page structure adjustment.

　　

 

Many people will say that this is not a page category. What is the scope of the page? The knowledge includes product, design, user research, and interaction, in my opinion, the biggest benefit is to reduce your workload. I think these are basic knowledge, not necessary, but it is best to understand. The benefits of understanding are very obvious, in the face of unreliable demands, you can give some suggestions in a targeted manner to reduce rework or increase the experience.

　2. Changes from waiting slowly to clicking happily

1. On-Demand Loading of the page Module

　　

 

As the development of Internet products tends to be more and more in scale and normalization, the era of loading only one public style on the whole site in the early years has passed. Instead, it is a modular On-Demand Loading Mode with better performance, as shown in, the obvious advantage of modularity is that code redundancy is relatively low and the amount of code is small. In addition, the benefits of modularity include: clear structure and easy to use; fast maintenance and development when product requirements are frequently changed; fast removal of local modules; Dynamic Adjustment of page module loading priority, you do not need to strip any code; it facilitates collaborative development by multiple people; reduces code coverage during collaborative development by multiple people; and is suitable for developing large products and many other advantages. It is very beneficial for users and maintenance and development.

　2. Reuse of common page elements

The so-called public elements mainly refer:

Reset type

Various text colors

Various link colors

Floating layer framework

Main Page framework

High-reuse patch types for this site

　　3. Reduce file calling levels and shorten file names as appropriate

For example, image/index/module1/limoumou/icon/fabiaopinglun.jpg can optimize the directory level as appropriate

For example, fabiaopinglun_default.jpg and. CommentListContent_linedot {} optimize the file name length as appropriate.

　4. Balanced processing of requests and background sizes

In terms of the number of image requests, sometimes you need to consider CSS Sprite image combination to reduce the number of backgrounds, and pay attention to the aspect ratio when splicing images, we recommend that you splice the vertical chart. (In the same experiment, the volume of the horizontal chart is larger than that of the vertical chart)

When the background image needs to be tiled, consider the size of the background image as appropriate. For example, Do not split a 1*2 small image, such as 1*10, 1*50, the main consideration is the number of tile times of a 1*2 small image.

There are many factors that affect the page performance, such as the use of hack, position, and table ...... The key is to keep the technology fresh and enrich your knowledge.

The above article only precipitated the user experience I learned in my previous page reconstruction work. It's a little superficial, and you may wonder why you need to add icons or modify some of the results when writing pages. You need to know that there is no such specialized division of labor on the Internet in the early days, there can be at most one front-end, back-end, and product. Of course at the beginning, these things do not necessarily have the depth of today's major, but they are indeed more extensive. Therefore, those who have been engaged in creating web pages in the past few years will not clearly define the design and production. They also have certain cognitive and operational capabilities in image processing. It's not about how to reveal things, but about the depth and breadth of knowledge.