7

I am working on a UI design which has two tree view components to show data hierarchy.

Each tree shows same data but has two different functionalities. I felt showing them in such a way will confuse the user.

Here I have attached an example image. Both trees are in same screen under user admin functionality.

enter image description here

  • Tree A: It is used to select the list of categories & movies the user is allowed to watch.
  • Tree B: This is a subset of Tree A. It will select the default/favorite movie for the user from the items selected in Tree A.

I want to keep it in a single tree and achieve both functionalities.

Can some one help me find a better user experience for this?

Note: There is sub categories also like Action, Comedy etc under each language.

4
  • Hi Murali. Can you amend your images so they don't have the text embedded within the image? You should use images as illustrations, and include the text as actual text in the question so that it is searchable and editible.
    – JonW
    Jan 2, 2013 at 12:39
  • 1
    @JonW updated my question. Jan 2, 2013 at 12:50
  • What is the purpose of selecting a default/favourite movie? Can I select more than one?
    – Matt Obee
    Jan 2, 2013 at 12:59
  • @MattObee, they can select more than one. Sometimes they select whole category or sub category like Comedy, Action. In Home page we show only favorites for easy navigation Jan 2, 2013 at 13:42

4 Answers 4

2

In response to the question above, in your list you could have a the paper icon change to an empty star when you tick the check box. Then if they hover over the empty star it changes to a gold star and if they click it then the gold star will stay (the same way as you favourite something in Gmail). If you star English it would star all those below.

  • [...] enter image description here Movies
    • [✓] enter image description here English
      • [✓] enter image description here Lord of the Rings
      • [✓] enter image description here Gladiator
    • [...] enter image description here Hindi
      • [...] enter image description here Devdas
      • [...] enter image description here Mohabbatein

Obviously Gmail does the checkboxes and gold stars better than me:

enter image description here

10

You're on the wrong path, here.

The problem is that you try to show the attributes in different trees.

The tree should contain the content. The attributes should be displayed as attributes to each node.

This can be done in various ways depending on the importance of attribute.

As a column:

enter image description here

...or:
- As a popup dialog
- By showing the attributes directly in the context menu
- Sliding into a new screen (mobile devices)

3
  • I also have sub category like Action, Comedy, Thriller. There will be atleast 5 levels. In that scenario Default column will be moving away from screen. I am thinking of having symbol like * next to the check box. Not sure how those things will be work with Tree component like wwwendt.de/tech/dynatree/doc/sample-select.html Jan 2, 2013 at 13:28
  • As the answer states you could try doing it with a right-click popup on the main tree - perhaps modifying the label to indicate that it is default
    – icc97
    Jan 2, 2013 at 14:51
  • @icc97, if i do right click and select 'Favorite' option from context menu, how the user will feel its marked as favorite? Do we highlight those nodes in different color? Also it has more levels like Action, Comedy etc. In that case if i mark Action as favorite, i should highlight all children too. Jan 2, 2013 at 16:20
1

For starters, it is not an easy task you got.

One does not simply tree graph movies.

The tree representation is problematic

  • If you add more attributes or features to a movie, you might need to be able to open up the items to edit them. You could consider how to do that later. But if you have to, the open action will be confused with the expand action.
  • The same movie could be found in different nodes. Even more so if you add subcategories like Genre.

Tag and search

Spontaneously, I would suggest a tag and search system instead.

On IMDB, Gladiator does not belong to Drama, as much as it has Drama. Languages, Director and other attributes could also be categorized with tags.

Every link here would be a potential tree branch:

slightly modified image 1

A search box can find the end nodes. On StackExchange, you can also find end nodes by browsing tags.

Instead of drilling down a tree, tags could be searched and display all of the item with certain tags:

slightly modified image 2

Finally, you will have to handle setting attributes, considering that a movie can appear in different categories or subtrees at once. If a user may see English movies, but not Dramas, will the user be allowed to see Gladiator?

2
  • Only for example purpose i simulated my problem with Movies and Categories. However my actual data is pure hierarchical structure. One node cant be shared under two parent. I am dealing with Organization Hierarchy in real application Jan 3, 2013 at 8:20
  • I admit that never really understood the user story.
    – JOG
    Jan 3, 2013 at 8:25
1

What about using one tree with the nodes having checkboxes to specify attributes:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The '[ ]' represent checkboxes. You could have any number of attributes or states on a row. Use of typography and colors could help distinguish between the main hierarchy and node attributes.

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.