scrolling - Android - Is it a good idea to display a list of horizontally scrollable lists (shelves)?

The project I'm currently working on requires that I present a list of "shelves" to the user. These shelves need to be in a standard, vertically scrollable list, and each shelf should be scrollable horizontally as well. The number of shelves, and the number of items on different shelves are practically unbounded.

I did create prototypes for this kind of UI, they do work, but the performance is quite terrible, especially on low-end Android devices, with pre-honeycomb versions of Android. Scrolling is quite jerky, so it's not that pleasant to use.

I haven't seen many Android apps with this kind of UI, apart from the popular Pulse News RSS reader. Even in that app, scrolling is quite horrible IMHO.

Should this kind of UI be avoided on Android applications? If so, could you recommend alternative solutions for this problem?

I'd like to keep the "shelf" concept, so users should be able to move horizontally in them. I thought about using simple paging the shelves with arrow buttons, but it didn't seem too convenient to use.

Answer

The Android design guidelines specifically recommend against having both vertical and horizontal scrolling in lists. I completely agree with this. Two-way scrolling will just make users frustrated at their limited screen size rather than dazzled by an intuitive, yet skeuomorphic shelf representation. _{^{(when done tastefully, shelves are quite nice, but I've seen some bad implementations, too)}}

You should resize your thumbnails so that:

• 2-3 fit horizontally on a shelf when a phone is in portrait and let them scroll down to see more shelves (left mockup)

or

• 3-4 shelves show vertically and the user can scroll to the side to show more of the very long shelves (right mockup)

Based on your description, I get the feeling that the shelves are also representing different types of data (more like bookcases than shelves?). If that's the case, you could swap between them with Swipey tabs, however, my Twitter app does this and it often gets frustratingly stuck on swiping when I'm really trying to scroll (clearly, there's a slight angle to my scroll if I'm using my phone with one hand) and I have to not touch anything for a second and focus on scrolling Straight. Down. My recommendation in that case, as an Android power-user and frequent re-reader of the design guidelines, is to use fixed tabs and let the user tap to go to another shelf (left mockup)

^{download bmml source – Wireframes created with Balsamiq Mockups}

_{The bits running out of the frame indicate scroll direction. Those icons in the frame can be shaded to indicate to the user where more content is.}