Principio de Figura-Fondo
Resumen
El sistema perceptual organiza elementos visuales en figuras (objetos de atención) y fondo (contexto). Los elementos se perciben como uno u otro, no ambos simultáneamente.
Origen
- •Escuela: Psicología de la Gestalt
- •Año: ~1920s
- •Autor principal: Edgar Rubin (jarrón de Rubin)
Fundamento Psicológico
El cerebro necesita separar objetos de su contexto para procesarlos. La relación figura-fondo es inestable cuando ambos son igualmente prominentes (como en ilusiones ópticas), causando confusión visual. En diseño, debemos hacer clara esta distinción.
Aplicación en Diseño
Modales y Overlays
- •Background oscurecido (scrim) detrás de modal
- •Modal con shadow prominente
- •Elevación visual clara
- •Focus trap en el elemento frontal
Jerarquía de Capas
- •Z-index consistente para tipos de elementos
- •Shadows que indican elevación
- •Blur en elementos de fondo
- •Contraste entre capas
Focus y Selección
- •Elementos seleccionados destacados del fondo
- •Estados hover con elevación sutil
- •Active states con mayor prominencia
- •Disabled states fundidos con fondo
Texto y Contenido
- •Contraste suficiente texto/fondo (4.5:1 mínimo)
- •Backgrounds que no compiten con contenido
- •Imágenes con overlays para texto
- •Cards elevadas sobre el fondo de página
Ejemplos
- •iOS Modals: Fondo desenfocado, modal nítido
- •Google Material: Elevation system con shadows
- •Lightboxes: Imagen destacada, fondo oscurecido
- •Dropdown menus: Elevados sobre contenido
- •Toast notifications: Flotando sobre la UI
Anti-patterns
- •❌ Modales sin scrim que se pierden en el fondo
- •❌ Texto sobre imágenes sin overlay
- •❌ Elementos superpuestos sin jerarquía clara
- •❌ Backgrounds con patrones que compiten
- •❌ Niveles de elevación inconsistentes
Métricas
- •Contrast Ratio: Cumplimiento de WCAG (4.5:1, 3:1)
- •Layer Hierarchy Test: Usuarios identifican qué está "encima"
- •Modal Visibility: Reconocimiento inmediato de overlays
- •Visual Noise Score: Competencia figura/fondo medida
Principios Relacionados
- •[[closure]] - Completar figuras reconocibles
- •[[nielsen-minimalist-design]] - Reducir ruido de fondo
- •[[common-region]] - Delimitar figuras claramente
Referencias
- •Rubin, E. (1915). "Synsoplevede Figurer"
- •Palmer, S.E. (1999). "Vision Science: Photons to Phenomenology"
- •https://www.nngroup.com/articles/gestalt-figure-ground/