Interactive components micro-innovation how to improve the user experience

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.

I. Innovation of scroll bars [reconstruction method]

　　

 

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.

2. Innovation in the combined search box [Combination Method]

　　

 

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)

3. Innovative File Upload components]

　　

 

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.

Iv. Paging innovation [Alternative method]

　　

 

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

　　

 

Bing Image Search

Google reader

View image purchases

In recent years, this "Endless Rolling paging" Paging method has emerged, that is, the scroll bar is dragged to the bottom and the subsequent content is loaded, there is no longer a link like "Previous Page + page number + next page.

　　

 

Relatively speaking, "rolling pages" such as twitter and Iphone app store are not so radical. Keeping a page turning button is a compromise between traditional page turning and endless page turning.

　　

 

Google book search is a clever flip design. When you hover your mouse over a local area (about 50 Px in height) at the bottom of the document, a translucent layer appears. Click this layer to start turning pages. This huge page turning button greatly improves the convenience of page turning and has little impact on the interface.

The innovative page turning component mentioned here replaces the traditional page turning component with a new page turning method. From the perspective of information structure, traditional paging refers to segmentation of information, while "Endless Rolling paging" refers to information scrolling. These two methods correspond to the prototype in real life: Books and film, books split the information into pages to flip, and the film information is rolled over by frame.

　　

 

In terms of information flow speed and page turning convenience, "Information rolling" is much larger than "Information segmentation ". How should we choose the two paging methods? I think this should depend on the user's demand for the following content. For scenarios such as google search result pages, where the information quality is lower, the user's demand for page turning is not that strong. Google reader is not a scenario of sorting by information quality. It is necessary to provide a high-speed paging method. It should be noted that rolling pages is not conducive to accurate content locating and information backtracking.

The speed of information flow has a great impact on the mentality of Information recipients. The faster the flow speed, the smaller the amount of information absorbed. Therefore, reading pdf documents is more impatient than reading paper books and cannot help turning pages, it is "scanning" rather than "reading" (personal subjective feelings, such as similarities are inevitable)

In addition to the architecture information, the interaction designer should also control the flow rate and supply of information.

Summary

　　

 

Finally, I would like to summarize the four ways of interaction component innovation with an image.