4

For a mobile application, I want to have a tree structure for user to navigate and select between folders. here the tree can be n-level in depth as well as height. Having a quick search is one way to quickly access the structure.

However is there any other approach to quickly navigate from one level to other level. I am trying to achieve experience similar to a windows explorer (see below image)

enter image description here

With reference to similar question: Modern Alternative to Tree View for Hierarchical Data

I find this solution mentioned in above question feasible for a desktop application. For Mobile application, it is restricting in width and height to have the same solution

So my question is:

  1. Is it feasible to have tree based structure in mobile application?
  2. Is there any better alternative to it than traditional tree structure?
Improve this question

1 Answer 1

Reset to default
3

Each time you click on an item in the tree - the parent trees above it works as Breadcrumbs and sits on top of the component. The three component scrolls up keeping the selected item on top, when user wants to navigate back they can use the breadcrumbs and the the tree structure starts from that point again -

enter image description here

Improve this answer
4
  • 3
    Very interesting approach :) A problem is that there is no indication of which elements have children, but I guess it could be solved using a different symbol in those. I was wondering, why do Contact and Blog are disconnected? And also, the purpose of the connection is to clarify the level in the hierarchy, right?
    – Alvaro
    Commented Feb 23, 2017 at 12:33
  • Idem. To indicate if the item has children you could use a circle with a number of children at item right (in case of hold the connection in left side).
    – user97554
    Commented Feb 23, 2017 at 13:15
  • Just curious... I liked the breadcrumb approach, However the breadcrumbs won't work if the tree goes deep for example, user is on 5th level. Will a horizontally scroll-able section work for breadcrumb? OR Is there another way to overcome this?
    – Aditya Durgude
    Commented Feb 24, 2017 at 7:00
  • @AdityaDurgude Horizontal scroll will be the best choice. I had thought of it but missed to put it in post.
    – Dipak
    Commented Feb 24, 2017 at 7:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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