[Good depth !] Research on Sliding operation dimension

Prompt: The explanation in this article is more profound. You need to read it with a calm mind!

 

Preface

At the bottom layer of the IOS interaction model, there is a concept of "space" (specifically, the IOS Space Model), and the most basic attribute of space is three dimensions. Slide depends on the two-dimensional environment of the screen. You can also think about it from the Dimension Perspective. The most common slide operation is to delete short messages in IOS. Here the slide operation is the most basic and can be understood as a one-dimensional operation with a unique function assigned. However, if sliding is thought so simple, it may ignore the ever-changing design that sliding can bring.



 
 
 

When sliding is granted a function and combined with an interface (information or control), it is highly plasticity and can effectively improve the ease-of-use, efficiency, and effectiveness of operations. Based on the sliding dimension, it can be divided into one-dimensional sliding and two-dimensional sliding. Combined with the sliding control interface, it can also be divided into continuous and discrete. Use some instance details.

 

One-Dimensional Slide

Mailbox uses one-dimensional discrete slide when operating the mail in the Mail List:

1. Slide an email entry in the email list to the right. The displayed items are read, deleted, and release based on the sliding distance.

2. Slide an email entry in the email list to the left. The displayed items are classified as to-do items and archive items based on the sliding distance. Execute the items after release.

(Image from ifanr)

The page scaling function of Baidu browser uses one-dimensional Continuous sliding:

1 By default, the most common operations are displayed on the toolbar at the bottom of the interface,

2. When the toolbar slides, the toolbar changes to the page zoom control;

3. Adjust the page scale by sliding the distance (the larger the right corner). The top page is centered on the top left corner of the page to reflect the page scale effect in real time;

4. Release ends the scaling operation to get the scaled page.

 

2d slide

When the sliding function is added or requires more complex control, one dimension cannot be solved, and the dimension can be increased to two dimensional sliding.

By default, IOS video players adopt a two-dimensional slide to control video advances and advances:

Operation: press the slider and slide along the vertical direction. Based on the switching speed of the sliding distance, the slider moves forward and backward horizontally. after release, the video progress takes effect.

Effect: the green line indicates the actual sliding distance of the hand, and the purple line indicates the video advance and retreat margin. Horizontal sliding at different speeds is the same distance, and the video advances and advances are different. the maximum and minimum latencies of High-Speed advances and advances are the same.

 

If you abstract the sliding operation of a video player, you can create a two-dimensional spatial model that controls the video progress through two-dimensional Sliding Speed Control. The following figure shows the vertical sliding mode. You can select the forward and backward speeds in Discrete mode. Slide horizontally to control the video advance and retreat in a continuous manner.

 

Similarly, the page playback function of the ghost browser is as follows:

Operation: When the page is swiped vertically, the page will scroll at the default sliding speed. If you first slide horizontally from the right edge of the screen, you can select different rolling speeds (the more left, the faster the speed ), scroll the page vertically.

Effect: the page with the same distance as the Sliding Speed of the hand has a large scroll margin (the Green Line indicates the actual sliding distance of the hand, and the purple line indicates the page scroll margin)

 

The two-dimensional space model of the rolling function is as follows:

 

The preceding two-dimensional moving examples influence the amplitude control of another dimension by changing the speed of one dimension. The two-dimensional sliding operation of snapseed is easier to use. The function of switching between fixed distance and vertical sliding at any position on the interface controls the parameter size of specific functions. If snapseed's sliding operation is abstracted, a two-dimensional spatial model can be formed to implement function switching and parameter adjustment through two-dimensional sliding:

 

 

As a result, when both dimensions can slide freely, the slide can be changed to dragging. In this case, the drag function is assigned to determine the standard of this function, in addition to the sliding distance mentioned above, it can also be the area where the hand or the dragged object arrives or leaves. For example, in launcher, press apps to go to the second-level interface, and move your hands to the corresponding zone for release activation.

 

 

Summary

Sliding gestures interpret the design concept of "Fuzzy precision" to effectively improve operational availability:

1. easy to learn and form habits.

2. It is used in mobile environments and is suitable for single-handed operations with high efficiency and easy control.

3. By directly operating the object or appearing as needed, the tool bar, menu, and other commonly used controls can save interface space and make way for information.

4 is easy to become the product's killer function and propagation point.

When sliding is granted a function and combined with the interface (information or control), it can have strong plasticity. You can start from the following aspects and think about it in combination with the product features:

1. sliding with simple functions can be one-dimensional. When you need to add a function category or strength, you can increase the dimension to form a two-dimensional slide or drag.

2. When the sliding function is assigned, the standard for determining the category or strength of this function can be the sliding straight line distance. When assigning a function to a drag, the standard can be the area where the hand or dragged object arrives or leaves.

3. Based on the definition of the Controller in human-computer interaction, sliding can control the interface in two consecutive or discrete ways.

Finally, consider the following when designing slide:

1. Slide is not a means of purpose, but a function before interaction.

2. According to the guiding ideology of the Interaction Design from large to small, sort out the function architecture and priority before assigning functions to the dimension, and set the most common functions to take effect by default. For example, the first level of the most trigger right sliding in maibox is granted the most common READ function.

 

In a video player, when the area of the playback progress bar slides, the default is high-speed advance and retreat. When precise control is required, a vertical Sliding Speed Change is adopted.

 

In Baidu browser, the most commonly used toolbar is displayed by default, and the page zoom control is displayed only when sliding.

 
 

3. When analyzing the specific dynamic interaction effect, you can refer to the analysis table (for example) for the mouse drag operation in design interactions to create a sliding table to help clarify the concept (the X axis can be subdivided into the sliding status, the Y axis can be the interface elements and controls involved in the Sliding Process ).

Picture from designing Web Interface

4. Some Complex slide operations have a certain learning cost and can be used as shortcuts. At the same time, they also need to be implemented through regular clicks.

 

References

IOS human interace guidelines

IOS wow factor

Designing great iPhone apps

Designing Web interaces

Human-Computer Interaction

[Good depth !] Research on Sliding operation dimension