---
name: mapping-principle
description:
  Los controles deben corresponder naturalmente a sus efectos. Use cuando diseñe
  controles de UI, layouts de controles, o cualquier relación causa-efecto.
metadata:
  author: ux-ui-skills
  version: "1.0"
  category: design-principles
---

# 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