---
name: common-region
description:
  Elementos dentro de un área delimitada se perciben como grupo. Use cuando
  diseñe cards, secciones, formularios agrupados, o contenedores visuales.
metadata:
  author: ux-ui-skills
  version: "1.0"
  category: gestalt
---

# Principio de Región Común

## Resumen

Los elementos que comparten un área cerrada o delimitada se perciben como
pertenecientes al mismo grupo, incluso si no comparten otras características.

## Origen

- **Autor**: Stephen Palmer
- **Año**: 1992
- **Fuente**: "Common Region: A New Principle of Perceptual Grouping"

## Fundamento Psicológico

Los límites visuales crean containers perceptuales que el cerebro interpreta
como agrupadores. Es un principio más reciente, agregado a la Gestalt clásica,
pero extremadamente relevante para interfaces digitales donde cards y containers
son ubicuos.

## Aplicación en Diseño

### Cards y Containers

- Cards con border o background diferenciado
- Secciones con fondos alternos
- Fieldsets con border visible
- Well components para contenido agrupado

### Formularios

- Grupos de campos relacionados en sections
- Fieldsets para datos de contacto, envío, pago
- Inline grouping para campos relacionados
- Step containers en wizards

### Dashboards

- Widgets en cards separadas
- Métricas agrupadas por categoría
- Paneles con bordes definidos
- Data visualization containers

### Listas y Tablas

- Rows con alternating backgrounds
- Headers en región separada
- Footers delimitados
- Grupos de filas relacionadas

## Ejemplos

- **Material Design Cards**: Elevated containers para contenido
- **Bootstrap Wells**: Áreas con fondo diferenciado
- **Form Fieldsets**: Grupos de campos con legend
- **Dashboard Widgets**: Cada métrica en su card
- **Stripe Checkout**: Secciones claramente delimitadas

## Anti-patterns

- ❌ Contenido relacionado sin container visual
- ❌ Cards con bordes tan sutiles que no delimitan
- ❌ Secciones sin separación clara
- ❌ Formularios sin agrupación de campos
- ❌ Demasiados niveles de nesting confusos

## Métricas

- **Group Association Accuracy**: Usuarios asocian contenido correctamente
- **Visual Boundary Clarity**: Claridad de delimitaciones
- **Container Hierarchy**: Niveles de anidamiento comprensibles
- **Scan Pattern Efficiency**: Eye-tracking respeta regiones

## Principios Relacionados

- [[proximity]] - Cercanía dentro de región refuerza grupo
- [[figure-ground]] - Región como figura sobre fondo
- [[similarity]] - Styling de containers consistente

## Referencias

- Palmer, S.E. (1992). "Common Region: A New Principle of Perceptual Grouping"
- Lidwell, W. et al. (2010). "Universal Principles of Design"
- https://uxdesign.cc/gestalt-principles-in-ux-design-6-common-region-26ab9d57c8a7