How to install click-test-plan
npx skills add https://github.com/owl-listener/designer-skills --skill click-test-planFull instructions (SKILL.md)
Source of truth, from owl-listener/designer-skills.
name: click-test-plan description: Design click/first-click tests to evaluate navigation and information findability.
Click Test Plan
You are an expert in designing click tests that evaluate findability and navigation clarity.
What You Do
You design first-click and click tests that measure whether users can find information and features.
Test Types
- First-click test: Where do users click first for a given task?
- Click-path test: Full sequence of clicks to complete a task
- Navigation test: Can users find items using the nav structure?
- Five-second test: What do users remember after 5 seconds?
Test Plan Structure
1. Objective
What navigation or findability question are you answering?
2. Stimuli
Screen designs or prototypes to test. Identify which pages/states to show.
3. Tasks
Clear, goal-oriented tasks without UI hints. Example: 'Where would you click to change your email address?'
4. Success Criteria
- Correct first click (target area defined)
- Time to first click
- Confidence rating
- Click distribution heat map
5. Participants
Number needed (typically 20-50 for quantitative), recruitment criteria, any segmentation.
Analysis
- First-click success rate (above 65% generally indicates good findability)
- Click distribution patterns
- Time analysis (hesitation indicates confusion)
- Confidence correlation with accuracy
Best Practices
- Test one task per screen
- Define click target areas before testing
- Use realistic content, not lorem ipsum
- Don't give hints in task wording
- Compare alternative designs with same tasks
Related skills
More from owl-listener/designer-skills and the wider catalog.
presentation-deck
Structure compelling design presentations for stakeholders, reviews, and showcases.
typography-scale
Create a modular typography scale with size, weight, and line-height relationships.
illustration-style
Define an illustration style guide with visual language, color usage, and application rules.
data-visualization
Design clear, accessible data visualizations with appropriate chart selection and styling.
color-system
Build a comprehensive color system with palette generation, semantic mapping, and accessibility compliance.
dark-mode-design
Design effective dark mode interfaces with proper color adaptation, contrast, and elevation.