Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 4 down vote favorite
3

I am trying to find out the best way of representing hierarchical data in android. There are no tree view controls and expandable list views dont work since i can have many levels of hierarchy. I thought I could use the Pulse app view to show data but again that is customised for one level. How best both visually and implementation wise then can I represent hierarchy in android for n levels ?

share|improve this question

2 Answers

up vote 2 down vote accepted

There are a couple patterns you can use here; I would recommend looking at the following articles for ideas:

share|improve this answer
Tx. I am using a view pager with tabs + scrollable lists to cut down on hierarchy and display as much data as possible in a single screen. But the prob I have is my top level pager tab grouping might change from one rendition of the app to another. So I feel this will create a confusion to the user. For instance I might have animal, bird, reptile in one rendition and aves, sapiens and plants in another. Is this confusion a real concern? Or are there apps that you know off like this. Also wht pattern is the CNN app(Also what pattern is the CNN app( goo.gl/heoof ) using for the menu? – Slartibartfast Feb 28 '12 at 6:26
Not sure what you mean by 'rendition' of the app, can you elaborate? The CNN app is effectively using scrollable tabs: developer.android.com/design/building-blocks/tabs.html – Roman Nurik Feb 29 '12 at 5:43
Rendition here implies different versions of the app if you will - I have one apk which will allow me to download content based on what I need. If I need to study about animals/birds, I ll download that content and the tabs become animal,bird,reptile. But if i want to download content about plants I ll download that and my tabs become aves/sapiens/plants(context sensitive menu if you will). I hope you get what I am trying to say. This is only an example(or a lack of it). – Slartibartfast Feb 29 '12 at 5:49
1  
Ah I see. If you must have a potentially very deep or very dynamic information hierarchy, you may need to stick to drilldown navigation, or somehow annotate/curate your hierarchy when the app fetches the data indicating what kind of UI element to use. – Roman Nurik Feb 29 '12 at 5:57
1  
@Vrashabh PagerTitleStrip from the support package will do this, but it doesn't have arrows (arrows are no longer needed per our visual design spec for scrollable tabs). You can also copy the code and mess with it if it doesn't exactly suit your needs. – Roman Nurik Feb 29 '12 at 20:53
show 6 more comments
up vote 4 down vote

Drilldown navigation:
enter image description here

See also:

Update:

1) Add location breadcrumbs at the top of the screen to indicate where in the hierarchy you are.

enter image description here

2) Don't let the new level cover the previous level. Let some pixels of each level be reachable. In this example you can just let the menu icons and the profile pictures (from the first two levels) be visible.

enter image description here

share|improve this answer
Android phone settings would be a good example here. – Roger Attrill Feb 24 '12 at 9:08
@Jorn Thanks! This was what I initially built and rejected because a. I can have 6 levels of hierarchy Drill downs can become really painful b. I want to visually represent data in a way it stands out c. And I am building a tablet app so there is more room to work with. Can you think of better ways to do this. – Slartibartfast Feb 26 '12 at 14:27
Also I am trying to display data at one single glance as much as possible. – Slartibartfast Feb 26 '12 at 14:34
1  
I still believe that this approach would work fine. As @Roger mentions, "Android setting" is a good example. You can also try for yourself with a Dropbox app (dropbox.com/android). In Dropbox you can browse several levels represented by folders. I have two additional suggestions to make the drilldown navigation better. 1) Add location breadcrumbs to indicate where in the hierarchy you are. 2) Don't let the new level cover the previous level entirely, but let the leftmost part of each level be reachable (eg: MyPad). I'll update my answer to clarify with some examples. – Jørn E. Angeltveit Feb 28 '12 at 0:37
@JørnE.Angeltveit: Yes, Miller columns are the solution. However, pure Adnroid rejects end-of-line carets (last item on the page), which is a rather strange decision but, nonetheless, it's the appropriate design pattern. – dnbrv Feb 28 '12 at 0:51
show 1 more 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.