Workflow-Unterstützung
Verwenden, wenn Lernende Hilfe bei der Diagnose eines Problems und der Auswahl der nächsten nützlichen Handlung benötigen.
Geführte Wiederherstellung
Verwandeln Sie Verwirrung in einen strukturierten Weg, anstatt Lernende auf eine Richtlinienseite oder in eine Support-Warteschlange zu werfen.
HTML/CSS/JS
Funktioniert als eigenständiger Web-Prototyp, Rise-Embed, Storyline-Webobjekt oder Komponente einer Support-Seite.
Warum dieses Muster existiert
Fehlerbehebung ist normalerweise der Punkt, an dem Lernen real wird.
Menschen benötigen selten Unterstützung, wenn alles perfekt läuft. Sie brauchen Unterstützung, wenn der Prozess bricht, die Anweisungen nicht mit der Realität übereinstimmen, das Tool sich seltsam verhält oder der nächste Schritt unklar ist.
Dieser Prototyp gibt Lernenden einen geführten Weg durch diesen chaotischen Moment. Anstatt sie zu zwingen, in einem langen Dokument zu suchen, hilft er ihnen, das Problem zu identifizieren, die wahrscheinliche Ursache zu überprüfen und eine praktische nächste Handlung auszuwählen.
Das Ziel ist nicht, menschliche Unterstützung zu ersetzen. Das Ziel ist, vermeidbare Verwirrung zu reduzieren und den Menschen zu helfen, mit mehr Vertrauen voranzukommen.
Live-Prototyp
Folgen Sie dem Fehlerbehebungsfluss.
Wählen Sie das Problem, überprüfen Sie die wahrscheinliche Ursache und sehen Sie sich den empfohlenen nächsten Schritt an. Dieses Modell kann auch für Onboarding, App-Support, Workflow-Anleitungen, Sicherheitsprüfungen oder operationale Triage angepasst werden.
Schritt 01 · Identifizieren Sie das Problem
Welches Problem sieht der Lernende?
Beginnen Sie damit, das Signal zu benennen. Ein nützlicher Fehlerbehebungsfluss beginnt mit dem Problem, das der Lernende tatsächlich beobachten kann.
Schritt 02 · Überprüfen Sie die wahrscheinliche Ursache
Was sollten sie zuerst überprüfen?
Der beste Fehlerbehebungsfluss schließt einfache Ursachen aus, bevor er die Menschen in schwerere Unterstützungswege sendet.
Schritt 03 · Wählen Sie die nächste nützliche Handlung
Was sollte als Nächstes passieren?
Der letzte Schritt sollte dem Lernenden helfen, zu handeln, sich zu erholen oder mit nützlichem Kontext zu eskalieren.
Designnotizen
Troubleshooting-Unterstützung sollte sich wie Hilfe anfühlen, nicht wie Hausaufgaben.
Beginne mit dem Signal
Verwende eine Sprache, die der Lernende tatsächlich erkennen würde: „Ich sehe einen Fehler“, „der Bildschirm stimmt nicht überein“ oder „ich bin mir nicht sicher, was ich als Nächstes tun soll.“
Halte die Überprüfungen leichtgewichtig
Bitte um die einfachste nützliche Überprüfung, bevor du eskalierst, neu startest oder Lernende zu einer Wand von Dokumentationen schickst.
Eskalieren Sie mit Kontext
Wenn Lernende Hilfe benötigen, stelle sicher, dass der Flow erfasst, was passiert ist, was sie überprüft haben und wo der Prozess gestoppt ist.
Am besten verwendet für
Wo dieser Prototyp passt.
App- oder Tool-Unterstützung
Führe Lernende durch häufige Bildschirme, Abweichungen, Fehlerzustände und nächste Schritte.
Betriebliche Bereitschaft
Hilf den Menschen, sich zu erholen, wenn der tatsächliche Workflow nicht perfekt mit der Trainingsversion übereinstimmt.
Leistungsunterstützung
Verwandle ein statisches Hilfsmittel in einen Entscheidungsweg, der Lernende zu nützlichen Aktionen führt.
Unterstützung für Manager
Gib Managern einen einfachen Weg, um Coaching-, Vertrauens- oder Workflow-Barrieren zu diagnostizieren.
Starter-Code
Kopiere die grundlegende Struktur des Troubleshooting-Flows.
Dieser Starter ist absichtlich klein. Verwende ihn als Basis für eine gehostete HTML-Seite, ein Rise-Embed, ein Storyline-Webobjekt oder eine interne Unterstützungsseite.
<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
Troubleshooting ist Lernen im Moment des Bedarfs.
Verwende dieses Muster, wenn der Lernende kein weiteres Modul benötigt. Er braucht einen klaren Weg durch einen chaotischen Moment.