# Visual Navigation Tree Testing - Quick Start Guide

## 🚀 Get Started in 4 Steps

### Step 1: Create Study
1. Go to **Studies** → **Create Study**
2. Study Type: **Tree Testing Study**
3. Display Mode: **Visual Navigation**
4. Click **Create Study**

### Step 2: Build Navigation
1. Click **Build Tree Structure**
2. Click **Add Root Item** (e.g., "Products", "Account", "Support")
3. Click **Add Child** on each root item to create dropdown menus
4. Add nested items for multi-level dropdowns
5. Use realistic menu labels

### Step 3: Define Tasks
1. Click **Define Tasks**
2. Click **Add Task**
3. Write scenario: "You want to update your email address. Where would you go?"
4. Select correct answer from dropdown
5. Create 5-10 tasks

### Step 4: Test!
1. Set study to **Active**
2. Share URL with participants or use in moderated sessions
3. View results in **Reports** → **Tree Testing Analysis**

---

## 📊 Visual Comparison

### Standard Tree Testing Mode
```
Welcome Screen
    ↓
Text-based expandable tree
├── Click to expand
├── Click to collapse
└── Select final answer
```

### Visual Navigation Mode (NEW!)
```
Welcome Screen
    ↓
Realistic navigation bar
├── Hover to see dropdowns
├── Click menu items
└── Submit answer
```

---

## 💡 Perfect For

✅ Moderated usability studies
✅ Testing website navigation design
✅ Evaluating dropdown menus
✅ Realistic navigation scenarios
✅ Finding navigation pain points

---

## 🎯 Example Setup

**Navigation Structure:**
```
Products
├── Laptops
│   ├── Gaming
│   └── Business
└── Accessories

Account
├── Settings
├── Billing
└── Orders
```

**Example Task:**
"You want to update your billing address. Where would you go?"
**Correct Answer:** Account > Billing

---

## 📈 What Gets Tracked

- ✅ Which menu items they click
- ✅ First click success rate
- ✅ Navigation path taken
- ✅ Time per task
- ✅ Success rate per task
- ✅ Common wrong destinations

---

## 🔄 Tips

1. Use 5-7 top-level menu items max
2. Keep depth to 3-5 levels
3. Write realistic task scenarios
4. Don't use exact menu labels in tasks
5. Test with 5-8 participants
6. Review results after each session

---

## 🎨 What Participants See

1. **Task**: Clear description of what to find
2. **Navigation Bar**: Realistic menu at top
3. **Hover**: Dropdowns appear on hover
4. **Click**: Select their answer
5. **Path Display**: Shows "Products > Laptops > Gaming"
6. **Submit**: Move to next task

---

## ⚡ Quick Tips

- **For Moderators**: Share screen, ask "show me where you'd go"
- **For Researchers**: Use preview mode to test before going live
- **For Analysis**: Check first-click success rate and common paths
- **For Iteration**: Make changes based on confusion points

---

## 🆚 When to Use Each Mode

| Use Visual Nav Mode | Use Standard Tree Mode |
|---------------------|------------------------|
| Testing menu design | Testing IA concepts |
| Moderated studies | Unmoderated studies |
| Realistic navigation | Abstract organization |
| Dropdown menus | Hierarchical structure |

---

**Ready to Go!** 🎉

Create your first Visual Navigation Tree Test and start discovering navigation insights!