Posted on by & filed under Content - Highlights and Reviews, Mobile Development, Programming & Development.

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 online at her Google+ page or on Twitter (@suzalex).

Everyone who cares about great design for Android applications needs to think about landscape design. It’s tempting to design just for portrait. But the lack of landscape design in an Android application for smartphone or tablet is one of the biggest things users comment on. They want to use the phone (or tablet) in landscape to access a larger keyboard, or to mount their device in a car or desk-dock, or just have more viewing space.

Having well designed landscape screens is important for many applications. Remember that you can’t always just let your portrait screens stretch. Landscape is a different user experience. Users have two thumbs to interact with the landscaped screen and tend to read from left to right. It’s also much easier to type on either an onscreen or physical keyboard, so users tend to use landscape for entering text.

Landscape design involves thinking in a horizontal plane and arranging screen elements so that they work perfectly in the wider-but-shorter visual space. Here I’ll show you a few tips for landscape based upon real-life UX design experience.

Tip #1: Horizontal elements can become vertical

In landscape, you have lots of horizontal space, but very little vertical space. So, horizontal screen elements like toolbars and miniplayers can move and become vertical.

For example, in landscape Skitch makes its toolbars vertical and moves them to the left and right. This provides plenty of horizontal space for drawing:

skitch-composite

Tip #2: Vertical scrolling can become horizontal

Many Android applications have vertically scrolling lists with rows of text. Some lists have hundreds or thousands of items. Simply rotating a text list to landscape is awkward, especially on smartphones, as the vertical scroll area is so small.

One solution is to convert text lists (especially those with image thumbnails) to image grid lists and give them a horizontal swipe gesture. Horizontal swipe is natural in landscape, especially on tablets (see Design Your Tablet Interfaces for Horizontal Swiping).

So you can start with a portrait screen like this:

list-wf2

And convert it to a screen like this:

grid-wf1

In the second screen, the images become larger and more important, and the screen is easy to read from left to right. The screen scrolls horizontally, and if a divider is needed, it’s placed vertically.

Tip #3: Vertical scrolling can stay vertical, if reading is horizontal

From observing your users, you may find that they prefer to scroll vertically in landscape, especially on large smartphones. Vertical scroll adapts to two-thumb usage. In addition, your users are used to scrolling vertically in the portrait versions of smartphone applications.

The YouTube application uses vertical scroll in both portrait and landscape and simply arranges the content differently, so it’s easy to read left to right and you can see more at once:

youtube-composite

Notice that in landscape, the device status bar shifts and is displayed vertically. (This image was captured on a Galaxy Nexus with Android 4.2.2 JellyBean).

So these are three specific tips to help you with redesigning screens for landscape on Android. Remember: think horizontally and follow the principles of interaction design, especially consistency, minimalism and engagement.

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.

About the author

head-shot-mot Suzanne Alexandra is considered a thought leader in Android user experience design, working at the intersection of design, psychology, and mobile technology. Having traveled and spoken on Android design around the world, she now helps global brands create experiences that users love. You can reach her online at her Google+ page or on Twitter (@suzalex).

Tags: android, landscape, UI, UX,

One Response to “3 Tips to Designing for Android Landscape”

  1. Alicia Browder

    Those are great tips! I have an Android cell phone as well and choosing a good wallpaper design for it that would fit to whatever screen rotation you’ll use is important. I will take note of those insights and advices mentioned above.