Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
BBC News App is another one along these lines if you want to check that out on a low end device –  Roger Attrill Jun 14 '12 at 10:44
    
I think you have two problems in one question. Performance can be solved by proper coding/optimization. From UX perspective, I think shelves approach is a bit odd, but it should work with proper visual help - that users will know they can scroll in both directions. –  Frantisek Kossuth Jun 14 '12 at 12:13
add comment

1 Answer

up vote 4 down vote accepted

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)

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.

share|improve this answer
    
Thanks, I was looking for an answer like this! –  Zsombor Erdődy-Nagy Jun 14 '12 at 17:32
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.