Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

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…

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 6 Minuten
  • von Dieter Petereit
  • 13. März 2018
Bookmarke mich
Share on pocket

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

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

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.

Agenturpartner

Trend Maker Marketing – Webdesign Agentur Regensburg

Regensburg

ARIT Services GmbH

Laatzen

PromoMasters Online Marketing

Wien

wolpersweb.de Webdesign & SEO

Düsseldorf

Philipp Pistis – WordPress Agentur

Prittriching

Alle Agenturpartner

Jobs

Online Marketing Manager

Innsbruck

Webdesigner – Vollzeit

Remote

Copywriter – Vollzeit

Remote

Junior SEO Manager in München

München

Google Ads Kampagnen­betreuer

Salzburg

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

„CSS gerootet“: Flexible Schriftgrößen mit REM

Diskussionen über die beste Art und Weise, die Schriftgröße bzw. den Schriftgrad zu definieren sind wahrscheinlich so alt wie das Web. Neben den traditionellen Kandidaten

 →   

Vollkommen geschmacklos: So stellst du fest, ob ein Design gut oder schlecht ist

Dein eigener Geschmack ist ein schlechter Ratgeber in der Frage der Beurteilung, ob ein Design nun gut oder schlecht ist. Lass uns da mal objektiver

 →   

Design: Was für Sprach-Interfaces der Zukunft wichtig ist

Seit fast zwei Jahren besitze ich einen Amazon Echo. Das Gerät zeigt mir seitdem eindrucksvoll, wie limitiert heutzutage Sprach-Interfaces sind. Da muss sich was tun.

 →   

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.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.