Wireframe Prototyping

# Prototype Testing

## Prototype Testing

```yaml
Testing Plan:

Objective: Validate primary user flows and UX clarity

Test Method: Unmoderated remote testing

Participants:
  - 5 representative users
  - Mix of experience levels
  - Similar to target persona

Tasks: 1. Register a new account
  2. Create your first project
  3. Invite a team member
  4. Edit project settings

Success Criteria:
  - 80%+ task completion rate
  - Average time <5 min per task
  - SUS score >70
  - No critical usability issues

Feedback Areas:
  - Navigation clarity
  - Button placement
  - Form fields
  - Visual hierarchy
  - Error handling

Analysis:
  - Top 3 friction points
  - User quotes
  - Design recommendations
```


# Prototyping Tools & Techniques

## Prototyping Tools & Techniques

```python
# Create interactive prototypes

class PrototypeFramework:
    TOOLS = {
        'Figma': {
            'fidelity': 'Medium-High',
            'interactivity': 'Full',
            'collaboration': 'Real-time',
            'cost': 'Free-$30/month'
        },
        'Framer': {
            'fidelity': 'High',
            'interactivity': 'Advanced',
            'collaboration': 'Limited',
            'cost': '$12+/month'
        },
        'Adobe XD': {
            'fidelity': 'High',
            'interactivity': 'Full',
            'collaboration': 'Good',
            'cost': '$20/month'
        }
    }

    def create_prototype_flow(self):
        """Define user interaction flows"""
        return {
            'screens': [
                {'name': 'Login', 'interactions': ['Email input', 'Password input', 'Submit button']},
                {'name': 'Dashboard', 'interactions': ['View projects', 'Create new', 'Search']},
                {'name': 'Project Detail', 'interactions': ['View tasks', 'Edit project', 'Share']}
            ],
            'flows': [
                {'from': 'Login', 'to': 'Dashboard', 'trigger': 'Valid credentials'},
                {'from': 'Dashboard', 'to': 'Project Detail', 'trigger': 'Click project'},
                {'from': 'Project Detail', 'to': 'Dashboard', 'trigger': 'Back button'}
            ]
        }

    def define_interactions(self, screen):
        """Map user interactions"""
        return {
            'screen': screen,
            'interactions': [
                {
                    'element': 'Submit button',
                    'trigger': 'Click',
                    'action': 'Validate form and submit'
                },
                {
                    'element': 'Email field',
                    'trigger': 'Focus',
                    'action': 'Show placeholder, hint text'
                }
            ]
        }

    def test_prototype(self, prototype):
        """Gather feedback on prototype"""
        return {
            'testing_method': 'Unmoderated user testing',
            'participants': 5,
            'duration': '30 minutes each',
            'tasks': [
                'Complete user registration',
                'Create first project',
                'Invite team member'
            ],
            'metrics': [
                'Task completion rate',
                'Time to complete',
                'Error rate',
                'User satisfaction'
            ]
        }
```


# Wireframe Examples

## Wireframe Examples

```yaml
Example: E-commerce Product Page

Header:
  [Logo] [Search bar] [Cart] [Account]

Hero Section:
  [Product image] [Price] [Add to cart] [Reviews: 4.5★]

Product Details:
  Description | Specs | Size guide

Product Images:
  [Main] [Thumb1] [Thumb2] [Thumb3]

Related Products:
  [Product card] [Product card] [Product card]

Footer:
  Contact | FAQ | Returns | Shipping info
```


---
name: wireframe-prototyping
description: >
  Create wireframes and interactive prototypes to visualize user interfaces and
  gather feedback early. Use tools and techniques to communicate design ideas
  before development.
---

# Wireframe Prototyping

## Table of Co