Interface design and experience elevation in the switching of the horizontal and horizontal screens

Source: Internet
Author: User
Tags switches

A week ago hazy the past off, want to have nothing to recall. This is a kind of not bad state, like every morning inexplicable emptiness, they all represent the life and work of at least not very bad things to make people anxious. Have it? Perhaps just to coax and comfort themselves.

A short translation of a magazine, suitable for this afternoon to do, suitable for such a weekend to read. Walk on.

At the moment, the main function of the accelerometer built into the smart mobile device is to determine the display mode of the screen according to the device orientation, that is, to switch between the horizontal screen and the vertical screen mode. This feature allows the user to get extra layout patterns with simple actions, without having to manipulate any interface elements or entity buttons. For us, this is an opportunity to enhance the product user experience, but there are also challenges, we need to fully understand the different orientations involved in the use of the situation, and ensure that the difference between the two modes of experience does not give users an abrupt feeling.

Almost all types of mobile applications can benefit from the display mode switching function. This article will revolve around this topic, introducing some basic concepts that can be applied to practical work for application designers and developers, as well as helping to understand the challenges and solutions that may be encountered in practice.

Switch display mode through device orientation

YouTube's mobile apps are a very typical case. In the vertical screen mode, the video window is small, but the related information is rich, while in the horizontal screen mode, the video expands into full screen, and provides the user with more comprehensive playback control function. When the video playback is finished, the interface mode automatically switches to the vertical screen state, which prompts the user to switch the device and view other videos through a more comprehensive navigation and information index.

However, in some cases, the second display mode will also give users confusion. In the case of Cardmunch (LinkedIn's business card scanning and browsing tool), its horizontal screen mode transforms the entire list of interfaces into a "merry-go-round" view. (Related reading: iOS user experience parsing-space model and merry-go-round view)

This horizontal screen interface lacks visual cues about directional switching, and it offers virtually no functional action, and users cannot add or edit business cards, and can browse and enter the details interface. In particular, if the user opened in a horizontal screen at the beginning of the application, then in the absence of guidance and hints, they are very likely to be unable to discover the vertical screen mode interface and the corresponding content and function.

Design Patterns

How should the new view be rendered after the device's orientation has been changed? We have summed up four common design patterns.


Similar to the liquid layout in web design. In accordance with the new display specifications, the interface elements of the position and size of the response adjustment. Typical product cases include Skype and pocket apps.


In this mode, the interface increases or decreases layout elements (usually navigation) depending on how the screen is oriented. For example, IMDB's ipad app will add a left-hand navigation list to the horizontal evaluation mode, while in the vertical screen, the user can click "All works" in the interface to expand the list.

For such applications, their content and functionality should not be increased or decreased as the display mode is switched--the way in which some key interface elements need to be adjusted. Don't let users have to maintain some sort of orientation to get specific content and functionality.


The form of content in the two display modes can be complementary and auxiliary relationships. For example, in the case of financial class, in the vertical screen state, information can be presented in the form of ordinary data lists, and after the switch screen, you can take full advantage of the new interface width, in the form of statistical charts to display data.


The second display mode can be extended and enhanced as a default state function. For a simple example, for the application of the remote control class, vertical screen state of the default interface can contain some of the most basic functions and channel information, while in the horizontal screen, users can not only see the full channel of the program scheduling, but also in this view to perform channel switching, set video time and other operations.

Determining the default Orientation method

Above & Beyond is an interactive ebook on the ipad. It has horizontal, vertical two display modes, in which the vertical screen mode provides a larger, more detailed quality of the work view, but only in the horizontal screen state will be the default display "Return to the main menu", "Comments" a class of interactive functions.

For the ipad, however, the vertical screen is the default orientation. So when the user opens the application for the first time in the vertical screen, the system prompts the user to click on the screen to pull out the relevant function--the designer is very considerate in this regard.

But for Andorid and Windows 8 tablet, and BlackBerry Playbook, their default orientation is a horizontal screen. Then in these devices, the interface display mode strategy and related guidance prompts will need to change accordingly-we want to ensure that the default display mode content and functionality in accordance with the target device itself by default orientation mode characteristics.

Understand the context of the application

Context is the key component of user experience design in mobile application (related reading: the analysis of iOS user experience elements, designed for the context of application), which can also play an important role in considering the problems related to screen orientation and display mode switching.

As an example of the increasingly popular recipe applications, many hardware manufacturers have even created related wall or desktop support for these applications, making it easier for users to use in the kitchen.

We can also create a differentiated display pattern based on the demand use cases in different use scenarios for this type of application. Take the Betty Crocker cookbook as an example, when users want to read and learn recipes in a relatively stable state, he can use the vertical screen mode, the interface will display complete cooking and recipe information, but also include the final effect diagram and related functional elements. If the user wants to make a reference while cooking on the kitchen side, the horizontal screen mode is more applicable. In this state, each step of the operation of the guide will occupy a screen of space, larger font size, easy to identify in a short period of time, the use of built-in cameras, the application can also identify specific body movements, users do not need to touch the screen, as long as the camera in front of the hand, the operation

To guide the user to switch between different display modes

Switching the display mode by turning the screen is not intuitive to some extent. If there are no visual guides and hints in the interface, the user is likely to miss another display mode and the corresponding functional experience. Take the iphone's own calculator application for example, if the user does not know that it can also provide a horizontal screen mode, it will miss those advanced computing capabilities.

The user is prompted and guided by visual elements, which can make the product experience more intuitive (related reading: A guided Mobile application interface design pattern). Let's look at some design ideas that can be used to prompt the user for a display mode switch.

Title bar

Using the title bar as a hint, this approach is mainly used in the second display mode. Still using the previous remote control application as an example, if the user opens the application in a horizontal screen state, he will see a fixed display on the left side of the title bar, where the caption text direction will imply that he will turn the screen to read, thus discovering the vertical screen mode.

Toggle button

Similar to the standard share button, we can also use the universally recognized icon button to prompt the user to manually switch the screen display mode.

This toggle button is included in both display modes. After the user clicks, the display mode automatically switches, although the next user may not really switch the device to view, but they understand the application in this way the two display modes, in the future will gradually in need of the device, no longer need the auxiliary button. So the button can trigger the switching function, but also can be used as a visual cue.

The toggle icon may not necessarily appear as a standard button:

It should be noted that this approach has its own risks, in the interface to add some non-standard, persistent auxiliary elements, which in itself is a certain controversy. But the simplicity and effectiveness of this approach are obvious. So also hope that designers can start from this point, expand the idea, combined with the actual situation of the product practice.

Pull the handle.

Use the handle form of the control to prompt the user to drag and drop to expand the second view mode, if the user directly switch device, the second view mode will automatically expand, similar to the effect of the shutter. An animated transition effect with direction gives the user a deep impression of the cascading relationship between the two view modes.


We are accustomed to using these "extra" display patterns as appendages for applying the main interface pattern, perhaps because many users simply do not understand their existence. Through a certain visual cues to guide users to discover that these are also carefully considered and created by the interface model, we can make the application for different use situations to play a greater value, so as to effectively improve product friendliness and experience satisfaction.

Author: c7210

Article Source:

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.