mapping-principle

vjrivmon's avatarfrom vjrivmon

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

⭐1stars🔀0forks📁View on GitHub🕐Updated Jan 7, 2026
[Creative Quality Checks]

When & Why to Use This Skill

This Claude skill applies the 'Mapping Principle'—a core UX design concept by Don Norman—to ensure user interface controls correspond naturally to their effects. It helps designers and developers create intuitive layouts by leveraging spatial, conceptual, and cultural analogies, significantly reducing cognitive load and user error rates.

Use Cases

  • UI Layout Optimization: Aligning the physical arrangement of controls with the elements they influence to ensure immediate user understanding.
  • Interactive Component Design: Creating intuitive sliders, toggles, and dials where movement (e.g., vertical vs. horizontal) matches the conceptual change in value.
  • Form and Dashboard Organization: Placing labels, input fields, and action buttons in logical proximity to their targets to minimize discovery time.
  • UX Auditing: Identifying and fixing design anti-patterns where control mappings contradict user expectations or cultural conventions.
  • Spatial Interface Development: Designing navigation and zoom controls for maps or 3D environments that follow natural physical gestures.
namemapping-principle
authorux-ui-skills
version"1.0"
categorydesign-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