5

We have a hierarchical user tree that allows users to drill down to each level below them and at any point switch any branch in the tree. This doesn't exactly translate so well to mobile devices.

Desktop user selector

Desktop user selector

I built the following representation for mobile devices. Despite cleaning up the style a little bit, is there another approach that I can take to represent this level of control over who is the currently selected user?

Mobile user selector

Mobile user selector

Improve this question

2 Answers 2

Reset to default
1

The system seems quite complex. Many levels, many users.

If you don't need a flat list of all the end nodes (like your design has), I suggest keeping the breadcrumbs.

A vertical breadcrumb\drilldown will make it a lot easier to navigate.

BTW, I'm guessing that in this product the hierarchical levels are selecteable nodes themselves. Meaning, the user can select the whole Greene Team or any node under it. If this is true, navigating the breadcrumbs is a bit more problematic. Selecting an end node is ok, but anything above that might require double tap. An Apply button is also an option.

Improve this answer
2
  • If a selected node is not an end node then the user will retrieve the data of that particular user and all users under that user. If you are not an end node there is no way (with this user selector) to select just that user and not sub users. This is an intended action.
    – nduvieilh
    Nov 24, 2014 at 0:58
  • Got it. I meant that for the user to choose a higher level node, the first click will probably expand it, and then a second click will be needed to select it. This means that the list can't focus down to the newly expanded nodes. Expect problems with the bottom-most collapsed levels.
    – Navot
    Nov 24, 2014 at 22:09
1

I wouldn't change the interface much between the desktop and mobile. You just need to collapse the desktop version into a single column.

So that these options on the desktop

Greene Team > Option One (2) > Option Two (3) > Last Option

Are then presented like this on mobile

Greene Team >
Option One (2) >
Option Two (3) >
Last Option

You would keep the feature of clicking an entry to present a selection list for that tree branch. This ensures that desktop users and mobile users share a similar experience.

If space is an issue on mobile, then make the interface collapsable.

Improve this answer

Your Answer

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

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