payoff-action-modeling
Diseñar modelos de acciones de UI a partir de preguntas sobre la intención del usuario
Los equipos de producto tienen dificultades para decidir qué acciones de UI mostrar después de que un usuario completa una tarea. Esta skill proporciona un marco estructurado para modelar acciones a partir de la intención del usuario, ubicándolas en el alcance y nivel de prioridad adecuados.
Descargar el ZIP de la skill
Subir en Claude
Ve a Configuración → Capacidades → Skills → Subir skill
Activa y empieza a usar
Pruébalo
Usando "payoff-action-modeling". Después de que un usuario importa datos de clientes desde un archivo CSV, ¿qué acciones debería mostrar la UI?
Resultado esperado:
- Tipo de estado de resultado: transferencia con revisión
- CTA principal: Revisar resultados de importación
- Acciones contextuales: Mapear campo (por columna), Corregir fila (por error), Descargar archivo de errores
- Ramas de continuación: Importar más, Iniciar nueva importación
- Acciones de recuperación: Deshacer importación, Ver historial de importaciones
- Notas de ubicación: Las filas con error muestran Corregir en línea, resumen de éxito en la parte superior con CTA Revisar
Usando "payoff-action-modeling". Nuestra pantalla de finalización de carga de archivos muestra Descargar, Compartir, Eliminar, Renombrar, Mover, Copiar enlace y Añadir descripción, todo al mismo nivel. ¿Qué hay de malo en esto?
Resultado esperado:
- Problema 1: Sin CTA principal — 7 acciones con el mismo peso visual genera fatiga de decisión
- Problema 2: Descargar debería ser la CTA principal (acción de mayor valor como siguiente paso)
- Problema 3: Eliminar es destructiva y debería ser contextual con una ruta de recuperación, no estar en el nivel superior
- Problema 4: Mover y Copiar enlace son acciones diferidas que pueden ir en un menú secundario
- Problema 5: Añadir descripción es una acción de refinamiento, no una acción de resultado
- Propuesta: CTA principal: Descargar | Secundario: Compartir, Copiar enlace | Menú: Renombrar, Mover | Contextual con confirmación: Eliminar
Auditoría de seguridad
SeguroAll 142 static analysis findings are false positives. The skill is a pure documentation guide for UX/UI product design. Backtick characters flagged as 'shell execution' are standard Markdown inline code formatting for UI action labels. Findings flagged as 'weak cryptographic algorithm' are markdown table content, YAML frontmatter, and UX guidance text with no cryptographic content. The single URL reference to casely.digital is a passive documentation mention, not executable network code. No executable code, data exfiltration, command injection, or environmental access was found.
Problemas de riesgo bajo (1)
Puntuación de calidad
Lo que puedes crear
Diseñar pantallas de acción posteriores a la incorporación
Usa el marco para decidir qué acciones mostrar después de que un usuario completa la incorporación, configuración o configuración inicial. Evita abrumar a los nuevos usuarios mientras proporcionas pasos siguientes claros.
Planificar jerarquías de acciones en tableros
Organiza las acciones en un tablero o espacio de trabajo clasificándolas en alcances de resultado, selección, elemento, navegación y recuperación con niveles de urgencia adecuados.
Revisar interfaces existentes para claridad de acciones
Audita una UI existente aplicando los principios de modelado de resultados para identificar acciones duplicadas, etiquetas ambiguas y CTA principales en conflicto. Produce un plan de mejora concreto.
Prueba estos prompts
Acabo de crear una función de carga de archivos para mi app. Después de que un usuario sube un archivo, necesito modelar qué acciones mostrar en la pantalla de finalización. Usa el marco de modelado de acciones de resultado para producir una tabla de modelo de acciones simple con alcance, presión y ubicación para al menos 8 acciones.
Estoy diseñando un tablero de gestión de proyectos que aparece después de que un usuario crea un proyecto nuevo. El tablero muestra tareas, miembros del equipo y actividad reciente. Usa el marco completo de modelado de acciones de resultado para clasificar el estado de resultado, generar al menos 15 preguntas sobre la intención del usuario y producir una tabla de acciones con todos los alcances, presiones y ubicaciones.
Estoy diseñando un flujo de importación de datos donde los usuarios suben un CSV, mapean campos, revisan resultados y manejan errores. La pantalla posterior a la importación debe admitir reintentar elementos fallidos, descargar registros de errores, aprobar filas mapeadas y exportar resultados. Usa el marco prestando especial atención a las acciones de recuperación, los límites de alcance ambiguos y los conflictos de presión de intención. Añade manejo de casos extremos para fallos parciales.
Tengo un modelo de acciones existente para la pantalla de publicación de un sistema de gestión de contenidos. El modelo actual tiene 12 acciones todas mostradas al mismo nivel. Usa el marco para revisar este modelo en busca de problemas de densidad, ambigüedad de alcance, claridad de etiquetas y problemas de impulso. Identifica al menos 5 problemas específicos y propón una tabla de acciones revisada.
Mejores prácticas
- Empieza definiendo el tipo de estado de resultado antes de colocar cualquier acción. Esto determina toda la jerarquía de acciones.
- Mantén una CTA principal clara por pantalla de resultado. Múltiples acciones de nivel principal generan fatiga de decisión.
- Usa etiquetas de acción concretas que describan los resultados para el usuario en lugar de detalles de implementación.
Evitar
- No sobrecargues las pantallas de primer éxito con todas las acciones posibles. Difiere las funciones avanzadas a menús secundarios.
- Evita tratar todas las acciones como iguales en la jerarquía visual. Usa la presión de intención para diferenciar acciones inmediatas, contextuales y diferidas.
- No escondas acciones de recuperación importantes como deshacer o reintentar detrás de menús genéricos. Colócalas cerca del estado del que se recuperan.