How do I use the Tree tab in Tree Testing?

Table of contents

This section covers 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 simultaneously.
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.

Tree editor

Create your tree’s structure and name the labels to make your tree.

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 to 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 a 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, the HTML representation of trees can be complex, but if there are any inconsistencies with what 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>

which will get you a tree like this:

Loaded UXtweaked tree

Even a complex DOM structure can be easily loaded if you UXtweak the tree.

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.

CSV file format example

General Tab Tasks Tab