# Visual Navigation Tree Testing Feature Guide

## Overview

The **Visual Navigation Tree Testing** feature combines the power of tree testing methodology with a realistic, visual navigation bar interface. This is perfect for moderated usability studies where researchers want to test navigation design with participants using a realistic menu interface rather than a text-based tree.

---

## What Is It?

This feature allows you to:
- Create tree testing studies with a **visual navigation bar** instead of text-based trees
- Present participants with a realistic website-style navigation menu
- Have participants navigate through hover dropdowns to find menu items
- Track clicks, paths, and navigation patterns just like standard tree testing
- Use it for moderated studies where researchers guide participants through tasks

---

## Key Differences from Standard Tree Testing

| **Standard Tree Testing** | **Visual Navigation Tree Testing** |
|---------------------------|-----------------------------------|
| Text-based expandable tree | Realistic navigation bar with dropdowns |
| Click to expand/collapse items | Hover to see dropdowns, click to select |
| Better for testing information architecture | Better for testing actual navigation design |
| More abstract representation | More realistic user experience |
| Ideal for unmoderated studies | Ideal for moderated studies |

---

## When to Use Visual Navigation Mode

✅ **Use Visual Navigation Mode When:**
- Conducting moderated usability tests
- Testing website or app navigation design
- Want participants to experience realistic menu interactions
- Evaluating hover-based dropdown navigation
- Researching navigation patterns in a realistic context
- Testing menu labels and hierarchy with visual design

✅ **Use Standard Tree Testing Mode When:**
- Testing information architecture concepts
- Running unmoderated studies
- Focusing on content organization over visual design
- Want simplified, distraction-free navigation testing

---

## How to Set Up a Visual Navigation Tree Test

### Step 1: Create the Study

1. Navigate to **Studies** → **Create Study**
2. Select **Study Type**: "Tree Testing Study"
3. Select **Display Mode**: "Visual Navigation"
4. Fill in title and description
5. Set initial status (Draft or Active)
6. Click **Create Study**

### Step 2: Build the Navigation Structure

1. After creating the study, click **Build Tree Structure**
2. Click **Add Root Item** to create top-level navigation items
3. For each top-level item, click **Add Child** to create dropdown items
4. Create nested dropdowns by adding children to child items (up to 3-5 levels)
5. Use realistic menu labels that match your actual website/app navigation

**Example Navigation Structure:**
```
Products (Top-level)
├── Laptops (Dropdown item)
│   ├── Gaming Laptops (Sub-dropdown)
│   └── Business Laptops (Sub-dropdown)
├── Desktops (Dropdown item)
└── Accessories (Dropdown item)

Account (Top-level)
├── Profile Settings
├── Payment Methods
└── Order History
```

### Step 3: Define Tasks

1. Click **Define Tasks** after building your navigation
2. Click **Add Task** to create a task
3. Write a realistic scenario (e.g., "You want to update your email address. Where would you go?")
4. Select the **Correct Answer** from the dropdown (the navigation item that should be the destination)
5. Create 5-10 tasks for comprehensive testing

**Example Tasks:**
- "You want to buy a laptop for gaming. Where would you find gaming laptops?"
- "You need to change your billing address. Where would you go?"
- "You're looking for a wireless mouse. Where would you find it?"

### Step 4: Activate and Share

1. Go back to **Studies** → **Edit Study**
2. Set status to **Active**
3. Share the study URL with participants
4. Or use it in moderated sessions where you guide participants

---

## Participant Experience

### What Participants See:

1. **Welcome Screen**: Instructions explaining the navigation test
2. **Task Display**: Clear task description at the top
3. **Visual Navigation Bar**: Realistic navigation menu
4. **Interactive Dropdowns**: Hover over menu items to see dropdown options
5. **Path Display**: Shows their current selection
6. **Submit Button**: Enabled when they select an answer

### How Participants Interact:

1. Read the task
2. Hover over top-level navigation items to see dropdowns
3. Hover over dropdown items to see nested sub-dropdowns
4. Click on the menu item they think is correct
5. See their selection displayed (e.g., "Products > Laptops > Gaming Laptops")
6. Click **Submit Answer** to move to the next task
7. Can **Reset Selection** to start over
8. Can **Skip Task** if they're not sure

---

## For Moderators

### Running Moderated Sessions:

This mode is perfect for moderated studies where you:
- Share your screen with participants
- Ask them to verbally guide you through the navigation
- Watch them think through their choices
- Ask follow-up questions about their decision-making

### Moderated Session Flow:

1. **Set up**: Open the study in participant mode as the researcher (you'll see a preview banner)
2. **Share screen**: Let the participant see the navigation
3. **Read task**: Read the task aloud or have them read it
4. **Ask to navigate**: "Show me where you would go to accomplish this task"
5. **Watch their process**: Note hesitations, wrong turns, thinking aloud
6. **Submit answer**: Click their final selection
7. **Ask follow-up**: "Why did you choose that option?" or "What did you expect to find there?"
8. **Move to next task**

---

## Data Collected

The system tracks:
- ✅ **Clicked path**: Every menu item they click on
- ✅ **First click**: Which top-level menu item they clicked first
- ✅ **Path length**: How many clicks it took
- ✅ **Time per task**: How long they spent on each task
- ✅ **Success rate**: Whether they found the correct destination
- ✅ **Navigation sequence**: The order of their clicks

---

## Viewing Results

### Tree Analysis Dashboard

1. Go to **Reports** → **Tree Testing Analysis**
2. View comprehensive metrics:
   - **Overall success rate** across all tasks
   - **Task-by-task breakdown** with success rates
   - **First-click analysis** (was their first click correct?)
   - **Average time** per task
   - **Average clicks** per task
   - **Common wrong destinations**
   - **Path analysis** showing navigation patterns

### Export Data

- Click **Export CSV** to download all navigation data
- Includes detailed click paths, timestamps, and task results
- Use for deeper analysis in Excel or data analysis tools

---

## Best Practices

### For Navigation Structure:

✅ Use realistic labels that match your actual website/app
✅ Keep hierarchies logical and intuitive
✅ Limit depth to 3-5 levels maximum
✅ Group related items together
✅ Use clear, descriptive labels
✅ Avoid jargon unless it's industry-standard

### For Writing Tasks:

✅ Use realistic scenarios participants might face
✅ Be specific about the goal ("update email address" not just "settings")
✅ Don't use exact menu label words in the task
✅ Write from the participant's perspective
✅ Make tasks actionable ("You want to..." or "You need to...")
✅ Create 5-10 tasks for comprehensive coverage

### For Moderated Studies:

✅ Start with easier tasks to build confidence
✅ Encourage thinking aloud
✅ Don't guide or hint at answers
✅ Note non-verbal cues (hesitation, confusion)
✅ Ask open-ended follow-up questions
✅ Keep tasks realistic and scenario-based

---

## Comparison with Other UX Methods

| **Method** | **What It Tests** | **Visual Nav Tree Testing** |
|-----------|-------------------|----------------------------|
| **Standard Tree Testing** | Information architecture | Tests IA + Visual menu design |
| **First-Click Testing** | Initial navigation decisions | Tracks first-click + full path |
| **Task Analysis** | Task completion success | Includes task success + navigation patterns |
| **Card Sorting** | Content organization | Tests organized navigation after card sort |

---

## Tips for Success

### Getting Quality Data:

1. **Test with 5-8 participants** for moderated studies
2. **Use realistic scenarios** participants would actually encounter
3. **Mix easy and difficult tasks** to get a range of data
4. **Don't prime participants** with menu terminology
5. **Observe and take notes** during moderated sessions

### Common Issues to Avoid:

❌ Using too many top-level items (keep to 5-7 max)
❌ Creating too-deep hierarchies (3-5 levels is optimal)
❌ Using vague or ambiguous labels
❌ Making all tasks too easy or too difficult
❌ Guiding participants toward answers

---

## Technical Details

### Database Tables Used:
- `tree_nodes` - Stores navigation structure
- `tree_tasks` - Stores tasks and correct answers
- `tree_paths` - Records every navigation click
- `tree_task_results` - Stores task completion and success data

### Files Involved:
- `participant_visual_tree.php` - Visual navigation interface
- `participant_tree.php` - Standard tree testing interface
- `tree_builder.php` - Build navigation structure
- `tree_tasks.php` - Define tasks
- `tree_analysis.php` - View results

### Display Mode Values:
- `standard` - Text-based tree navigation
- `visual_nav` - Visual navigation bar (this feature)

---

## FAQs

**Q: Can I switch between Standard and Visual Nav mode?**
A: Yes! Edit your study and change the Display Mode. Existing structure and tasks will work with both modes.

**Q: Can I use this for unmoderated studies?**
A: Absolutely! While it's designed for moderated studies, participants can complete it on their own just fine.

**Q: How many levels of navigation can I have?**
A: Technically unlimited, but we recommend 3-5 levels maximum for best user experience and results.

**Q: Can I see live results during a study?**
A: Yes! Go to Reports → Tree Testing Analysis while the study is active to see real-time results.

**Q: Does this work on mobile devices?**
A: Yes! The visual navigation interface is responsive and works on tablets and phones.

**Q: Can I test multiple navigation designs?**
A: Create separate studies for each design variation, then compare results across studies.

---

## Example Use Cases

### 1. E-Commerce Website Navigation
Test where users would go to find products, manage their account, or access customer support.

### 2. SaaS Application Menus
Test whether users can find key features in your app's navigation menu.

### 3. Corporate Website
Test if visitors can find information about products, services, careers, or contact information.

### 4. Content Management System
Test whether content creators can find the tools they need in complex admin navigation.

### 5. Learning Management System
Test if students can find courses, assignments, grades, and resources in educational platforms.

---

## Next Steps

1. ✅ Create your first Visual Navigation Tree Testing study
2. ✅ Build a realistic navigation structure
3. ✅ Write 5-10 task scenarios
4. ✅ Run a pilot test with 2-3 users
5. ✅ Refine your navigation based on results
6. ✅ Run your full study
7. ✅ Analyze results and iterate

---

## Support

For questions or issues:
- Check the **Tree Testing Analysis** dashboard for data
- Review this guide for best practices
- Test in researcher preview mode before going live
- Start with a pilot study to validate your setup

---

**Happy Testing! 🧭**

Build better navigation through evidence-based design decisions.