2

I need to display some hierarchical data in a side menu of an Android app. Sort of a tree, with nodes that can be dragged and dropped around. The entire tree has to be expanded from the start.

I understand this interface is not ideal for mobile devices, especially smartphones. I'd like to know what's the recommended paradigm in Material Design for this scenario.

Update:

That's what I want to create. User should be able to change order of Item D and Item E, and at the same time to move Item A below Item B, or to add a new descentand Item I from Item F and so on. When clicking on one of the items a view should be loaded displaying all item informations and metadata.

Tree

|improve this question
  • Could you post an image? – Alvaro Nov 8 '16 at 13:57
  • I don't have any image, but you can imagine a file system tree, like the Windows one. – Alessandro Nov 8 '16 at 14:10
  • Can you tell us more about the use case? Is the tree used for navigation? Does the user re-arrange the tree only for his/her view or for all users? Is the re-arranging actually changing an established hierarchy or just prioritizing/customizing a view for that user? How many levels are needed? – Eric Stoltz Nov 8 '16 at 17:12
  • Hi Eric! Tree depth could be any (I suppose not more of four or five levels). User rearranges the tree for his needs and this operation customizes the view. – Alessandro Nov 8 '16 at 21:10
  • I just updated my original post with an image and a detailed description. – Alessandro Nov 9 '16 at 7:52
1

Tree views are not described in the Material Design guidelines. And nested navigation is not allowed on mobile. The way you describe it really makes me question if it would be a good idea to put it in the navigation drawer (side menu).

General mobile behavior is to navigate using drill-down. Meaning that you get a list of one level in the list and by clicking on one of the items takes you one level deeper.

If none of these patterns fit your case you can think about creating your own pattern.

|improve this answer
  • Hi Tirza, thanks for your answer! I thought about going drill-down, but then I can't drag and drop between different levels. I don't want to create something new, because I'm only a software developer and I think Google designers have made a good job with Material Design guidelines... I'm only trying to understand what's the best way to implement something like that... :) – Alessandro Nov 8 '16 at 14:10
  • Tirza is right. As for Material, what you want doesn't exist, so if you want to follow this route, you'll need to create it yourself. There are ways to do it, of course, but the amount of info needed to do it properly exceeds the purpose of this site. Just one thing: forget about Material and you'll be much closer to the answer – Devin Nov 8 '16 at 14:55
  • I just updated my original post with an image and a detailed description. – Alessandro Nov 9 '16 at 7:52
1

If you access Material design web you can see that the sidebar (navigation drawer) has two levels of hierachy. At first they are not expanded but on click can be expanded and scrolled (on desktop or touch devices).

material design

If possible I would avoid introducing another level of hierachy. For example WordPress dashboards menus let you add several levels but it becomes confussing after the second level, even when you are editing it.

wp menu

The problem you might be having is how to combine scroll and drag, as on touch devices it is a very similar interaction.

Trying to edit WordPress above example on a tablet is a bit uncorfortable as the whole box of each element makes the element draggable, so to scroll you have to touch outside of the elements.

Instead of making the whole element draggable, I would introduce a small box on the side for the dragging action. This way you avoid dragging when the user wants to scroll (on touch devices).

This is how the WordPress menu elements are dragged on desktop:

wp menu element

|improve this answer
  • Alvaro, you're 100% correct on your description, but the problem is dragging (as you accurately mention) and this has to work on Android (so your web example isn't a good fit). If you check how the menus and side drawers work on an Android app, you'll see there's no way to do this on Material, because of its guidelines and limitations. However, outside Material, this is possible (still, it will never be very user friendly on small devices). +1 anyways for a good answer and the WP example – Devin Nov 8 '16 at 16:49
  • If you need to stick to Material design, maybe Google Keep app has some similar behaviour in the way the container is scrolled and notes can be dragged. – Alvaro Nov 8 '16 at 16:57
  • I just updated my original post with an image and a detailed description. – Alessandro Nov 9 '16 at 7:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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