Interactive Decision Trees

Decision trees are a simple and effective tool for making design choices in user interfaces. By breaking down decisions into clear steps, they help ensure consistency and usability.

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.

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