Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Design » Verzeih mir! So geht dein Design richtig mit Fehlern um…

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

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 6 Minuten
  • von Dieter Petereit
  • 13. März 2018

Inhaltsverzeichnis

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.

traffic 935119 1280 Verzeih mir! So geht dein Design richtig mit Fehlern um…
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.

internet 1593378 1280 Verzeih mir! So geht dein Design richtig mit Fehlern um…
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.

unordered 3192273 1280 Verzeih mir! So geht dein Design richtig mit Fehlern um…
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.

toothbrush 571741 1280 Verzeih mir! So geht dein Design richtig mit Fehlern um…
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.

productivity 1995786 1280 Verzeih mir! So geht dein Design richtig mit Fehlern um…
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
Dieter Petereit

Dieter Petereit

Dieter Petereit ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Marco Wydmuch von Glamourpixel fotografiert sich selbst mit einer Canon-Kamera in der Hand.

Glamourpixel Fotodesign

Gelsenkirchen

Johda Webdesign Berlin Logo.

JOHDA Webdesign

Berlin

AMZ Marketing in Regensburg Logo.

AMZ-Marketing GmbH

Regensburg

Michael Freitag Immobilien-Marketing München logo

Critch GmbH – Immobilienkanzlei FREITAG®

München

Netkin Digital Marketing.

netkin digital Marketing

Köln

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Digitalagentur finden

Wir unterstützen Sie bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur finden

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Foto der Inhaberin einer Social Media Agentur, umrahmt von einem Laptop und zur Linken zwei Bewertungen der Agentur.
WordPress

WordPress Agentur finden

Wir unterstützen Sie bei der Auswahl Ihrer WordPress Agentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • WordPress Agentur finden

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • (Kostenlose) Services
  • 3D-Visualisierung
  • Allgemein
  • Apps
  • Betriebliches
  • Betriebswirtschaft
  • Bilder & Vektorgrafiken bearbeiten
  • Boilerplates & andere Tools
  • Branding
  • Buchhaltung
  • CMS
  • Content Marketing
  • CSS
  • Datenschutz
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Editoren
  • Essentials
  • Fortbildung
  • Fotografie
  • Freebies
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Icons & Fonts
  • Illustrator
  • IMHO
  • Infografiken
  • Inspiration
  • Interviews
  • IT Services
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Business-News
  • Online-Marketing
  • Performance-Optimierung
  • Photoshop
  • PHP
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Amazon SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • Tutorials
  • UX Design
  • Videoproduktion
  • Virtual Reality
  • VPN
  • Webdesign
  • Website erstellen
  • WooCommerce
  • WordPress
  • WordPress Plugins
  • WordPress Themes
  • (Kostenlose) Services
  • 3D-Visualisierung
  • Allgemein
  • Apps
  • Betriebliches
  • Betriebswirtschaft
  • Bilder & Vektorgrafiken bearbeiten
  • Boilerplates & andere Tools
  • Branding
  • Buchhaltung
  • CMS
  • Content Marketing
  • CSS
  • Datenschutz
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Editoren
  • Essentials
  • Fortbildung
  • Fotografie
  • Freebies
  • Freelancer
  • Hosting
  • HTML
  • HTML/CSS
  • Icons & Fonts
  • Illustrator
  • IMHO
  • Infografiken
  • Inspiration
  • Interviews
  • IT Services
  • JavaScript & jQuery
  • Jobs & Karriere
  • Online-Business-News
  • Online-Marketing
  • Performance-Optimierung
  • Photoshop
  • PHP
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Amazon SEO
  • Showcases
  • Social-Media-Marketing
  • Tipps, Tricks & Tutorials
  • Tools
  • Tutorials
  • UX Design
  • Videoproduktion
  • Virtual Reality
  • VPN
  • Webdesign
  • Website erstellen
  • WooCommerce
  • WordPress
  • WordPress Plugins
  • WordPress Themes

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑