Designing For Device Orientation: From Portrait To Landscape

Advertisement

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.

Using 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.

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.


YouTube’s mobile interface in portrait and landscape modes.

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 is missing visual clues about its secondary interface.

Categories Of Orientation Design

To help UX professionals and developers, I have categorized four main patterns of device orientation design.

Fluid

This interface simply adjusts to the new orientation’s size.


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


Pocket’s 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 for the iPad.

Providing visual elements and functionality in any orientation ultimately gives convenience to the user. However, not forcing the user to hold the device a certain way is crucial, especially if the desired functionality does not appear in the default 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.


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

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. 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 an application for smart devices, consider the context and circumstances in which that application will be used, particularly when designing for device orientation. Case in point: interactive cookbooks have become very popular. Hardware and accessory manufacturers are creating devices to help us use the iPad in the kitchen, including a washable stylus for use while cooking.

We can use orientation to create a better experience in a cookbook. Using the iPad’s default portrait orientation, users can flip through the book and view the full recipe and ingredients list for a particular dish. Rotating the device to landscape mode will change the interface to a cook-friendly layout, with large buttons and step-by-step instructions. This cook-friendly interface would also prevent the tablet from auto-dimming, and it would 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.


The Betty Crocker Cookbook for iPad is an example of a cook-friendly interface.

Understanding the context of the kitchen and how people cook with the iPad would make the interactive eBook much more functional. With the added consideration of device orientation, the user experience would be better overall.

Visual Clues About Orientation

An auxiliary screen or added functionality that depends on orientation can sometimes be counterintuitive. Without any visual clues in a particular orientation, a user might miss the added functionality altogether. A classic example of this is the iPhone’s built-in calculator, as pointed out in Salon’s post “How to Change the iPhone Calculator Into a Scientific Calculator” — functionality that many users do not know about.

When designing for device orientation, visual clues increase findability and makes the user experience intuitive and transparent. Below are a few examples of visual clues for device orientation.

Title Bar

Affixing the title bar to the top of the default position in either orientation is a subtle clue for the user to tilt their head (or device) to read the text in the bar. This technique is essential when using orientation for a secondary display and serves as a gentle reminder about the added functionality.

Note: This method will not give affordance to the added display in the default (portrait) orientation. In this case, I recommend coach marks, a quick tutorial or a 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 Apple’s familiar action button for sharing, I propose a standard icon to represent device orientation. You can download the icon shown below and use it freely.

The icon should appear at all times and be used as a toggle switch between orientation displays. Using the toggle would not require the user to rotate the device for the secondary view, but it would gradually encourage users to rotate the device to view the secondary interface without pressing the icon. Rotating the device back to the default orientation would automatically adjust the display. Ultimately, this icon would serve as a visual reminder for the added functionality; the user would not need to use this control to switch between orientation displays but would simply rotate the device instead.

Below are illustrations of this toggle icon in use:


Toggle button in the title bar.

If standardized, the orientation icon would give affordance and serve as a visual clue. Here is an illustration of this toggle icon in a corner triangle.


Orientation toggle in corner triangle.

Note: The device orientation icon is not a proven idea, and the value of adding this somewhat redundant UI control is debatable. However, in my opinion, the idea is simple and effective and would enable designers to more fully rely on device orientation to enhance and extend their applications. Hopefully, the proposals here will spark a conversation in the design community and lead to a solution whereby, with a simple turn of the device, essential functionality is added to any application.

The Drawer

The idea here is to show a drawer-like control that users can tap or swipe in order to see the secondary view. Rotating the device would automatically open the drawer, much like a curtain opening. By using an animation to open and close the drawer, the designer can create a memorable effect for displaying data based on orientation.


Illustration of a drawer control.

Conclusion

Designing for device orientation is not new. For example, when rotated to landscape mode, smartphones open a larger virtual keyboard, and the email applications in tablets switch to a master–detail interface. However, device orientation design is widely treated as secondary to the main interface because it is often missed by users who stick to the default orientation, mainly because they are not aware of its availability. By adding simple visual clues to the interface, UX professionals can make the case for using device orientation to enhance their products and, ultimately, for providing more engaging and user-friendly experiences.

(al) (il)

↑ Back to top

Avi (@xgmedia) is a longtime interactive and web design professional with over ten years of experience. Author of Design-It-Yourself: Web Sites (Rockport Publishers, 2003), Avi has published several articles about user experience. In addition, he is often invited to speak about these publications, as well as other emerging design and UX trends. Avi is currently working as an Independent UI/UX Consultant and is the owner of XG Media.

  1. 1

    Excellent article.Nice tutorial of device orientation design.

    4
  2. 2

    Awesome Article! Bookmarking now!
    What’s the tool you used to draw those mockups, its so cool!

    3
  3. 7

    The orientation icon is an interesting idea. Rather than it being functional, I wonder if it would be better used as a visual cue that the device can display a different view. That seems to be what the author sees as the long term behavior, but it starts out actually changing the orientation. I’m not convinced that a function that actually changes the orientation is good. However, I may be misinterpreting the author’s intention.

    I will be using those orientation categories to explain different design approaches with future project stakeholders.

    Thanks for the article.

    2
    • 8

      Ultimately, the device orientation icon could provide a visual clue for using device orientation whenever it appears. Adding the functionality makes it very clear.

      0
  4. 9

    Should all apps or websites have both orientations? Or should you force the user to hold the device a certain way?

    0
  5. 10

    One on the most useful and detailed articles i have read on here.

    1
  6. 11

    This is awesome. I just have to recommend this on our site!

    1
  7. 12

    Simply and nice reminding the usability of device orientation. I like the ideas of drawer and toggle switch, thus first one is hard decision.

    1
  8. 13

    Loved these tutorials and the benefits they bring to the average consumer electronics connoisseur. The dig at George Clooney just completed the picture. Thanks for the write-up.

    -1
  9. 14

    Great article. The secret is not a secret now.

    -2
  10. 15

    John Surdakowski

    August 11, 2012 6:04 am

    Clearly you understand that adding a button to switch device views, without tiling the device, adds additional UI (you mentioned it youself)

    That being said, would this extra UI element really benefit the user, AFTER they have learned that they can tilt the device for additional features or different views? Once the user knows to til the device, that UI element would have lost it’s purpose, and will be rendered useless.

    I really like the idea of having an icon that represents device tilting, and I agree that some apps need some exploration to discover some features. But sometimes exploration can be fun and gratifying, when using an app (that besides the point..)

    Some apps offer brief tutorials / tours when first visiting the app, letting the user know about features and functions. This can be a chance to inform the user of device tilting.

    Or maybe when a user arrives on a certain screen within the app, a small notification overlay is displayed (non invasive) and vanishes without user action.

    The device tiling icon proposed is great, but using it as a consistent UI element is something I have to disagree with.

    2
    • 16

      I agree with the idea that it may not be necessary to have a device tilting icon. We are still in the midst of integrating smartphones and tablets in our lives, so it’s not natural for us to tilt our screens, YET. But with a bit more time, I would imagine it will be second nature, or at least the icon will become obselete after the first few uses. A reminder that pops up and fades might be the most useful and simplest ways to solve this problem.

      That being said, I am intrigued by the drawer idea. That has a clean look, but will it create useless UI? We should test this idea.

      Thanks for the creative solutions – so good for the imagination!

      1
    • 17

      Benjamin Ulstein

      August 11, 2012 3:48 pm

      One solution to this could be to remove this particular UI element after the device has been rotated once (or a few times so that people would learn it). Implementation is anyhow the biggest question here.

      1
  11. 18

    Standardising an ‘orientation’ icon is a great idea but I’m not sure how a user would interpret this, especially when there’s quite an intuitive physical move involved in changing orientation. Of course, they’d need some kind of visual indication that there’s a different contextual view, but this also may not be something a typical user would understand. Do people understand what contextual views are? Do they understand that these can be tied to orientation? Or is it more of a matter of rotating their device for the sake of their own convenience and then they see a shift in context and layout that’s more suited? Also, iOS devices have a “lock” orientation feature so it seems to clash with the native logic slightly. But it will be great to see how this pans out.

    0
  12. 19

    Anne-Gaelle Colom

    August 13, 2012 4:27 am

    Thanks for a really interesting and useful article. Some good ideas that can lead to the implementation of new widgets that will become mainstream in the mobile web world.

    I wanted to point out that the jQuery Mobile docs (http://jquerymobile.com/demos/1.1.1/) also offers a good example of adaptive layout. Worth checking out.

    3
  13. 20

    Its funny, seeing this, as I LOCK MY IPHONE to not respond to orientation changes.

    From unlocked phone, tap tap home, then scroll all the way left.

    Sometimes I’m moving about and the screen flips and pans annoyingly

    2
  14. 21

    One caveat about applications that change content depending on orientation: as a user, some people lock the orientation (e.g. to be able to read in bed or just because they don’t like that it moves around), so you may prevent access to parts of your applications if you rely on orientation to display some areas of your application.

    2
    • 22

      A good point. Perhaps the toggle switch idea will circumvent this, It will change the orientation regardless of the lock.

      0
      • 23

        in that case, one might feel if his / her device has gone faulty technically. Orientation working still when its locked (joking) :-P

        Apart joke, a nice article…full of knowledge (at least for me)…liked the concept of having toggle icon in your design…never thought of using orientation for application content, which will make it intuitive. Cheers Avi !!!

        0
  15. 24

    Screen orientation should be treated the same way as responsive designs. A great way to optimize a website, but you should never hide content based on a person’s orientation. Only change the way you present it.

    I just found out about the scientific calculator on my iPhone O_o

    2
  16. 25

    Great post, Avi.

    The Android ICS Style Guide brings up another related topic:
    the required responsiveness of the navigation mechanism to orientation change, basically splitting and merging it as described here: http://developer.android.com/design/building-blocks/tabs.html#stacked

    A few other issues to bear in mind:
    Although relatively rare, Android may be implemented in such a way that the default/common device orientation is horizontal rather than vertical.
    Also, there’s a major difference in approach between iOS and Android regarding mobile apps orientation:
    iOS seems to demand a reasonable added value with usability or features in order to allow orientation change, while Android seems to require a good reason in order to lock it…

    0
  17. 26

    Great article, thanks.

    0
  18. 27

    Very useful article indeed, and very well put together.
    I would like to know what you have to say about orientation-less touchscreens?
    I did a project in April for a Microsoft Surface Samsung SUR40, and the main challenge was to design an interface that users could interact with from any position (it was a table) – meaning no menus attached to the sides, no ‘top’ or ‘bottom’, no ‘orientation icon’. It did make me think about the advantages and disadvantages of 2-way orientations and its limitations.
    Do you have any experience with this type of interface design you would like to share? @uxdna

    0
  19. 28

    I think the problem with several of the suggestions mentioned here and the situation in general is this idea that a smart phone should “know” anything about the layout of an app. The premise is incredibly ill-conceived; It was incredibly novel for about 5 minutes after I first got my phone that I could use the landscape view to type or swype, much more simply and that I could rotate the device, and see something different; That is until of course you want to read a map, rotate the page to look at something from a different angle, pass the phone to a client, or the phone is on a flat surface, where both my iPhone and Samsung Android phone both decide to switch orientations (so frustrating!).

    This functionality should rest solely with each application period! This way in the options menu for apps, users could chose between using the accelerometer-based orientation (which I would literally never use) and a simple button, much like the sliding on/off switches, but basically portrait / landscape with a simple aspect box graphic (tall and thin or short and wide). Right now the only solution is to lock the screen aspect, which always seems to default to portrait, which is not my preferred view, mainly because I have two eyes side-by-side not vertically stacked!

    Anyway possibly more food for thought

    0
  20. 29

    Concerning your proposal for a “somewhat redundant UI control”, the universal orientation switch icon:

    One solution would be, that this icon is only present at the first uses of the app, and the app lets the icon visibly disappear (animation: icon fades away) after several (=intentional) successful device rotations performed in the app, possibly giving room for one more icon (which rests in a submenu, such as the Android action overflow; animation: icon slides in from overflow menu into the main action bar).

    0
  21. 30

    The simplest way on How to change java phone screen orientation into landscape

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top