# Mapping Principle

> Los controles deben corresponder naturalmente a sus efectos. Use cuando diseñe controles de UI, layouts de controles, o cualquier relación causa-efecto.

- Skill: `majiayu000/mapping-principle` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/mapping-principle`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/mapping-principle/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/mapping-principle

---


# Principio de Mapping (Correspondencia)

## Resumen

La relación entre controles y sus efectos debe ser obvia y natural. Un buen
mapping aprovecha analogías físicas y espaciales para que el uso sea intuitivo.

## Origen

- **Autor**: Don Norman
- **Año**: 1988
- **Fuente**: "The Design of Everyday Things"

## Tipos de Mapping

### Mapping Espacial

- Control ubicado cerca de lo que controla
- Botón izquierdo controla elemento izquierdo
- Slider vertical para control vertical
- Layout que refleja relación física

### Mapping Conceptual

- Analogías con el mundo real
- Volumen: más = más fuerte
- Brillo: más = más claro
- Temperatura: derecha = más caliente

### Mapping Cultural

- Convenciones aprendidas
- Scroll down = contenido sube (controversial)
- Verde = continuar, rojo = parar
- X = cerrar

## Aplicación en Diseño

### Controles de UI

- Sliders horizontales para valores horizontales
- Toggles que van de izquierda (off) a derecha (on)
- Volume que sube al mover hacia arriba
- Zoom con pinch natural

### Layouts

- Controles de texto cerca del text area
- Settings de elemento junto al elemento
- Preview al lado de controles que lo modifican
- Navegación que refleja estructura de contenido

### Formularios

- Labels directamente sobre o junto a campos
- Botones de acción al final del flujo
- Grupos que reflejan categorías de datos
- Progress que va de izquierda a derecha

### Interfaces Espaciales

- Mapas con controles de zoom intuitivos
- Editores gráficos con paletas contextuales
- Dashboards con métricas relacionadas agrupadas
- Timelines con controles temporales lógicos

## Ejemplos

- **Stovetop controls**: Disposición que coincide con hornillas
- **Car mirrors**: Controles ubicados en el espejo
- **iOS volume**: Botones físicos arriba/abajo
- **Figma**: Properties panel junto a objeto seleccionado
- **Google Maps**: Zoom con + arriba, - abajo

## Anti-patterns

- ❌ Controles alejados de lo que controlan
- ❌ Sliders verticales para valores horizontales
- ❌ Botones en orden no lógico
- ❌ Settings globales mezclados con locales
- ❌ Mappings que contradicen convenciones

## Métricas

- **Mapping Intuitiveness Score**: Evaluación de naturalidad
- **Control Discovery Time**: Tiempo para encontrar control
- **Error Rate by Mapping**: Errores por mapping pobre
- **Learning Time**: Tiempo para dominar controles

## Principios Relacionados

- [[affordances]] - Controles que sugieren su uso
- [[proximity]] - Gestalt: cercanía indica relación
- [[nielsen-match-real-world]] - Coincidencia con mundo real

## Referencias

- Norman, D. (2013). "The Design of Everyday Things"
- Lidwell, W. et al. (2010). "Universal Principles of Design"
- https://www.interaction-design.org/literature/article/mapping-in-design