Published in Smashing Magazine

The accelerometer embedded in our smart devices is typically used to align the screen depending on the orientation of the device, i.e. when switching between portrait and landscape modes. This capability provides great opportunities to create better user experiences because it offers an additional layout with a simple turn of a device, and without pressing any buttons.

However, designing for device orientation brings various challenges and requires careful thinking. The experience must be as unobtrusive and transparent as possible, and we must understand the context of use for this functionality.

Nearly all mobile and tablet applications would benefit from being designed for device orientation. This article covers some of the basic concepts that designers and developers can use to add device orientation to their process. We’ll present some of the challenges when designing for device orientation, along with some solutions.

Useing Device Orientation for a Secondary Display

YouTube’s mobile application is a great example of device orientation design. Portrait mode offers a feature-rich interface for video discovery and the user’s account. Landscape mode provides an immersive experience with a full-screen video player and playback controls. When the video ends, the display switches back to portrait mode, prompting users to quickly tilt the device back and browse for additional videos.


YouTube mobile interface, portrait and landscape view.

However, using orientation to display a secondary interface can be confusing for users. For instance, in CardMunch (a business-card reader by LinkedIn), users can convert business-card images into address book contacts using the smartphone’s camera. Rotating CardMunch to landscape mode changes the interface altogether to a carousel overview of all of your saved cards.

This interface lacks any visual clues about its orientation, and it has limited controls. You are unable to edit or add business cards, making the carousel screen somewhat frustrating and confusing, especially if you’ve launched the app in landscape mode. In addition, the lack of visual clues in this landscape mode will deter most users from rotating the device and discovering the app’s other features.


CardMunch by LinkedIn. Missing visual clues for the orientation as a secondary display.

Categories Of Orientation Design

To help UX professionals and developers verbalize designing for device orientation I have categorized four main patterns for device orientation design:

Fluid:

The interface simply adjusts to the new orientation size.


In Skype’s mobile interface, the icons change position when the screen moves from portrait to landscape.


Pocket mobile interface. Same layout, different width.

Extended:

This interface adjusts to the screen’s size, adding or subtracting layout components according to the dimensions of the chosen orientation. For example, IMDb for the iPad uses the wider screen in landscape mode to add a filmography on the left. This list is also accessible in portrait mode by clicking the “All filmography” button in the middle-right of the screen.


IMDb Movies & TV for the iPad.

Adding visual elements and functionality to the layout in any orientation ultimately provides convenient choices for users. However, it is crucial not to force the user to hold a device a certain way, especially if the added functionality does not exist on the default device orientation.

Complementary:

With this interface, a changed orientation triggers an auxiliary screen with relevant supplementary information. An example would be a mobile financial application that displays data in the default portrait mode, and then provides a visual graph when the user rotates to landscape mode. The orientations show similar or complementary data and depend on each other.


An example of a complementary design interface.

Continuous:

Like YouTube, a continuous design enables the user to access a secondary interface by a simple rotation of the device. An example would be using a smartphone as a remote control for a smart TV. Rotating the device to landscape mode would reveal a full program guide, while also maintaining functionality for changing channels, browsing programs and recording future episodes.


A smart remote and program guide.

Considering the Default Orientation

Above & Beyond is an interactive eBook for the iPad about the life and work of the American caricature artist John Kascht. The beautiful art in this book is displayed in both portrait and landscape modes. However, horizontal mode shows important interactive elements that do not appear in portrait mode, such as a way to return to the main menu. Portrait is the iPad’s default orientation, so including this type of added interactivity only in landscape mode might confuse many users.

While portrait mode shows a detailed look at the art, and the interactive eBook provides some instructions at the beginning, a solution might be to allow users to tap the screen to reveal the menu.


A page from Above & Beyond. The interactive elements do not appear in the default portrait mode.

The default orientation for most smartphones and for the iPad is portrait. However, landscape is the default for Android, Windows 8 tablets and BlackBerry’s Playbook. To avoid confusion, remember that the primary orientation of your app should always serve the device’s default mode and functionality, not the other way around.

Understanding the Context

When designing applications for smart devices such as the mobile phone or a tablet, it is crucial to understand the context and circumstances in which that application will be used, particularly when designing for device orientation. Case in point, interactive cookbooks are now very popular, hardware and accessory manufacturers are creating devices to help us use the iPad in the kitchen, which include a washable stylus pan for use while cooking.

We can utilize orientation to create a better experience for the iPad cookbook. Using the default iPad orientation (portrait), users can flip through the book and view the full recipe and ingredients list for a particular dish. Rotating the device to landscape will change the interface to a cook-friendly layout with large buttons and step-by-step instructions. This cook friendly interface will also prevent the tablet from auto dimming and will allow users to flip pages by waving their hand in front of the built-in camera to avoid touching the screen with messy hands while cooking.

Understanding the kitchen context and how people cook with the iPad, makes the Interactive eBook much more functional in the kitchen and with the added consideration for device orientation, it creates a better overall user experience.


The Betty Crocker® Cookbook for iPad. An example of a cook-friendly interface.

Orientation Visual Clues

Creating an auxiliary screen or adding functionality, which depends on the way the user turns the device, could sometimes be counterintuitive to the user experience. Without any visual clues, a user could miss the added functionality on a particular orientation altogether. A classic example of a case such as this is the iPhone calculator, as demonstrated in this Salon post dedicated to explain how to change the iPhone calculator into a scientific calculator for the many users that could not find this added functionality.

When designing for device orientation, adding visual clues increases findability for the added display and creates an intuitive transparent experience for the user. Here are a few examples for device orientation visual clues:

Title bar

Affixing the title bar to the top of the default position in any orientation can create a subtle clue for the secondary display by urging users to tilt their heads (or the device) in order to read the text that appears on this bar. This technique is fundamental and should always apply when using orientation for a secondary display as a gentle reminder for the added functionality.

Note: This method will not give affordance to the added display on the default orientation (Portrait). In this case I recommend using Coach Marks, a quick tutorial or walkthrough video (when appropriate) to illustrate that the application is using orientation for a secondary display.

Toggle switch

Much like the universal icon for sharing or the Apple Action Button recognized for sharing, I propose using a standard icon as a visual representation for device orientation. You can download this icon here and use it freely.

The device orientation icon should appear at all times and used as a toggle switch between orientation displays. Using this toggle switch will not require the user to rotate the device for the added secondary view. However, it will eventually encourage using device orientation without pressing this button, because users will likely tilt the device in order to view the added screen. Turning the device back to the default orientation will automatically adjust the screen display. Ultimately, this icon will serve as a visual reminder for the added functionality, the user will not need to use this control to switch between orientation displays but simply rotate the device instead.

Here are examples using this toggle switch and icon:

Title bar toggle switch button.

If accepted, the device orientation icon could provide a visual clue giving affordance for using device orientation whenever it appears. Here is an additional example using this icon on a corner triangle toggle switch.


Corner triangle orientation display toggle switch.

Disclaimer: The device orientation icon is not a proven idea, and the value of adding a somewhat redundant UI control is debatable. However, in my opinion, it is a simple and effective idea, that will allow designers to rely on device orientation to enhance and extend any application. I hope that the solutions I propose here could spark a conversation within the design community so that, with a simple turn of a device, we can easily add essential functionalities to any application.

The drawer

The idea behind this concept is to create a drawer-like control that users can tap or swipe in order to see the secondary view. Rotating the device will automatically open the drawer, much like a curtain opening. By using animation to open and close the drawer, one can create a memorable effect for displaying data on device orientation.


Example of a drawer control.

Conclusion

Designing for device orientation is not new. On smartphones, orientation provides a larger virtual keyboard, and tablets email applications use a master–detail interface (Extended) when the device is rotated to landscape. However, device orientation design is widely considered as secondary functionality (to the main interface) because it is often missed by users using a device mainly on its default orientation. The main reason for this is simply because they are not aware of this added functionality if its available. By adding simple visual clues to the user interface, UX professionals can make the case for using device orientation to enhance the product and, ultimately, provide more engaging and user friendly experiences.