Web Design Analysis: page details processing experience to make users feel more intimate

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

The details of a page, from the perspective of refactoring, the granularity of the page, the readability of the code, scalability, code comments for downstream services, interactive interface style writing, code compression, picture optimization, etc. can be classified as the details of processing, my understanding is that Just mentioned the details of the process is every refactoring engineers should have the basic skills, can not be regarded as the true meaning of the details, good detail processing should be from the user, should be from the heart of a user care. There are two examples below, are we do the page when the common plate, if we carefully deal with, may make users feel more intimate.

Carousel Map

As shown above, the toggle button on the carousel (such as the small square button above) is an important entry point for the user to interact with the carousel graph. Important degree of doubt, in the analysis of the design draft found that the button's clickable area is too small, only 22x2! to the user to complete the picture switch is obviously a very painful thing, This will give users a bad mood. So we have to find a way to make the click area bigger.

Possible solutions:

1, the suggestion product lets 10243.html "> visual designer to change the button to be bigger."

After the product is known, we will first use the code to turn the button up, give a screenshot for visual designers to see.

The height is 3 pixels, the vision is fine, but the click area is still too small, the following figure:

High to 4 pixel, click Area reluctantly acceptable, but the visual designers feel that the button is too large, poor visual effect, the following figure:

As a result, the designer insists on using the original button size

If you redesign the button, change the way the button behaves? Obviously not feasible, visual designers will not change the visual style for a small change, even if the designers agree, after the change to the design manuscript to the product audit, through the review and then to the reconstruction, obviously this method of communication costs and changes are too high, cost-effective.

2, retain the original design, through the CSS to control

The structure of a button such as a carousel diagram we typically write this way:

To implement the color block area is 22x2, the actual point area is 22x12, two methods:

1, with the background: this color block is relatively simple, pure color square angle, the style can be completely controlled, there is no need to use the background map;

2, with the style control: in order to make the point area of 12 pixels high, then the action element of the standard box has the following several ways

A, height+padding;

B, Height+border;

C, height+ pseudo Element (E:after/e:before);

Because the background color will affect the padding area, consider compatible with the high and low end browser, a mode does not apply, B and C can be used

Let's take a look at the B-height+border,css code as follows:

When you run the code, you'll find that IE6 and IE7 appear normal, but the border area of Chrome, Firefox, Opera, and ie7+ is also populated with background colors,

(Chrome, Firefox, Opera, ie7+)

(IE6, IE7)

Let's take a look at the C-way--height+ pseudo Element (E:after/e:before), the CSS code is as follows:

This time the chrome, Firefox, Opera, ie7+ display is normal, but IE6 and IE7 do not support pseudo element E:after and E:before, the color block disappears:

(Chrome, Firefox, Opera, ie7+)

(IE6, IE7)

Therefore, we have to use B (Height+border) IE6 and IE7 for hack processing, the final code is as follows:

To this end, the clickable area of the Carousel button is increased from the original 22x2 to the 22x12, is 6 times times the original, so that users can easily complete the switch to the picture, shuxin operation.

Online Effect: http://daquan.xunlei.com/download_channel.html

Navigation

Site navigation, general will have 3 state of the design: normal, hover state, selected state. In order to be beautiful, many products like to remove the link dotted box:

So we add a CSS style outline:none to the a tag and remove the dotted box. However, IE6 and IE7 do not support this attribute, in order to be compatible with IE6 and IE7, in the a tag plus the hidefocus= "true" attribute, even a lot of students may add to the user is very unfriendly onfocus= "This.blur ()".

Onfocus= "This.blur ()" and hidefocus= "true" can all be implemented to eliminate the IE6, IE7 click Dashed Line, but the former will cause the link to focus on the trigger lost focus, the focus back to the beginning of the document. The latter is the private property of IE and does not cause the focus to be lost when the link focus is triggered

Why do we emphasize the focus of links? Considering that the visually impaired will use the screen-reading software, the read-screen software will read the contents of the Tagged tab, while onfocus= "This.blur ()" interrupts the tab path of the visually impaired user, resulting in the tab cursor not focusing on the next controller of the page (link, form fields, object, and so on.

Interested students can read Taobao ued: "The blind webmaster abhorrence of the onfocus=" This.blur () "

The following figure is a comparison of the method for removing dashed boxes in this article

In fact, as the "blind webmaster abhorrence of the onfocus=" This.blur () "author wrote," The existence of dotted box has its rationality, I also agree. Suppose there is a scenario where you go to a site to look up information, and when you find the right information, just want to move the mouse to open the link, found the mouse is broken, but you want to change the mouse before the data read, so you will press the TAB key to find the focus of the link, this time, the dotted box will help you quickly find the link, Happy to complete the material reading.

Although the probability of the occurrence of this scenario is negligible, it is undeniable that this people-oriented design starting point is good and reasonable. We looked back at the need for dashed boxes, the practice of removing the dotted box clearly violates the design intent of the dotted box, and the compatible IE6 and IE7 methods do not conform to the principle of separation of structure, style and behavior, so we have to think of a design intention that satisfies both the actual demand and the dotted box. And does not affect the way the page is structured. Now the online processing method is:

1, to the navigation of a label plus a a:focus pseudo class style, so that the same as the hover style, show tab selected state

2, IE6, IE7 does not support A:focus pseudo class, then keep the original link dotted box, do not make hidefocus= "true" processing, elegant downgrade, ensure tab optional

Online page navigation: http://daquan.xunlei.com/

(Chrome, Firefox, Opera, ie7+)

* Note: Opera tab by default only select the form element, to use CTRL + UP and DOWN ARROW keys to select the link

(IE6, IE7)

As you can see with opera's classmates, the link border style still exists when the link gets the focus, as shown in the following figure:

Visible CSS Outline:none does not make Opera's link box removed.

The workaround is to customize a outline style, and then make the border transparent, so you can handle this:

e:focus{outline:1px Solid Transparent}

The demo of this method is attached:

Demo:http://cued.xunlei.com/demos/dq_home_demo/home_20121224.html

Perhaps ordinary users will not use the tab to select links such operations, but we can not take care of the special user base, and like navigating this kind of site in the important location of the link, should be given care.

For refactoring engineers, these small technical processes do not require a high cost of implementation, do not handle all can be a high-precision reduction of the design, visual designers will not require us to put the Carousel button click Area to become larger, the product will not let us to the Navigation link tab selected style, but there is a problem we have to ask ourselves , who is the page for? After thinking clearly, I believe we will be more concerned about the user experience, pay more attention to the details of processing, will not be more than a few lines of code to feel trouble or unnecessary, within our capabilities, a few more lines of code can bring more users, why not do it?

Remember once brought my master said to me, refactoring engineers should not meet the 100% reduction design manuscript, but also to pursue 101% reduction, more than 1% is the page details of the control, can be said to be refactoring the initiative of the engineer. This 1% percentage is insignificant in 100%, but if handled well, it can make the page more explicit.