LogWhispererAI/.opencode/skills/ui-ux-design-user-experience/references/9-usability-principles.md at a3a641595d154b8ce615eecd75da33523c9219f1

Files

Luca Sacchi Ricciardi aa489c7eb8 docs: add comprehensive frontend landing page plan and download design skills

Add detailed landing page development plan in docs/frontend_landing_plan.md:
- Complete landing page structure (Hero, Problem/Solution, Features, Demo, CTA)
- Design guidelines from downloaded skills (typography, color, motion, composition)
- Security considerations (XSS prevention, input sanitization, CSP)
- Performance targets (LCP <2.5s, bundle <150KB, Lighthouse >90)
- Responsiveness and accessibility requirements (WCAG 2.1 AA)
- Success KPIs and monitoring setup
- 3-week development timeline with daily tasks
- Definition of Done checklist

Download 10+ frontend/UI/UX skills via universal-skills-manager:
- frontend-ui-ux: UI/UX design without mockups
- frontend-design-guidelines: Production-grade interface guidelines
- frontend-developer: React best practices (40+ rules)
- frontend-engineer: Next.js 14 App Router patterns
- ui-ux-master: Comprehensive design systems and accessibility
- ui-ux-systems-designer: Information architecture and interaction
- ui-ux-design-user-experience: Platform-specific guidelines
- Plus additional reference materials and validation scripts

Configure universal-skills MCP with SkillsMP API key for curated skill access.

Safety first: All skills validated before installation, no project code modified.

Refs: Universal Skills Manager (github:jacob-bd/universal-skills-manager)
Next: Begin Sprint 3 landing page development

2026-04-03 13:13:59 +02:00

2.2 KiB

Raw Blame History

Nielsen's 10 Usability Heuristics

Visibility of System Status: Keep users informed with appropriate feedback
Match Between System and Real World: Use familiar language and concepts
User Control and Freedom: Provide undo, redo, and easy exits
Consistency and Standards: Follow platform conventions
Error Prevention: Design to prevent errors before they occur
Recognition Rather Than Recall: Make options and actions visible
Flexibility and Efficiency of Use: Accelerators for expert users
Aesthetic and Minimalist Design: Remove irrelevant information
Help Users Recognize, Diagnose, and Recover from Errors: Clear error messages
Help and Documentation: Provide searchable, task-focused help

Cognitive Load

What Is It? The mental effort required to use an interface. High cognitive load leads to user frustration and errors.

Reducing Cognitive Load:

Chunk information into digestible pieces
Use progressive disclosure
Provide clear visual hierarchy
Minimize choices (paradox of choice)
Use familiar patterns and conventions
Reduce required memory with visual cues

Fitts's Law

What Is It? The time to reach a target is proportional to distance and inversely proportional to target size.

UI Implications:

Make important buttons large and easy to reach
Place frequently used actions in accessible areas
Increase touch targets for mobile (minimum 44x44px)
Use edge and corner positions for key actions (infinite depth)

Hick's Law

What Is It? Decision time increases logarithmically with the number of choices.