| 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
