Last updated on 20 February 2022
Landscape vs. portrait orientation is one inevitable question when designing and/or developing for mobile devices (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 that landscape vs. portrait doesn’t matter. It’s context that matters. When deciding an app’s orientation, let its human and tech contexts lead the way.
Theory: Making the Decision
When designing things for people to use, we have an obligation 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?
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?
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?
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 work better with one orientation than the other.
Large blocks of content and plain-content lists, for example, work best when people can scroll them vertically. Portrait orientation supports that nicely.
Multi-faceted views and rich-content lists, on the other hand, work best when we can scroll them horizontally. Landscape orientation does a better job for this.
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
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 stays in landscape. How 💩 would it be if your game would keep getting interrupted by a flipping display?
Nokia Transit: Portrait-only, with Good Reason
Nokia Transport is a visually appealing public transportation app that only works in portrait orientation. It seems that the designers understood that using the app is a secondary activity, subordinate to actually going to and taking public transportation.
One-handed use helps people pay attention to the world around them. And portrait orientation is not only better for one-handed use, it also suits the app’s information visualization.
Nokia City Lens: Going Both Ways
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 viewer’s surroundings. Switching between these modes is a just a matter of rotating the device.
Food for Thought
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 people can flip the display depending on which wrist they wear the bracelet.
In short, landscape vs. portrait: consider the human context of who and where the person will be, as well as the tech context of
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:
- Microsoft Fluent Design System: Cross-Platform Design
- Material Design: Understanding Layout
- Apple Human Interface Guidelines: Adaptivity and Layouts
Have fun!
Special thanks to Wouter Sluis-Thiescheffer for inspiring this post!
