Soporte de flujo de trabajo
Úsalo cuando los aprendices necesiten ayuda para diagnosticar un problema y elegir la siguiente acción útil.
Recuperación guiada
Convierte la confusión en un camino estructurado en lugar de arrojar a los aprendices a una página de políticas o a una cola de soporte.
HTML/CSS/JS
Funciona como un prototipo web independiente, incrustación de Rise, objeto web de Storyline o componente de página de soporte.
Por qué existe este patrón
La resolución de problemas es generalmente donde el aprendizaje se vuelve real.
Las personas rara vez necesitan soporte cuando todo va perfectamente. Necesitan soporte cuando el proceso se rompe, las instrucciones no coinciden con la realidad, la herramienta se comporta de manera extraña o el siguiente paso no está claro.
Este prototipo ofrece a los aprendices un camino guiado a través de ese momento confuso. En lugar de forzarlos a buscar en un documento largo, les ayuda a identificar el problema, verificar la causa probable y elegir una acción práctica a seguir.
El objetivo no es reemplazar el soporte humano. El objetivo es reducir la confusión evitable y ayudar a las personas a avanzar con más confianza.
Prototipo en vivo
Sigue el flujo de resolución de problemas.
Elige el problema, verifica la causa probable y revisa el siguiente paso recomendado. Este mismo modelo se puede adaptar para la incorporación, soporte de aplicaciones, orientación de flujo de trabajo, verificaciones de seguridad o triaje operativo.
Paso 01 · Identificar el problema
¿Qué problema está viendo el aprendiz?
Comienza nombrando la señal. Un flujo de resolución de problemas útil comienza con el problema que el aprendiz puede observar realmente.
Paso 02 · Verificar la causa probable
¿Qué deberían verificar primero?
El mejor flujo de resolución de problemas descarta causas simples antes de enviar a las personas a caminos de soporte más pesados.
Paso 03 · Elegir la siguiente acción útil
¿Qué debería suceder a continuación?
El paso final debería ayudar al aprendiz a actuar, recuperarse o escalar con contexto útil.
Notas de diseño
El soporte para solucionar problemas debe sentirse como ayuda, no como tarea.
Comienza con la señal
Usa un lenguaje que el aprendiz realmente reconozca: “Veo un error”, “la pantalla no coincide” o “no estoy seguro de qué hacer a continuación.”
Mantén las verificaciones ligeras
Pide la verificación más simple y útil antes de escalar, reiniciar o enviar a los aprendices a una pared de documentación.
Escala con contexto
Si los aprendices necesitan ayuda, asegúrate de que el flujo capture lo que sucedió, qué revisaron y dónde se rompió el proceso.
Mejor utilizado para
Dónde encaja este prototipo.
Soporte de aplicación o herramienta
Guía a los aprendices a través de pantallas comunes, desajustes, estados de error y próximos pasos.
Preparación operativa
Ayuda a las personas a recuperarse cuando el flujo de trabajo real no coincide perfectamente con la versión de entrenamiento.
Soporte de rendimiento
Convierte una ayuda de trabajo estática en un camino de decisión que dirija a los aprendices hacia una acción útil.
Soporte para gerentes
Ofrece a los gerentes un camino simple para diagnosticar barreras de coaching, confianza o flujo de trabajo.
Código inicial
Copia la estructura básica del flujo de solución de problemas.
Este inicio es intencionalmente pequeño. Úsalo como base para una página HTML alojada, una incrustación de Rise, un objeto web de Storyline o una página de soporte interno.
<div class="troubleshooting-flow">
<h3>What issue are you seeing?</h3>
<button data-next="instructions">
Instructions do not match the situation
</button>
<button data-next="tool">
The tool is not behaving as expected
</button>
<button data-next="confidence">
I am unsure what to do next
</button>
<div class="troubleshooting-result" aria-live="polite">
<h4>Next step</h4>
<p>Choose an issue to see guidance.</p>
</div>
</div>
<script>
const guidance = {
instructions: "Compare the current situation to the expected flow and identify where it diverges.",
tool: "Refresh, verify the tool state, and capture the exact error or screen.",
confidence: "Use a short example or decision guide before restarting the full learning experience."
};
document.querySelectorAll("[data-next]").forEach(function(button) {
button.addEventListener("click", function() {
const key = button.getAttribute("data-next");
document.querySelector(".troubleshooting-result p").textContent = guidance[key];
});
});
</script>Laboratorio de diseño
La solución de problemas es aprendizaje en el momento de necesidad.
Usa este patrón cuando el aprendiz no necesite otro módulo. Necesita un camino claro a través de un momento confuso.