Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Android UI pattern - Stacked categories

DZone's Guide to

Android UI pattern - Stacked categories

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.


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.

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:

Published at DZone with permission of Juhani Lehtimaki, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}