Interface Design for Mobile and Tablets: Landscape vs. Portrait

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

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 users’ 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 User-Centered Design, and usage context provides the most important input for design and development. Here are specific contextual questions for orientation.

User Context: Who is She?

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 users’ 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 users to hold a device with both hands, which might provide those users with the extra stability they need.

User Context: How Would She Use This?

We know that users tend to hold a device differently, depending on its orientation. People also favor different orientations in different use contexts. When users 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), users tend to prefer the device in portrait, holding it with one hand.

Tech Context: How Does This Work Best?

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 UI 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 user’s hardware or browser; the design needs to be flexible. There is also a “snapped” view, unique to Windows 8 that adds an extra bit of complexity when considering orientation and layout.

Finally, hardware differences, like button positioning or speaker placement, also impact a user’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, and 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 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

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

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

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!

2 Comments

  1. Nicho said:

    I’m wondering what your opinions are on monetization. Is a user more prone to spend money (in a store for example) in portrait, or in landscape?

    1 April 2013
    Reply
    • Brian said:

      I think it would depend on a combination of factors including orientation, e.g. the placement of game controls + orientation + the placement of in-app ads. However, the best way to answer this would be to test different variations with users and measure the difference.

      2 April 2013
      Reply

What do you think?