Website interaction design analysis: interaction component micro-Innovation

Throughout the history of interaction design, the innovative interaction model has become a standard and the old interaction model has been eliminated. Therefore, the development of the Interaction Model is also a process of "competing for things and survival of the fittest. This article was shared at the carbonated drinks conference in. At that time, innovative things were widely used. Because the theme is consistent with that of the current UX platform to encourage innovation, I will post it again :)

Interaction Design is a creative task. using innovative methods to solve product problems beautifully is a embodiment of the value of an interaction designer. When innovative interaction design is recognized by users and learned by industry peers, it is a great sense of professional satisfaction. This kind of innovation is not necessarily a revolutionary design designed to surprise ghosts and gods. The innovation of a small interactive component can greatly improve the product experience. Today, I will talk about the four common ways of interaction component innovation through some cases.

　　

 

Let's take a look at two ways to scroll through the PDF document: 1. Drag the hand tool 2. scroll bar.

You need to look at the following information, use a hand tool to drag up, and use a scroll bar to drag down. What are the principles of the two methods?

　　

 

Divide the document into visible Area A and overall area B. The scroll bar slider corresponds to Area A of the document. Therefore, the scroll bar is the visible area A, while the hand tool is the overall area B. The two ways to drag the subject are different, so the direction is exactly the opposite.

　　

 

The scroll bar can be understood as a thumbnail of the document in the vertical direction. The slider can represent the current position of the visible area and the proportion of the visible area to the overall area. As the overall area of the document increases, the smaller the proportion of the visible area, the larger the slider height. Statistics on commonly used software such as IE, FF, and Office are collected. Generally, when the slider height is 8 PX, it will not be reduced. When the slider height is only 8 PX, the scroll bar dragging experience is quite poor.

Google wave has made bold innovations in the scroll bar.

　　

 

1. the up and down buttons are connected with the slider (advantage: the distance from the slider to the up and down buttons is shorter; problem: the slider cannot follow the motion when you click the up and down buttons)

2. The height of the slider of the scroll bar remains unchanged (benefit: the slider is very small; problem: the ratio of the visible area cannot be expressed)

These two modifications optimize the traditional scroll bar, but lead to the basic attributes ("position" and "proportion") of the scroll bar. To solve the new problems, google wave's scroll bar introduces two new elements:

1. translucent gray block (click the upper and lower buttons. If the slider cannot follow the motion, the translucent gray block moves to solve the position problem)

2. Termination (the number of wave content increases, and the position of the termination record keeps decreasing to indicate the overall height of the content-solving the proportional problem. It is a pity that this termination of the visual effect makes people think that it can be dragged, it is easy to cause doubts .)

Google Wave has spent so much time innovating the scroll bar and is faced with user habits caused by the complexity of the scroll bar. I personally think that this scroll bar innovation is based on product needs. There may be four scroll bars at the same time on a page of wave. When four traditional scroll bars appear on one page at the same time, the effect can be imagined. The Wave scroll bar is a "light" design in terms of vision and interaction, which is quite relevant to the product as a whole.

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

Apple's improvement on the scroll bar is simple and effective: adding an anchor.

　　

 

Mac Official Website: add the horizontal scroll bar of the anchor and click the anchor to scroll to the corresponding position.

　　

 

Iphone Music Album list: a scroll bar with an anchor. Click a letter to scroll to the corresponding position.

By adding an anchor, you can add navigation and accurate positioning functions to the scroll bar, making it easier to use.

　　

 

The common conditional search box is composed of three controls: "input box + drop-down menu + button". The combination of appropriate controls can bring better results.

1. [input box + drop-down menu] combination

　　

 

The search box of Sina Weibo integrates the drop-down options into the prompt box, making it easier to select a search range.

　　

 

A drop-down menu with input operations such as Google reader makes the drop-down menu easier. (This control combination is common in software such as word and photoshop, such as font selection Control)

2. Combination of buttons and drop-down menus

　　

 

A drop-down arrow is added to the search button of Douban and Flickr, and the button is combined with the drop-down selection operation (the design of flickr is consistent with the experience of its main navigation bar, this design of Douban seems a little abrupt throughout the site)

　　

 

The standard File Upload Component is composed of "input box (pseudo) + Browse button + submit button. This is called a "pseudo-input box" because it mainly plays the role of displaying the file path, so clicking this input box in Firefox is to start the file selection operation, and chrome converts the pseudo-input box into a button, the original function of the restore control.

　　

 

When using the standard File Upload Component, two submit buttons are often displayed. For example, the most common mistake is to directly click "Save Profile Settings" After selecting the file.

The Gmail attachment upload design performed two slimming operations on the File Upload Component.

　　

 

In the past, the uploading steps for gmail attachments were as follows: 1. Click "add attachment" (an upload component without the submit button is displayed after you click it ), 2. Select a file (the file will be uploaded automatically after the selection ). Removed the submit button.

　　

 

Now, the upload process for gmail attachments is as follows: 1. Click "add attachment" (after clicking this button, the upload starts automatically and the upload progress bar is displayed ). The input box and the submit button are removed. Only one Browse button is left, and only one click is required for upload.

　　

 

The traditional paging method is "Previous Page + page number + next page", which is the most familiar design.

　　

 

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