Support de flux de travail
À utiliser lorsque les apprenants ont besoin d'aide pour diagnostiquer un problème et choisir la prochaine action utile.
Récupération guidée
Transformez la confusion en un chemin structuré au lieu de plonger les apprenants dans une page de politique ou une file d'attente de support.
HTML/CSS/JS
Fonctionne comme un prototype web autonome, un embed Rise, un objet web Storyline ou un composant de page de support.
Pourquoi ce modèle existe
Le dépannage est généralement là où l'apprentissage devient réel.
Les gens ont rarement besoin de soutien lorsque tout se passe parfaitement. Ils ont besoin de soutien lorsque le processus échoue, que les instructions ne correspondent pas à la réalité, que l'outil se comporte de manière étrange ou que la prochaine étape n'est pas claire.
Ce prototype offre aux apprenants un chemin guidé à travers ce moment chaotique. Au lieu de les forcer à chercher dans un long document, il les aide à identifier le problème, à vérifier la cause probable et à choisir une action pratique suivante.
L'objectif n'est pas de remplacer le soutien humain. L'objectif est de réduire la confusion évitable et d'aider les gens à avancer avec plus de confiance.
Prototype en direct
Suivez le flux de dépannage.
Choisissez le problème, vérifiez la cause probable et examinez la prochaine étape recommandée. Ce même modèle peut être adapté pour l'intégration, le support d'application, l'orientation des flux de travail, les vérifications de sécurité ou le triage opérationnel.
Étape 01 · Identifier le problème
Quel problème l'apprenant voit-il ?
Commencez par nommer le signal. Un flux de dépannage utile commence par le problème que l'apprenant peut réellement observer.
Étape 02 · Vérifier la cause probable
Que devraient-ils vérifier en premier ?
Le meilleur flux de dépannage écarte les causes simples avant d'envoyer les gens vers des chemins de support plus lourds.
Étape 03 · Choisir la prochaine action utile
Que devrait-il se passer ensuite ?
La dernière étape devrait aider l'apprenant à agir, à se rétablir ou à escalader avec un contexte utile.
Notes de conception
Le support de dépannage doit ressembler à de l'aide, pas à des devoirs.
Commencez par le signal
Utilisez un langage que l'apprenant reconnaîtrait réellement : « Je vois une erreur », « l'écran ne correspond pas » ou « je ne suis pas sûr de ce que je dois faire ensuite. »
Gardez les vérifications légères
Demandez la vérification la plus simple et utile avant d'escalader, de redémarrer ou d'envoyer les apprenants vers un mur de documentation.
Escaladez avec contexte
Si les apprenants ont besoin d'aide, assurez-vous que le flux capture ce qui s'est passé, ce qu'ils ont vérifié et où le processus a échoué.
Meilleur usage pour
Où ce prototype s'intègre.
Support d'application ou d'outil
Guidez les apprenants à travers des écrans courants, des incohérences, des états d'erreur et des étapes suivantes.
Préparation opérationnelle
Aidez les gens à se rétablir lorsque le flux de travail réel ne correspond pas parfaitement à la version de formation.
Support de performance
Transformez un aide-mémoire statique en un chemin de décision qui oriente les apprenants vers une action utile.
Support pour les managers
Donnez aux managers un chemin simple pour diagnostiquer les obstacles au coaching, à la confiance ou au flux de travail.
Code de démarrage
Copiez la structure de base du flux de dépannage.
Ce démarrage est intentionnellement petit. Utilisez-le comme base pour une page HTML hébergée, un embed Rise, un objet web Storyline ou une page de support interne.
<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>Design Lab
Le dépannage est un apprentissage au moment du besoin.
Utilisez ce modèle lorsque l'apprenant n'a pas besoin d'un autre module. Il a besoin d'un chemin clair à travers un moment désordonné.