Web Interaction Design Analysis: Interactive component micro-innovation

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

The history of interactive design is that the innovative interactive model has been widely accepted as the standard, and the old interactive pattern has been eliminated continuously. So the development of interactive mode is also a "natural selection, the fittest" process. This is a share that was made in 09 at carbonated drinks, where innovations have now been widely used. Because the theme is consistent with the current UX platform's goal of encouraging innovation, paste it again:

Interactive design is a creative work, using innovative ways to solve product problems beautifully, is an interactive designer value embodiment. When the innovative interactive design is recognized by the users, the industry peers to learn, but also a huge sense of professional satisfaction. This innovation is not necessarily a revolutionary design that surprises the world, and a small interactive component of innovation can make the product experience a lot more. Today we will share with you some of the four common ways of interactive component innovation through some cases.

Let's think about the two scrolling ways of reading PDF documents: 1, Hand tool drag 2, scroll bar.

To look at the back of the information, with hand tools to drag up, with the scroll bar is downward drag, the two ways of operating the principle of what?

Divide the document into visual area A and overall area B. The scroll bar slider corresponds to the visual area A of the document. So the scroll bar drags the visual area A, and the hand tool drags the whole area B, and the main body of the two ways is different, so the direction is the opposite.

The scroll bar can be understood as a thumbnail of the document in a vertical direction, and the slider can represent the current position of the viewable region and the proportion of the viewable region to the overall area. As the overall area of the document increases, the proportion of the viewable area becomes smaller, so the slider height keeps getting smaller. Statistics of IE, FF, office and other commonly used software, general slider height to 8px will no longer shrink. When the slider height is only 8px, the drag experience of the scroll bar is quite poor.

Google Wave has made bold innovations in the scroll bar.

1, up and down buttons and the slider together (benefits: from the slider to the top and bottom button of the mouse movement distance shorter; problem: Click the up and Down button, the slider can not follow the motion)

2, scroll bar slider height fixed (advantage: solve the problem of the small slider; problem: cannot represent the proportions of the viewable region)

These two modifications optimize the problem of the traditional scroll bar, but raise the scroll bar basic properties ("position" and "scale") problems. To address the new problem, Google Wave's scroll bar introduces two new elements:

1, Translucent gray block (click the Up and Down button, the slider can not follow the motion, the translucent gray block motion-solve the position problem)

2, the termination (wave content is increasing, the end of the position is constantly downward, used to express the overall height of the content-to solve the scale problem. Unfortunately, this termination of the visual effect of people think is a drag, easy to cause confusion. )

Google Wave has taken so much thought to innovate the scroll bar, but also face the problem of user habits caused by the complication of the scroll bar. Personally think that this rolling-piece innovation is due to product needs, wave a page may exist at the same time 4 scroll bar, when 4 traditional scroll bar at the same time on a page can be imagined. Wave scroll bar Whether visual or interactive is very "light" design, and the product as a whole is appropriate.

====================================================

Apple's improvement to the scroll bar is simple and effective: Add anchor points.

MAC official website: Add Anchor point horizontal scroll bar, click Anchor Point, Slider scroll to corresponding position

iphone music Album list: Add anchor scroll bar, touch letter, list scroll to appropriate position

Adding anchor points allows the scroll bar to increase navigation and positioning, making it easier to use.

The common conditional search box is the "input box + Drop-down menu + button" Three controls, the appropriate combination of controls can bring better results.

1, "input box + drop-down Menu" combination

Sina Weibo's search box, the Drop-down option to merge into the input box prompts, select the search scope of the operation more convenient. #p # subtitle #e#

A drop-down menu with input operations, such as Google Reader, makes the Pull-down menu easier to use. (This combination of controls is common in software such as word and Photoshop, such as font selection controls)

2, "button + Drop-down Menu" combination

The Watercress and Flickr search buttons are followed by a drop-down arrow, which is combined with the Drop-down selection operation (the design of Flickr is consistent with its website's leading navigation bar experience, which is slightly abrupt in its entire station)

The standard file upload component is made up of the input box (pseudo) + Browse button + Submit button. It is called "pseudo-input box" because it mainly assume the role of the display file path, so Firefox click on this input box is to start file selection operation, Chrome is the pseudo-input box into a button, restore control the most original role.

The use of standard file upload components will often appear two submit buttons, the above figure for example, the most frequent misoperation is: After the selection of files, directly click "Save Avatar Settings", so the cup with.

Gmail attachment to upload the design of the file upload component to do two times slimming surgery.

The past Gmail attachment upload steps are: 1, click on "Add Accessories" (click to appear without a submit button upload components), 2, select files (automatically start uploading after the election). Removed the submit button.

Now the Gmail attachment upload steps are: 1, click "Add Accessories" (click to automatically start uploading, and upload progress bar). Remove the input box and submit button, only a browse button, upload only need one click operation.

The traditional way to turn the page is "prev + page + next page", the most familiar design.

Source Address: http://ux.etao.com/posts/259