Why in the app design, should be careful to use the left and right horizontal slip design?

if you want to subscribe to this blog content, automatically sent to your mailbox every day, please click here

The mobile screen is getting bigger, but the user's demand for content is increasing. How to reveal more content within a limited screen is the focus of the designers ' research.

Common content Development design includes: Y-direction List sliding, Z-direction 3D Touch, entry-type content folding, etc. Today I want to talk with you, is one of the "Left and right" card-type interactive design.

The so-called "horizontal sliding" interactive English called "Horizontal scrolling Lists", the earliest possible origin of the Windows Phone horizontal content sliding design. Used to expand the content space in the X-axis direction of the same page, the "Left and right" interactive approach is widely used in various apps.

But there are two sides to everything. When the "left and right" interaction puts more content on the page, it also creates experience risks such as poor visibility, confusion of priorities, and non-prominence of content. Therefore, in the use of this design must be prepared to ensure that it has the most effective.

Next, I have encountered some of my own design "experience" and "pit" to share to everyone.

1. Select the appropriate usage scenario

The information structure of single page multi-dimension is the most suitable application scenario for "left and right horizontal sliding". The traditional List is suitable for vertical rendering of a single attribute content (such as a circle of friends or the answer), and for the APP homepage and other Information aggregation page, it is suitable for horizontal development of content dimensions.

The latest version of Airbnb, for example, divides the home page into multiple dimensions, such as Banner, popular experiences, experiences, listings, and destination selections, each of which occupies a single row and shows a juxtaposition of content. Looking at the IOS app Store, it also divides the pages into dimensions and presents different applications.

Designers are visually calling this design "Swimlane."

(https://medium.muz.li/the-horizontal-scroll-interface-46b8f69f54ff)

As you can see, the focus of the entire page of Airbnb and IOS App Store is made up of "Swimlane", although there are two navigation directions for X and Y, it is not difficult to navigate. However, more complex scenes are interspersed with "left and right" in a list of Y-directions, when there are more pits.

2. A conspicuous and appropriate theme display

As you can see from the information priority, the "subject" of each swimlane is very important. In general, the area of each small card in the landscape is not too large, so it is not possible to both display their own information, but also inform the entire Swimlane theme.

For this reason, there must be very strong visual information that always leads the entire swimlane. The most common practice is to set a conspicuous "caption" above the lane.

More recently, it is often more exaggerated to give a strong content atmosphere directly to the left of the lane. To the left of the Light mans reading the old version of the APP page for example, the picture + text atmosphere of the practice although greatly emphasizing the theme, but also a great waste of the presentation of efficiency, contrary to the principle of content first, the effect is not good.

To this end, Light mans reading is also changed to a small area, high visual priority in the latest version of the title form.

3. Guide left and right slide (visibility)

There are many ways of booting, the most common three methods are: Left and right arrows, the bottom plus indicator, the subsequent contents of the missing part.

However, there must be a clear sign to tell the user that the following content can be left and right sliding. In particular, when your user audience is very broad (ordinary e-commerce, news reading, etc.), older small white users may not be as designers and product managers on the "left and right" interaction so familiar with, which will indirectly lead to the efficiency of this way down.

For example, Instagram has recently added a number of images to the left and right, but we have found that the indicator at the bottom of it is very difficult to detect when the first piece is very eye-catching, and the indicator does not work well.

Read the full text >>

Why in the app design, should be careful to use the left and right horizontal slip design?