How do I use the Tree tab in Tree Testing?

In this help, we'll discuss how to use the Tree tab to:

Create your tree in the tree editor
Load your tree from a live website
Import and export your tree in a CSV file

Create your tree in the tree editor

The tree editor found in the Tree tab displays and allows for easy editing of your tree
By clicking the nodes in the tree (that's what we call all of those labeled elements that your tree is composed of), you will select them and open them for editing.
By clicking the arrow on the leftmost side of the node, you can hide and show its children for easier work with the tree
When working with complex trees, use the Collapse all and Expand all buttons to hide or show the children of all nodes simulataneously
The Add child button will insert a new node inside the currently selected node
The Add sibling button will insert a new node immediately after the currently selected node
The Edit label button will allow you to rename the currently selected node
The Move up/down button will allow you to change the position of a node within the same parent
You can also move a node (and all of its children) to anywhere within the tree by simply dragging and dropping them wherever you want them to be
The Delete button will remove the currently selected node, as well as all of its children

Articles in this section

Load your tree from a live website

Do you already have a website with a tree-like structure, like a menu? Then you can just import it into Tree Testing right away with this extremely handy utility!

Step 1

Insert the URL to the page where your tree-like structure can be found.

Step 2

Select whether you want identify the tree on the page by id or class.

Step 3

If you picked id, insert the id of the desired element. If you picked class, insert space-separated classes (at least one) as well as the tag name.

Step 4

Click Load tree and witness magic happen.

Of course, HTML representation of trees can be complex, but if there are any inconsistencies with how the tree used in the tree test should look like, tweak it until you're satisfied. This feature will save you from tons of work that it would be to copy the whole tree by hand.

Does your menu have a very specific structure? Is the DOM of your website too complex for simple automatic tree loading to handle? No problem, you can simply UXtweak your tree.

To UXtweak your tree, simply add a data-uxtt attribute to the DOM elements containing the path to the element within the tree, like so:

HTML

<ul>
	<li data-uxtt="0">Node A</li>
	<li data-uxtt="1">
		Node B
		<span data-uxtt="2-1">Node CB</span>
		<span data-uxtt="2">Node C</span>
	</li>
	<span>
		<span>
			<span data-uxtt="2-0">Node CA</span>
		</span>
	</span>
</ul><ul>
	<li data-uxtt="0">Node A</li>
	<li data-uxtt="1">
		Node B
		<span data-uxtt="2-1">Node CB</span>
		<span data-uxtt="2">Node C</span>
	</li>
	<span>
		<span>
			<span data-uxtt="2-0">Node CA</span>
		</span>
	</span>
</ul>

which will get you a tree like this:

Import and export your tree in a CSV file

Above the tree editor, there is an option to import and export trees stored in a .CSV file. Use this option to easily reuse your tree between Tree Testing studies or if you want to bring in trees created somewhere other than UXtweak's tree editor.

Use UTF-8 encoded CSV files to ensure that the import works correctly. The simplest way to save your imported file with UTF-8 encoding is to edit it through Google Sheets (click the link for more instructions). To get a UTF-8 encoded file when saving your file in Excel, go to File -> Save As and select CSV UTF-8 before you click Save.