Interface Design for Mobile and Tablets: Landscape vs. Portrait

Last updated on 20 August 2020

Orientation is one inevitable question when designing and/or developing for mobile (or any other display that can be rotated). While some go for a one-orientation solution, “That’s the way the information wants to be, anyhow,” others say that screen orientation should be determined by the task at hand or people’s preference in hardware form factor.

The truth is, there is no single way to determine how to use screen orientation in an app. There are several factors to consider when making that decision.

Theory: Making the Decision

When designing things for people to use, we are obligated to think first about those people and how they use things. That’s Human-Centered Design, and usage context provides the most important input for design and development. Here are specific contextual questions for orientation.

Human Context: Who are They?

Graphic showing differences in hand sizes for adults and children

Children use digital content now more than ever, and they have smaller hands than adults. They also have weaker motor skills than healthy adults do, a human factor that also applies to e.g. stroke victims.

What that means is that some people’s hands might be too weak or too shaky to hold e.g. a tablet in one hand while using it in the other. A landscape orientation invites people to hold a device with both hands, which might provide them with the extra stability they need.

Human Context: Where are They?

Graphic showing differences between holding a tablet in two hands (use with thumbs) vs. one hand (use with the other hand's fingers).

We know that different people hold devices differently, depending on its orientation. People also favor different orientations in different use contexts. When people are concentrated primarily on the device, especially at rest, they favor a landscape orientation, holding with two hands. While on the go or using the device to support another primary activity (e.g. grocery shopping), people tend to prefer the device in portrait, holding it with one hand.

Tech Context: What are They Interacting With?

Graphic showing scrolling patterns on landscape orientation (horizontal scrolling) vs portrait orientation (vertical scrolling)

Thankfully, designers and developers can draw from a long legacy of best practices that tell us how people prefer to carry out certain tasks and how we can best support those preferences. In other words, we know that some Interface layouts and patterns are better suited to one orientation than the other. Large blocks of content and plain-content lists, for example, work best when they can be scrolled vertically; portrait orientation supports that nicely. Multi-faceted views and rich-content lists and, on the other hand,  the work best when they can be scrolled horizontally, a great job for landscape orientation.

Platform is another technical consideration. When building a website, for example, there are no guarantees as to a person’s hardware or browser; the design needs to be flexible. There is also a Split View that adds an extra bit of complexity when considering orientation and layout.

Finally, hardware differences, like button positioning or speaker placement, also impact a person’s experience. Accidentally pressing the home button will ruin a crucial moment in a game; covering a phone’s speaker with your hand makes it harder to listen to music.

Craft: Making it Work

There are lots of ways designers and developers can leverage orientation to make things work better. This Smashing Magazine article illustrates some good patterns and could provide some inspiration. Here are some examples I like.

Mush: Landscape-only, with Tilt Control

Graphic showing the game Mush on a Windows Phone, being controlled by tilting the device

Mush is a really nice mobile game, where the game character moves according to how the player tilts the phone. Because of that, its layout is fixed in landscape. How badly would it suck if your game would be constantly interrupted by a flipping display?

Nokia Transit: Portrait-only, with Good Reason

Three different states of the Nokia Transit app, all in portrait orientation

Nokia Transport is a visually appealing public transportation app that only works in portrait orientation. It seems that the app designers took into account the fact that navigating public transportation is a secondary user activity, subordinate to actually going to and taking that public transportation. Not only does portrait orientation best support one-handed use, freeing users’ attention to be focused on the world around them, it also suits the way the designers have visualized the app’s information.

Nokia City Lens: Going Both Ways

The Nokia City Lens app in both portrait and landscape orientation. Portrait shows a list view of nearby points of interest, while landscape shows the same list in AR over the phone's camera

Another good app is Nokia City Lens, which accommodates different ways of using the same information. In portrait orientation, it shows a list of nearby businesses and points of interest, based on the device’s location. In landscape orientation, it shows that same list in augmented reality, superimposed over the camera’s image of the user’s surroundings. Switching between these modes is a just a matter of rotating the device.

Food for Thought

The NIke Fuel Band, which can be configured to flip its display

This blog post is about using screen orientation in UX design. However, with interfaces disappearing and everything getting connected, a screen may function differently or play a different role than what we have seen so far. The Nike+ Fuelband pictured above, for example, doesn’t have a screen at all, but an LED array. Technically, it’s landscape-only, but users can flip the display depending on which wrist they wear the bracelet.

I wonder what other kinds of displays will emerge and how we will be using them in the future!

Guidelines

In any case, here are some relevant design guidelines for inspiration:

Have fun!


Special thanks to Wouter Sluis-Thiescheffer for inspiring this post!