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.