"Precautions" app horizontal Slide Design

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."

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.

4. Control the quantity and avoid the limit situation

Can the contents of the left and right slide be unlimited? Of course not. According to my experience, generally 5-10 cards are good, too little will lead to inconsistent with the user expectations, a slip on the bottom, and too much than to guide users to more detailed topic page, show more relevant information.

It should be noted that if you have no way to control the number of cards under a subject, you must design a backup plan.

Take the following test Lahai as an example, the user Review module will be with the picture comments to slide left and right to show the form, but the number can not be strictly controlled, after all, some products have a lot of pictures with the comments, and some are little or no.

Design, we can see a lot of content and no content of the situation, Koala did the adaptation. But for only one case with a picture comment, the right-hand side of "View all" seems odd.

When it comes to "view all", it is generally required to be in the lane. On the presentation, there is a direct click on the title or title followed by the way of the entrance to guide, and more, there is when the card last slide to reveal "view all", for those who have seen the end of the user an exit.

5. Low-efficiency and error-priority

Designers like the "Left and right" design, not only because of the information density, the page level is good combing, but also because the operation of the "cool". But experienced designers will try to reject "left and right", because it is still too inefficient. and inefficient, reflected in two aspects:

First of all, as mentioned above, more small white users on the left and right sliding expectations are not strong, or more adapted to the traditional vertical sliding mode of interaction.

From the experiments in your work and the interactive data that you share with friends, the left and right sliding components are significantly lower than other normal content in terms of sliding usage and card click-through rates. Sometimes even if the number of cards is not large, swipe to the end of the user is very few. Visible, in the habit of a navigation direction, forcibly inserted a completely vertical direction, user habits are not easy to change.

Second, vertical and horizontal priorities often lead to expected errors. In the app Store, for example, the so-called content is the app, the lanes just use different dimensions to organize the app.

So, is the "new tour of the Week" in the second page of an app priority higher, or "fresh app" or even "appearance" in the first few applications higher priority?

If you want to buy one of the resource bits, do you want the second screen in the higher priority "Swimlane", or the first screen position in the low-priority "Swimlane"?

The answer is of course the first screen will be able to see the higher priority of information, the data will also have a higher click-through rate and exposure. But in fact, this is inconsistent with the expectations of many designers and product managers, who focus on putting high-priority things up, but neglecting the very low trigger rate of the left and right sliding interactions.

At the same time, more software choose not to use "left and right", and directly disclose the content, such as reading:

To sum up, we hope to use the "left and right" this form of interactive scheme, there is some help.

Article Source: http://www.haitaoit.com/news-list-82-0-1.html

"Precautions" app horizontal Slide Design