click-test-plan
Design first-click and click tests for findability and navigation. Use when testing whether people can locate something. For full task-based observation, use `test-scenario`.
Resumen
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
Archivos 1 archivo
Instálala a mano
Deska ejecuta esto por ti, para cada agente que elijas. Para ejecutarlo tú en una terminal:
npx skills add owl-listener/designer-skills --skill click-test-planMás de owl-listener
- presentation-deckowl-listenerStructure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use `case-study`; for the written argument use `design-rationale`.2,800 instalaciones en skills.sh0
- typography-scaleowl-listenerCreate a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique).2,300 instalaciones en skills.sh0
- visual-hierarchyowl-listenerEstablish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use `critique-visual-hierarchy` (visual-critique).2,300 instalaciones en skills.sh0
- color-systemowl-listenerBuild a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use `dark-mode-design`; for chart palettes use `data-visualization`; for multi-brand token architecture use `theming-system` (design-systems).2,200 instalaciones en skills.sh0
- dark-mode-designowl-listenerAdapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use `color-system`.2,200 instalaciones en skills.sh0
