OpenSkillIndex← back to search
claude-code

Claude-skill-registry-data mapping-principle

Principio de Mapping (Correspondencia)

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry-data
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry-data "$T" && mkdir -p ~/.claude/skills && cp -r "$T/data/mapping-principle" ~/.claude/skills/majiayu000-claude-skill-registry-data-mapping-principle-f37518 && rm -rf "$T"
manifest: data/mapping-principle/SKILL.md
source content

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