OpenSkillIndex← back to search
claude-codecreative

Claude-skill-registry direct-manipulation

Manipulación Directa

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/direct-manipulation-vjrivmon-setup-software-ia" ~/.claude/skills/majiayu000-claude-skill-registry-direct-manipulation && rm -rf "$T"
manifest: skills/data/direct-manipulation-vjrivmon-setup-software-ia/SKILL.md
tags
#ui-design#interaction-design#visual-editing#drag-and-drop#ux#direct-manipulation
source content

Manipulación Directa

Resumen

Los usuarios interactúan directamente con objetos en pantalla, viendo el resultado inmediato de sus acciones. Es más intuitivo que ingresar comandos o navegar menús.

Origen

  • Autor: Ben Shneiderman
  • Año: 1983
  • Fuente: "Direct Manipulation: A Step Beyond Programming Languages"

Características

Visibilidad de Objetos

  • Objetos de interés siempre visibles
  • Estado actual representado visualmente
  • Opciones disponibles perceptibles
  • Sin comandos abstractos

Acciones Incrementales

  • Operaciones pequeñas y reversibles
  • Feedback inmediato
  • Cambios visibles en tiempo real
  • Exploración sin riesgo

Reversibilidad

  • Cada acción se puede deshacer
  • Estados anteriores accesibles
  • Errores fácilmente corregibles
  • Experimentación segura

Aplicación en Diseño

Drag and Drop

  • Mover archivos arrastrando
  • Reordenar listas
  • Organizar layouts
  • Conexiones visuales (diagramas)

Resize y Transform

  • Handles para redimensionar
  • Rotate con gestos
  • Crop con marquee
  • Scale con pinch

Editores Visuales

  • WYSIWYG text editors
  • Design tools (Figma, Sketch)
  • Video editors (timeline)
  • Code editors (live preview)

Controles Interactivos

  • Sliders en lugar de inputs numéricos
  • Color pickers visuales
  • Maps con pan/zoom
  • Charts interactivos

Ejemplos

  • Figma: Diseño completamente visual
  • Trello: Cards que se arrastran entre columnas
  • Google Maps: Pan, zoom, street view
  • iOS Photos: Gestos para editar
  • Notion: Bloques arrastrables

Anti-patterns

  • ❌ Comandos de texto para acciones visuales
  • ❌ Formularios para lo que podría ser visual
  • ❌ Sin feedback durante la manipulación
  • ❌ Acciones no reversibles
  • ❌ Manipulación sin mostrar resultado

Beneficios

  • Menor curva de aprendizaje
  • Mayor sensación de control
  • Exploración más natural
  • Errores más fáciles de detectar
  • Más engagement

Métricas

  • Task Completion Time: Más rápido con manipulación directa
  • Error Rate: Errores detectados durante acción
  • Learning Time: Tiempo para dominar
  • User Satisfaction: Preferencia por interfaces directas

Principios Relacionados

  • [[affordances]] - Objetos que invitan a manipulación
  • [[feedback-principle]] - Resultado inmediato visible
  • [[nielsen-user-control]] - Control directo del usuario

Referencias