6

I'm working on a radial tree. There will be nodes on branches and leaves of each tree, with text next to it -- using this model on d3.

Now, I realize that it is very neat that they managed to place the text in the angle of the line, so the text never overlapped, but it is also very annoying for the user to read. Half way through, the text changes direction -- this actually makes it easier for the user, but on my own tree, it will be confusing, because my label has (icon)label so half way through, the icon will be at the outer edge of the circle instead of inner.

I'm just wondering if anyone knows if there is certain pattern that is better for the user. Angled text is already bad (probably), the user has to keep turning his/her head to read, and changing half way through, may be even worse (I'm not sure) -- maybe it makes sense because the head can't turn 360 degree!.

enter image description here. You can find the live example here: http://bl.ocks.org/mbostock/4063550

Edit: In addition to the text problem. Each text actually triggers an additional dropdown to open additional information at another box. However, I'm having trouble deciding the placement of this dropdown, simply because all the text are in strange angles, making it hard to decide whether the left side, or the right side would be better, or if they'd both be confusing. Anyone has any example of dropdown from rotated text? What do I have to be aware of and how should I make it more obvious for the user which dropdown relate to which text?
enter image description here

Improve this question
4
  • Just allow the lement to rotate and it's a very nice solution, there was a discussion about ways to implemnt this a few days ago
    – Devin
    Commented Jun 17, 2015 at 15:23
  • Actually there is a rotating example: mbostock.github.io/d3/talk/20111018/cluster.html The team has rejected this due to its slow response and some problems on touch screen. I think it is an elegant solution, unfortunately, a ux designer has to work around technical restraint and decisions of other people.
    – CleverNode
    Commented Jun 17, 2015 at 15:30
  • The tool Visual Thesaurus uses a clever interactive tree cloud ui that may provide some inspiration to your solution. Here's a screenshot i.imgur.com/hJcK9TI.png
    – InternetBear
    Commented Jun 17, 2015 at 22:01
  • checked it out. Axiom ~> labels should not reverse in the middle of a group. Counting elements to the left/right/lower/higher of X and Y axis is the only determinant. An angled dropdown list? Not in the picture. User gets nauseous. User punch monitor screen. User send you bill. Otherwise, yours looks fine.
    – Jedi Commymullah
    Commented Jun 24, 2015 at 2:19

3 Answers 3

Reset to default
4

Due to the dropdown requirement, it seems like a flat (or horizontal) tree would have many advantages. a flat tree

If text is angled off a radial tree the drop down would either be angle-aligned with the text node (hence also angled) or not angled (and not aligned with the associated text node). Either case is highly unconventional. Is there a strong case for a radial tree over a flat tree, strong enough to justify the strangeness of the dropdowns?

D3 does flat trees nicely. Vertical trees with horizontal text is another option. A radial tree gives a certain compactness, but maybe you could compensate for the less compactness of a flat tree with zooming and panning capabilities.

Improve this answer
3
  • Just in case, the OP's example is D3
    – Devin
    Commented Jun 17, 2015 at 20:44
  • Thank you. We have a flat tree view, but the radial representation of the data is a business requirement -- be it tree, or other kinds of representation.
    – CleverNode
    Commented Jun 18, 2015 at 17:49
  • @Novina -"the radial representation of the data is a business requirement", OK, understood. But in that case don't make it a drop down, make the data or the options show up in a box (sidebar type thing) on the right on click (or maybe even hover). The idiom is not click-dropdown, it's click-sidebar-is-populated. It's a difficult problem, good luck.
    – obelia
    Commented Jun 19, 2015 at 4:45
3

When the number of items vary greatly in a nested hierarchical structure then a simple tree view may be the way to go for the following reasons.

tree

1. Showing the number of child items

Often times just knowing how many items are below a parent item is enough for a user to keep scanning past it without even having to look at what they are.

2. Text is predictable

You have already noticed that text flowing in all different directions can be hard on a user. In a standard tree view text always flows in the same direction.

3. Vertical space is easy to scroll

There is a lot of hardware that is specifically built to make vertical scrolling easy on the user (mouse wheel, touch screens, etc.) so using components that expand from top to bottom is better than one that could expand in all different directions.

Improve this answer
1
  • 1
    Showing the number is a good idea, we didn't think about that. However, the data must be in circular representation... some stupid business requirement from the client.
    – CleverNode
    Commented Jun 18, 2015 at 17:50
1

In this case I think it may be good to go back to first principles on what you are trying to achieve UX-wise.

There is no perfect answer here...it really depends on what you're trying to achieve with your users. For example:

  • If you're trying to communicate the high-level number and density of relationships, then a radial diagram helps.
  • If you think users will look at the tree because they are searching for ONE label which they will click and then move on with another page or site, then the radial format may work fine.
  • If you expect users to read more than one label, or an entire series, then the radial presentation is a pretty terrible way to read data. Even with rotation, the user has to click, measure and drag just to be able to read something which is a lot of effort for something that normally takes zero (for standard text).

...by reverting to first principles around your communication and interaction objectives you may find it easier to make solid decision here.

Improve this answer
2
  • The problem is, a radial tree isn't the best method to represent the data, but it is listed as a business requirement from the client. I sometimes think UX Designers have very little say in anything. The programmers tell you half the things on your list they can't do because it's not possible/takes too long, the client/marketing team often set very crazy constraint that you have to follow because that's where the money of the project is coming from.
    – CleverNode
    Commented Jun 18, 2015 at 17:53
  • 1
    @Novina that's more true than it should be: sometimes all you can do is point out that it's a Really Bad Idea in your professional opinion, but ultimately someone else calls the shots. An optimistic way of looking at this is: ultimately all good design is respectful of constraints, and a business rule may be unreasonable but it's sometimes as immutable as a physical constraint. This isn't just a UX problem, e.g. doctors have to respect FDA rules even if they prevent a better course of treatment for a sick patient.
    – tohster
    Commented Jun 18, 2015 at 18:10

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.