Richtige Zeit und Ort (Inline-Pr\u00fcfung)<\/strong><\/h2>\nNutzer m\u00f6gen es nicht, wenn sie sich die M\u00fche machen eine Eingabemaske auszuf\u00fcllen, nur um nach dem Absenden herauszufinden, dass sie einen Fehler gemacht haben.<\/p>\n
Die richtige Zeit, den Nutzer \u00fcber eine fehlerhafte Eingabe zu informieren, ist direkt nachdem die Eingabe erfolgt. Damit erfolgt die Pr\u00fcfung in Echtzeit und informiert den Nutzer direkt \u00fcber die Richtigkeit der eingegebenen Daten.<\/p>\n
Falls Sie Inline-Eingabe-\u00dcberpr\u00fcfungen verwenden und das fehlerhafte Feld klar gekennzeichnet ist, kann der Absende-Button deaktiviert werden, bis der Fehler korrigiert ist. Dies erlaubt den Nutzern, den Fehler schneller zu beheben, ohne dass sie vorher das Formular absenden.
\n<\/em><\/p>\n![\"google-error-message\"](\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/11\/google-error-message.png\")
<\/p>\n
Unten sehen Sie ein paar Beispiele f\u00fcr Inline-pr\u00fcfung:<\/p>\n
\n- Inkompatible Werte<\/strong><\/li>\n<\/ul>\n
![\"incompatible-values-error\"](\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/11\/incompatible-values-error-1.png\")
<\/p>\n
Beispiel von Pr\u00fcfung von Fehlern vor Absenden. Bildquelle: Material Design<\/em><\/p>\n\n- Zeichen- oder Wortz\u00e4hler<\/strong><\/li>\n<\/ul>\n
![\"limitations-error-mobile\"](\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/11\/limitations-error-mobile.png\")
<\/p>\n
Beispiel eines Inputfeldes mit Zeichenz\u00e4hler und Fehlertext. Bildquelle: Material Design<\/em><\/p>\nRichtige Farbe (Intuitives Design)<\/strong><\/h2>\nFarbe ist eines der besten Werkzeuge bei der Erstellung von Eingabepr\u00fcfungen.<\/p>\n
Da Farbe unterbewusst wahrgenommen wird, ist das Verwenden von Rot f\u00fcr Fehlermeldungen und Gelb f\u00fcr Warnungen ein unglaublich leistungsf\u00e4higes Werkzeug.<\/p>\n
Fehlertext sollte leserlich sein und in einem deutlichen Kontrast zur Hintergrundfarbe stehen.<\/p>\n
![\"color-error-message\"](\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/11\/color-error-message-1.png\")
<\/p>\n
Sorgen Sie daf\u00fcr, dass Nutzer die Nachricht erkennen. Bildquelle: Material Design<\/em><\/p>\nEindeutige Meldung (Was ist passiert?)<\/strong><\/h2>\nStellen Sie sicher, dass Ihre Meldungen so klingen, als w\u00fcrden Sie tats\u00e4chlich mit einer Person kommunizieren.<\/p>\n
Um dies zu erreichen sollten Sie dieselbe Sprache sprechen wie Ihre Nutzer, technische Fachbegriffe vermeiden und das Vokabular der Nutzer verwenden.<\/p>\n
Ihre Fehlermeldung sollte eindeutig beschreiben:<\/p>\n
\n- Was falsch lief und warum?<\/li>\n
- Was der n\u00e4chste Schritt des Nutzers ist, um das Problem zu l\u00f6sen?<\/li>\n<\/ul>\n
![\"messages-error-mobile\"](\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/11\/messages-error-mobile-1.png\")
<\/p>\n
<\/p>\n
Eine typische Fehlermeldung k\u00f6nnte ausdr\u00fccken, dass \u201edie Information ung\u00fcltig ist\u201c, ohne dem Nutzer zu sagen warum (Ist es ein Tippfehler? Ist die Anwendung besch\u00e4ftigt?). Stellen Sie sicher, dass Ihre Meldung eindeutig ist. Bildquelle: Material Design<\/em><\/p>\nFehler in der Anwendung<\/strong><\/h2>\nAnwendungsfehler treten oft auch unabh\u00e4ngig von Inputs der Nutzer auf. Dies ist ein Beispiel daf\u00fcr, wenn der Nutzer etwas Anderes als das von ihm Erw\u00fcnschte erh\u00e4lt. Wenn Sie ihm eine Fehlermeldung zeigen, erkl\u00e4ren Sie dem Nutzer, warum er nichts sehen kann, und wie er dies beheben kann.<\/p>\n
Synchronisationsfehler\/ Fehler beim Laden<\/strong><\/h2>\nFalls die Synchronisation oder die Verbindung unterbrochen sind oder der Inhalt nicht geladen werden konnte, sollte der Nutzer davon erfahren.<\/p>\n
Sagen Sie es ihm im Voraus!<\/p>\n
Im Beispiel unten sagt der Fehlerbildschirm nur \u201eEin Fehler ist aufgetreten\u201c und gibt keinerlei hilfreiche Information.<\/p>\n
![\"spotify-error-state\"](\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/11\/spotify-error-state-1.png\")
<\/p>\n
Sackgasse leerer Zustand. Bildquelle: Spotify<\/em><\/p>\nStellen Sie sich die Fehlermeldung wie eine Unterhaltung mit dem Nutzer vor. Helfen Sie Nutzern, indem Sie ihnen die n\u00f6tigen Informationen geben, und ermutigen Sie sie, das Problem zu l\u00f6sen.<\/p>\n
![\"mobile-screen-error-message\"](\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/11\/mobile-screen-error-message-1.png\")
<\/p>\n
Sie f\u00fchlen sich verloren und ohne Verbindung, als ob Sie auf einer verlassenen Insel w\u00e4hren? Folgen Sie dem Rat, bleiben Sie ruhig, machen Sie ein Feuer, und laden Sie die Seite regelm\u00e4\u00dfig neu. Bildquelle: Azendoo
\n<\/em><\/p>\nFalls angebracht, zeigen Sie einen Link (oder Button), um dem Nutzer zu helfen, seine Aufgabe zu erf\u00fcllen. Aber Sie sollten nur Optionen anbieten, die Sie tats\u00e4chlich unterst\u00fctzen k\u00f6nnen. Geben Sie zum Beispiel nicht die Option \u201eVersuchen Sie es nochmal\u201c in F\u00e4llen, in denen die Operation aller Voraussicht nach scheitern wird.<\/p>\n
Zeigen Sie niemals die unverarbeitete Fehlermeldung <\/strong><\/h2>\nMeldungen wie diese sind kryptisch und frustrierend.<\/p>\n
![\"photos-error-message-ios\"](\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/11\/photos-error-message-ios.png\")
<\/p>\n
Diese Fehlermeldung wurde von einem Entwickler f\u00fcr einen Entwickler geschrieben.<\/em><\/p>\nGehen Sie nicht davon aus, dass Menschen \u00fcber den Kontext einer Nachricht Bescheid wissen. Dr\u00fccken Sie in einfachen Worten aus, was nicht stimmt.<\/p>\n
Wie w\u00fcrden Sie den Nutzern den Fehler besser erkl\u00e4ren?<\/p>\n
Inkompatible Zustandsfehler<\/strong><\/h2>\nInkompatible Zustandsfehler treten auf, wenn Nutzer versuchen, widerspr\u00fcchliche Operationen auszuf\u00fchren. Zum Beispiel k\u00f6nnten sie versuchen, einen Anruf zu machen w\u00e4hrend das Ger\u00e4t im Flugzeugmodus ist. Oder ein Youtube-Video abzuspielen, ohne mit dem Internet verbunden zu sein.<\/p>\n
Sie sollten Ihren Nutzern helfen, solche Situationen zu vermeiden, indem Sie ihnen klar mitteilen, was sie ausw\u00e4hlen k\u00f6nnen.<\/p>\n
Oder einfacher: Lassen Sie die Nutzer nichts anfangen, was sie nicht beenden k\u00f6nnen.<\/p>\n
![\"material-design-error-message\"](\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/11\/material-design-error-message.png\")
<\/p>\n
Kl\u00e4ren Sie den Grund und Ursprung des Fehlers auf. Bildquelle: Material Design<\/em><\/p>\nFazit<\/strong><\/h2>\nDie beste Fehlermeldung ist die, die niemals auftaucht.<\/p>\n
Es ist immer am besten, Fehler erst gar nicht passieren zu lassen, indem Sie Nutzer rechtzeitig in die richtige Richtung f\u00fchren.<\/p>\n
Aber wenn Fehler doch auftreten, kann eine gut erarbeitete Fehlerbehandlung den Nutzern nicht nur helfen, die Anwendung so zu verwenden, wie es von Ihnen gedacht war. Es wird auch verhindern, dass sich Ihre Nutzer dumm und unwissend f\u00fchlen.<\/p>\n
\u00dcber den Autor: <\/em><\/strong><\/h3>\nDieser Artikel erschien urspr\u00fcnglich auf babich.bz, geschrieben von Nick Babich. Nick ist ein Softwareentwickler der eine Leidenschaft f\u00fcr User Experiences hat.<\/p>\n","protected":false},"excerpt":{"rendered":"
Fehler passieren. Sie passieren in unseren Anwendungen und in unserem t\u00e4glichen Leben. Manchmal passieren sie, weil wir etwas falsch machen. Manchmal weil ein System versagt. Was auch immer der Grund ist, diese Fehler \u2013 und wie mit ihnen umgegangen wird \u2013 k\u00f6nnen einen gro\u00dfen Einfluss auf Wahrnehmung eines digitalen Produkts haben. Obwohl oft \u00fcbersehen, k\u00f6nnen […]<\/p>\n","protected":false},"author":10,"featured_media":1391,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1374","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-allgemein"],"acf":[],"_links":{"self":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/1374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/comments?post=1374"}],"version-history":[{"count":0,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/posts\/1374\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media\/1391"}],"wp:attachment":[{"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/media?parent=1374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/categories?post=1374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/usersnap.com\/de\/blog\/wp-json\/wp\/v2\/tags?post=1374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"twitter-error-message\"](\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/11\/twitter-error-message.png\")
<\/p>\n