Verzeih mir! So geht dein Design richtig mit Fehlern um…

Menschen machen Fehler, sogar viele. Design jeder Couleur muss daher mit Fehlern rechnen. Ziel ist es, diese soweit möglich zu vermeiden oder, mindestens, hilfreich darauf zu reagieren.

Du kannst dich noch so sehr bemühen. Es wird dir nicht immer gelingen, Fehler bei der Benutzung deiner Designs zu vermeiden. Lass mich dir das anhand eines Beispiels beweisen.

Gegen Dummheit ist kein Kraut gewachsen?

Hier im Örtchen schmiss vor einiger Zeit eine ältere Dame einen, nach ihren Angaben, fünfstelligen Geldbetrag in einen Altkleidercontainer. Der Betrag stammte angeblich aus einer Erbschaft und war in einem Stiefel versteckt. Um dem Vorgang noch die Krone aufzusetzen, fiel ihr der Fehler erst eine gute Woche, nachdem sie den Stiefel in den Container geschmissen hatte, auf.

Ist das ist ein Beispiel für einen Fehler, der nur durch die Betroffene selbst zu vermeiden gewesen wäre? Klar ist, mit dem üblichen Designansatz kannst du solchen Dummheiten nicht beikommen. Hätte am Container ein Warnschild geholfen? „Bitte achten Sie darauf, kein Geld in den Kleidercontainer zu werfen?“

Oder sollten derartige Container quasi per Double-Opt-In funktionieren? „Sie wollen etwas in den Container schmeißen? Sind Sie sicher?“ Beim ersten Versuch kommen die Brocken dann wieder raus aus dem Behälter. Erst beim zweiten Mal werden sie einbehalten. Schlecht machbar und sicherlich auch unter Akzeptanz-Aspekten schwierig.

Verzeihendes Design geht sogar bei absurden Fehlern

Dennoch kann auch hier Vorsorge vor menschlichen Fehlern getroffen werden. Ein verzeihendes Design, um das es in diesem Beitrag gehen soll, hätte mit dem folgenden Hinweisschild erreicht werden können: „Haben Sie etwas versehentlich in den Container geworfen, so melden Sie sich bitte innerhalb von zwei Werktagen unter der Telefonnummer 123456.“

Der Dame aus unserem Beispiel hätte das womöglich auch nicht geholfen. Immerhin hat sie den Fehler erst viele Tage später bemerkt, aber generell kann ein solcher Hinweis durchaus erfolgreich sein.

Es ist selbstverständlich, dass die Prozesse hinter dem Hinweis dann tatsächlich installiert sein müssen. Wenig hilfreich wäre es, wenn unsere vom Pech verfolgte Dame dort anriefe, um dann von einer verblüfften Telefonstimme lediglich gesagt zu bekommen, dass man da aber nun rein gar nichts für sie tun könne. Und, wo habe sie überhaupt diese Telefonnummer her?

Verzeihendes Design ist eine Mischung aus Führung und Sicherheitsnetz

Du siehst also: Verzeihendes Design ist eine Mischung aus guter Führung im Vorfeld und sinnvollen Sicherheitsnetzen im Bedarfsfall.

Stell dir vor, du fährst mit dem Auto auf eine scharfe Kurve zu. Wie könnten wir dich da vor Fehlern schützen? Hier wäre es designtechnisch (und auch unter allen anderen denkbaren Aspekten) sinnvoll, im Vorfeld der Kurve die erlaubte Geschwindigkeit zu senken und früh genug und gegebenenfalls mehrfach auf die bevorstehende Kurve hinzuweisen. In der Kurve sollte es dann stabile Leitplanken als Sicherheitsnetz geben, falls die vorher versuchte Steuerung fehl geschlagen ist.

Die Leitplanke ist ein Musterbeispiel für ein verzeihendes Designelement. (Foto: PIxabay)

Manche Fehler sind so schwer und folgenschwer, dass danach gar von „menschlichem Versagen“ die Rede ist. Erinnern wir uns an den Zusammenstoß zweier Züge vor zwei Jahren im bayrischen Bad Aibling.

Der zugrundeliegende Prozess litt ganz offensichtlich unter schweren Designfehlern. Weder gab es eine hinreichende inhärente Steuerungsfunktion zur Vermeidung von Fehlern, noch gab es sinnvolle Sicherheitsnetze für den Fehlerfall.

Dieses Beispiel soll lediglich verdeutlichen, welche enorme Bedeutung sorgfältiges Design hat und wieso es zwingend verzeihend angelegt sein sollte. Für das verzeihende Design gibt es einige Tipps, die bisweilen etwas retro anmuten, dabei aber konsequent den Menschen im Auge behalten.

Tipp #1 | Affordance: Gestalte mit Aufforderungscharakter

Als Best Practice für das verzeihende Design gilt es, mit deutlichem Aufforderungscharakter (sog. Affordance) zu gestalten. Das meist verwendete Beispiel ist dabei das einer Tür, die auf der Seite einen Griff und auf der anderen Seite lediglich eine Metallplatte hat. Die Tür fordert so auf der einen Seite zum Ziehen und auf der anderen Seite zum Drücken auf.

Das Design selbst besitzt Aufforderungscharakter. Zusätzliche Interpretationen oder Instruktionen sind in diesem Falle, der sich jedoch nicht immer so eindeutig herstellen lässt, entbehrlich.

Du kannst es auch übertreiben mit der Affordance. (Bild: Pixabay)

Die Zeiten, in denen Design mit Affordance im Digitalen verhältnismäßig leicht war, sind indes vorbei. Es waren die Zeiten des Skeuomorphismus, in denen es App-Designern daran gelegen war, digitale Produkte möglichst wie ihre Pendants aus der realen Welt aussehen zu lassen. So hatten wir Terminkalender-Apps mit Lederoptik und Ringbindung oder Schalter, die tatsächlich wie Schalter aussahen und natürlich auch funktionierten. Unter dem Gesichtspunkt der Affordance waren das goldene Zeiten.

Mit dem Flat Design zog eine deutlich abstraktere Gestaltungslinie in unseren Alltag ein. Zumindest lässt sich hier nichts mehr direkt aus dem Alltag ableiten. Jedoch ist der moderne Mensch inzwischen so an digitale Medien gewöhnt, dass ihm die neuen Elemente (auch als Mikrointeraktionen bezeichnet) recht schnell geläufig geworden sind oder es noch werden. Warum Mikrointeraktionen immer wichtiger werden, habe ich erst kürzlich in diesem Beitrag beschrieben.

Wenn dem Benutzer dein Design dermaßen unklar ist. solltest du nochmal ans Reißbrett zurück. (Illustration: PIxabay)

Um die Dinge nicht unnötig zu erschweren, solltest du als Designer auf etablierte UI-Pattern setzen. Das könnten etwa die Material-Design-Guidelines aus dem Hause Google sein, oder etwa Patterns der üblichen Verdächtigen wie Zurb oder Bootstrap. Es gilt weiterhin, dass auch moderne UI-Elemente umso eher erkannt werden, je mehr sie Alltagsobjekten mit der gleichen Funktion ähneln. Hier helfen Schattenwürfe, Farbverläufe, Texturen – eben alles, was einen Bezug herstellen kann.

Um den Aufforderungscharakter zu verstärken, solltest du Aktionen klar benennen und nicht dem Erraten durch den User überlassen. Dabei ist es überdies wichtig, darauf zu achten, dass deine Aktionen nicht mit dem Standardverhalten des Betriebssystems kollidieren. Besonders die Swipe-Gesten des iPhones bieten sich da als Fettnäpfchen an.

Tipp #2 | Erlaube das Rückgängigmachen versehentlicher Aktionen

Du kennst es aus den Office-Anwendungen, aber insbesondere auch aus Photoshop. Wie oft hast du schon versehentliche Photoshop-Bedienschritte rückgängig gemacht? Diese besondere Form des verzeihenden Designs ist das beste Sicherheitsnetz, das du bauen kannst. Wenn nichts endgültig ist, fällt es dem User leicht, schnell in dein Bedienkonzept zu finden.

Ungelöstes Problem: Die Zahnpasta zurück in die Tube drücken. (Foto: Pixabay)

Natürlich kannst du nicht absolut jede Aktion reversibel gestalten. Da, wo das nicht möglich ist, sollte verzeihendes Design unter Steuerungsgesichtspunkten betrachtet werden. Muss der Nutzer eine irreversible Entscheidung treffen, verlangsame die Interaktion, etwa indem du sie zweistufig ausführst und mit einem „Wollen Sie wirklich? Diese Aktion kann nicht rückgängig gemacht werden.“ bestätigen lässt.

Wichtig dabei ist, dass die Aktion ganz klar und eindeutig beschriftet ist, so dass es keinen Zweifel am Effekt der zu treffenden Entscheidung geben kann.

Tipp #3 | Setze allgemein auf Hilfen, Warnungen und Eingabeaufforderungen

Du kennst es etwa aus Formularen. Ein Pflichtfeld wurde vergessen. Das Javascript meldet zurück, dass das Feld X noch mit Inhalt befüllt werden muss, bevor das Formular abgesendet werden kann. Diese Warnung hilft dem Nutzer, schlussendlich zum Erfolg zu gelangen. Der Fehler ist gemacht. Das Design verzeiht und lenkt in die richtige Richtung.

Hilfen solltest du überall dort anbieten, wo es auch nur ansatzweise kompliziert oder irreversibel enden könnte. Hilfen sollten dann erklären, was jetzt wie zu erreichen ist. Sie sollten allerdings nicht erforderlich sein, bloß um zu erklären, was die Beschriftungen auf den Buttons zu bedeuten haben, von denen der Nutzer jetzt einen betätigen soll.

Verzeihendes Design geht leicht in den anderen Aspekten heutigen Designs unter. (Illustration: Pixabay)

Eingabeaufforderungen eignen sich bestens für den Einsatz als Entschleuniger. Wie weiter oben bereits erwähnt, ist es sinnvoll, den Prozess der Interaktion zu verlangsamen, wenn es an irreversible Entscheidungen geht. So erhöhst du die Aufmerksamkeitslevel beim Nutzer. Die Wahrscheinlichkeit des schnellen Gewohnheits-Okay reduziert sich.

Fazit: Verzeihendes Design ist weniger schwierig als vielleicht gedacht

Dass die Benutzer deines Designs keine Fehler im Umgang damit machen, ist eine Utopie. Selbst, wenn du der Auffassung bist, du hättest einen total simplen Prozess gestaltet, bei dem gar nichts schief gehen kann, werden dich deine Nutzer schnell eines besseren belehren.

Deshalb ist es wichtig, von Beginn an mit diesen Fehlern zu rechnen und sie, soweit sie vorhersehbar sind, designtechnisch zu berücksichtigen. Die wichtigsten Tipps hast du heute erfahren. Achte darauf, dass du im Designprozess direkt mögliche Fehler identifizierst und abfängst. Da sind Softwareentwickler Experten.

Vielleicht setzt du dich mal mit einem Vertreter dieser Branche zusammen und sprichst über Fehler und deren Vermeidung. Das hilft dir auch als Web- oder Produktdesigner.

Quellen zum Weiterlesen

• Der Begriff der Affordance im UI-Design | Philipp Holzer
• Designing for Forgiveness | Jules Cheung
• Design principle: Error & Forgiveness | Anton Nikolov
• Principles of Design: Forgiveness | Adam McGee