# Common Region

> Elementos dentro de un área delimitada se perciben como grupo. Use cuando diseñe cards, secciones, formularios agrupados, o contenedores visuales.

- Skill: `majiayu000/common-region` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/common-region`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/common-region/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/common-region

---


# 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