consistency-principle

Comportamientos y apariencias consistentes mejoran la usabilidad. Use cuando establezca patrones de diseño, defina guidelines, o evalúe coherencia del sistema.

SKILL.md

GitHub

Principio de Consistencia

Resumen

La usabilidad mejora cuando elementos similares funcionan de manera similar en todo el sistema. La consistencia reduce el aprendizaje, previene errores, y crea confianza.

Origen

  • Concepto: Principio fundamental de diseño de interfaces
  • Documentado por: Ben Shneiderman (8 Golden Rules), Jakob Nielsen
  • Año: ~1980s

Tipos de Consistencia

Consistencia Interna

  • Mismo sistema, mismas reglas
  • Botones iguales en todas las pantallas
  • Terminología uniforme
  • Comportamientos predecibles

Consistencia Externa

  • Convenciones de plataforma (iOS, Android, Web)
  • Patrones de industria
  • Estándares de accesibilidad
  • Expectativas de otros productos

Consistencia Visual

  • Colores con significado consistente
  • Tipografía con jerarquía clara
  • Espaciado y layout uniforme
  • Iconografía coherente

Consistencia Funcional

  • Mismas acciones, mismos resultados
  • Shortcuts que funcionan igual
  • Flujos predecibles
  • Feedback consistente

Aplicación en Diseño

Design Systems

  • Tokens de diseño documentados
  • Componentes reutilizables
  • Guidelines de uso
  • Patrones de interacción definidos

UX Writing

  • Voz y tono consistente
  • Terminología estandarizada
  • Mensajes de error uniformes
  • CTAs con lenguaje predecible

Interacciones

  • Gestos con significado fijo
  • Animaciones con timing consistente
  • Estados (hover, active, disabled) uniformes
  • Feedback visual predecible

Ejemplos

  • Material Design: Sistema completo de Google
  • Apple HIG: Guidelines para iOS/macOS
  • Stripe: Consistencia en productos, docs, dashboard
  • Slack: Patrones uniformes en toda la app
  • Notion: Blocks que funcionan igual en todos lados

Anti-patterns

  • ❌ Botones de diferentes colores para misma acción
  • ❌ Terminología mixta ("Guardar" vs "Salvar")
  • ❌ Navegación que cambia de posición
  • ❌ Gestos con significados diferentes
  • ❌ Estilos de fecha/hora inconsistentes

Métricas

  • Style Guide Compliance: Adherencia a guidelines
  • User Expectation Match: Comportamiento vs expectativa
  • Learnability Score: Velocidad de aprendizaje
  • Error Rate by Inconsistency: Errores por confusión

Principios Relacionados

  • [[nielsen-consistency]] - Heurística de consistencia
  • [[jakobs-law]] - Expectativas de otros sitios
  • [[similarity]] - Gestalt: similitud visual

Referencias