Portrait mode vs. Landscape mode in mobile design

What is the difference between portrait mode and landscape mode? Or how to design screens?

It should be clear as day. Everybody knows what a screen looks like. Therefore, defining portrait and landscape modes doesn't make sense. You only need to know what these orientations look like and that they originate from terms like portrait photography and landscape photography.

It is worth noting at the outset that the mobile device's rotation from a vertical position to a horizontal one, from portrait mode to landscape mode, can have at least two reasons.

Reasons for changing orientation:

• Engagement resulting from curiosity and interest in the content, offer, and functionalities and being immersed in the process.
• Frustration that stems, for example, from imperfections in a photo in portrait format or from overlapping or merging text with a photo.

Alright, let's move on to indicating differences between these modes.

Because of the difference between vertical and horizontal orientation and proportions between height and width, the screens of mobile devices appear and act differently.

Additionally, they force users to differently:

• Perceive content (especially in the case of photos, infographics, and text)
• Interact with the interface, not just in terms of navigation but also micro-moments and operation with gestures (in particular multi-touch gestures)
• Achieve goals
• Learn how to use an app
• Present and enter data to an app or by an app
• Operate the phone.

The enabled auto-rotate function causes many problems with mobile apps if they aren't designed to be used comfortably in both modes.

From the UX designer's perspective, designing screens in horizontal and vertical orientations causes equally fundamental problems.

Screen design usually concerns:

• Whether the content and data are presented in a responsive way — whether the character, form, content, layout, or screen positioning are adapted to the capabilities and limitations of the given mode on various devices.
• Design of interface, navigation, forms, and entering data into them.
• Design of the layout in which usability, functionality, accessibility, and readability need to overlap with visual attractiveness and flexibility.
• Design of user flow and user journey.
• Design of user experience: the ability to switch seamlessly between these modes allows users to choose a more attractive one in a given context.

Offering an actual choice is always a desirable value.

Portrait orientation seems to be more natural for a user of a mobile device.

Admittedly, it allows them to use the device with just one hand, but it's now always an ideal solution for presenting content and offering functionalities.

Landscape vs. Portrait: what are the differences between these two modes?

Namely:

• Portrait mode is much less spacious and often used to show details (just like portrait images focus on showing facial features).
• Landscape mode introduces greater distance and provides a sense of space availability (similar to a landscape image, hence the landscape name).
• Portrait orientation elevates while providing less context for content.
• Landscape orientation conveys much more information, and it's more natural for presenting content that changes over time (e.g., animations, videos, games).
• Portrait mode works better in situations where a user is forced to navigate, determine distance, and indicate points (e.g., in Google Maps).
• Landscape mode performs better when it's necessary to simultaneously use more functionalities or buttons that have crucial significance for a user (e.g., in games).
• Portrait orientation provides a better tactile experience for a user and is more recommended for reading (most books are printed in vertical orientation).
• Landscape orientation ensures a better visual experience and is more recommended for tracking movement (it's safe to assume that almost 100% of cinema screens are in landscape orientation).

Understandably, both modes also cause many design problems, which are primarily related to application usability and satisfactory user experience.

The Human Interface Guidelines contain very practical notes regarding problems that appear with the change in the orientation of the mobile device.

Guidelines prepared by Apple (iOS) recommend the following:

• Maintain clarity in any size of the screen — mainly, it's about the readability of the text and sharpness of images that should be ensured without the need to perform additional actions.
• Maintain consistency — interface elements should look the same in any mode.
• Place the most important elements at the top half of the screen.
• Pay attention to the change in text size; it should be adapted to the device's mode, size, and diagonal.

You can find a very fascinating and practical supplement to these guidelines proposed by Apple in two articles by Amy Schade, an author associated with Nielsen Norman Group, "Big Pictures on Small Screens: Remove, Resize or Reorganize" and "Small Pictures on Big Screens: Scaling Up from Mobile to Desktop."

Admittedly, both articles discuss designing pictures for mobile and desktop devices (iOS and Android). Still, some of Amy Schade's comments can also be used and are adequate for issues that appear during the design of vertical and horizontal orientations.

After all, image orientation by itself is a crucial element of design since different image formats can be used for different contexts (e.g., landscape images for hero shots or a portrait photo for an article).

Creating mobile applications also requires being aware of the following:

• Pictures that present well on big screens, on smaller ones may have to be scrolled.
• Combining pictures with text causes problems with their readability depending on the scale.
• Appropriate cropping and scaling are necessary if you want to ensure the maximal readability of pictures and text.
• Text placement should be individually designed each time to ensure its maximal readability on various screen sizes.
• Pictures that fit small screens don't always present well on bigger ones.
• Images that are cropped or scaled incorrectly may lose quality, readability, and communicativeness.
• Placement and relations with other design elements can be disrupted depending on the size of the screen.

While most evident in the differences between desktops and mobile phones, the issues mentioned by the NN Group researcher are also observable — with all proportions — in the differences between portrait and landscape modes.

It's about the same thing — maintaining the quality, functionality, usability, and attractiveness of the design in any size.

Design patterns in mobile application orientation design (categories of orientation design)

Avi Itzkovitch's article "Designing For Device Orientation: From Portrait To Landscape" discusses the four most important mobile application orientation design patterns. Itzkovitch's comment mainly focuses on the location and layout of an application interface.

Itzkovitch distinguishes the following variants of the interface change that happens during the landscape-portrait transition:

• Fluid in which layout, placement, and the way icons work don't change; they only adapt their position and size to the new screen size.
• Extended in which the layout, placement, and number of icons change depending on the screen size.
• Complementary in which, after a change of orientation, additional data and functionalities that weren't accessible in the previous mode are displayed.
• Continuous in which access to additional functionalities is provided by turning the device.

Of course, the choice of a particular pattern depends on the platform, type of app, functionality, tasks, and user preferences.

Indicating a universal design solution is not impossible but simply wrong. Particular design solutions should stem from UX research, interface benchmarking, or usability testing.

Portrait and landscape modes in m-commerce

Edward Scott, associated with Baymard Institute, discusses in great depth in the article "Mobile UX: Scale Product Images Proportionally in Landscape Mode (52% of Sites Don't)" the impact of changing the orientation and scaling of product images on sales and user experience of m-commerce customers.

According to the institute's research, half of the customers using the mobile versions of online stores feel the need to switch from portrait to landscape orientation when the former does not offer a sufficiently viewable, clear, and sharp product photo.

Mobile store designs rarely take into account such needs as the need to achieve a goal (purchase) with their help.

The stakes are high because Edward Scott says that as much as 56% of m-commerce customers display the product page to look at its pictures.

According to Baymard's results, pictures of products in m-commerce have a fundamental significance in making a purchasing decision. Product photos are also among the most commonly used content on online store websites.

Considering behaviors, expectations, habits, and needs, an extremely important issue in the context of design, creating portrait orientation and landscape orientation, is to take care of the scaling of photos.

Unfortunately, mobile apps of online stores rarely offer scaled photos proportional to landscape orientation and screen size.

It's obviously harmful because it doesn't provide the expected utility of the images. As we've mentioned, these are the main arguments that are taken into account when making the purchasing decision.

Photos that don't fit the screen cause frustration, which occurs, for example, when attempts to enlarge an image in portrait orientation reduce its readability or aren't feasible at all.

Let's mention another Baymard Institute result. As many as 40% of mobile online store apps don't support touch gestures. Pinching doesn't result in an enlarged product image.

In contrast, as many as 52% of apps don't scale images proportionally in landscape mode. They don't go out of their way to meet the needs of users.

This directly means problems with the mobile app's usability and user experience. A low conversion rate and sales volume shouldn't be surprising.

Visual evaluation of the product is critical (the screen's orientation plays a significant role in it). A picture that allows users to make it in a simple way is very desirable.