Looking at coming up with some new concepts for decisions trees that can be used/adapted for both mobile and desktop views of a web application. Just wondering if we have evolved from the classic decision tree diagrams to something more practical and user friendly for the web?

Has anyone seen good examples of innovative approaches to designing this type of interaction, especially for deep decision trees, that allow a user to track the decision making process (hopefully not a series of radio button selections in collapsible UI components)?

The type of decision tree structure that I am designing for is generally YES/NO decisions, but occasionally there are some selections from 3-4 items. Each branch generally goes into at least 3-4 steps further before ending. I don't necessarily think it is important to show the user the whole path at any given time, but it is ideal for them to be able to see at a glance where they have come from and allow them to step back easily.

I have tried to do some searches on Google Images under "nodal material editor" and "interactive decision tree" and some examples of what I am looking for might be similar to some mindmapping tools or these examples:

NodeFlex : http://www.shaderplay.com/products/nodeflex/overview/overview.html

Interactive: http://www.ft.com/cms/s/2/0a35504a-0615-11e1-a079-00144feabdc0.html#axzz1viRTg7qA

  • 1
    So to be clear, you don't want something like this? nytimes.com/interactive/2012/06/14/us/… – Mark Mar 31 '16 at 22:57
  • @Mark actually, that's not too bad (most things that come out of NYTimes tend to be pretty good). I wouldn't say that it is innovative, but certainly quite user friendly. It works for more shallow and less complex decision tree structures, but probably not more something more complex that I have in mind. – Michael Lai Apr 1 '16 at 1:04
  • Have you seen the nodal shader/material editors in things like 3ds Max and Unreal Engine? – Confused Apr 1 '16 at 17:57
  • @Confused Not a 3d person so I haven't, but some screenshots in an answer would be much appreciated. Thanks. – Michael Lai Apr 1 '16 at 19:58
  • Unfortunately the answer to your question is "NO, we have not evolved or advanced tree diagrams, particularly not for the web!" It's tangential, what's being done in complex 3D design apps in need of branching, and will require significant time to lay out the possible inspiration it can provide. – Confused Apr 1 '16 at 20:36

In a similar line to the nyt solution for a more complex diagram I would, for every answer, write a sentence( do you like green - yes - no // you like green) And when the user makes a choice put them on clickable cards on the top as you would breadcrumbs.

This way you can have the question centered, allowing the user to focus on the choices being made, and still show the history and facilitate changes of mind.


| improve this answer | |
  • 1
    Is this a bit like a 'breadcrumb' style of showing decision history? – Michael Lai May 15 '16 at 22:21
  • Yes, just today I saw something like this. – LNubiola May 15 '16 at 22:24
  • Can you provide a link/reference/screenshot? – Michael Lai May 15 '16 at 22:24
  • I'm sorry I can't find it, yesterday I spent hours sifting through real state websites and I don't know in which one this was. Next time I'll make sure to share. Sorry again :( – LNubiola May 16 '16 at 13:59

Nothing wrong with the good old decision tree diagrams:

e.g. http://www.collegehumor.com/post/6883988/where-should-you-post-that-thing-you-want-to-share

enter image description here

| improve this answer | |
  • same comment as one of the previous answers... looks a little bit complex in terms of allowing the user to focus on their current path while tracking decision history. – Michael Lai May 15 '16 at 22:23
  • looks that way to you or yo the interviewed users? in the latter case, the text can be made a bit gray by default and on hover the node's path would turn black.. or changing the opacity.. click could preserve the highlight in a way to be able to compare 2 multiple paths and for mobile – Aprillion May 16 '16 at 7:47

My favourite is Coggle.it. In there users can design complex graphs, add annotations, categorise with color and other things.

Part of my notes for the Gamification course.

enter image description here

| improve this answer | |
  • Looks a bit complex in terms of allowing the user to focus on their current path while still tracking their history... – Michael Lai May 15 '16 at 22:23
  • Because in my case there is lot's of content. If there were only "yes" and "no", it would be more compact == easier to read. – Zoe K May 16 '16 at 8:12

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.