---
name: direct-manipulation
description:
  Los usuarios interactúan directamente con objetos en lugar de comandos
  abstractos. Use cuando diseñe editores, interfaces drag-and-drop, o sistemas
  de manipulación visual.
metadata:
  author: ux-ui-skills
  version: "1.0"
  category: design-principles
---

# 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

- Shneiderman, B. (1983). "Direct Manipulation: A Step Beyond Programming
  Languages"
- Hutchins, E. et al. (1985). "Direct Manipulation Interfaces"
- https://www.interaction-design.org/literature/article/direct-manipulation