Tag Archives: visual designer

The Visual Designer: Drawing Out Your Decision Tree

Everyone prefers their own way of creating, and it can come in many forms. To address this, we built Zingtree with a few different ways to design and construct an interactive decision tree.

For the more visual learner, the Zingtree Visual Designer allows you to draw out your decision tree. This “white board” style lets users to create nodes, along with their connections, and see the nitty gritty details of how the tree functions.

Here’s how to get started with the Visual Designer:

1. Once you log in to your Zingtree account and start Designer, you’ll see a screen that looks like the one shown below, with one node already in place as a green box. This is the very first node your users will see and interact with.

2. Click on Node #1, and you’ll see an edit window pop up on the right hand side. You can edit the Title, Question and main Content segments to your liking.

3. Drag new nodes into the design area – these correspond to the pages in your decision tree. Again, select the green box to edit each node’s Question, Content, etc.

4. When you’re ready, add a Final Answer Node and edit to fit your needs. These will appear in blue, to differentiate from your green Question Nodes.

5. Continue to create these Questions & Answer Nodes by dragging new nodes into the design area, and then connect them using labeled arrows. The connecting arrows represent the button selections from each node.

6. Finish linking all of your nodes using this method, and you’ll end up with a finished product that looks something like this image below. Often times, Zingtree users only use this mode as a way of assembling their decision trees. Please keep in mind that things can get confusing for more complex trees that require more nodes.

For a more in-depth tutorial, watch this video to see how to build the example tree above using Zingtree Designer:

 

 

To view more ways of building your decision trees, check out our Zingtree Design Tutorials.

Update: New Decision Tree Designer and Data Entry Fields Management

NL-header-updates3

This latest Zingtree update is more comprehensive than most, primarily because we took some time to focus on our core decision tree building features and make them even better. You’ll see big improvements in Visual Designer, as well as managing Data Entry fields and editing nodes.

Visual Designer

The big change is that we’ve moved to a more powerful pop-up editor within Designer, and eliminated editing from the right panel. You now have a larger drawing area, and can do almost all of your work directly in Designer without having to go to Overview.

Designer also has “isolated” view – just click on a node, and you’ll see just the nodes and buttons connected to it. Additionally, you can print and export your tree drawings to PNG image files. And, Designer now loads 2x to 3x faster!

Important: To edit a node in Designer, you’ll need to double-click or right-click.

Here’s what some of the new changes look like:

Larger Drawing Area

larger drawing areaPop-Up Editor

Isolated View

Click on any node or button/arrow to highlight connections.

Other Designer updates:

  • Designer boxes resize to fit longer content when loading tree.
  • Designer with two buttons going to same place now has larger separation of arrow connectors.
  • Fix: Apostrophes in titles or questions now display properly.

Data Entry Fields

Also new is an improved way to manage data entry fields. Rather than inserting code into the content area, you can now manage data entry fields separately, which makes it easier for non-programmers to edit, add and change data fields.

Within the node editor (from Overview or Designer), you can add any number of data entry fields from a simple, easy-to-use form.

Complete instructions on how to use Data Entry Fields is in the Zingtree FAQ here.

Other Enhancements

Several other improvements and fixes are in this update, including:

  • Update: Tree node search now includes tags in search (h/t Trey H.)
  • Update: Simplified Edit Node.
  • Update: “Hide from Agent Portal” no longer defaulted when creating a new tree. Also gives hint to check this if no trees found in Agent portal.
  • Update: Copy Node on node editors, no more “Save and Create Duplicate”
  • New: Can now edit two trees at the same time through Designer, or keep two tabs open for different trees.
  • Fix: Edit Tree Node now shows links to all trees in your organization.
  • Fix: Traffic Map report now shows tree node links. (h/t Ben C.)
  • Fix: email-session-info.php will now substitute #source# or #agent# in the link (link node fix) (h/t Craig)
  • Update: Simple overview only shows scoring variable if scoring is being used.
  • Update: Preview now substitutes #agent_name# for author name. (h/t Marlin)
  • Update: Email nodes now insert body of message into “Notes” form field, which can be viewed and exported from the Form Data report (for Holly B.)
  • Fix: Search results linking to a tree node no longer fail (Chrissie)
  • New: Can delete multiple nodes easily from Simple Overview (for Ben C.)
  • Fix: Last Opened in My Trees page is adjusted for the user’s time zone (h/t Elijah H.)
  • New: Button Clicks report has a View All option to see all nodes on one page (h/t Mike H.)
  • Fix: apostrophe’s in page title no longer messes up #taglist# link tracking (Chrissie)

Thanks again to everyone who suggested updates! I’m sure we may have forgotten a few of you.

As always, if you have a suggestion to make Zingtree work better for you, please share.