Saturday 13 August 2011

Android UI pattern - Stacked categories


This is an emerging pattern and not very widely used yet. It is interesting approach to a very specific problem of user interaction.

Thanks to Suzanne Alexandra (@suzalex) for the tip!


Pattern card

Problem
When displaying categories of information it is often difficult to offer navigation options to that don't force users to choose one category and hide others. If users have to hide other content to see one category they cannot get a good overview of the available content as a whole.

Solution
Instead of deeper navigation structure the navigation hierarchy can be flattened to allow user to see parts of the content of multiple categories at once. Each of the categories are navigable separately. Users don't have to select a single category.








Consequences 
  1. Users will get much better overview of content in multiple categories without of having to navigate into deeper level of the app.
  2. Users can pan content of any single category independent from other categories.
This approach is a compromise between size of the content preview and number of content previews. This is not always the preferable approach. As always, patterns should only be applied if the problem exists in the app and the pattern's solution matches it.


Implementing stacked categories
Dominant way to build the information architecture of news and news feed applications is to have two-level navigation. First user selects a category and then the app displays articles in the selected category.



Pulse is an excellent example of the flattened navigation hierarchy.



Pulse and BBC news both have very similar navigation approach.


This approach scales very well to tablet screen size.


Categories don't have to be stacked vertically this pattern to work. Plume's tablet UI displays different categories of tweets side by side in independently navigable columns.

Technical implementation
Android Gallery layout widget (gallery tutorial)can be a good starting point for implementation if the design is vertical stack of categories.

A side by side implementation can be done using basic Android layout as well. In Plume's case the categories are simply scroll views inside another horizontal layout.




3 comments:

  1. Hi
    Categories is something I have to face in my proyect right now.
    I like the "pulse style" but just for news like in the examples. I don't see it working with static content like recipes for different types of food.

    I'm not sure I was clear, but I'd like to know your opinion.

    ReplyDelete
  2. Hi Sloy,
    That's an inserting question. I haven't seen this approach being taken on non-news apps yet but it doesn't mean that it couldn't work. There's one recipes related app that uses something similar but in a different context. They use similar multiple independently scrolling panels to define search filter. Check out Allrecipes.com Dinner Spinner ( https://market.android.com/details?id=com.allrecipes.spinner.free&feature=search_result )

    But as you said using stacked categories might not be the right way to go. If you get a chance and have time try to sketch the UI on paper and see how it would work in both cases. I would love to hear your experiences on it.

    Cheers,
    Juhani

    ReplyDelete
  3. I guess I'll have to run some tests. I'll come back when I have something. Don't wait me awake ;P

    ReplyDelete