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.
Lists are one of the most common design elements in Android applications, and they’re used to display large amounts of data. In this post, when we say a list, we mean a standard Android list, which is a vertical sequence of text rows. Read about displaying lists in Android UI Fundamentals: Develop and Design.
Lists can be very useful on portrait screens, since they quickly let you scroll through hundreds or thousands of items. However, the same list screen when rotated to landscape becomes less useful, as users must scroll vertically, and repeatedly, in an area of two inches or less:
So, since lists are so commonly used, what’s the solution?
You could just let the user scroll, using the stretched portrait layout. This approach is simple and predictable to users, as well as easiest to develop.
You might also consider changing the layout altogether, say, to an image grid. That might work, but the interaction is very different from the portrait version and gives users more to learn.
Another solution, used in leading mobile apps, is to change the display to a combination of images and text arranged in a grid. The items in the grid cells can be arranged in various ways, but often text and images are arranged side by side to save space.
The effect is a combination between a list and an image grid. If you display two columns of items, the list grid looks like this:
Image credit: http://www.sammobile.com
If the device is wide enough (say, a large smartphone or small tablet), and you can display three columns, your list grid would look more like this:
Image credit: tayfunsogutlu.wordpress.com
The entire list grid scrolls as one unit, rather than with separate scrollable columns. A key point to remember is that list items should be sequenced across the rows, for horizontal reading. In English, or other left-to-right languages, the sequence is 1, 2, 3 on the first row and 4, 5, 6 on the second:
This visual arrangement uses valuable horizontal space and gives users two or three times as much information for each scroll. Remember, design is creativity with strategy (Rob Curedale, Quotes on Design).
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.|