Interactive Decision Trees

Decision trees are a simple and method for making design choices in user interfaces. They help ensure consistency by breaking down decisions into clear steps

For instance, decision trees can guide you on whether to include an “alt” attribute in an HTML tag or on choosing the right selection control like a dropdown, checkbox, or radio button.

Example: Choosing What to Wear

To illustrate the concept of decision trees in a relatable way, let’s consider the common decision of choosing what to wear. A decision tree for this might look like:

1. Question: “Is it cold outside?”
   • Yes: “Wear a coat.”
   • No: Proceed to the next question.
2. Question: “Is it raining?”
   • Yes: “Wear a raincoat.”
   • No: “Wear light clothing.”

Here’s how this decision tree can be encoded in JSON:

{
  "question": "Is it cold outside?",
  "yes": {
    "conclusion": "Wear a coat."
  },
  "no": {
    "question": "Is it raining?",
    "yes": {
      "conclusion": "Wear a raincoat."
    },
    "no": {
      "conclusion": "Wear light clothing."
    }
  }
}

Here are some curated examples of decision trees to show how they can help with design decisions.

• What button should I use?
• Should I add an alternative text?
• Which selection control should I use?
• Which component should I use to transmit information?

You can already achieve a lot with the visuals but I’d like to make them interactive through a sequence of “yes/no” questions.