A guest post by Suzanne Alexandra, a mobile UX design consultant based in the San Francisco area. If you’d like her to help you express the soul of your app, you can reach her through her blog at delightthem.wordpress.com.
Every Android user knows that Android devices shift orientation between portrait and landscape when the device is rotated. If your app is prepared, it can shift orientation too.
Keep in mind that the device, whether smartphone or tablet, has a default orientation. This is the way most users are expected to hold the device most of the time. For example, the default orientation of the Nexus 7 tablet is portrait, while the Nexus 10 is landscape – although both devices can be used in both orientations. Read Supporting Multiple Screen Sizes in Android UI Fundamentals: Develop and Design for more on layouts in Android.
You might start out by handling just one orientation in your app. Most Android apps, however, should handle both portrait and landscape modes. You don’t know which device form factor your users have, or how they use the device — mounted in a car dock, on the run, or any other way. Many Android apps, however, need some redesign to effectively handle the “other” orientation – the one that isn’t the default device.
Let’s talk about different ways to approach the landscape design challenge. Along the way, we’ll reference some well-known principles of interaction design.
The first technique is simply to let the portrait screen stretch horizontally. Pocket takes this approach.
This style is probably the easiest and fastest for development teams to adopt.
From a usability perspective, however, it has benefits and drawbacks.
The benefits are consistency with the portrait experience (interaction design principle #2) and matching user expectations (principle #1). This helps the user easily adapt to landscape mode, with no extra cognitive load.
On smartphones, however, the vertical scroll area is very small. On some phones it’s about two inches or less. Users have to scroll more to see more, and the buttons below the list aren’t visible without scrolling.
Using this technique with some screens can lead to an awkward experience. With this type of screen, you may well want to redesign for landscape.
Another approach is to do as the YouTube Android app does. Take the most interesting or important feature in portrait and zoom it to full screen in landscape.
In portrait, YouTube shows a video plus other features — info, suggestions, and comments. But in landscape, the video zooms to full screen, with a tap-to-display control bar.
When the video ends, the display switches back to portrait, which is an easy way to prompt the user to flip the device. This pattern is elegant and increases user engagement (principle #5) by giving users an enjoyable and productive experience. It’s especially useful for video, magazine, or other media apps.
The Skype app for Android smartphones shows another interesting pattern: its orientation change is fluid. Here, fluid means that the display shifts, or appears to shift, fluidly between portrait and landscape.
As you can see, the icons change position. In portrait, they are aligned in a 4×4 grid that’s convenient for vertical display. In landscape, the icons are arranged in a 4×1 row, so that all of the icons are visible at a glance, without scrolling.
You can use fluid layouts with many types of screens. Of course, the display doesn’t actually shift fluidly, but requires separate XML layouts for both portrait and landscape.
Skype provides an interesting example of another landscape pattern: a special landscape view for tablets, with the choice to return to the smartphone view. The multipane tablet view looks like this.
Users can choose either Tablet view or Classic view from the app settings. Classic view looks like the smartphone version, and has both portrait and landscape views. Tablet view is multipane, with landscape only. This combination of views gives users control over how they view the app (principle #7) and helps to build trust in the service.
The landscape orientation on tablets provides you with an opportunity. You can display additional features or content panes in an easy side-by-side format, where portrait may require a layered content display. The gorgeous app Real Colors is such an example.
In landscape mode, the display shows a color palette (left) and a color spectrum chart (center), generated from a photo (right) – all in one screen and all visible at once.
In portrait mode, the color spectrum and photo appear on different tabs, and the tabs are placed at the bottom of the screen. Users must navigate between tabs and see only one content view at a time.
The landscape version is more useful and usable, since everything is available from one screen. It’s easier and faster to access the color spectrum and photo. Remember Fitts’s Law:
The time required to click an object is proportional to the distance and inversely proportional to the object size.
Now adapt this to modern touch screens. Where Fitts says click, think tap instead. In other words, maximize the size of controls or content and minimize distance between them.
And to Sum Up
So let’s take a step back and summarize. Because of the number and variety of Android devices on the market:
- In most cases, you should design for both screen orientations.
- Keep the user experience as consistent as possible between portrait and landscape.
- Realize that landscape doesn’t always mean stretching a portrait screen.
- Use good interaction design principles. Always.
Safari Books Online has the content you need
Below are some Android UI books with all sorts of tips and information.
|Professional Android 4 Application Development, 3rd Edition walks you through a series of hands-on projects that illustrate the features of the Android SDK. That includes all the new APIs introduced in Android 3 and 4, including building for tablets, using the Action Bar, Wi-Fi Direct, NFC Beam, and more.|
|Android™ User Interface Design: Turning Ideas and Sketches into Beautifully Designed Apps serves both as a tutorial for the entire design and implementation process and as a handy reference you’ll rely on for every Android development project. This book shows you how to create effective designs, organize them into Android components, and move gracefully from idea, to wireframe, to comp, to finished app. You’ll learn how to bring your own voice, personality, and style to your app designs; how to leverage advanced drawing techniques such as PorterDuff compositing; how to test designs on diverse Android devices; and much more.|
|Android UI Fundamentals: Develop and Design walks developers through the different choices available on their way to creating a well-designed application for Android. While building a simple application, the author works through the basics of Android UI development including layout, event handling, menus and notifications. The author then shows the proper way to load and display images, create advanced dialogs and progress indicators, add animation, and how to build custom UI elements. He discusses the proper way of adding interaction through gestures and the advanced graphical options available using Canvas, Renderscript and OpenGL.|