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