Illustrationen für Fehlerzustände: So lassen sich Pannen im Produkt hilfreich gestalten
Ein praxisnaher Leitfaden für die Gestaltung von Illustrationen für Fehlerzustände, die Nutzer beruhigen, erklären, was passiert ist, und den Weg zur Lösung zeigen, ohne Fehler zu verniedlichen.
Fehlerzustände sind keine Gelegenheit für Dekoration. Sie sind Momente, in denen Nutzer eine Lösung brauchen.
Wenn etwas nicht funktioniert, muss der Nutzer bereits zusätzliche Aufmerksamkeit aufbringen. Eine gute Illustration kann Ängste reduzieren, eine schlechte dagegen lässt das Produkt unseriös oder ausweichend wirken.
Das Ziel einer Illustration für einen Fehlerzustand ist einfach: Der Moment soll verständlich, ruhig und behebbar wirken.
Die Aufgabe einer Fehlerillustration
Eine Fehlerillustration sollte eine von drei Aufgaben erfüllen:
- Die Art des Problems signalisieren — fehlende Datei, fehlgeschlagene Verbindung, Berechtigungsproblem, Offline-Zustand.
- Emotionale Anspannung reduzieren — der Bildschirm soll weniger abschreckend wirken.
- Den Weg zur Behebung weisen — erneut versuchen, Verbindung wiederherstellen, Support kontaktieren, zurückgehen, wiederherstellen, neu laden.
Wenn das Bild keine dieser Aufgaben erfüllt, entferne es.
Beispiel: Freundlich, aber eindeutig kaputt
Quelle: Erreur 404 illustration by David Revoy, CC BY 4.0.
Das funktioniert als Fehlerillustration, weil sie ausdrucksstark ist, ohne so zu tun, als wäre der Fehler lustig. Die Szene vermittelt sofort: „Etwas stimmt nicht“ – die Stimmung wirkt dabei nahbar statt beunruhigend.
Genau diese Balance sollten Produktteams anstreben.
Illustration an den Schweregrad des Fehlers anpassen
Nicht jeder Fehler verdient die gleiche visuelle Gestaltung.
Niedriger Schweregrad
Beispiele: keine Suchergebnisse, leerer Upload, nicht verbundene optionale Integration.
Verwende eine leichte, freundliche Illustration. Ein Maskottchen kann neugierig sein, sich umschauen oder sanft auf die nächste Aktion hinweisen.
Mittlerer Schweregrad
Beispiele: Speichern fehlgeschlagen, fehlgeschlagener Zahlungsversuch, fehlerhafter Import, Anfrage mit Zeitüberschreitung.
Vermittle ruhige Besorgnis. Die Illustration sollte zeigen, dass es eine Hürde gibt, ohne sich darüber lustig zu machen. Füge einen klaren Weg zum erneuten Versuch oder zur Behebung hinzu.
Hoher Schweregrad
Beispiele: Risiko von Datenverlust, Sicherheitsproblem, Kontosperrung, Aussetzung der Abrechnung.
Verwende eine möglichst schlichte Illustration oder gar keine. Priorisiere klare Texte, Support-Möglichkeiten und Vertrauen. Ein Cartoon-Maskottchen kann hier respektlos wirken.
Der Aufbau eines hilfreichen Fehlerzustands
Ein guter Fehlerzustand besteht aus vier Teilen:
1. Titel in klarer Sprache
Schlecht: Something went wrong
Besser: We could not save your changes
Der Titel sollte sagen, was fehlgeschlagen ist.
2. Konkrete Erklärung
Sag der Person, ob das Problem vorübergehend, lokal, auf fehlende Berechtigungen zurückzuführen oder unbekannt ist.
3. Maßnahme zur Fehlerbehebung
Am besten gibt es eine einzige Hauptaktion:
- Upload wiederholen
- Integration erneut verbinden
- Entwurf wiederherstellen
- Support kontaktieren
- Zurück zum Dashboard
4. Unterstützende Illustration
Das Bild sollte die Aussage verstärken. Wenn im Text steht, dass der Upload fehlgeschlagen ist, könnte die Illustration eine heruntergefallene Datei, einen Werkzeugkasten oder ein Maskottchen zeigen, das einen kleinen Bildschirm repariert.
Maskottchen-Posen, die bei Fehlern funktionieren
Gute Posen für ein Fehlerzustands-Maskottchen:
- Werkzeuge in den Händen halten
- einen kaputten Gegenstand untersuchen
- auf eine Aktion zum erneuten Versuch zeigend
- besorgt, aber ruhig wirkend
- ein Warnschild tragend
- mit einer Lupe suchend
Riskante Posen:
- lachend
- dramatisch weinend
- feiernd
- schlafend
- mit den Schultern zuckend
- schuldbewusst wirkend
Deine Nutzer brauchen kein theatralisches Maskottchen. Sie brauchen Hilfe.
Erstelle Produktillustrationen für Situationen nach einem Fehler
Erstelle konsistente SVG-Maskottchen und Illustrationen für Fehlerzustände, die zu deiner Marke passen, ohne Fehler auf die leichte Schulter zu nehmen.
Fehlerillustrationen erstellenText und Illustration eines Fehlerzustands sollten zusammenpassen
Wenn die Illustration verspielt und der Text ernst ist, wirkt der Zustand verwirrend. Wenn der Text vage und die Illustration konkret ist, weiß man trotzdem nicht, was zu tun ist.
Kombiniere beides bewusst:
- Offline-Zustand: Maskottchen mit nicht angeschlossenem Kabel +
You're offline. We'll retry when your connection returns. - Upload fehlgeschlagen: Maskottchen mit einer beschädigten Datei +
The upload stopped before it finished. - Kein Zugriff: Maskottchen vor einer verschlossenen Tür +
Ask an admin for access to this workspace. - 404-Seite: Maskottchen mit einer Karte +
We couldn't find this page.
Gestaltungsregeln für Fehlerillustrationen
Fehlerillustrationen sollten:
- kleiner als die Überschrift und die Aktion
- visuell ruhig
- konsistent mit dem Maskottchen-System des Produkts
- in hellen und dunklen Kontexten barrierefrei
- frei von winzigen Details, die auf Mobilgeräten verschwinden
- emotional passend zum Schweregrad
Verwende die Illustration nicht, um fehlende Erklärungen zu kaschieren.
Wann du auf eine Illustration verzichten solltest
Verzichte auf die Illustration, wenn:
- das Problem sicherheitskritisch ist
- du möglicherweise Geld oder Daten verloren hast
- die Seite sofortiges Handeln erfordert
- der Fehler in einem dichten Workflow auftritt
- die Illustration den CTA unter den sichtbaren Bereich verschiebt
Gutes Produktdesign bedeutet manchmal, sich zurückzuhalten.
Die beste Fehler-Illustration ist ein Versprechen
Eine gute Illustration für einen Fehlerzustand sagt: Etwas ist kaputt, aber du steckst nicht fest.
Das ist ihre emotionale Aufgabe. Das Maskottchen oder visuelle System sollte das Produkt verantwortungsbewusst und hilfreich wirken lassen – nicht einfach nur niedlich um seiner selbst willen.
Wenn du unsicher bist, konzipiere zuerst den Weg zur Behebung. Füge dann die Illustration hinzu, die ihn unterstützt.