9

Is it a good idea to use tree-view UI structure in iPhone or other Mobile devices? (e.g. for file browsing etc.)

Improve this question
1
  • 1
    Problems with tree-view UI in mobile devices: make the items too big and you have to scroll both vertically and horizontally; make the items too small and you can't select one without accidentally selecting another. Which is the worse of the two evils?
    – Michael Lai ♦
    Sep 19, 2013 at 3:00

4 Answers 4

Reset to default
11

Tree navigations is a simple and effective solution to discover hierarchical structures. I would test two different solutions.

  1. Accordion: http://ui-patterns.com/patterns/AccordionMenu
  2. Drilldown lists: http://mobile-patterns.com/lists

Accordions work if you have flat hierarchies (e.g. one sub level). They keep the user in context and you don't have to remember the other category names since you stay in the screen. The handler for open/collapse the category shouldn't be a small button, but the whole list item instead.

Lists are pretty ease to use and fits perfectly if you have to use multiple sublevels. The following items you should provide for smooth content discovery within subs:
- header with title of the current category
- shortcut which takes you to the top level in the hierarchy
- backup which takes you one level up

From an interaction pov, the main challenge is that browsing trees requires a lot of scrolling up and down to re-find items. Also from an information architecture point of view it might be not the most efficient system to organize information. User has to know in which category the object-to-find is hiding. At least there should be a category specific search. To increase flexibility and improve findability I would also combine it with a tagging system.

Improve this answer
1
  • I like lists in a mobile context, but I'm having a hard time designing a way to SELECT an item in a tree structure. The problem is: when the user taps on an item, how to differentiate if he wants to select it or to navigate to its subitems? Any examples of this?
    – Eric Marcos
    Mar 26, 2015 at 10:14
3

The NestView method for representing a text hierarchy (specifically xml) came up as an answer on a programmers.stackexchange question. This is quite 'out there', but it does save a fair amount of horizontal space, compared to either a tree-view or indented text. It also has the benefit of having a larger 'touch area' than a tree-view, it could possibly also suit more general usage than just hierarchical text structures:

enter image description here

Improve this answer
1

I don't think so, tree-view is hard enough to use on a full scale computer.

Microsoft had a study on it's own tree view and recommended to the developers not to use it if the users for that specific application are not computer savvy, experimented.

Improve this answer
3
  • 1
    Do you have the link to this study? It is always interesting to see things published by Microsoft and see what their reasoning and research methods involve.
    – Michael Lai ♦
    Sep 19, 2013 at 2:56
  • Nope, sorry. I read about it in Steve Krug's "Don't make me think".
    – Bobby Tables
    Sep 19, 2013 at 8:51
  • That study is not in "Don't make me think". I've just searched my Kindle copy of the book for both "tree" and "Microsoft" and nothing came up.
    – paldepind
    Apr 21, 2015 at 14:27
0

I would suggest a breadcrumb on the top and listview/icon view to keep it consistent with other tree like structures.

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.