Interactive component micro-innovation how to add color to the website user experience

Intermediary transaction SEO diagnosis 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.

The innovative "reconstruction method" of the scroll bar

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.

Second, the combination of search box innovation "group legal"

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.

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) #p # subtitle #e#

Third, the file Upload component innovation "thin"

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.

Iv. The innovation of page-turning "substitution method"

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

Bing Image Search

Google Reader

Looking at pictures and shopping

And in recent years the rise of this "endless scrolling page" of the page, that is, the scroll bar dragged to the bottom of the start load after the content, and no longer have "prev + page + next page" such a link.

In contrast, "progressive paging" such as Twitter and the Iphone App Store is less aggressive, retaining a page-flipping button that is a compromise between the traditional and endless scrolling pages.

The image above is a clever page-flipping design of Google Book Search, where a translucent layer appears when the mouse hovers over a local area (about 50px height) at the bottom of the document, clicking on the layer to start the page. This huge auxiliary paging button greatly improves the convenience of turning pages and has little impact on the interface.

The flip-page component innovation here is to replace the traditional page-flipping component with a new page-flipping style. From the structure of information, the traditional paging is to segment the information, and "Endless scrolling page" belongs to information scrolling. These two ways correspond to real-life prototypes: Books and film films, books that split information into each page, and film footage scrolling through frames.

From the information flow speed and the convenience of paging, "information scrolling" is much larger than "information segmentation." How do you choose between these two ways of paging? I think it depends on the intensity of the user's demand for the following content, like the Google search results page, where the lower the quality of the information is, the less intense the user needs to turn the page. Google Reader This is not a sort of information based on the quality of the scene, the provision of high-speed paging is a relatively necessary way. It should be noted that scrolling page is not conducive to accurate positioning of content and information backtracking.

The speed of information flow has great influence on the mentality of the information recipient. The faster the flow of information absorption is relatively small, so reading a PDF document than reading a paper book mood impatient, can not help but to turn the page, is in the "scan" rather than "reading" (personal subjective feelings, if the similarities are purely inevitable)

It also extends the responsibility of the interaction designer to control the flow and supply of information in addition to the architectural information.

Summary

Finally, with a picture summarizing four ways of interactive component innovation, opinion hopes to enlighten everyone.