# Visual Navigation Builder - Quick Start

## 🚀 Get Started in 3 Steps

### Step 1: Run Migration
```bash
cd /path/to/ux_tst
php scripts/add_display_mode_column.php
```

### Step 2: Create Study
1. Go to **Studies** → **Create Study**
2. Choose **Study Type**: "Card Sort Study"
3. Select **Display Mode**: "Visual Navigation Builder"
4. Choose **Sort Type**: Open, Closed, or Hybrid

### Step 3: Add Content
1. Click **Manage Cards** to add your navigation items
2. If using Closed/Hybrid, add your top-level categories
3. Set study to **Active** and share the link!

---

## 📋 Visual Comparison

### Standard Mode
```
┌─────────────────────────────────────────┐
│  CARDS: [Card 1] [Card 2] [Card 3]...  │
└─────────────────────────────────────────┘

┌──────────┐  ┌──────────┐  ┌──────────┐
│ Category │  │ Category │  │ Category │
│    1     │  │    2     │  │    3     │
│          │  │          │  │          │
│ [Card A] │  │ [Card B] │  │          │
└──────────┘  └──────────┘  └──────────┘
```

### Visual Nav Mode
```
┌────────────────────────────────────────────────┐
│ 🧭 Navigation Menu Preview                    │
├────────────┬────────────┬────────────┬────────┤
│  Category  │  Category  │  Category  │  More  │
│      1     │      2     │      3     │        │
│     ▼      │     ▼      │     ▼      │        │
│ • Card A   │ • Card B   │            │        │
│ • Card D   │ • Card C   │            │        │
└────────────┴────────────┴────────────┴────────┘

┌────────────────────────────────────────────────┐
│ 📦 Available Cards                        3/10 │
├────────────────────────────────────────────────┤
│  [Card 4]  [Card 5]  [Card 6] ...             │
└────────────────────────────────────────────────┘
```

---

## 🎯 Perfect For

- ✅ Website navigation testing
- ✅ Menu structure studies  
- ✅ Information architecture
- ✅ Dropdown organization
- ✅ Engaging participants

---

## 💡 Tips

**For Researchers:**
- Use closed sort with predefined top-level categories
- Test with 3-7 main navigation items
- 15-30 cards works best
- Same data format as standard mode

**For Participants:**
- Drag cards onto nav categories
- Hover to see dropdown items
- Drag back to move cards
- Watch menu build in real-time

---

## 📊 Data Collection

Both modes record the **same data**:
- Card-to-category assignments
- Timing information
- Move events
- Final categorization

Use the same reports and analysis tools!

---

## ⚡ Quick Example

**Study Goal**: Organize website content into navigation menu

**Setup:**
1. **Display Mode**: Visual Navigation Builder
2. **Sort Type**: Closed
3. **Categories**: Products, Services, About, Support, Resources
4. **Cards**: Blog, Pricing, Features, Contact, Team, FAQ, etc.

**Result**: Participants build a realistic navigation menu by dragging content items into appropriate top-level categories!

---

**Questions?** See [VISUAL_NAV_BUILDER_GUIDE.md](./VISUAL_NAV_BUILDER_GUIDE.md) for full documentation.